#34: adds filtering option to reminder drawer

Cumulocity-IoT · Aug 27, 2024 · 6ed0988 · 6ed0988
1 parent 9eb9ad2
commit 6ed0988
Show file tree

Hide file tree

Showing 6 changed files with 104 additions and 9 deletions.
diff --git a/src/app/reminder-plugin/components/reminder-drawer/reminder-drawer.component.html b/src/app/reminder-plugin/components/reminder-drawer/reminder-drawer.component.html
@@ -16,6 +16,24 @@ <h2 translate>Reminder</h2>
   </ul>
 
   <div class="body">
+    <!-- filter: reminder type -->
+    <div *ngIf="types.length">
+      <label for="reminder-type-filter" translate>Filter by Reminder Type</label>
+      <div class="c8y-select-wrapper">
+        <select
+          id="reminder-type-filter"
+          name="reminder-type"
+          class="form-control"
+          (change)="filterReminders()"
+          [(ngModel)]="typeFilter"
+        >
+          <option value="">{{ 'Not filtered' | translate }}</option>
+          <option *ngFor="let type of types" [ngValue]="type.id">{{ type.name }}</option>
+        </select>
+      </div>
+    </div>
+
+    <!-- list of reminders -->
     <ul class="reminder-group-list">
       <li *ngFor="let group of reminderGroups; let i = index" class="reminder-group-item">
         <header>
@@ -30,6 +48,7 @@ <h2 translate>Reminder</h2>
               [class.text-danger]="group.status === reminderGroupStatus.due && group.count > 0"
               >
               {{ group.count || 0 }}
+              <small *ngIf="group.total" class="text-muted">/ {{ group.total }}</small>
             </span>
             <em>{{ group.status | translate }}</em>
             <i [c8yIcon]="'expand-arrow'" [class.expanded]="groupIsExpanded[i]"></i>

diff --git a/src/app/reminder-plugin/components/reminder-drawer/reminder-drawer.component.less b/src/app/reminder-plugin/components/reminder-drawer/reminder-drawer.component.less
@@ -40,10 +40,14 @@ aside {
     display: flex;
     flex-direction: column;
 
+    > div,
     > small {
       margin: 16px 0;
-      display: block;
       padding: 0 16px;
+    }
+
+    > small {
+      display: block;
       text-align: center;
     }
   }

