RED-2465: Unread notifications dot

apps/red-ui/src/app/components/notifications/notification.ts

@@ -1,20 +1,17 @@
 import { INotification } from '@redaction/red-ui-http';
 import { IListable } from '@iqser/common-ui';
-import { BehaviorSubject, Observable } from 'rxjs';
-import { shareReplay } from 'rxjs/operators';
 
 export class Notification implements INotification, IListable {
     readonly creationDate?: string;
     readonly issuerId?: string;
     readonly notificationDetails?: string;
     readonly notificationType?: string;
-    readonly readDate$: Observable<string>;
+    readonly readDate?: string;
     readonly seenDate?: string;
     readonly softDeleted?: string;
     readonly target?: any;
     readonly userId?: string;
     readonly id: string;
-    private readonly _readDate$: BehaviorSubject<string | null>;
 
     constructor(notification: INotification, readonly message: string, readonly time: string) {
         this.creationDate = notification.creationDate;
@@ -22,23 +19,14 @@ export class Notification implements INotification, IListable {
         this.notificationDetails = notification.notificationDetails;
         this.notificationType = notification.notificationType;
         this.seenDate = notification.seenDate;
+        this.readDate = notification.readDate;
         this.softDeleted = notification.softDeleted;
         this.target = notification.target;
         this.userId = notification.userId;
         this.id = notification.id;
-        this._readDate$ = new BehaviorSubject<string | null>(notification.readDate);
-        this.readDate$ = this._readDate$.asObservable().pipe(shareReplay(1));
     }
 
     get searchKey(): string {
         return this.id;
     }
-
-    get readDate(): string {
-        return this._readDate$.value;
-    }
-
-    setReadDate(value: string | undefined): void {
-        this._readDate$.next(value);
-    }
 }

apps/red-ui/src/app/components/notifications/notifications.component.html

@@ -15,7 +15,7 @@
                 <div
                     (click)="markRead(notification, $event)"
                     *ngFor="let notification of group.notifications | sortBy: 'desc':'creationDate'"
-                    [class.unread]="(notification.readDate$ | async) === null"
+                    [class.unread]="!notification.readDate"
                     class="notification"
                     mat-menu-item
                 >

apps/red-ui/src/app/components/notifications/notifications.component.ts

@@ -1,5 +1,4 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
-import * as moment from 'moment';
 import { TranslateService } from '@ngx-translate/core';
 import { DatePipe } from '@shared/pipes/date.pipe';
 import { AppStateService } from '@state/app-state.service';
@@ -7,7 +6,13 @@ import { UserService } from '@services/user.service';
 import { DossiersService } from '@services/entity-services/dossiers.service';
 import { NotificationsService } from '@services/notifications.service';
 import { Notification } from '@components/notifications/notification';
-import { distinctUntilChanged, map, shareReplay } from 'rxjs/operators';
+import { distinctUntilChanged, map } from 'rxjs/operators';
+import { BehaviorSubject, Observable } from 'rxjs';
+
+interface NotificationsGroup {
+    date: string;
+    notifications: Notification[];
+}
 
 @Component({
     selector: 'redaction-notifications',
@@ -15,13 +20,11 @@ import { distinctUntilChanged, map, shareReplay } from 'rxjs/operators';
     styleUrls: ['./notifications.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class NotificationsComponent {
+export class NotificationsComponent implements OnInit {
-    notifications$ = this._notificationsService.getNotifications(false).pipe(shareReplay(1));
+    notifications$: Observable<Notification[]>;
-    hasUnreadNotifications$ = this.notifications$.pipe(
+    hasUnreadNotifications$: Observable<boolean>;
-        map(notifications => notifications.filter(n => !n.readDate).length > 0),
+    groupedNotifications$: Observable<NotificationsGroup[]>;
-        distinctUntilChanged(),
+    private _notifications$ = new BehaviorSubject([]);
-    );
-    groupedNotifications$ = this.notifications$.pipe(map(notifications => this._groupNotifications(notifications)));
 
     constructor(
         private readonly _translateService: TranslateService,
@@ -30,19 +33,31 @@ export class NotificationsComponent {
         private readonly _appStateService: AppStateService,
         private readonly _dossiersService: DossiersService,
         private readonly _datePipe: DatePipe,
-    ) {}
+    ) {
-
+        this.notifications$ = this._notifications$.asObservable();
-    async markRead(notification: Notification, $event, isRead = true) {
+        this.groupedNotifications$ = this.notifications$.pipe(map(notifications => this._groupNotifications(notifications)));
-        $event.stopPropagation();
+        this.hasUnreadNotifications$ = this.notifications$.pipe(
-        await this._notificationsService.toggleNotificationRead([notification.id], isRead).toPromise();
+            map(notifications => notifications.filter(n => !n.readDate).length > 0),
-        if (isRead) {
+            distinctUntilChanged(),
-            notification.setReadDate(moment().format('YYYY-MM-DDTHH:mm:ss Z'));
+        );
-        } else {
-            notification.setReadDate(null);
-        }
     }
 
-    private _groupNotifications(notifications: Notification[]): { date: string; notifications: Notification[] }[] {
+    async ngOnInit(): Promise<void> {
+        await this._loadData();
+    }
+
+    async markRead(notification: Notification, $event, isRead = true): Promise<void> {
+        $event.stopPropagation();
+        await this._notificationsService.toggleNotificationRead([notification.id], isRead).toPromise();
+        await this._loadData();
+    }
+
+    private async _loadData(): Promise<void> {
+        const notifications = await this._notificationsService.getNotifications(false).toPromise();
+        this._notifications$.next(notifications);
+    }
+
+    private _groupNotifications(notifications: Notification[]): NotificationsGroup[] {
         const res = {};
 
         for (const notification of notifications) {