From 9eb9ad26e14567e1e01cc044b77e0538155c9435 Mon Sep 17 00:00:00 2001
From: Dirk Peter <dirk.peter@softwareg.com>
Date: Tue, 27 Aug 2024 14:04:36 +0200
Subject: [PATCH 1/4] #34: adds reminder type config and display

---
 README.md                                     | 26 +++++++++
 .../reminder-drawer.component.html            |  6 ++
 .../reminder-drawer.component.less            |  2 +
 .../reminder-drawer.component.ts              |  5 ++
 .../reminder-modal.component.ts               | 38 ++++++++++++-
 .../reminder-type.component.html              |  1 +
 .../reminder-type.component.less              |  3 +
 .../reminder-type/reminder-type.component.ts  | 29 ++++++++++
 .../reminder-plugin/reminder-plugin.module.ts |  2 +
 src/app/reminder-plugin/reminder.model.ts     |  8 +++
 .../services/reminder.service.ts              | 56 +++++++++++++++++--
 11 files changed, 169 insertions(+), 7 deletions(-)
 create mode 100644 src/app/reminder-plugin/components/reminder-type/reminder-type.component.html
 create mode 100644 src/app/reminder-plugin/components/reminder-type/reminder-type.component.less
 create mode 100644 src/app/reminder-plugin/components/reminder-type/reminder-type.component.ts

diff --git a/README.md b/README.md
index ce4e4bf..c25f326 100644
--- a/README.md
+++ b/README.md
@@ -14,6 +14,32 @@ _TBD_
 
 ---
 
+## Reminder Type Config
+
+| Key      | Value          | Info |
+| -------- | -------------- | ---- |
+| categroy | `c8y.reminder` |      |
+| key      | `types`        |      |
+
+```json
+[
+  {
+    "id": "1",
+    "name": "Type 1"
+  },
+  {
+    "id": "2",
+    "name": "My Preferred Type"
+  },
+  {
+    "id": "a_123",
+    "name": "A123"
+  }
+]
+```
+
+---
+
 ## Useful links
 
 ### 📘 Explore the Knowledge Base
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
index 791e880..ebc7ed8 100644
--- a/src/app/reminder-plugin/components/reminder-drawer/reminder-drawer.component.html
+++ b/src/app/reminder-plugin/components/reminder-drawer/reminder-drawer.component.html
@@ -136,6 +136,12 @@ <h2 translate>Reminder</h2>
     </p>
 
     <footer>
+      <!-- type -->
+      <button *ngIf="reminder.reminderType" type="button" class="btn btn-clean" (click)="setTypeFilter(reminder.reminderType)">
+        <i class="m-r-4" [c8yIcon]="'tag'"></i>
+        <c8y-reminder-type [id]="reminder.reminderType"></c8y-reminder-type>
+      </button>
+      <!-- asset reference -->
       <ng-container *ngIf="reminder.isGroup; else isDevice">
         <a [routerLink]="['/group', reminder.source.id]">
           <i [c8yIcon]="'c8y-group-open'"></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
