1 |
61381
|
k.triantaf
|
import {Component, Input, OnDestroy, OnInit, ViewEncapsulation} from "@angular/core";
|
2 |
|
|
import {Notification} from "../notifications";
|
3 |
|
|
import {NotificationService} from "../notification.service";
|
4 |
|
|
import {Subscription} from "rxjs";
|
5 |
|
|
import {User} from "../../login/utils/helper.class";
|
6 |
|
|
import {Dates} from "../../utils/string-utils.class";
|
7 |
|
|
import {Option} from "../../sharedComponents/input/input.component";
|
8 |
|
|
|
9 |
|
|
@Component({
|
10 |
|
|
selector: 'notification-sidebar',
|
11 |
|
|
template: `
|
12 |
|
|
<div id="notifications-switcher" uk-toggle href="#notifications">
|
13 |
|
|
<icon name="mail"></icon>
|
14 |
|
|
<span [class.uk-hidden]="unreadCount === 0" id="notifications-count">
|
15 |
|
|
{{unreadCount}}
|
16 |
|
|
</span>
|
17 |
|
|
</div>
|
18 |
|
|
<div id="notifications" uk-offcanvas="flip: true; bg-close: false;">
|
19 |
|
|
<div class="uk-offcanvas-bar">
|
20 |
|
|
<button class="uk-offcanvas-close notification-close" type="button">
|
21 |
|
|
<icon name="close"></icon>
|
22 |
|
|
</button>
|
23 |
|
|
<ng-template [ngIf]="!notification">
|
24 |
|
|
<div class="notification-list uk-position-relative">
|
25 |
|
|
<h5 class="uk-text-bold">Notifications</h5>
|
26 |
|
|
<h6 *ngIf="notifications.length == 0" class="uk-position-center uk-margin-remove">No notifications</h6>
|
27 |
|
|
<ul *ngIf="notifications.length > 0" class="uk-list">
|
28 |
|
|
<li *ngFor="let notification of notifications; let i=index" class="clickable" (click)="select(notification)">
|
29 |
|
|
<div class="uk-grid uk-grid-small" uk-grid>
|
30 |
|
|
<notification-user [name]="notification.name" [surname]="notification.surname" [outline]="true"
|
31 |
|
|
colorClass="uk-text-secondary"></notification-user>
|
32 |
|
|
<div class="uk-width-expand">
|
33 |
|
|
<div class="uk-width-1-1 uk-flex uk-flex-middle">
|
34 |
|
|
<div class="uk-width-expand multi-line-ellipsis lines-2">
|
35 |
|
|
<p class="uk-margin-remove">
|
36 |
|
|
{{notification.preview}}
|
37 |
|
|
</p>
|
38 |
|
|
</div>
|
39 |
|
|
<div class="uk-margin-left uk-flex uk-flex-center uk-text-secondary">
|
40 |
|
|
<icon *ngIf="!notification.read" name="bullet" ratio="0.6"></icon>
|
41 |
|
|
</div>
|
42 |
|
|
</div>
|
43 |
|
|
<span class="uk-text-secondary text-small">{{getDate(notification.date)}}</span>
|
44 |
|
|
</div>
|
45 |
|
|
</div>
|
46 |
|
|
</li>
|
47 |
|
|
</ul>
|
48 |
|
|
</div>
|
49 |
|
|
<div *ngIf="availableGroups.length > 0" [availableGroups]="availableGroups" [service]="service" notify-form class="notify"></div>
|
50 |
|
|
</ng-template>
|
51 |
|
|
<div *ngIf="notification" class="notification">
|
52 |
|
|
<div class="uk-flex uk-flex-middle uk-margin-medium-bottom">
|
53 |
|
|
<span class="uk-text-secondary clickable" (click)="back($event)">
|
54 |
|
|
<icon ratio="1.5" name="arrow_left"></icon>
|
55 |
|
|
</span>
|
56 |
|
|
<h5 *ngIf="notification.title" class="uk-text-bold uk-margin-left">{{notification.title}}</h5>
|
57 |
|
|
</div>
|
58 |
|
|
<div class="uk-flex uk-flex-middle uk-margin-medium-bottom">
|
59 |
|
|
<notification-user [name]="notification.name" [surname]="notification.surname" colorClass="uk-text-secondary" [outline]="true"></notification-user>
|
60 |
|
|
<div class="uk-margin-left">
|
61 |
|
|
{{notification.name + ' ' + notification.surname}}<br>
|
62 |
|
|
<span style="opacity: 0.8;" class="text-small uk-margin-small-top">
|
63 |
|
|
{{notification.date | date:'medium'}} ({{getDate(notification.date)}})
|
64 |
|
|
</span>
|
65 |
|
|
</div>
|
66 |
|
|
</div>
|
67 |
|
|
<div [innerHTML]="notification.message | safeHtml">
|
68 |
|
|
</div>
|
69 |
|
|
</div>
|
70 |
|
|
</div>
|
71 |
|
|
</div>
|
72 |
|
|
`,
|
73 |
|
|
styleUrls: ['notification-sidebar.component.css'],
|
74 |
|
|
encapsulation: ViewEncapsulation.None
|
75 |
|
|
})
|
76 |
|
|
export class NotificationsSidebarComponent implements OnInit, OnDestroy {
|
77 |
|
|
@Input()
|
78 |
|
|
public user: User;
|
79 |
|
|
public notifications: Notification[] = [];
|
80 |
|
|
@Input()
|
81 |
|
|
public availableGroups: Option[] = [];
|
82 |
|
|
@Input()
|
83 |
|
|
public service: string;
|
84 |
|
|
public notification: Notification;
|
85 |
|
|
private subscriptions: any[] = [];
|
86 |
|
|
|
87 |
|
|
constructor(private notificationService: NotificationService) {
|
88 |
|
|
}
|
89 |
|
|
|
90 |
|
|
ngOnInit() {
|
91 |
|
|
this.subscriptions.push(this.notificationService.getNotifications(this.service).subscribe(notifications => {
|
92 |
|
|
this.notifications = notifications;
|
93 |
|
|
}));
|
94 |
|
|
}
|
95 |
|
|
|
96 |
|
|
ngOnDestroy() {
|
97 |
|
|
this.subscriptions.forEach(subscription => {
|
98 |
|
|
if (subscription instanceof Subscription) {
|
99 |
|
|
subscription.unsubscribe();
|
100 |
|
|
}
|
101 |
|
|
})
|
102 |
|
|
}
|
103 |
|
|
|
104 |
|
|
get unreadCount(): number {
|
105 |
|
|
return this.notifications.filter(notification => !notification.read).length;
|
106 |
|
|
}
|
107 |
|
|
|
108 |
|
|
getDate(date: Date): string {
|
109 |
|
|
return Dates.timeSince(date);
|
110 |
|
|
}
|
111 |
|
|
|
112 |
|
|
select(notification: Notification) {
|
113 |
|
|
this.notificationService.readNotification(notification._id).subscribe(user => {
|
114 |
|
|
notification.read = true;
|
115 |
|
|
this.notification = notification;
|
116 |
|
|
});
|
117 |
|
|
}
|
118 |
|
|
|
119 |
|
|
back(event) {
|
120 |
|
|
event.stopPropagation();
|
121 |
|
|
this.notification = null;
|
122 |
|
|
}
|
123 |
|
|
}
|