#34: stores and applies reminder filter to local storage

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>

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];
+  }
 }

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)'),

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',

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,13 +37,18 @@ export class ReminderService {
     return this._types;
   }
 
+  get filters(): ReminderGroupFilter {
+    return this._filters;
+  }
+
   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 _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,13 +147,28 @@ 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);
   }
 
   clear(): void {
     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;
+  }
 }