index 977fa02..910ea3d 100644
--- a/src/app/reminder-plugin/components/reminder-drawer/reminder-drawer.component.less
+++ b/src/app/reminder-plugin/components/reminder-drawer/reminder-drawer.component.less
@@ -157,6 +157,8 @@ aside {
 
   footer {
     margin: 4px 0 0;
+    display: flex;
+    flex-direction: column;
   }
 
   &.text-muted::before {
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
index 7e3eb00..5efc394 100644
--- a/src/app/reminder-plugin/components/reminder-drawer/reminder-drawer.component.ts
+++ b/src/app/reminder-plugin/components/reminder-drawer/reminder-drawer.component.ts
@@ -7,6 +7,7 @@ import {
   ReminderGroup,
   ReminderGroupStatus,
   ReminderStatus,
+  ReminderType,
   REMINDER_DRAWER_OPEN_CLASS,
   REMINDER_MAIN_HEADER_CLASS,
 } from '../../reminder.model';
@@ -103,6 +104,10 @@ export class ReminderDrawerComponent implements OnDestroy {
     }
   }
 
+  setTypeFilter(type: ReminderType['id']): void {
+    console.log('setTypeFilter', type);
+  }
+
   private toggleRightDrawer(open: boolean): void {
     const drawer = document.getElementsByClassName(
       REMINDER_MAIN_HEADER_CLASS
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
index 79e47d1..90d06da 100644
--- a/src/app/reminder-plugin/components/reminder-modal/reminder-modal.component.ts
+++ b/src/app/reminder-plugin/components/reminder-modal/reminder-modal.component.ts
@@ -11,17 +11,26 @@ import { BsModalRef } from 'ngx-bootstrap/modal';
 import {
   Reminder,
   ReminderStatus,
+  ReminderType,
   REMINDER_TEXT_LENGTH,
   REMINDER_TYPE,
 } from '../../reminder.model';
+import { ReminderService } from '../../services';
+
+interface FormlySelectOptions {
+  label: string;
+  value: string;
+  group?: string;
+}
 
 @Component({
   selector: 'c8y-reminder-modal',
   templateUrl: './reminder-modal.component.html',
 })
 export class ReminderModalComponent implements OnInit {
-  isLoading = false;
   asset!: Partial<IManagedObject>;
+  typeOptions!: FormlySelectOptions[];
+  isLoading = false;
   form = new FormGroup({});
 
   reminder: Partial<Reminder> = {
@@ -70,8 +79,11 @@ export class ReminderModalComponent implements OnInit {
     private eventService: EventService,
     private alertService: AlertService,
     private activatedRoute: ActivatedRoute,
-    private translateService: TranslateService
-  ) {}
+    private translateService: TranslateService,
+    private reminderService: ReminderService
+  ) {
+    this.setTypeField();
+  }
 
   ngOnInit(): void {
     const asset = this.getAssetFromRoute(this.activatedRoute.snapshot);
@@ -94,6 +106,7 @@ export class ReminderModalComponent implements OnInit {
     const reminder: IEvent = {
       source: this.reminder.source,
       type: REMINDER_TYPE,
+      reminderType: this.reminder.reminderType || null,
       time: moment(this.reminder.time).seconds(0).toISOString(),
       text: this.reminder.text,
       status: ReminderStatus.active,
@@ -159,4 +172,23 @@ export class ReminderModalComponent implements OnInit {
 
     return undefined;
   }
+
+  private setTypeField(): void {
+    this.typeOptions = this.reminderService.types.map((type: ReminderType) => ({
+      label: type.name,
+      value: type.id,
+    }));
+
+    if (!this.typeOptions.length) return;
+
+    this.fields.push({
+      key: 'reminderType',
+      type: 'select',
+      props: {
+        label: this.translateService.instant('Reminder type'),
+        hidden: this.typeOptions?.length > 0,
+        options: this.typeOptions,
+      },
+    });
+  }
 }
diff --git a/src/app/reminder-plugin/components/reminder-type/reminder-type.component.html b/src/app/reminder-plugin/components/reminder-type/reminder-type.component.html
new file mode 100644
index 0000000..2735628
--- /dev/null
+++ b/src/app/reminder-plugin/components/reminder-type/reminder-type.component.html
@@ -0,0 +1 @@
+{{ type?.name || 'Unknown' }}
diff --git a/src/app/reminder-plugin/components/reminder-type/reminder-type.component.less b/src/app/reminder-plugin/components/reminder-type/reminder-type.component.less
new file mode 100644
index 0000000..48bb062
--- /dev/null
+++ b/src/app/reminder-plugin/components/reminder-type/reminder-type.component.less
@@ -0,0 +1,3 @@
+:host {
+  display: inline-block;
+}
diff --git a/src/app/reminder-plugin/components/reminder-type/reminder-type.component.ts b/src/app/reminder-plugin/components/reminder-type/reminder-type.component.ts
new file mode 100644
index 0000000..c3184a4
--- /dev/null
+++ b/src/app/reminder-plugin/components/reminder-type/reminder-type.component.ts
@@ -0,0 +1,29 @@
+import { Component, Input } from '@angular/core';
+import { Reminder, ReminderType } from '../../reminder.model';
+import { ReminderService } from '../../services';
+
+@Component({
+  selector: 'c8y-reminder-type',
+  templateUrl: './reminder-type.component.html',
+  styleUrl: './reminder-type.component.less',
+})
+export class ReminderTypeComponent {
+  @Input() set reminder(reminder: Reminder) {
+    this.setType(reminder.reminderType);
+  }
+
+  @Input() set id(reminderTypeID: ReminderType['id']) {
+    this.setType(reminderTypeID);
+  }
+
+  type: ReminderType;
+
+  constructor(private reminderService: ReminderService) {}
+
+  private setType(id: ReminderType['id']) {
+    this.type = {
+      id,
+      name: this.reminderService.getReminderTypeName(id),
+    };
+  }
+}
diff --git a/src/app/reminder-plugin/reminder-plugin.module.ts b/src/app/reminder-plugin/reminder-plugin.module.ts
index 200aa75..87d5d8f 100644
--- a/src/app/reminder-plugin/reminder-plugin.module.ts
+++ b/src/app/reminder-plugin/reminder-plugin.module.ts
@@ -18,6 +18,7 @@ import {
   ReminderModalComponent,
   TimeFieldType,
 } from './components';
+import { ReminderTypeComponent } from './components/reminder-type/reminder-type.component';
 import { DomService, ReminderService } from './services';
 
 @NgModule({
@@ -25,6 +26,7 @@ import { DomService, ReminderService } from './services';
     ReminderIndicatorComponent,
     ReminderDrawerComponent,
     ReminderModalComponent,
+    ReminderTypeComponent,
     AssetFieldType,
     TimeFieldType,
   ],
diff --git a/src/app/reminder-plugin/reminder.model.ts b/src/app/reminder-plugin/reminder.model.ts
index 96210b1..cea1558 100644
--- a/src/app/reminder-plugin/reminder.model.ts
+++ b/src/app/reminder-plugin/reminder.model.ts
@@ -6,6 +6,8 @@ export const REMINDER_DRAWER_OPEN_CLASS = 'drawerOpen';
 export const REMINDER_MAIN_HEADER_CLASS = 'app-main-header';
 export const REMINDER_MAX_COUNTER = 10;
 export const REMINDER_TEXT_LENGTH = 100;
+export const REMINDER_TENENAT_OPTION_CATEGORY = 'c8y.reminder';
+export const REMINDER_TENENAT_OPTION_TYPE_KEY = 'types';
 
 export const ReminderGroupStatus = {
   due: 'DUE',
@@ -26,6 +28,7 @@ export interface Reminder extends IEvent {
   isGroup?: object;
   diff?: number;
   isCleared?: object;
+  reminderType?: ReminderType['id'];
 }
 
 export interface ReminderGroup {
@@ -33,3 +36,8 @@ export interface ReminderGroup {
   reminders: Reminder[];
   count: number;
 }
+
+export interface ReminderType {
+  id: string;
+  name: string;
+}
diff --git a/src/app/reminder-plugin/services/reminder.service.ts b/src/app/reminder-plugin/services/reminder.service.ts
index 74676bb..a679498 100644
--- a/src/app/reminder-plugin/services/reminder.service.ts
+++ b/src/app/reminder-plugin/services/reminder.service.ts
@@ -1,7 +1,13 @@
 import { ComponentRef, Injectable } from '@angular/core';
-import { EventService, IEvent, IResult } from '@c8y/client';
+import {
+  EventService,
+  IEvent,
+  IResult,
+  TenantOptionsService,
+} from '@c8y/client';
 import { EventRealtimeService, RealtimeMessage } from '@c8y/ngx-components';
-import { cloneDeep, filter as _filter, has, sortBy } from 'lodash';
+import { TranslateService } from '@ngx-translate/core';
+import { cloneDeep, filter as _filter, has, orderBy, sortBy } from 'lodash';
 import moment from 'moment';
 import { BehaviorSubject, Subscription } from 'rxjs';
 import { filter, map } from 'rxjs/operators';
@@ -11,7 +17,10 @@ import {
   ReminderGroup,
   ReminderGroupStatus,
   ReminderStatus,
+  ReminderType,
   REMINDER_INITIAL_QUERY_SIZE,
+  REMINDER_TENENAT_OPTION_CATEGORY,
+  REMINDER_TENENAT_OPTION_TYPE_KEY,
   REMINDER_TYPE,
 } from '../reminder.model';
 import { DomService } from './dom.service';
@@ -22,12 +31,17 @@ export class ReminderService {
   reminderCounter$ = new BehaviorSubject<number>(0);
   open$?: BehaviorSubject<boolean>;
 
+  get types(): ReminderType[] {
+    return this._types;
+  }
+
   private subscription = new Subscription();
   private drawerRef?: ComponentRef<unknown>;
   private drawer?: ReminderDrawerComponent;
   private updateTimer?: NodeJS.Timeout;
   private _reminderCounter = 0;
   private _reminders: Reminder[] = [];
+  private _types: ReminderType[] = [];
 
   private get reminders(): Reminder[] {
     return this._reminders;
@@ -50,12 +64,15 @@ export class ReminderService {
   constructor(
     private domService: DomService,
     private eventService: EventService,
-    private eventRealtimeService: EventRealtimeService
+    private eventRealtimeService: EventRealtimeService,
+    private tenantOptionService: TenantOptionsService,
+    private translateService: TranslateService
   ) {}
 
   async init(): Promise<void> {
     if (this.drawer) return;
 
+    this._types = await this.fetchReminderTypes();
     void this.fetchActiveReminderCounter();
     this.createDrawer();
     this.reminders = await this.fetchReminders(REMINDER_INITIAL_QUERY_SIZE);
@@ -71,6 +88,14 @@ export class ReminderService {
     this.drawer?.toggle();
   }
 
+  getReminderTypeName(
+    reminderTypeID: ReminderType['id']
+  ): ReminderType['name'] {
+    const type = this.types.find((t) => t.id === reminderTypeID);
+
+    return type ? type.name : 'Unknown';
+  }
+
   groupReminders(reminders: Reminder[]): ReminderGroup[] {
     let dueDate: number;
     const now = new Date().getTime();
@@ -126,7 +151,7 @@ export class ReminderService {
     };
 
     // (un)set `isCleared` fragment to supoprt using retention rules for cleared reminders
-    event.isCleared = (reminder.status === ReminderStatus.cleared) ? {} : null;
+    event.isCleared = reminder.status === ReminderStatus.cleared ? {} : null;
 
     return (await this.eventService.update(event)) as IResult<Reminder>;
   }
@@ -272,6 +297,29 @@ export class ReminderService {
     });
   }
 
+  private async fetchReminderTypes(): Promise<ReminderType[]> {
+    let types: ReminderType[] = [];
+
+    try {
+      const response = await this.tenantOptionService.detail({
+        category: REMINDER_TENENAT_OPTION_CATEGORY,
+        key: REMINDER_TENENAT_OPTION_TYPE_KEY,
+      });
+
+      if (response.data)
+        types = (JSON.parse(response.data.value) as ReminderType[]).map(
+          (type) => ({
+            id: type.id,
+            name: this.translateService.instant(type.name),
+          })
+        );
+    } catch (error) {
+      console.log('No reminder type config found.', error);
+    }
+
+    return orderBy(types, 'name');
+  }
+
   private updateCounter(): void {
     const now = new Date().getTime();
     let count = 0;

From 6ed0988957bff16f3fb940c957404d0bf6871184 Mon Sep 17 00:00:00 2001
From: Dirk Peter <dirk.peter@softwareg.com>
Date: Tue, 27 Aug 2024 15:39:43 +0200
Subject: [PATCH 2/4] #34: adds filtering option to reminder drawer

---
 .../reminder-drawer.component.html            | 19 ++++++++
 .../reminder-drawer.component.less            |  6 ++-
 .../reminder-drawer.component.ts              | 35 ++++++++++++--
 .../reminder-modal.component.ts               |  2 +-
 src/app/reminder-plugin/reminder.model.ts     |  5 ++
 .../services/reminder.service.ts              | 46 +++++++++++++++++--
 6 files changed, 104 insertions(+), 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
index ebc7ed8..400cb9e 100644
--- 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
index 910ea3d..df23455 100644
--- 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
index 5efc394..0c2a588 100644
--- 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
index 90d06da..31eec0c 100644
--- 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
index cea1558..7b6f691 100644
--- 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
index a679498..42f73f8 100644
--- 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;
+  }
 }

From 49556763a9b72bc634036573738e319fa9d1c678 Mon Sep 17 00:00:00 2001
From: Dirk Peter <dirk.peter@softwareg.com>
Date: Tue, 27 Aug 2024 16:24:32 +0200
Subject: [PATCH 3/4] #34: stores and applies reminder filter to local storage

---
 .../reminder-drawer.component.html            |  2 +-
 .../reminder-drawer.component.ts              | 29 +++++++++++++----
 .../reminder-modal.component.ts               |  3 +-
 src/app/reminder-plugin/reminder.model.ts     |  8 +++--
 .../services/reminder.service.ts              | 32 ++++++++++++++++++-
 5 files changed, 62 insertions(+), 12 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
index 400cb9e..1bdf8b5 100644
--- a/src/app/reminder-plugin/components/reminder-drawer/reminder-drawer.component.html
+++ b/src/app/reminder-plugin/components/reminder-drawer/reminder-drawer.component.html
@@ -156,7 +156,7 @@ <h2 translate>Reminder</h2>
 
     <footer>
       <!-- type -->
-      <button *ngIf="reminder.reminderType" type="button" class="btn btn-clean" (click)="setTypeFilter(reminder.reminderType)">
+      <button *ngIf="types.length && reminder.reminderType" type="button" class="btn btn-clean" (click)="setTypeFilter(reminder.reminderType)">
         <i class="m-r-4" [c8yIcon]="'tag'"></i>
         <c8y-reminder-type [id]="reminder.reminderType"></c8y-reminder-type>
       </button>
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
index 0c2a588..bf7c383 100644
--- a/src/app/reminder-plugin/components/reminder-drawer/reminder-drawer.component.ts
+++ b/src/app/reminder-plugin/components/reminder-drawer/reminder-drawer.component.ts
@@ -1,5 +1,6 @@
 import { Component, OnDestroy } from '@angular/core';
 import { AlertService, HeaderService } from '@c8y/ngx-components';
+import { has } from 'lodash';
 import { BsModalService } from 'ngx-bootstrap/modal';
 import { BehaviorSubject, Subscription } from 'rxjs';
 import {
@@ -11,6 +12,7 @@ import {
   ReminderType,
   REMINDER_DRAWER_OPEN_CLASS,
   REMINDER_MAIN_HEADER_CLASS,
+  REMINDER_TYPE_FRAGMENT,
 } from '../../reminder.model';
 import { ReminderService } from '../../services/reminder.service';
 import { ReminderModalComponent } from '../reminder-modal/reminder-modal.component';
@@ -52,7 +54,9 @@ export class ReminderDrawerComponent implements OnDestroy {
     private reminderService: ReminderService,
     private alertService: AlertService,
     private modalService: BsModalService
-  ) {
+    ) {
+    this.initFilter();
+
     // check if the actual drawer was opened
     this.subscriptions.add(
       this.headerService.rightDrawerOpen$.subscribe((open) => {
@@ -71,9 +75,6 @@ export class ReminderDrawerComponent implements OnDestroy {
         this.digestReminders(reminders)
       )
     );
-
-    // get reminder types from service
-    this.types = this.reminderService.types;
   }
 
   ngOnDestroy(): void {
@@ -118,11 +119,12 @@ export class ReminderDrawerComponent implements OnDestroy {
     this.filterReminders();
   }
 
-  filterReminders() {
+  filterReminders(): void {
     this.reminderGroups = this.reminderService.groupReminders(
       this.reminders,
       this.buildFilter()
     );
+    this.reminderService.storeFilterConfig();
   }
 
   private toggleRightDrawer(open: boolean): void {
@@ -156,8 +158,23 @@ export class ReminderDrawerComponent implements OnDestroy {
     const filters: ReminderGroupFilter = {};
 
     // populate filters
-    if (this.typeFilter !== '') filters['reminderType'] = this.typeFilter;
+    if (this.typeFilter !== '')
+      filters[REMINDER_TYPE_FRAGMENT] = this.typeFilter;
 
     return Object.keys(filters).length > 0 ? filters : null;
   }
+
+  private initFilter(): void {
+    this.types = this.reminderService.types;
+
+    if (!this.types.length) {
+      this.reminderService.resetFilterConfig();
+      return;
+    }
+
+    const filters = this.reminderService.filters;
+
+    if (has(filters, REMINDER_TYPE_FRAGMENT))
+      this.typeFilter = filters[REMINDER_TYPE_FRAGMENT];
+  }
 }
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
index 31eec0c..bbbd893 100644
--- a/src/app/reminder-plugin/components/reminder-modal/reminder-modal.component.ts
+++ b/src/app/reminder-plugin/components/reminder-modal/reminder-modal.component.ts
@@ -14,6 +14,7 @@ import {
   ReminderType,
   REMINDER_TEXT_LENGTH,
   REMINDER_TYPE,
+  REMINDER_TYPE_FRAGMENT,
 } from '../../reminder.model';
 import { ReminderService } from '../../services';
 
@@ -182,7 +183,7 @@ export class ReminderModalComponent implements OnInit {
     if (!this.typeOptions.length) return;
 
     this.fields.push({
-      key: 'reminderType',
+      key: REMINDER_TYPE_FRAGMENT,
       type: 'select',
       props: {
         label: this.translateService.instant('Reminder type (optional)'),
diff --git a/src/app/reminder-plugin/reminder.model.ts b/src/app/reminder-plugin/reminder.model.ts
index 7b6f691..98b5846 100644
--- a/src/app/reminder-plugin/reminder.model.ts
+++ b/src/app/reminder-plugin/reminder.model.ts
@@ -1,13 +1,15 @@
-import { IEvent } from '@c8y/client';
+import { IEvent, ITenantOption } from '@c8y/client';
 
 export const REMINDER_TYPE = 'c8y_Reminder';
+export const REMINDER_TYPE_FRAGMENT = 'reminderType';
 export const REMINDER_INITIAL_QUERY_SIZE = 100;
 export const REMINDER_DRAWER_OPEN_CLASS = 'drawerOpen';
 export const REMINDER_MAIN_HEADER_CLASS = 'app-main-header';
 export const REMINDER_MAX_COUNTER = 10;
 export const REMINDER_TEXT_LENGTH = 100;
-export const REMINDER_TENENAT_OPTION_CATEGORY = 'c8y.reminder';
-export const REMINDER_TENENAT_OPTION_TYPE_KEY = 'types';
+export const REMINDER_TENENAT_OPTION_CATEGORY: ITenantOption['category'] = 'c8y.reminder';
+export const REMINDER_TENENAT_OPTION_TYPE_KEY: ITenantOption['key'] = 'types';
+export const REMINDER_LOCAL_STORAGE_FILTER = 'c8y_rpFilter';
 
 export const ReminderGroupStatus = {
   due: 'DUE',
diff --git a/src/app/reminder-plugin/services/reminder.service.ts b/src/app/reminder-plugin/services/reminder.service.ts
index 42f73f8..8ba7b42 100644
--- a/src/app/reminder-plugin/services/reminder.service.ts
+++ b/src/app/reminder-plugin/services/reminder.service.ts
@@ -20,6 +20,7 @@ import {
   ReminderStatus,
   ReminderType,
   REMINDER_INITIAL_QUERY_SIZE,
+  REMINDER_LOCAL_STORAGE_FILTER,
   REMINDER_TENENAT_OPTION_CATEGORY,
   REMINDER_TENENAT_OPTION_TYPE_KEY,
   REMINDER_TYPE,
@@ -36,6 +37,10 @@ export class ReminderService {
     return this._types;
   }
 
+  get filters(): ReminderGroupFilter {
+    return this._filters;
+  }
+
   private subscription = new Subscription();
   private drawerRef?: ComponentRef<unknown>;
   private drawer?: ReminderDrawerComponent;
@@ -43,6 +48,7 @@ export class ReminderService {
   private _reminderCounter = 0;
   private _reminders: Reminder[] = [];
   private _types: ReminderType[] = [];
+  private _filters: ReminderGroupFilter;
 
   private get reminders(): Reminder[] {
     return this._reminders;
@@ -73,6 +79,7 @@ export class ReminderService {
   async init(): Promise<void> {
     if (this.drawer) return;
 
+    this.loadFilterConfig();
     this._types = await this.fetchReminderTypes();
     void this.fetchActiveReminderCounter();
     this.createDrawer();
@@ -99,7 +106,7 @@ export class ReminderService {
 
   groupReminders(
     reminders: Reminder[],
-    filters?: ReminderGroupFilter
+    filters = this._filters
   ): ReminderGroup[] {
     let dueDate: number;
     const now = new Date().getTime();
@@ -140,6 +147,8 @@ export class ReminderService {
     upcoming.reminders = sortBy(upcoming.reminders, ['time']);
     cleared.reminders = sortBy(cleared.reminders, ['lastUpdated']).reverse();
 
+    this._filters = filters;
+
     return this.applyFilters([due, upcoming, cleared], filters);
   }
 
@@ -147,6 +156,19 @@ export class ReminderService {
     this.reminders = [];
   }
 
+  storeFilterConfig(): void {
+    if (!this._filters) this.resetFilterConfig();
+
+    localStorage.setItem(
+      REMINDER_LOCAL_STORAGE_FILTER,
+      JSON.stringify(this._filters)
+    );
+  }
+
+  resetFilterConfig(): void {
+    localStorage.removeItem(REMINDER_LOCAL_STORAGE_FILTER);
+  }
+
   async update(reminder: Reminder): Promise<IResult<Reminder>> {
     const event: Partial<IEvent> = {
       id: reminder.id,
@@ -393,4 +415,12 @@ export class ReminderService {
     if (!check) return;
     return reminder;
   }
+
+  private loadFilterConfig(): void {
+    const stored = JSON.parse(
+      localStorage.getItem(REMINDER_LOCAL_STORAGE_FILTER)
+    );
+
+    if (stored) this._filters = stored;
+  }
 }

From 57a0810e2ffa175952ccee101925c5e2cbd971a9 Mon Sep 17 00:00:00 2001
From: Dirk Peter <dirk.peter@softwareg.com>
Date: Tue, 27 Aug 2024 16:36:11 +0200
Subject: [PATCH 4/4] #34: adds info text to total reminder count

---
 .../reminder-drawer/reminder-drawer.component.html        | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

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
index 1bdf8b5..534b037 100644
--- a/src/app/reminder-plugin/components/reminder-drawer/reminder-drawer.component.html
+++ b/src/app/reminder-plugin/components/reminder-drawer/reminder-drawer.component.html
@@ -48,7 +48,13 @@ <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>
+              <small
+                *ngIf="group.total"
+                title="{{ 'Number of reminders if not filtered' | translate }}"
+                class="text-muted"
+              >
+                / {{ group.total }}
+              </small>
             </span>
             <em>{{ group.status | translate }}</em>
             <i [c8yIcon]="'expand-arrow'" [class.expanded]="groupIsExpanded[i]"></i>