openaire-library/notifications/notify-form/notify-form.component.ts

182 lines
7.0 KiB
TypeScript
Raw Normal View History

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: `
<form *ngIf="user && form" [formGroup]="form">
<ng-template [ngIf]="form.get('notify')">
<mat-checkbox formControlName="notify" class="uk-text-small">{{label}}</mat-checkbox>
<div [class.uk-hidden]="!form.get('notify').value" class="uk-grid uk-grid-small uk-margin-top" uk-grid>
<div style="margin-left: -5px;">
<notification-user [name]="user.firstname" [surname]="user.lastname"></notification-user>
</div>
<div dashboard-input [formInput]="form.get('message')"
rows="3" placeholder="Send a notification"
type="textarea" class="uk-width-expand"></div>
</div>
</ng-template>
<ng-template [ngIf]="form.get('groups') && availableGroups">
<div class="uk-grid uk-grid-small" uk-grid>
<span style="opacity: 0.5;" class="uk-text-bold uk-margin-small-top">Send to: </span>
<div [class.uk-hidden]="focused" class="uk-width-expand uk-margin-small" (click)="focus($event)">
<span *ngIf="groups.length === 0" class="placeholder">Add a recipient</span>
<span *ngIf="groups.length > 0" [attr.uk-tooltip]="(groups.length > 2)?groups.join(', '):null">
{{groups.slice(0, 2).join(', ')}}
<span *ngIf="groups.length > 2" style="opacity: 0.5; margin-left: 4px">+ {{groups.length - 2}} more</span>
</span>
</div>
<div #recipients dashboard-input type="chips" [options]="availableGroups" [class.uk-hidden]="!focused"
panelClass="uk-text-small" [showOptionsOnEmpty]="false"
inputClass="input-borderless" class="uk-width-expand" (focusEmitter)="onFocus($event)" [panelWidth]="400"
[smallChip]="true" [gridSmall]="true" [formInput]="form.get('groups')">
</div>
</div>
<div class="uk-grid uk-grid-small uk-margin-top" uk-grid>
<div>
<notification-user [name]="user.firstname" [surname]="user.lastname"></notification-user>
</div>
<div dashboard-input [formInput]="form.get('message')"
[rows]="4" placeholder="Send a notification"
type="textarea" class="uk-width-expand">
<div options class="uk-margin-top uk-width-1-1 uk-flex uk-flex-right">
<button *ngIf="!sending && message" (click)="sendNotification()"
class="uk-button uk-button-small uk-button-secondary">Send</button>
<button *ngIf="sending || !message" (click)="sendNotification()"
class="uk-button uk-button-small uk-button-secondary" disabled>Send</button>
</div>
</div>
</div>
</ng-template>
</form>
`
})
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(properties.environment !== 'production'),
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 <b>sent</b> 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')?(<FormArray>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);
}
}