From 52cccdf20e2bbb249d59960559d10ba29238a576 Mon Sep 17 00:00:00 2001
From: Dirk Peter <dirk.peter@softwareg.com>
Date: Thu, 29 Aug 2024 20:42:36 +0200
Subject: [PATCH] overhauls config and filter handling

---
 .../reminder-drawer.component.html            |  16 ++-
 .../reminder-drawer.component.ts              | 103 ++++++-------
 .../services/reminder.service.ts              | 136 ++++++++++--------
 3 files changed, 131 insertions(+), 124 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 929d6a8..ab3a897 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,8 @@ <h2 translate>Reminder</h2>
   </ul>
 
   <div class="body">
+    <pre>{{ config | json }}</pre>
+
     <!-- filter: reminder type -->
     <div *ngIf="types.length">
       <label for="reminder-type-filter" translate>Filter by Reminder Type</label>
@@ -24,8 +26,8 @@ <h2 translate>Reminder</h2>
           id="reminder-type-filter"
           name="reminder-type"
           class="form-control"
-          (change)="filterReminders()"
-          [(ngModel)]="typeFilter"
+          [(ngModel)]="reminderTypeFilter"
+          (change)="setFilter()"
         >
           <option value="">{{ 'Not filtered' | translate }}</option>
           <option *ngFor="let type of types" [ngValue]="type.id">{{ type.name }}</option>
@@ -87,8 +89,8 @@ <h2 translate>Reminder</h2>
         <input
           type="checkbox"
           name="toast-notifications-enabled"
-          [ngModel]="config.toast"
-          (change)="setConfig('toast', $event.currentTarget.checked)"
+          [(ngModel)]="toastNotificationsEnabled"
+          (change)="setConfig('toast')"
         />
         <span></span>
         {{ 'Toast Notifications' | translate }}
@@ -100,8 +102,8 @@ <h2 translate>Reminder</h2>
         <input
           type="checkbox"
           name="browser-notifications-enabled"
-          [ngModel]="config.browser"
-          (change)="setConfig('browser', $event.currentTarget.checked)"
+          [(ngModel)]="browserNotificationsEnabled"
+          (change)="setConfig('browser')"
         />
         <span></span>
         {{ 'Browser Notifications' | translate }}
@@ -182,7 +184,7 @@ <h2 translate>Reminder</h2>
 
     <footer>
       <!-- type -->
-      <button *ngIf="types.length && 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)="setFilter(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 c191bd5..a0445a6 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,20 +1,17 @@
 import { Component, OnDestroy } from '@angular/core';
 import { AlertService, HeaderService } from '@c8y/ngx-components';
-import { has, isEqual } from 'lodash';
 import { BsModalService } from 'ngx-bootstrap/modal';
-import { BehaviorSubject, filter, Subscription } from 'rxjs';
+import { BehaviorSubject, Subscription } from 'rxjs';
 import {
   Reminder,
   ReminderConfig,
   ReminderGroup,
-  ReminderGroupFilter,
   ReminderGroupStatus,
   ReminderStatus,
   ReminderType,
   REMINDER_DRAWER_OPEN_CLASS,
   REMINDER_LOCAL_STORAGE_DEFAULT_CONFIG,
-  REMINDER_MAIN_HEADER_CLASS,
-  REMINDER_TYPE_FRAGMENT,
+  REMINDER_MAIN_HEADER_CLASS
 } from '../../reminder.model';
 import { ReminderService } from '../../services/reminder.service';
 import { ReminderModalComponent } from '../reminder-modal/reminder-modal.component';
@@ -26,17 +23,21 @@ import { ReminderModalComponent } from '../reminder-modal/reminder-modal.compone
 })
 export class ReminderDrawerComponent implements OnDestroy {
   open$ = new BehaviorSubject<boolean>(this.open);
-  config: ReminderConfig;
   reminders: Reminder[] = [];
   reminderGroups: ReminderGroup[] = [];
   lastUpdate?: Date;
   types: ReminderType[] = [];
 
   // for template
+  reminderTypeFilter: string =
+    REMINDER_LOCAL_STORAGE_DEFAULT_CONFIG.filter.reminderType;
+  toastNotificationsEnabled: ReminderConfig['toast'] =
+    REMINDER_LOCAL_STORAGE_DEFAULT_CONFIG.toast;
+  browserNotificationsEnabled: ReminderConfig['browser'] =
+    REMINDER_LOCAL_STORAGE_DEFAULT_CONFIG.browser;
   reminderStatus = ReminderStatus;
   reminderGroupStatus = ReminderGroupStatus;
   groupIsExpanded: boolean[] = [true, true, false];
-  typeFilter = '';
 
   get open(): boolean {
     return this._open;
@@ -58,7 +59,7 @@ export class ReminderDrawerComponent implements OnDestroy {
     private modalService: BsModalService,
     private reminderService: ReminderService
   ) {
-    this.initFilter();
+    this.getReminderTypes();
     this.initSubscriptions();
   }
 
@@ -73,25 +74,35 @@ export class ReminderDrawerComponent implements OnDestroy {
     });
   }
 
