124 lines
4.9 KiB
TypeScript
124 lines
4.9 KiB
TypeScript
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";
|
|
|
|
@Component({
|
|
selector: 'notification-sidebar',
|
|
template: `
|
|
<div id="notifications-switcher" uk-toggle href="#notifications">
|
|
<icon name="mail"></icon>
|
|
<span [class.uk-hidden]="unreadCount === 0" id="notifications-count">
|
|
{{unreadCount}}
|
|
</span>
|
|
</div>
|
|
<div id="notifications" uk-offcanvas="flip: true; bg-close: false;">
|
|
<div class="uk-offcanvas-bar">
|
|
<button class="uk-offcanvas-close notification-close" type="button">
|
|
<icon name="close"></icon>
|
|
</button>
|
|
<ng-template [ngIf]="!notification">
|
|
<div class="notification-list uk-position-relative">
|
|
<h5 class="uk-text-bold">Notifications</h5>
|
|
<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">
|
|
{{notification.preview}}
|
|
</p>
|
|
</div>
|
|
<div class="uk-margin-left uk-flex uk-flex-center uk-text-secondary">
|
|
<icon *ngIf="!notification.read" name="bullet" ratio="0.6"></icon>
|
|
</div>
|
|
</div>
|
|
<span class="uk-text-secondary text-small">{{getDate(notification.date)}}</span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div *ngIf="availableGroups.length > 0" [availableGroups]="availableGroups" [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="arrow_left"></icon>
|
|
</span>
|
|
<h5 *ngIf="notification.title" class="uk-text-bold uk-margin-left">{{notification.title}}</h5>
|
|
</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="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.css'],
|
|
encapsulation: ViewEncapsulation.None
|
|
})
|
|
export class NotificationsSidebarComponent implements OnInit, OnDestroy {
|
|
@Input()
|
|
public user: User;
|
|
public notifications: Notification[] = [];
|
|
@Input()
|
|
public availableGroups: Option[] = [];
|
|
@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;
|
|
}));
|
|
}
|
|
|
|
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(user => {
|
|
notification.read = true;
|
|
this.notification = notification;
|
|
});
|
|
}
|
|
|
|
back(event) {
|
|
event.stopPropagation();
|
|
this.notification = null;
|
|
}
|
|
}
|