Skip to content

Commit

Permalink
overhauls config and filter handling
Browse files Browse the repository at this point in the history
  • Loading branch information
Dirk Peter committed Aug 29, 2024
1 parent 6fa7080 commit 52cccdf
Show file tree
Hide file tree
Showing 3 changed files with 131 additions and 124 deletions.
16 changes: 9 additions & 7 deletions src/app/reminder-plugin/components/reminder-drawer/reminder-drawer.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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 }}
Expand All @@ -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 }}
Expand Down Expand Up @@ -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>
Expand Down
103 changes: 47 additions & 56 deletions src/app/reminder-plugin/components/reminder-drawer/reminder-drawer.component.ts
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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;
Expand All @@ -58,7 +59,7 @@ export class ReminderDrawerComponent implements OnDestroy {
private modalService: BsModalService,
private reminderService: ReminderService
) {
this.initFilter();
this.getReminderTypes();
this.initSubscriptions();
}

Expand All @@ -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 {
Expand All @@ -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 {
Expand All @@ -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)
)
);
}

Expand Down
Loading

0 comments on commit 52cccdf

Please sign in to comment.