diff --git a/notifications/notification.service.ts b/notifications/notification.service.ts index e45e7e80..9811f24f 100644 --- a/notifications/notification.service.ts +++ b/notifications/notification.service.ts @@ -20,7 +20,7 @@ export class NotificationService { public getAllNotifications(): Observable { return this.httpClient.get(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 { return this.httpClient.get(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(properties.notificationsAPIURL + 'save', notification, CustomOptions.registryOptions()); } + public markAllAsRead(service: string): Observable { + return this.httpClient.put(properties.notificationsAPIURL + "all/" + encodeURIComponent(service), null, CustomOptions.registryOptions()); + } + public readNotification(id: string): Observable { return this.httpClient.put(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 { diff --git a/notifications/notifications-sidebar/notification-sidebar.component.css b/notifications/notifications-sidebar/notification-sidebar.component.css index 93643659..cfd33e8c 100644 --- a/notifications/notifications-sidebar/notification-sidebar.component.css +++ b/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; } diff --git a/notifications/notifications-sidebar/notifications-sidebar.component.ts b/notifications/notifications-sidebar/notifications-sidebar.component.ts index 73f85da4..fb3b95b0 100644 --- a/notifications/notifications-sidebar/notifications-sidebar.component.ts +++ b/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";
Notifications
+
+ +
No notifications
  • @@ -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' + }); + }); + } }