Notifications: Add mark as read button

notifications/notification.service.ts

@@ -20,7 +20,7 @@ export class NotificationService {
   public getAllNotifications(): Observable<Notification[]> {
     return this.httpClient.get<Notification[]>(properties.notificationsAPIURL + 'all', CustomOptions.registryOptions()).pipe(map(notifications => {
       notifications.forEach(notification => {
-        this.formatNotification(notification);
+        NotificationService.formatNotification(notification);
       })
       return notifications;
     }));
@@ -29,7 +29,7 @@ export class NotificationService {
   public getNotifications(service: string): Observable<Notification[]> {
     return this.httpClient.get<Notification[]>(properties.notificationsAPIURL + encodeURIComponent(service), CustomOptions.registryOptions()).pipe(map(notifications => {
       notifications.forEach(notification => {
-        this.formatNotification(notification);
+        NotificationService.formatNotification(notification);
       })
       return notifications;
     }));
@@ -39,11 +39,15 @@ export class NotificationService {
     return this.httpClient.post<Notification>(properties.notificationsAPIURL + 'save', notification, CustomOptions.registryOptions());
   }
   
+  public markAllAsRead(service: string): Observable<NotificationUser> {
+    return this.httpClient.put<NotificationUser>(properties.notificationsAPIURL + "all/" + encodeURIComponent(service), null, CustomOptions.registryOptions());
+  }
+  
   public readNotification(id: string): Observable<NotificationUser> {
     return this.httpClient.put<NotificationUser>(properties.notificationsAPIURL + encodeURIComponent(id), null, CustomOptions.registryOptions());
   }
   
-  private formatNotification(notification: Notification): Notification {
+  private static formatNotification(notification: Notification): Notification {
     if (notification.title) {
       notification.preview = notification.title;
     } else {

notifications/notifications-sidebar/notification-sidebar.component.css

@@ -87,16 +87,21 @@
   overflow: auto;
 }
 
-#notifications .uk-offcanvas-bar a {
-  color: #2D72D6 ;
+#notifications .uk-offcanvas-bar a, #notifications .uk-offcanvas-bar button.uk-button-link {
+  color: var(--secondary-color);
 }
 
-#notifications .uk-offcanvas-bar a:hover {
+#notifications .uk-offcanvas-bar a:hover, #notifications .uk-offcanvas-bar button.uk-button-link:hover {
   color: var(--portal-main-color);
 }
 
+#notifications .uk-offcanvas-bar button.uk-button-link:disabled {
+  color: var(--secondary-color);
+  opacity: 0.5;
+}
+
 #notifications .uk-offcanvas-bar .uk-button-secondary {
-  background-color: #4687e6;
+  background-color: var(--secondary-color);
   color: #fff;
   border: 1px solid transparent;
 }

notifications/notifications-sidebar/notifications-sidebar.component.ts

@@ -6,6 +6,8 @@ import {User} from "../../login/utils/helper.class";
 import {Dates} from "../../utils/string-utils.class";
 import {Option} from "../../sharedComponents/input/input.component";
 
+declare var UIkit;
+
 @Component({
   selector: 'notification-sidebar',
   template: `
@@ -23,6 +25,9 @@ import {Option} from "../../sharedComponents/input/input.component";
         <ng-template [ngIf]="!notification">
           <div class="notification-list uk-position-relative">
             <h5 class="uk-text-bold">Notifications</h5>
+            <div class="uk-flex uk-flex-right@m uk-flex-center uk-padding uk-padding-remove-vertical">
+              <button [disabled]="unreadCount === 0" (click)="readAll()" class="uk-button uk-button-link">Mark As Read ({{unreadCount}})</button>
+            </div>
             <h6 *ngIf="notifications.length == 0" class="uk-position-center uk-margin-remove">No notifications</h6>
             <ul *ngIf="notifications.length > 0" class="uk-list">
               <li *ngFor="let notification of notifications; let i=index" class="clickable" (click)="select(notification)">
@@ -90,6 +95,13 @@ export class NotificationsSidebarComponent implements OnInit, OnDestroy {
   ngOnInit() {
     this.subscriptions.push(this.notificationService.getNotifications(this.service).subscribe(notifications => {
       this.notifications = notifications;
+    }, error => {
+      this.notifications = [];
+      UIkit.notification('An error has occurred. Please try again later', {
+        status: 'danger',
+        timeout: 6000,
+        pos: 'bottom-right'
+      });
     }));
   }
   
@@ -110,9 +122,15 @@ export class NotificationsSidebarComponent implements OnInit, OnDestroy {
   }
   
   select(notification: Notification) {
-    this.notificationService.readNotification(notification._id).subscribe(user => {
+    this.notificationService.readNotification(notification._id).subscribe(() => {
       notification.read = true;
       this.notification = notification;
+    }, error => {
+      UIkit.notification('An error has occurred. Please try again later', {
+        status: 'danger',
+        timeout: 6000,
+        pos: 'bottom-right'
+      });
     });
   }
   
@@ -120,4 +138,18 @@ export class NotificationsSidebarComponent implements OnInit, OnDestroy {
     event.stopPropagation();
     this.notification = null;
   }
+  
+  readAll() {
+    this.notificationService.markAllAsRead(this.service).subscribe(() => {
+      this.notifications.forEach(notification => {
+        notification.read = true;
+      });
+    }, error => {
+      UIkit.notification('An error has occurred. Please try again later', {
+        status: 'danger',
+        timeout: 6000,
+        pos: 'bottom-right'
+      });
+    });
+  }
 }