From 7dad19f8be957bfb3663ad145867fa0a611ca177 Mon Sep 17 00:00:00 2001
From: Nicoleta Panaghiu <nicoleta.panaghiu.ext@knecon.com>
Date: Wed, 19 Jun 2024 18:28:49 +0300
Subject: [PATCH] RED-9370: fixed notification links not working.

---
 .../notifications/notifications.component.html           | 7 +++----
 .../components/notifications/notifications.component.ts  | 9 +++++++++
 2 files changed, 12 insertions(+), 4 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 5f2b7e66b..0d0652faf 100644
--- a/apps/red-ui/src/app/components/notifications/notifications.component.html
+++ b/apps/red-ui/src/app/components/notifications/notifications.component.html
@@ -32,19 +32,18 @@
                 </div>
 
                 <div
-                    (click)="markRead([notification], true)"
+                    (click)="handleMarkReadEvent($event, [notification], true)"
                     *ngFor="let notification of group.notifications; trackBy: trackBy"
                     [class.unread]="!notification.readDate"
                     [id]="'notifications-mark-as-read-' + notification.id + '-btn'"
                     class="notification"
-                    iqserStopPropagation
                     mat-menu-item
                 >
                     <iqser-initials-avatar [user]="notification.userId"></iqser-initials-avatar>
 
                     <div class="notification-content">
                         <div [innerHTML]="notification.message"></div>
-                        <div class="small-label mt-2">{{ notification.creationDate | date : 'exactDate' }}</div>
+                        <div class="small-label mt-2">{{ notification.creationDate | date: 'exactDate' }}</div>
                     </div>
 
                     <div
@@ -52,7 +51,7 @@
                         [id]="'notifications-mark-' + notification.id"
                         class="dot"
                         iqserStopPropagation
-                        matTooltip="{{ 'notifications.mark-as' | translate : { type: notification.readDate ? 'unread' : 'read' } }}"
+                        matTooltip="{{ 'notifications.mark-as' | translate: { type: notification.readDate ? 'unread' : 'read' } }}"
                         matTooltipPosition="before"
                     ></div>
                 </div>
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 743dcda00..70992bb6f 100644
--- a/apps/red-ui/src/app/components/notifications/notifications.component.ts
+++ b/apps/red-ui/src/app/components/notifications/notifications.component.ts
@@ -58,6 +58,15 @@ export class NotificationsComponent {
         await this._notificationsService.toggleNotificationRead(notificationsIds, isRead);
     }
 
+    async handleMarkReadEvent(event: MouseEvent, notifications: Notification[] = this._notificationsService.all, isRead = true) {
+        if (!(event.target as HTMLBaseElement).href) {
+            event.stopPropagation();
+            event.preventDefault();
+        }
+
+        await this.markRead(notifications, isRead);
+    }
+
     #groupNotifications(notifications: Notification[]): NotificationsGroup[] {
         const todayTranslation = this._translateService.instant('today');
         const groupedMap = notifications.groupBy(n => {