-  filterReminders(storeFilters = true): void {
-    const filter = this.buildFilter();
-    this.reminderGroups = this.reminderService.groupReminders(
-      this.reminders,
-      filter
-    );
+  setFilter(type?: ReminderType['id']): void {
+    if (type) this.reminderTypeFilter = type;
 
-    if (storeFilters) this.setConfig('filter', filter);
+    this.setConfig('filter');
+    this.filterByType();
   }
 
-  setConfig(configOption: string, status: any) {
-    this.reminderService.setConfig(configOption, status);
+  filterByType(): void {
+    if (!this.types.length) return;
+
+    this.reminderGroups = this.reminderService.groupReminders(this.reminders);
   }
 
-  setTypeFilter(type: ReminderType['id'], storeFilters = true): void {
-    if (!this.types.length) return;
+  setConfig(configOption: string) {
+    let value: any;
+    switch (configOption) {
+      case 'filter':
+        // this.reminderGroups = this.reminderService.groupReminders(this.reminders);
+        value = { reminderType: this.reminderTypeFilter };
+        break;
+      case 'toast':
+        value = this.toastNotificationsEnabled;
+        break;
+      case 'browser':
+        value = this.browserNotificationsEnabled;
+        break;
+    }
 
-    this.typeFilter = type;
-    this.filterReminders(storeFilters);
+    this.reminderService.setConfig(configOption, value);
   }
 
   toggle(open?: boolean): boolean {
@@ -103,38 +114,27 @@ export class ReminderDrawerComponent implements OnDestroy {
     return this.open;
   }
 
-  private buildFilter(): ReminderGroupFilter {
-    const filters: ReminderGroupFilter = {};
-
-    // populate filters
-    if (this.typeFilter !== '')
-      filters[REMINDER_TYPE_FRAGMENT] = this.typeFilter;
-
-    return Object.keys(filters).length > 0 ? filters : null;
-  }
-
   private digestReminders(reminders: Reminder[]): void {
     this.reminders = reminders;
     this.lastUpdate = new Date();
-    this.reminderGroups = this.reminderService.groupReminders(
-      reminders,
-      this.buildFilter()
-    );
+    this.reminderGroups = this.reminderService.groupReminders(reminders);
   }
 
-  private initFilter(): void {
+  private getReminderTypes(): void {
     this.types = this.reminderService.types;
 
-    if (!this.types.length) {
-      this.reminderService.resetFilterConfig();
-      return;
-    }
+    // prevent obsolte configs to remain in local storage
+    if (!this.types.length) this.reminderService.resetFilterConfig();
+  }
 
-    const config = this.reminderService.config$.getValue();
-    const filter = config.filter as ReminderGroupFilter;
+  private handleConfigChange(config: ReminderConfig): void {
+    if (this.reminderTypeFilter !== config.filter.reminderType) {
+      this.reminderTypeFilter = config.filter.reminderType;
+      this.filterByType();
+    }
 
-    if (has(filter, REMINDER_TYPE_FRAGMENT))
-      this.typeFilter = filter[REMINDER_TYPE_FRAGMENT];
+    this.toastNotificationsEnabled = config.toast;
+    this.browserNotificationsEnabled = config.browser;
   }
 
   private initSubscriptions(): void {
@@ -159,18 +159,9 @@ export class ReminderDrawerComponent implements OnDestroy {
 
     // get config updates
     this.subscriptions.add(
-      this.reminderService.config$
-        .pipe(filter((config) => !isEqual(config, this.config)))
-        .subscribe((config) => {
-          // fallback in case of corrupted config
-          this.config = { ...REMINDER_LOCAL_STORAGE_DEFAULT_CONFIG, ...config };
-          this.setTypeFilter(
-            has(this.config.filter, REMINDER_TYPE_FRAGMENT)
-              ? this.config.filter[REMINDER_TYPE_FRAGMENT]
-              : null,
-            false
-          );
-        })
+      this.reminderService.config$.subscribe((config) =>
+        this.handleConfigChange(config)
+      )
     );
   }
 
diff --git a/src/app/reminder-plugin/services/reminder.service.ts b/src/app/reminder-plugin/services/reminder.service.ts
index db869b2..5542d94 100644
--- a/src/app/reminder-plugin/services/reminder.service.ts
+++ b/src/app/reminder-plugin/services/reminder.service.ts
@@ -3,21 +3,19 @@ import {
   EventService,
   IEvent,
   IResult,
-  TenantOptionsService,
+  TenantOptionsService
 } from '@c8y/client';
 import {
   AlertService,
   EventRealtimeService,
-  RealtimeMessage,
+  RealtimeMessage
 } from '@c8y/ngx-components';
 import { TranslateService } from '@ngx-translate/core';
 import {
   cloneDeep,
   filter as _filter,
-  has,
-  isEqual,
-  orderBy,
-  sortBy,
+  has, orderBy,
+  sortBy
 } from 'lodash';
 import moment from 'moment';
 import { BehaviorSubject, Subscription } from 'rxjs';
@@ -37,6 +35,7 @@ import {
   REMINDER_TENENAT_OPTION_CATEGORY,
   REMINDER_TENENAT_OPTION_TYPE_KEY,
   REMINDER_TYPE,
+  REMINDER_TYPE_FRAGMENT
 } from '../reminder.model';
 import { ActiveTabService } from './active-tab.service';
 import { DomService } from './dom.service';
@@ -63,7 +62,6 @@ export class ReminderService {
   private _reminderCounter = 0;
   private _reminders: Reminder[] = [];
   private _types: ReminderType[] = [];
-  private _config: ReminderConfig;
 
   private get reminderCounter(): number {
     return this._reminderCounter;
@@ -126,10 +124,7 @@ export class ReminderService {
     return type ? type.name : 'Unknown';
   }
 
-  groupReminders(
-    reminders: Reminder[],
-    filter?: ReminderGroupFilter
-  ): ReminderGroup[] {
+  groupReminders(reminders: Reminder[]): ReminderGroup[] {
     let dueDate: number;
     const now = new Date().getTime();
     const cleared: ReminderGroup = {
@@ -148,6 +143,8 @@ export class ReminderService {
       reminders: [],
     };
 
+    if (reminders.length === 0) return [due, upcoming, cleared];
+
     // splitting into groups
     reminders.forEach((reminder) => {
       dueDate = new Date(reminder.time).getTime();
@@ -164,52 +161,36 @@ 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();
-
-    if (filter) this.setConfig('filter', filter);
-
-    return this.applyFilter([due, upcoming, cleared], filter);
+    return this.filterReminder(this.sortReminder(due, upcoming, cleared));
   }
 
   resetFilterConfig(): void {
-    delete this._config.filter;
-    this.config$.next(this._config);
+    const config = this.config$.getValue();
+    delete config.filter;
+    this.config$.next(config);
   }
 
   setConfig(key: string, value: any): void {
-    if (isEqual(this._config[key], value)) return;
-
-    this._config[key] = value;
-    this.localStorageService.set(REMINDER_LOCAL_STORAGE_CONFIG, this._config);
-    this.config$.next(this._config);
+    const config = this.config$.getValue();
+    config[key] = value;
+    this.localStorageService.set(REMINDER_LOCAL_STORAGE_CONFIG, config);
+    this.config$.next(config);
   }
 
   toggleDrawer() {
     this.drawer?.toggle();
   }
 
-  private applyFilter(
-    groups: ReminderGroup[],
-    filters?: ReminderGroupFilter
-  ): ReminderGroup[] {
-    if (!filters) return groups;
-
-    const keys = Object.keys(filters);
-    if (!keys.length) return groups;
+  async update(reminder: Reminder): Promise<IResult<Reminder>> {
+    const event: Partial<IEvent> = {
+      id: reminder.id,
+      status: reminder.status,
+    };
 
-    groups.map((group) => {
-      group.reminders = group.reminders.filter((reminder) =>
-        this.applyReminderFilter(reminder, filters)
-      );
-      group.total = group.count;
-      group.count = group.reminders.length;
-      return group;
-    });
+    // (un)set `isCleared` fragment to supoprt using retention rules for cleared reminders
+    event.isCleared = reminder.status === ReminderStatus.cleared ? {} : null;
 
-    return groups;
+    return (await this.eventService.update(event)) as IResult<Reminder>;
   }
 
   private applyReminderFilter(
@@ -228,6 +209,16 @@ export class ReminderService {
     return reminder;
   }
 
+  private buildTypeFilter(): ReminderGroupFilter {
+    const filters: ReminderGroupFilter = {};
+    const config = this.config$.getValue();
+
+    // populate filters
+    filters[REMINDER_TYPE_FRAGMENT] = config.filter[REMINDER_TYPE_FRAGMENT];
+
+    return Object.keys(filters).length > 0 ? filters : null;
+  }
+
   private createDrawer() {
     this.drawerRef = this.domService.appendComponentToBody(
       ReminderDrawerComponent
@@ -391,12 +382,35 @@ export class ReminderService {
     return this.digestReminders(reminders);
   }
 
+  private filterReminder(groups: ReminderGroup[]): ReminderGroup[] {
+    // store filter setting to local storage
+    const filter = this.buildTypeFilter();
+    this.setConfig('filter', filter);
+
+    if (filter[REMINDER_TYPE_FRAGMENT] === '') return groups;
+
+    const keys = Object.keys(filter);
+    if (!keys.length) return groups;
+
+    groups.map((group) => {
+      group.reminders = group.reminders.filter((reminder) =>
+        this.applyReminderFilter(reminder, filter)
+      );
+      group.total = group.count;
+      group.count = group.reminders.length;
+      return group;
+    });
+
+    return groups;
+  }
+
   private loadConfig(): void {
-    this._config = this.localStorageService.getOrDefault<ReminderConfig>(
-      REMINDER_LOCAL_STORAGE_CONFIG,
-      REMINDER_LOCAL_STORAGE_DEFAULT_CONFIG
+    this.config$.next(
+      this.localStorageService.getOrDefault<ReminderConfig>(
+        REMINDER_LOCAL_STORAGE_CONFIG,
+        REMINDER_LOCAL_STORAGE_DEFAULT_CONFIG
+      )
     );
-    this.config$.next(this._config);
   }
 
   private async requestNotificationPermission(): Promise<boolean> {
@@ -412,8 +426,10 @@ export class ReminderService {
 
   private sendNotification(reminder: Reminder): void {
     if (!this.activeTabService.isActive()) return;
-    if (this._config.browser) this.sendBrowserNotification(reminder);
-    if (this._config.toast) this.sendToast(reminder);
+
+    const config = this.config$.getValue();
+    if (config.browser) this.sendBrowserNotification(reminder);
+    if (config.toast) this.sendToast(reminder);
   }
 
   private sendBrowserNotification(reminder: Reminder): void {
@@ -486,9 +502,7 @@ export class ReminderService {
             ) as ReminderConfig;
         })
       )
-      .subscribe((config) => {
-        this.config$.next(config);
-      });
+      .subscribe((config) => this.config$.next(config));
   }
 
   private setupReminderSubscription(): void {
@@ -508,16 +522,16 @@ export class ReminderService {
     );
   }
 
-  async update(reminder: Reminder): Promise<IResult<Reminder>> {
-    const event: Partial<IEvent> = {
-      id: reminder.id,
-      status: reminder.status,
-    };
-
-    // (un)set `isCleared` fragment to supoprt using retention rules for cleared reminders
-    event.isCleared = reminder.status === ReminderStatus.cleared ? {} : null;
+  private sortReminder(
+    due: ReminderGroup,
+    upcoming: ReminderGroup,
+    cleared: ReminderGroup
+  ): ReminderGroup[] {
+    due.reminders = sortBy(due.reminders, ['time']).reverse();
+    upcoming.reminders = sortBy(upcoming.reminders, ['time']);
+    cleared.reminders = sortBy(cleared.reminders, ['lastUpdated']).reverse();
 
-    return (await this.eventService.update(event)) as IResult<Reminder>;
+    return [due, upcoming, cleared];
   }
 
   private updateCounter(): void {