1 |
61381
|
k.triantaf
|
import {ChangeDetectorRef, Component, Input, OnDestroy, OnInit, ViewChild} from "@angular/core";
|
2 |
|
|
import {FormArray, FormBuilder, FormGroup, Validators} from "@angular/forms";
|
3 |
|
|
import {User} from "../../login/utils/helper.class";
|
4 |
|
|
import {UserManagementService} from "../../services/user-management.service";
|
5 |
|
|
import {of, Subscription} from "rxjs";
|
6 |
|
|
import {NotificationService} from "../notification.service";
|
7 |
|
|
import {Notification} from "../notifications";
|
8 |
|
|
import {InputComponent, Option} from "../../sharedComponents/input/input.component";
|
9 |
|
|
import {properties} from "../../../../environments/environment";
|
10 |
|
|
|
11 |
|
|
declare var UIkit;
|
12 |
|
|
|
13 |
|
|
@Component({
|
14 |
|
|
selector: '[notify-form]',
|
15 |
|
|
template: `
|
16 |
|
|
<form *ngIf="user && form" [formGroup]="form">
|
17 |
|
|
<ng-template [ngIf]="form.get('notify')">
|
18 |
|
|
<mat-checkbox formControlName="notify" class="uk-text-small">{{label}}</mat-checkbox>
|
19 |
|
|
<div [class.uk-hidden]="!form.get('notify').value" class="uk-grid uk-grid-small uk-margin-top" uk-grid>
|
20 |
|
|
<div style="margin-left: -5px;">
|
21 |
|
|
<notification-user [name]="user.firstname" [surname]="user.lastname"></notification-user>
|
22 |
|
|
</div>
|
23 |
|
|
<div dashboard-input [formInput]="form.get('message')"
|
24 |
|
|
rows="3" placeholder="Send a notification"
|
25 |
|
|
type="textarea" class="uk-width-expand"></div>
|
26 |
|
|
</div>
|
27 |
|
|
</ng-template>
|
28 |
|
|
<ng-template [ngIf]="form.get('groups') && availableGroups">
|
29 |
|
|
<div class="uk-grid uk-grid-small" uk-grid>
|
30 |
|
|
<span style="opacity: 0.5;" class="uk-text-bold uk-margin-small-top">Send to: </span>
|
31 |
|
|
<div [class.uk-hidden]="focused" class="uk-width-expand uk-margin-small" (click)="focus($event)">
|
32 |
|
|
<span *ngIf="groups.length === 0" class="placeholder">Add a recipient</span>
|
33 |
|
|
<span *ngIf="groups.length > 0" [attr.uk-tooltip]="(groups.length > 2)?groups.join(', '):null">
|
34 |
|
|
{{groups.slice(0, 2).join(', ')}}
|
35 |
|
|
<span *ngIf="groups.length > 2" style="opacity: 0.5; margin-left: 4px">+ {{groups.length - 2}} more</span>
|
36 |
|
|
</span>
|
37 |
|
|
</div>
|
38 |
|
|
<div #recipients dashboard-input type="chips" [options]="availableGroups" [class.uk-hidden]="!focused"
|
39 |
|
|
panelClass="uk-text-small" [showOptionsOnEmpty]="false"
|
40 |
|
|
inputClass="input-borderless" class="uk-width-expand" (focusEmitter)="onFocus($event)" [panelWidth]="400"
|
41 |
|
|
[smallChip]="true" [gridSmall]="true" [formInput]="form.get('groups')">
|
42 |
|
|
</div>
|
43 |
|
|
</div>
|
44 |
|
|
<div class="uk-grid uk-grid-small uk-margin-top" uk-grid>
|
45 |
|
|
<div>
|
46 |
|
|
<notification-user [name]="user.firstname" [surname]="user.lastname"></notification-user>
|
47 |
|
|
</div>
|
48 |
|
|
<div dashboard-input [formInput]="form.get('message')"
|
49 |
|
|
[rows]="4" placeholder="Send a notification"
|
50 |
|
|
type="textarea" class="uk-width-expand">
|
51 |
|
|
<div options class="uk-margin-top uk-width-1-1 uk-flex uk-flex-right">
|
52 |
|
|
<button *ngIf="!sending && message" (click)="sendNotification()"
|
53 |
|
|
class="uk-button uk-button-small uk-button-secondary">Send</button>
|
54 |
|
|
<button *ngIf="sending || !message" (click)="sendNotification()"
|
55 |
|
|
class="uk-button uk-button-small uk-button-secondary" disabled>Send</button>
|
56 |
|
|
</div>
|
57 |
|
|
</div>
|
58 |
|
|
</div>
|
59 |
|
|
</ng-template>
|
60 |
|
|
</form>
|
61 |
|
|
`
|
62 |
|
|
})
|
63 |
|
|
export class NotifyFormComponent implements OnInit, OnDestroy {
|
64 |
|
|
@Input()
|
65 |
|
|
public label: string = 'Notify Managers';
|
66 |
|
|
public form: FormGroup;
|
67 |
|
|
@Input()
|
68 |
|
|
public availableGroups: Option[] = null;
|
69 |
|
|
@Input() service: string;
|
70 |
|
|
public user: User;
|
71 |
|
|
public focused: boolean = false;
|
72 |
|
|
public groups: string[] = [];
|
73 |
|
|
@ViewChild('recipients', { static: false }) recipients: InputComponent;
|
74 |
|
|
private notification: Notification;
|
75 |
|
|
private subscriptions: any[] = [];
|
76 |
|
|
public sending: boolean = false;
|
77 |
|
|
|
78 |
|
|
constructor(private fb: FormBuilder,
|
79 |
|
|
private cdr: ChangeDetectorRef,
|
80 |
|
|
private userManagementService: UserManagementService,
|
81 |
|
|
private notificationService: NotificationService) {
|
82 |
|
|
}
|
83 |
|
|
|
84 |
|
|
ngOnInit() {
|
85 |
|
|
this.reset();
|
86 |
|
|
this.subscriptions.push(this.userManagementService.getUserInfo().subscribe(user => {
|
87 |
|
|
this.user = user;
|
88 |
|
|
}));
|
89 |
|
|
}
|
90 |
|
|
|
91 |
|
|
ngOnDestroy() {
|
92 |
|
|
this.subscriptions.forEach(subscription => {
|
93 |
|
|
if (subscription instanceof Subscription) {
|
94 |
|
|
subscription.unsubscribe();
|
95 |
|
|
}
|
96 |
|
|
})
|
97 |
|
|
}
|
98 |
|
|
|
99 |
|
|
reset(message: string = null) {
|
100 |
|
|
if (!this.availableGroups) {
|
101 |
|
|
this.form = this.fb.group({
|
102 |
|
|
notify: this.fb.control(properties.environment !== 'production'),
|
103 |
|
|
message: this.fb.control(message)
|
104 |
|
|
});
|
105 |
|
|
this.subscriptions.push(this.form.get('notify').valueChanges.subscribe(value => {
|
106 |
|
|
if (value) {
|
107 |
|
|
this.form.get('message').markAsUntouched();
|
108 |
|
|
}
|
109 |
|
|
}));
|
110 |
|
|
} else {
|
111 |
|
|
this.form = this.fb.group({
|
112 |
|
|
groups: this.fb.array([]),
|
113 |
|
|
message: this.fb.control(message)
|
114 |
|
|
});
|
115 |
|
|
this.groups = [];
|
116 |
|
|
this.subscriptions.push(this.form.get('groups').valueChanges.subscribe(value => {
|
117 |
|
|
this.groups = [];
|
118 |
|
|
value.forEach(group => {
|
119 |
|
|
this.groups.push(this.availableGroups.find(available => available.value === group).label);
|
120 |
|
|
});
|
121 |
|
|
this.cdr.detectChanges();
|
122 |
|
|
}));
|
123 |
|
|
}
|
124 |
|
|
}
|
125 |
|
|
|
126 |
|
|
sendNotification(notification: Notification = null) {
|
127 |
|
|
if (this.message) {
|
128 |
|
|
if(notification === null) {
|
129 |
|
|
notification = new Notification('CUSTOM', [this.service], null, null);
|
130 |
|
|
notification.groups = this.groupsAsFromArray.value;
|
131 |
|
|
this.sending = true;
|
132 |
|
|
}
|
133 |
|
|
this.notification = notification;
|
134 |
|
|
this.notification.message = this.form.value.message;
|
135 |
|
|
// TODO remove
|
136 |
|
|
this.notification.name = this.user.firstname;
|
137 |
|
|
this.notification.surname = this.user.lastname;
|
138 |
|
|
this.subscriptions.push(this.notificationService.sendNotification(this.notification).subscribe(notification => {
|
139 |
|
|
this.sending = false;
|
140 |
|
|
UIkit.notification('A notification has been <b>sent</b> successfully', {
|
141 |
|
|
status: 'success',
|
142 |
|
|
timeout: 6000,
|
143 |
|
|
pos: 'bottom-right'
|
144 |
|
|
});
|
145 |
|
|
this.reset();
|
146 |
|
|
}, error => {
|
147 |
|
|
this.sending = false;
|
148 |
|
|
UIkit.notification('An error has occurred. Please try again later', {
|
149 |
|
|
status: 'danger',
|
150 |
|
|
timeout: 6000,
|
151 |
|
|
pos: 'bottom-right'
|
152 |
|
|
});
|
153 |
|
|
this.reset();
|
154 |
|
|
}));
|
155 |
|
|
}
|
156 |
|
|
}
|
157 |
|
|
|
158 |
|
|
get groupsAsFromArray(): FormArray {
|
159 |
|
|
return this.form.get('groups')?(<FormArray>this.form.get('groups')):null;
|
160 |
|
|
}
|
161 |
|
|
|
162 |
|
|
get message(): string {
|
163 |
|
|
if ((this.form.get('notify') && !this.form.get('notify').value) || (this.groupsAsFromArray && this.groupsAsFromArray.length === 0)) {
|
164 |
|
|
return null;
|
165 |
|
|
}
|
166 |
|
|
return this.form.get('message').value;
|
167 |
|
|
}
|
168 |
|
|
|
169 |
|
|
onFocus(event: boolean) {
|
170 |
|
|
this.focused = event;
|
171 |
|
|
}
|
172 |
|
|
|
173 |
|
|
focus(event) {
|
174 |
|
|
this.focused = true;
|
175 |
|
|
event.stopPropagation();
|
176 |
|
|
this.cdr.detectChanges();
|
177 |
|
|
setTimeout(() => {
|
178 |
|
|
this.recipients.searchInput.nativeElement.focus();
|
179 |
|
|
}, 0);
|
180 |
|
|
}
|
181 |
|
|
}
|