diff --git a/src/app/reminder-plugin/components/reminder-drawer/reminder-drawer.component.ts b/src/app/reminder-plugin/components/reminder-drawer/reminder-drawer.component.ts
@@ -5,6 +5,7 @@ import { BehaviorSubject, Subscription } from 'rxjs';
 import {
   Reminder,
   ReminderGroup,
+  ReminderGroupFilter,
   ReminderGroupStatus,
   ReminderStatus,
   ReminderType,
@@ -24,11 +25,13 @@ export class ReminderDrawerComponent implements OnDestroy {
   reminders: Reminder[] = [];
   reminderGroups: ReminderGroup[] = [];
   lastUpdate?: Date;
+  types: ReminderType[] = [];
 
   // for template
   reminderStatus = ReminderStatus;
   reminderGroupStatus = ReminderGroupStatus;
   groupIsExpanded: boolean[] = [true, true, false];
+  typeFilter = '';
 
   get open(): boolean {
     return this._open;
@@ -62,11 +65,15 @@ export class ReminderDrawerComponent implements OnDestroy {
       })
     );
 
+    // get live updates on reminders from service
     this.subscriptions.add(
       this.reminderService.reminders$.subscribe((reminders) =>
         this.digestReminders(reminders)
       )
     );
+
+    // get reminder types from service
+    this.types = this.reminderService.types;
   }
 
   ngOnDestroy(): void {
@@ -105,7 +112,17 @@ export class ReminderDrawerComponent implements OnDestroy {
   }
 
   setTypeFilter(type: ReminderType['id']): void {
-    console.log('setTypeFilter', type);
+    if (!this.types.length) return;
+
+    this.typeFilter = type;
+    this.filterReminders();
+  }
+
+  filterReminders() {
+    this.reminderGroups = this.reminderService.groupReminders(
+      this.reminders,
+      this.buildFilter()
+    );
   }
 
   private toggleRightDrawer(open: boolean): void {
@@ -127,10 +144,20 @@ export class ReminderDrawerComponent implements OnDestroy {
   }
 
   private digestReminders(reminders: Reminder[]): void {
-    // TODO allow filtering in UI?
-    // - filter by type, group / device?
     this.reminders = reminders;
-    this.reminderGroups = this.reminderService.groupReminders(reminders);
     this.lastUpdate = new Date();
+    this.reminderGroups = this.reminderService.groupReminders(
+      reminders,
+      this.buildFilter()
+    );
+  }
+
+  private buildFilter(): ReminderGroupFilter {
+    const filters: ReminderGroupFilter = {};
+
+    // populate filters
+    if (this.typeFilter !== '') filters['reminderType'] = this.typeFilter;
+
+    return Object.keys(filters).length > 0 ? filters : null;
   }
 }
diff --git a/src/app/reminder-plugin/components/reminder-modal/reminder-modal.component.ts b/src/app/reminder-plugin/components/reminder-modal/reminder-modal.component.ts
@@ -185,7 +185,7 @@ export class ReminderModalComponent implements OnInit {
       key: 'reminderType',
       type: 'select',
       props: {
-        label: this.translateService.instant('Reminder type'),
+        label: this.translateService.instant('Reminder type (optional)'),
         hidden: this.typeOptions?.length > 0,
         options: this.typeOptions,
       },

diff --git a/src/app/reminder-plugin/reminder.model.ts b/src/app/reminder-plugin/reminder.model.ts
@@ -35,9 +35,14 @@ export interface ReminderGroup {
   status: ReminderGroupStatus;
   reminders: Reminder[];
   count: number;
+  total?: number;
 }
 
 export interface ReminderType {
   id: string;
   name: string;
 }
+
+export interface ReminderGroupFilter {
+  [key: string]: string;
+}
diff --git a/src/app/reminder-plugin/services/reminder.service.ts b/src/app/reminder-plugin/services/reminder.service.ts
@@ -15,6 +15,7 @@ import { ReminderDrawerComponent } from '../components/reminder-drawer/reminder-
 import {
   Reminder,
   ReminderGroup,
+  ReminderGroupFilter,
   ReminderGroupStatus,
   ReminderStatus,
   ReminderType,
@@ -96,7 +97,10 @@ export class ReminderService {
     return type ? type.name : 'Unknown';
   }
 
-  groupReminders(reminders: Reminder[]): ReminderGroup[] {
+  groupReminders(
+    reminders: Reminder[],
+    filters?: ReminderGroupFilter
+  ): ReminderGroup[] {
     let dueDate: number;
     const now = new Date().getTime();
     const cleared: ReminderGroup = {
@@ -132,12 +136,11 @@ export class ReminderService {
     });
 
     // apply sort order
-
     due.reminders = sortBy(due.reminders, ['time']).reverse();
     upcoming.reminders = sortBy(upcoming.reminders, ['time']);
     cleared.reminders = sortBy(cleared.reminders, ['lastUpdated']).reverse();
 
-    return [due, upcoming, cleared];
+    return this.applyFilters([due, upcoming, cleared], filters);
   }
 
   clear(): void {
@@ -353,4 +356,41 @@ export class ReminderService {
       moment(closestReminder.time).diff(now)
     );
   }
+
+  private applyFilters(
+    groups: ReminderGroup[],
+    filters?: ReminderGroupFilter
+  ): ReminderGroup[] {
+    if (!filters) return groups;
+
+    const keys = Object.keys(filters);
+    if (!keys.length) return groups;
+
+    groups.map((group) => {
+      group.reminders = group.reminders.filter((reminder) =>
+        this.applyReminderFilter(reminder, filters)
+      );
+      group.total = group.count;
+      group.count = group.reminders.length;
+      return group;
+    });
+
+    return groups;
+  }
+
+  private applyReminderFilter(
+    reminder: Reminder,
+    filters: ReminderGroupFilter
+  ): Reminder {
+    const keys = Object.keys(filters);
+    if (!keys.length) return reminder;
+
+    let check = true;
+    keys.forEach((key) => {
+      if (reminder[key] !== filters[key]) check = false;
+    });
+
+    if (!check) return;
+    return reminder;
+  }
 }