From ccea2bff0527fefe69be6014db1c0cf9c0c852cd Mon Sep 17 00:00:00 2001
From: Edi Cziszter <eduard.cziszter@student.upt.ro>
Date: Wed, 27 Oct 2021 13:30:51 +0300
Subject: [PATCH 1/4] added view all (UI improvements needed)

---
 .../notifications/notifications.component.html    |  6 +++++-
 .../notifications/notifications.component.scss    |  7 ++++++-
 .../notifications/notifications.component.ts      | 15 ++++++++++++++-
 3 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/apps/red-ui/src/app/components/notifications/notifications.component.html b/apps/red-ui/src/app/components/notifications/notifications.component.html
index 3b2f42e76..8c739086f 100644
--- a/apps/red-ui/src/app/components/notifications/notifications.component.html
+++ b/apps/red-ui/src/app/components/notifications/notifications.component.html
@@ -11,7 +11,11 @@
             ></iqser-empty-state>
 
             <div *ngFor="let group of groups">
-                <div class="all-caps-label">{{ group.date }}</div>
+                <div class="all-caps-label flex-align-items-center">
+                    <div>{{ group.date }}</div>
+                    <div [hidden]="(hasUnreadNotifications$ | async) === false" (click)="markAllAsRead($event)">View all</div>
+                </div>
+
                 <div
                     (click)="markRead(notification, $event)"
                     *ngFor="let notification of group.notifications | sortBy: 'desc':'creationDate'"
diff --git a/apps/red-ui/src/app/components/notifications/notifications.component.scss b/apps/red-ui/src/app/components/notifications/notifications.component.scss
index 7d292b8b6..ee9d945fe 100644
--- a/apps/red-ui/src/app/components/notifications/notifications.component.scss
+++ b/apps/red-ui/src/app/components/notifications/notifications.component.scss
@@ -15,7 +15,12 @@
         max-height: calc(100vh - 200px);
 
         .all-caps-label {
-            margin: 16px 0 6px 8px;
+            justify-content: space-between;
+            margin: 16px 8px 6px;
+
+            .view-all {
+                cursor: pointer;
+            }
         }
 
         .mat-menu-item.notification {
diff --git a/apps/red-ui/src/app/components/notifications/notifications.component.ts b/apps/red-ui/src/app/components/notifications/notifications.component.ts
index 11a22c6e9..1a8cfd154 100644
--- a/apps/red-ui/src/app/components/notifications/notifications.component.ts
+++ b/apps/red-ui/src/app/components/notifications/notifications.component.ts
@@ -6,7 +6,7 @@ import { UserService } from '@services/user.service';
 import { DossiersService } from '@services/entity-services/dossiers.service';
 import { NotificationsService } from '@services/notifications.service';
 import { Notification } from '@red/domain';
-import { distinctUntilChanged, map } from 'rxjs/operators';
+import { distinctUntilChanged, map, tap } from 'rxjs/operators';
 import { BehaviorSubject, Observable } from 'rxjs';
 
 interface NotificationsGroup {
@@ -46,12 +46,25 @@ export class NotificationsComponent implements OnInit {
         await this._loadData();
     }
 
+    async markAllAsRead($event): Promise<void> {
+        $event.stopPropagation();
+        const notifications = await this._notificationsService.getNotifications(false).toPromise();
+        await this._readNotifications(notifications);
+        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 _readNotifications(notifications: Notification[]): Promise<void> {
+        for (const notification of notifications) {
+            await this._notificationsService.toggleNotificationRead([notification.id], true).toPromise();
+        }
+    }
+
     private async _loadData(): Promise<void> {
         const notifications = await this._notificationsService.getNotifications(false).toPromise();
         this._notifications$.next(notifications);

From 9fcedf72724c0f89c442ed51388eb1e3b9a318ed Mon Sep 17 00:00:00 2001
From: Edi Cziszter <eduard.cziszter@student.upt.ro>
Date: Wed, 27 Oct 2021 14:55:36 +0300
Subject: [PATCH 2/4] refactored view all functionality + hover change color

---
 .../notifications/notifications.component.html    |  4 +++-
 .../notifications/notifications.component.scss    |  3 +++
 .../notifications/notifications.component.ts      | 15 +++++++--------
 3 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/apps/red-ui/src/app/components/notifications/notifications.component.html b/apps/red-ui/src/app/components/notifications/notifications.component.html
index 8c739086f..2726ea1c5 100644
--- a/apps/red-ui/src/app/components/notifications/notifications.component.html
+++ b/apps/red-ui/src/app/components/notifications/notifications.component.html
@@ -13,7 +13,9 @@
             <div *ngFor="let group of groups">
                 <div class="all-caps-label flex-align-items-center">
                     <div>{{ group.date }}</div>
-                    <div [hidden]="(hasUnreadNotifications$ | async) === false" (click)="markAllAsRead($event)">View all</div>
+                    <div class="view-all" [hidden]="(hasUnreadNotifications$ | async) === false" (click)="markAllAsRead($event)">
+                        View all
+                    </div>
                 </div>
 
                 <div
diff --git a/apps/red-ui/src/app/components/notifications/notifications.component.scss b/apps/red-ui/src/app/components/notifications/notifications.component.scss
index ee9d945fe..ae5488b69 100644
--- a/apps/red-ui/src/app/components/notifications/notifications.component.scss
+++ b/apps/red-ui/src/app/components/notifications/notifications.component.scss
@@ -20,6 +20,9 @@
 
             .view-all {
                 cursor: pointer;
+                &:hover {
+                    color: var(--iqser-primary);
+                }
             }
         }
 
diff --git a/apps/red-ui/src/app/components/notifications/notifications.component.ts b/apps/red-ui/src/app/components/notifications/notifications.component.ts
index 1a8cfd154..fb91a2e35 100644
--- a/apps/red-ui/src/app/components/notifications/notifications.component.ts
+++ b/apps/red-ui/src/app/components/notifications/notifications.component.ts
@@ -48,8 +48,13 @@ export class NotificationsComponent implements OnInit {
 
     async markAllAsRead($event): Promise<void> {
         $event.stopPropagation();
-        const notifications = await this._notificationsService.getNotifications(false).toPromise();
-        await this._readNotifications(notifications);
+        const notifications = this._notifications$.getValue();
+        await this._notificationsService
+            .toggleNotificationRead(
+                notifications.map(n => n.id),
+                true,
+            )
+            .toPromise();
         await this._loadData();
     }
 
@@ -59,12 +64,6 @@ export class NotificationsComponent implements OnInit {
         await this._loadData();
     }
 
-    private async _readNotifications(notifications: Notification[]): Promise<void> {
-        for (const notification of notifications) {
-            await this._notificationsService.toggleNotificationRead([notification.id], true).toPromise();
-        }
-    }
-
     private async _loadData(): Promise<void> {
         const notifications = await this._notificationsService.getNotifications(false).toPromise();
         this._notifications$.next(notifications);

From a9159eda22836ff6559556870da8472b5626722c Mon Sep 17 00:00:00 2001
From: Edi Cziszter <eduard.cziszter@student.upt.ro>
Date: Wed, 27 Oct 2021 17:51:40 +0300
Subject: [PATCH 3/4] markRead and markAllRead in one method

---
 .../notifications.component.html              | 10 ++++------
 .../notifications/notifications.component.ts  | 20 +++++--------------
 2 files changed, 9 insertions(+), 21 deletions(-)

diff --git a/apps/red-ui/src/app/components/notifications/notifications.component.html b/apps/red-ui/src/app/components/notifications/notifications.component.html
index 2726ea1c5..6547b1e45 100644
--- a/apps/red-ui/src/app/components/notifications/notifications.component.html
+++ b/apps/red-ui/src/app/components/notifications/notifications.component.html
@@ -10,16 +10,14 @@
                 [verticalPadding]="0"
             ></iqser-empty-state>
 
-            <div *ngFor="let group of groups">
+            <div *ngFor="let group of groups; let first = first">
                 <div class="all-caps-label flex-align-items-center">
                     <div>{{ group.date }}</div>
-                    <div class="view-all" [hidden]="(hasUnreadNotifications$ | async) === false" (click)="markAllAsRead($event)">
-                        View all
-                    </div>
+                    <div *ngIf="(hasUnreadNotifications$ | async) && first" class="view-all" (click)="markRead($event)">View all</div>
                 </div>
 
                 <div
-                    (click)="markRead(notification, $event)"
+                    (click)="markRead($event, notification)"
                     *ngFor="let notification of group.notifications | sortBy: 'desc':'creationDate'"
                     [class.unread]="!notification.readDate"
                     class="notification"
@@ -31,7 +29,7 @@
                         <div class="small-label mt-2">{{ notification.time }}</div>
                     </div>
                     <div
-                        (click)="markRead(notification, $event, !notification.readDate)"
+                        (click)="markRead($event, notification, !notification.readDate)"
                         class="dot"
                         matTooltip="{{ 'notifications.mark-as' | translate: { type: notification.readDate ? 'unread' : 'read' } }}"
                         matTooltipPosition="before"
diff --git a/apps/red-ui/src/app/components/notifications/notifications.component.ts b/apps/red-ui/src/app/components/notifications/notifications.component.ts
index fb91a2e35..ddaaf4938 100644
--- a/apps/red-ui/src/app/components/notifications/notifications.component.ts
+++ b/apps/red-ui/src/app/components/notifications/notifications.component.ts
@@ -6,7 +6,7 @@ import { UserService } from '@services/user.service';
 import { DossiersService } from '@services/entity-services/dossiers.service';
 import { NotificationsService } from '@services/notifications.service';
 import { Notification } from '@red/domain';
-import { distinctUntilChanged, map, tap } from 'rxjs/operators';
+import { distinctUntilChanged, map, shareReplay } from 'rxjs/operators';
 import { BehaviorSubject, Observable } from 'rxjs';
 
 interface NotificationsGroup {
@@ -39,6 +39,7 @@ export class NotificationsComponent implements OnInit {
         this.hasUnreadNotifications$ = this.notifications$.pipe(
             map(notifications => notifications.filter(n => !n.readDate).length > 0),
             distinctUntilChanged(),
+            shareReplay(1),
         );
     }
 
@@ -46,21 +47,10 @@ export class NotificationsComponent implements OnInit {
         await this._loadData();
     }
 
-    async markAllAsRead($event): Promise<void> {
+    async markRead($event, notification?: Notification, isRead = true): Promise<void> {
         $event.stopPropagation();
-        const notifications = this._notifications$.getValue();
-        await this._notificationsService
-            .toggleNotificationRead(
-                notifications.map(n => n.id),
-                true,
-            )
-            .toPromise();
-        await this._loadData();
-    }
-
-    async markRead(notification: Notification, $event, isRead = true): Promise<void> {
-        $event.stopPropagation();
-        await this._notificationsService.toggleNotificationRead([notification.id], isRead).toPromise();
+        const body = notification ? [notification.id] : this._notifications$.getValue().map(n => n.id);
+        await this._notificationsService.toggleNotificationRead(body, isRead).toPromise();
         await this._loadData();
     }
 

From 3b64e75ae2b64c61131a8cba91b85bfa48aae99d Mon Sep 17 00:00:00 2001
From: Edi Cziszter <eduard.cziszter@student.upt.ro>
Date: Thu, 28 Oct 2021 12:28:17 +0300
Subject: [PATCH 4/4] markRead method now has all notifications by default

---
 .../components/notifications/notifications.component.html   | 4 ++--
 .../app/components/notifications/notifications.component.ts | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/red-ui/src/app/components/notifications/notifications.component.html b/apps/red-ui/src/app/components/notifications/notifications.component.html
index 6547b1e45..a7ef00a67 100644
--- a/apps/red-ui/src/app/components/notifications/notifications.component.html
+++ b/apps/red-ui/src/app/components/notifications/notifications.component.html
@@ -17,7 +17,7 @@
                 </div>
 
                 <div
-                    (click)="markRead($event, notification)"
+                    (click)="markRead($event, [notification.id])"
                     *ngFor="let notification of group.notifications | sortBy: 'desc':'creationDate'"
                     [class.unread]="!notification.readDate"
                     class="notification"
@@ -29,7 +29,7 @@
                         <div class="small-label mt-2">{{ notification.time }}</div>
                     </div>
                     <div
-                        (click)="markRead($event, notification, !notification.readDate)"
+                        (click)="markRead($event, [notification.id], !notification.readDate)"
                         class="dot"
                         matTooltip="{{ 'notifications.mark-as' | translate: { type: notification.readDate ? 'unread' : 'read' } }}"
                         matTooltipPosition="before"
diff --git a/apps/red-ui/src/app/components/notifications/notifications.component.ts b/apps/red-ui/src/app/components/notifications/notifications.component.ts
index ddaaf4938..01a4289f4 100644
--- a/apps/red-ui/src/app/components/notifications/notifications.component.ts
+++ b/apps/red-ui/src/app/components/notifications/notifications.component.ts
@@ -8,6 +8,7 @@ import { NotificationsService } from '@services/notifications.service';
 import { Notification } from '@red/domain';
 import { distinctUntilChanged, map, shareReplay } from 'rxjs/operators';
 import { BehaviorSubject, Observable } from 'rxjs';
+import { List } from '@iqser/common-ui';
 
 interface NotificationsGroup {
     date: string;
@@ -47,10 +48,9 @@ export class NotificationsComponent implements OnInit {
         await this._loadData();
     }
 
-    async markRead($event, notification?: Notification, isRead = true): Promise<void> {
+    async markRead($event, notifications: List<string> = this._notifications$.getValue().map(n => n.id), isRead = true): Promise<void> {
         $event.stopPropagation();
-        const body = notification ? [notification.id] : this._notifications$.getValue().map(n => n.id);
-        await this._notificationsService.toggleNotificationRead(body, isRead).toPromise();
+        await this._notificationsService.toggleNotificationRead(notifications, isRead).toPromise();
         await this._loadData();
     }