openaire-library/notifications/notifications-sidebar/notifications-sidebar.compo...

158 lines
6.4 KiB
TypeScript
Raw Normal View History

import {Component, Input, OnDestroy, OnInit, ViewEncapsulation} from "@angular/core";
import {Notification} from "../notifications";
import {NotificationService} from "../notification.service";
import {Subscription} from "rxjs";
import {User} from "../../login/utils/helper.class";
import {Dates} from "../../utils/string-utils.class";
import {Option} from "../../sharedComponents/input/input.component";
2021-10-05 16:27:16 +02:00
declare var UIkit;
@Component({
selector: 'notification-sidebar',
template: `
<div id="notifications-switcher" uk-toggle="" href="#notifications" class="uk-offcanvas-switcher uk-flex uk-flex-middle uk-flex-center">
<icon name="mail" ratio="1.5" customClass="uk-text-background" flex="true" visuallyHidden="Notifications"></icon>
<span [class.uk-hidden]="unreadCount === 0" class="uk-offcanvas-count uk-flex uk-flex-middle uk-flex-center">
{{unreadCount}}
</span>
</div>
<div id="notifications" class="uk-offcanvas" uk-offcanvas="flip: true; overlay: true;">
<div class="uk-offcanvas-bar uk-padding-remove">
<button class="uk-offcanvas-close uk-close uk-icon" type="button">
<icon name="close" ratio="1.5" visuallyHidden="close"></icon>
</button>
<ng-template [ngIf]="!notification">
<div class="notification-list uk-position-relative">
<h4>Notifications</h4>
2021-10-05 16:27:16 +02:00
<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)">
<div class="uk-grid uk-grid-small" uk-grid>
<notification-user [name]="notification.name" [surname]="notification.surname" [outline]="true"
colorClass="uk-text-secondary"></notification-user>
<div class="uk-width-expand">
<div class="uk-width-1-1 uk-flex uk-flex-middle">
<div class="uk-width-expand multi-line-ellipsis lines-2">
<p class="uk-margin-remove" [class.uk-text-light-grey]="notification.read">
{{notification.preview}}
</p>
</div>
<div class="uk-margin-left uk-flex uk-flex-center uk-text-secondary">
<icon *ngIf="!notification.read" name="circle" ratio="0.6" visuallyHidden="unread"></icon>
</div>
</div>
<span class="uk-text-secondary uk-text-small">{{getDate(notification.date)}}</span>
</div>
</div>
</li>
</ul>
</div>
<div *ngIf="availableGroups.length > 0" [availableGroups]="availableGroups" [entities]="entities" [service]="service" notify-form class="notify"></div>
</ng-template>
<div *ngIf="notification" class="notification">
<div class="uk-flex uk-flex-middle uk-margin-medium-bottom">
<span class="uk-text-secondary clickable" (click)="back($event)">
<icon ratio="1.5" name="west" visuallyHidden="back"></icon>
</span>
<h4 *ngIf="notification.title" class="uk-text-bold uk-margin-left">{{notification.title}}</h4>
</div>
<div class="uk-flex uk-flex-middle uk-margin-medium-bottom">
<notification-user [name]="notification.name" [surname]="notification.surname" colorClass="uk-text-secondary" [outline]="true"></notification-user>
<div class="uk-margin-left">
{{notification.name + ' ' + notification.surname}}<br>
<span style="opacity: 0.8;" class="uk-text-small uk-margin-small-top">
{{notification.date | date:'medium'}} ({{getDate(notification.date)}})
</span>
</div>
</div>
<div [innerHTML]="notification.message | safeHtml">
</div>
</div>
</div>
</div>
`,
styleUrls: ['notification-sidebar.component.less'],
encapsulation: ViewEncapsulation.None
})
export class NotificationsSidebarComponent implements OnInit, OnDestroy {
@Input()
public user: User;
public notifications: Notification[] = [];
@Input()
public availableGroups: Option[] = [];
@Input()
public entities: string[] = [];
@Input()
public service: string;
public notification: Notification;
private subscriptions: any[] = [];
constructor(private notificationService: NotificationService) {
}
ngOnInit() {
this.subscriptions.push(this.notificationService.getNotifications(this.service).subscribe(notifications => {
this.notifications = notifications;
2021-10-05 16:27:16 +02:00
}, error => {
this.notifications = [];
UIkit.notification('An error has occurred. Please try again later', {
status: 'danger',
timeout: 6000,
pos: 'bottom-right'
});
}));
}
ngOnDestroy() {
this.subscriptions.forEach(subscription => {
if (subscription instanceof Subscription) {
subscription.unsubscribe();
}
})
}
get unreadCount(): number {
return this.notifications.filter(notification => !notification.read).length;
}
getDate(date: Date): string {
return Dates.timeSince(date);
}
select(notification: Notification) {
2021-10-05 16:27:16 +02:00
this.notificationService.readNotification(notification._id).subscribe(() => {
notification.read = true;
this.notification = notification;
2021-10-05 16:27:16 +02:00
}, error => {
UIkit.notification('An error has occurred. Please try again later', {
status: 'danger',
timeout: 6000,
pos: 'bottom-right'
});
});
}
back(event) {
event.stopPropagation();
this.notification = null;
}
2021-10-05 16:27:16 +02:00
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'
});
});
}
}