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"; declare var UIkit; @Component({ selector: 'notification-sidebar', template: `
{{unreadCount}}

Notifications

No notifications
  • {{notification.preview}}

    {{getDate(notification.date)}}

{{notification.title}}

{{notification.name + ' ' + notification.surname}}
{{notification.date | date:'medium'}} ({{getDate(notification.date)}})
`, 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; }, 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) { 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' }); }); } back(event) { 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' }); }); } }