Notifications: Add mark as read button
This commit is contained in:
parent
9b6913c85c
commit
1c3a3d6007
|
@ -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 {
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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'
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue