fix: improved styling in notes manager menu

Aam-Digital · Feb 6, 2023 · e9dfc63 · e9dfc63
1 parent 304ff9c
commit e9dfc63
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 21 deletions.
diff --git a/src/app/child-dev-project/notes/notes-manager/notes-manager.component.html b/src/app/child-dev-project/notes/notes-manager/notes-manager.component.html
@@ -7,22 +7,23 @@
   (elementClick)="showDetails($event)"
   (addNewClick)="addNoteClick()"
 >
-  <div mat-menu-item *ngIf="showEventNotesToggle">
-    <mat-slide-toggle
-      class="event-toggle"
-      ngDefaultControl
-      [(ngModel)]="includeEventNotes"
-      (change)="updateIncludeEvents()"
-      i18n="
+  <button
+    mat-menu-item
+    *ngIf="showEventNotesToggle"
+    (click)="updateIncludeEvents()"
+    angulartics2On="click"
+    angularticsCategory="Note"
+    angularticsAction="include_events_toggle"
+    [angularticsLabel]="includeEventNotes ? 'off' : 'on'"
+    i18n="
         Slider that allows a user to also include events|events are related to a
         child
       "
-      angulartics2On="click"
-      angularticsCategory="Note"
-      angularticsAction="include_events_toggle"
-      [angularticsLabel]="includeEventNotes ? 'off' : 'on'"
-    >
-      Include events
-    </mat-slide-toggle>
-  </div>
+  >
+    <app-fa-dynamic-icon
+      [icon]="includeEventNotes ? 'toggle-on' : 'toggle-off'"
+      class="standard-icon-with-text color-accent"
+    ></app-fa-dynamic-icon>
+    Include events
+  </button>
 </app-entity-list>
diff --git a/src/app/child-dev-project/notes/notes-manager/notes-manager.component.spec.ts b/src/app/child-dev-project/notes/notes-manager/notes-manager.component.spec.ts
@@ -163,19 +163,18 @@ describe("NotesManagerComponent", () => {
   });
 
   it("displays Notes and Event notes only when toggle is set to true", async () => {
+    component.includeEventNotes = false;
     const note = Note.create(new Date("2020-01-01"), "test note");
     note.category = testInteractionTypes[0];
     const eventNote = EventNote.create(new Date("2020-01-01"), "test event");
     eventNote.category = testInteractionTypes[0];
     await entityMapper.save(note);
     await entityMapper.save(eventNote);
 
-    component.includeEventNotes = true;
     await component.updateIncludeEvents();
 
     expect(component.notes).toEqual([note, eventNote]);
 
-    component.includeEventNotes = false;
     await component.updateIncludeEvents();
 
     expect(component.notes).toEqual([note]);

diff --git a/src/app/child-dev-project/notes/notes-manager/notes-manager.component.ts b/src/app/child-dev-project/notes/notes-manager/notes-manager.component.ts
@@ -21,6 +21,8 @@ import { MatSlideToggleModule } from "@angular/material/slide-toggle";
 import { NgIf } from "@angular/common";
 import { FormsModule } from "@angular/forms";
 import { Angulartics2Module } from "angulartics2";
+import { MatMenuModule } from "@angular/material/menu";
+import { FaDynamicIconComponent } from "../../../core/view/fa-dynamic-icon/fa-dynamic-icon.component";
 
 /**
  * additional config specifically for NotesManagerComponent
@@ -43,6 +45,8 @@ export interface NotesManagerConfig {
     NgIf,
     FormsModule,
     Angulartics2Module,
+    MatMenuModule,
+    FaDynamicIconComponent,
   ],
   standalone: true,
 })
@@ -138,6 +142,7 @@ export class NotesManagerComponent implements OnInit {
   }
 
   async updateIncludeEvents() {
+    this.includeEventNotes = !this.includeEventNotes;
     this.isLoading = true;
     this.notes = await this.loadEntities();
   }

diff --git a/src/app/core/entity-components/entity-list/entity-list.component.html b/src/app/core/entity-components/entity-list/entity-list.component.html
@@ -94,7 +94,7 @@ <h2>{{ listName }}</h2>
   <mat-form-field class="full-width filter-field">
     <mat-label
       i18n="Filter placeholder|Allows the user to filter through entities"
-      >Filter
+    >Filter
     </mat-label>
     <input
       class="full-width"
@@ -172,14 +172,14 @@ <h2>{{ listName }}</h2>
     format="csv"
     [exportConfig]="listConfig?.exportConfig"
     [filename]="listName.replace(' ', '')"
+    angulartics2On="click"
+    [angularticsCategory]="entityConstructor?.ENTITY_TYPE"
+    angularticsAction="list_csv_export"
   >
     <fa-icon
       class="color-accent standard-icon-with-text"
       aria-label="download csv"
       icon="download"
-      angulartics2On="click"
-      [angularticsCategory]="entityConstructor?.ENTITY_TYPE"
-      angularticsAction="list_csv_export"
     ></fa-icon>
     <span i18n="Download list contents as CSV"> Download CSV </span>
   </button>

diff --git a/src/app/features/matching-entities/matching-entities/matching-entities.component.spec.ts b/src/app/features/matching-entities/matching-entities/matching-entities.component.spec.ts
@@ -369,6 +369,12 @@ describe("MatchingEntitiesComponent", () => {
   });
 
   it("should display map if location properties are available", async () => {
+    // Clean-up child schema before running test
+    Child.schema.forEach((schema, name) => {
+      if (schema.dataType === "location") {
+        Child.schema.delete(name);
+      }
+    });
     component.leftSide = { entityType: Child };
     component.entity = new Child();