import {ChangeDetectorRef, Component, Input, OnDestroy, OnInit, ViewChild} from "@angular/core"; import {FormArray, FormBuilder, FormGroup, Validators} from "@angular/forms"; import {User} from "../../login/utils/helper.class"; import {UserManagementService} from "../../services/user-management.service"; import {of, Subscription} from "rxjs"; import {NotificationService} from "../notification.service"; import {Notification} from "../notifications"; import {InputComponent, Option} from "../../sharedComponents/input/input.component"; import {properties} from "../../../../environments/environment"; declare var UIkit; @Component({ selector: '[notify-form]', template: `
{{label}}
Send to:
Add a recipient {{groups.slice(0, 2).join(', ')}} + {{groups.length - 2}} more
` }) export class NotifyFormComponent implements OnInit, OnDestroy { @Input() public label: string = 'Notify Managers'; public form: FormGroup; @Input() public availableGroups: Option[] = null; @Input() service: string; public user: User; public focused: boolean = false; public groups: string[] = []; @ViewChild('recipients', { static: false }) recipients: InputComponent; private notification: Notification; private subscriptions: any[] = []; public sending: boolean = false; constructor(private fb: FormBuilder, private cdr: ChangeDetectorRef, private userManagementService: UserManagementService, private notificationService: NotificationService) { } ngOnInit() { this.reset(); this.subscriptions.push(this.userManagementService.getUserInfo().subscribe(user => { this.user = user; })); } ngOnDestroy() { this.subscriptions.forEach(subscription => { if (subscription instanceof Subscription) { subscription.unsubscribe(); } }) } reset(message: string = null) { if (!this.availableGroups) { this.form = this.fb.group({ notify: this.fb.control(true), message: this.fb.control(message) }); this.subscriptions.push(this.form.get('notify').valueChanges.subscribe(value => { if (value) { this.form.get('message').markAsUntouched(); } })); } else { this.form = this.fb.group({ groups: this.fb.array([]), message: this.fb.control(message) }); this.groups = []; this.subscriptions.push(this.form.get('groups').valueChanges.subscribe(value => { this.groups = []; value.forEach(group => { this.groups.push(this.availableGroups.find(available => available.value === group).label); }); this.cdr.detectChanges(); })); } } sendNotification(notification: Notification = null) { if (this.message) { if(notification === null) { notification = new Notification('CUSTOM', [this.service], null, null); notification.groups = this.groupsAsFromArray.value; this.sending = true; } this.notification = notification; this.notification.message = this.form.value.message; // TODO remove this.notification.name = this.user.firstname; this.notification.surname = this.user.lastname; this.subscriptions.push(this.notificationService.sendNotification(this.notification).subscribe(notification => { this.sending = false; UIkit.notification('A notification has been sent successfully', { status: 'success', timeout: 6000, pos: 'bottom-right' }); this.reset(); }, error => { this.sending = false; UIkit.notification('An error has occurred. Please try again later', { status: 'danger', timeout: 6000, pos: 'bottom-right' }); this.reset(); })); } } get groupsAsFromArray(): FormArray { return this.form.get('groups')?(this.form.get('groups')):null; } get message(): string { if ((this.form.get('notify') && !this.form.get('notify').value) || (this.groupsAsFromArray && this.groupsAsFromArray.length === 0)) { return null; } return this.form.get('message').value; } onFocus(event: boolean) { this.focused = event; } focus(event) { this.focused = true; event.stopPropagation(); this.cdr.detectChanges(); setTimeout(() => { this.recipients.searchInput.nativeElement.focus(); }, 0); } }