|
|
|
@ -14,8 +14,14 @@ |
|
|
|
/// limitations under the License.
|
|
|
|
///
|
|
|
|
|
|
|
|
import { NotificationTemplate, NotificationType } from '@shared/models/notification.models'; |
|
|
|
import { Component, Inject, OnDestroy } from '@angular/core'; |
|
|
|
import { |
|
|
|
DeliveryMethodNotificationTemplate, |
|
|
|
NotificationDeliveryMethod, |
|
|
|
NotificationTemplate, |
|
|
|
NotificationTemplateType, |
|
|
|
NotificationTemplateTypeTranslateMap, SlackChanelType |
|
|
|
} from '@shared/models/notification.models'; |
|
|
|
import { Component, Inject, OnDestroy, ViewChild } from '@angular/core'; |
|
|
|
import { DialogComponent } from '@shared/components/dialog.component'; |
|
|
|
import { Store } from '@ngrx/store'; |
|
|
|
import { AppState } from '@core/core.state'; |
|
|
|
@ -24,7 +30,13 @@ import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; |
|
|
|
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; |
|
|
|
import { NotificationService } from '@core/http/notification.service'; |
|
|
|
import { deepTrim, isDefined } from '@core/utils'; |
|
|
|
import { Subject } from 'rxjs'; |
|
|
|
import { Observable, Subject } from 'rxjs'; |
|
|
|
import { map } from 'rxjs/operators'; |
|
|
|
import { StepperOrientation, StepperSelectionEvent } from '@angular/cdk/stepper'; |
|
|
|
import { MatStepper } from '@angular/material/stepper'; |
|
|
|
import { BreakpointObserver } from '@angular/cdk/layout'; |
|
|
|
import { MediaBreakpoints } from '@shared/models/constants'; |
|
|
|
import { NotificationType } from '@core/notification/notification.models'; |
|
|
|
|
|
|
|
export interface TemplateNotificationDialogData { |
|
|
|
template?: NotificationTemplate; |
|
|
|
@ -40,11 +52,25 @@ export interface TemplateNotificationDialogData { |
|
|
|
export class TemplateNotificationDialogComponent |
|
|
|
extends DialogComponent<TemplateNotificationDialogComponent, NotificationTemplate> implements OnDestroy { |
|
|
|
|
|
|
|
@ViewChild('addNotificationTemplate', {static: true}) addNotificationTemplate: MatStepper; |
|
|
|
|
|
|
|
stepperOrientation: Observable<StepperOrientation>; |
|
|
|
|
|
|
|
templateNotificationForm: FormGroup; |
|
|
|
pushTemplateForm: FormGroup; |
|
|
|
emailTemplateForm: FormGroup; |
|
|
|
smsTemplateForm: FormGroup; |
|
|
|
slackTemplateForm: FormGroup; |
|
|
|
dialogTitle = 'notification.edit-notification-template'; |
|
|
|
saveButtonLabel = 'action.save'; |
|
|
|
|
|
|
|
NotificationType = NotificationType; |
|
|
|
notificationTypes = Object.keys(NotificationTemplateType) as NotificationType[]; |
|
|
|
notificationDeliveryMethods = Object.keys(NotificationDeliveryMethod) as NotificationDeliveryMethod[]; |
|
|
|
notificationTemplateTypeTranslateMap = NotificationTemplateTypeTranslateMap; |
|
|
|
|
|
|
|
selectedIndex = 0; |
|
|
|
|
|
|
|
tinyMceOptions: Record<string, any>; |
|
|
|
|
|
|
|
private readonly destroy$ = new Subject<void>(); |
|
|
|
|
|
|
|
@ -52,6 +78,7 @@ export class TemplateNotificationDialogComponent |
|
|
|
protected router: Router, |
|
|
|
protected dialogRef: MatDialogRef<TemplateNotificationDialogComponent, NotificationTemplate>, |
|
|
|
@Inject(MAT_DIALOG_DATA) public data: TemplateNotificationDialogData, |
|
|
|
private breakpointObserver: BreakpointObserver, |
|
|
|
private fb: FormBuilder, |
|
|
|
private notificationService: NotificationService) { |
|
|
|
super(store, router, dialogRef); |
|
|
|
@ -64,13 +91,57 @@ export class TemplateNotificationDialogComponent |
|
|
|
this.dialogTitle = 'notification.copy-notification-template'; |
|
|
|
} |
|
|
|
|
|
|
|
this.tinyMceOptions = { |
|
|
|
base_url: '/assets/tinymce', |
|
|
|
suffix: '.min', |
|
|
|
plugins: ['link table image imagetools code fullscreen'], |
|
|
|
menubar: 'edit insert tools view format table', |
|
|
|
toolbar: 'fontselect fontsizeselect | formatselect | bold italic strikethrough forecolor backcolor ' + |
|
|
|
'| link | table | image | alignleft aligncenter alignright alignjustify ' + |
|
|
|
'| numlist bullist outdent indent | removeformat | code | fullscreen', |
|
|
|
height: 400, |
|
|
|
autofocus: false, |
|
|
|
branding: false |
|
|
|
}; |
|
|
|
|
|
|
|
this.stepperOrientation = this.breakpointObserver.observe(MediaBreakpoints['gt-xs']) |
|
|
|
.pipe(map(({matches}) => matches ? 'horizontal' : 'vertical')); |
|
|
|
|
|
|
|
this.templateNotificationForm = this.fb.group({ |
|
|
|
name: [null, Validators.required], |
|
|
|
type: [NotificationType.GENERIC], |
|
|
|
name: ['', Validators.required], |
|
|
|
notificationType: [NotificationTemplateType.GENERAL], |
|
|
|
configuration: this.fb.group({ |
|
|
|
defaultTextTemplate: [null, Validators.required] |
|
|
|
notificationSubject: ['', Validators.required], |
|
|
|
defaultTextTemplate: ['', Validators.required], |
|
|
|
deliveryMethodsTemplates: this.fb.group({}) |
|
|
|
}) |
|
|
|
}); |
|
|
|
this.notificationDeliveryMethods.forEach(method => { |
|
|
|
(this.templateNotificationForm.get('configuration.deliveryMethodsTemplates') as FormGroup) |
|
|
|
.addControl(method, this.fb.group({method, enabled: method === NotificationDeliveryMethod.PUSH}), {emitEvent: false}); |
|
|
|
}); |
|
|
|
|
|
|
|
this.pushTemplateForm = this.fb.group({ |
|
|
|
subject: [''], |
|
|
|
body: [''], |
|
|
|
icon: [''], |
|
|
|
actionButtonConfig: [''] |
|
|
|
}); |
|
|
|
|
|
|
|
this.emailTemplateForm = this.fb.group({ |
|
|
|
subject: [''], |
|
|
|
body: [''] |
|
|
|
}); |
|
|
|
|
|
|
|
this.smsTemplateForm = this.fb.group({ |
|
|
|
body: [''] |
|
|
|
}); |
|
|
|
|
|
|
|
this.slackTemplateForm = this.fb.group({ |
|
|
|
body: [''], |
|
|
|
conversationId: ['', Validators.required], |
|
|
|
conversationType: [SlackChanelType.DIRECT] |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
ngOnDestroy() { |
|
|
|
@ -92,4 +163,81 @@ export class TemplateNotificationDialogComponent |
|
|
|
(target) => this.dialogRef.close(target) |
|
|
|
); |
|
|
|
} |
|
|
|
|
|
|
|
changeStep($event: StepperSelectionEvent) { |
|
|
|
this.selectedIndex = $event.selectedIndex; |
|
|
|
} |
|
|
|
|
|
|
|
backStep() { |
|
|
|
this.addNotificationTemplate.previous(); |
|
|
|
} |
|
|
|
|
|
|
|
nextStep() { |
|
|
|
if (this.selectedIndex >= this.maxStepperIndex) { |
|
|
|
this.add(); |
|
|
|
} else { |
|
|
|
this.addNotificationTemplate.next(); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
nextStepLabel(): string { |
|
|
|
if (this.selectedIndex === 1 && this.selectedIndex < this.maxStepperIndex && this.pushTemplateForm.pristine) { |
|
|
|
return 'action.skip'; |
|
|
|
} |
|
|
|
if (this.selectedIndex === 2 && this.selectedIndex < this.maxStepperIndex && this.emailTemplateForm.pristine) { |
|
|
|
return 'action.skip'; |
|
|
|
} |
|
|
|
if (this.selectedIndex === 3 && this.selectedIndex < this.maxStepperIndex && this.smsTemplateForm.pristine) { |
|
|
|
return 'action.skip'; |
|
|
|
} |
|
|
|
if (this.selectedIndex >= this.maxStepperIndex) { |
|
|
|
return 'action.add'; |
|
|
|
} |
|
|
|
return 'action.next'; |
|
|
|
} |
|
|
|
|
|
|
|
private get maxStepperIndex(): number { |
|
|
|
return this.addNotificationTemplate?._steps?.length - 1; |
|
|
|
} |
|
|
|
|
|
|
|
private add(): void { |
|
|
|
if (this.allValid()) { |
|
|
|
const formValue: NotificationTemplate = this.templateNotificationForm.value; |
|
|
|
if (formValue.configuration.deliveryMethodsTemplates.PUSH.enabled) { |
|
|
|
Object.assign(formValue.configuration.deliveryMethodsTemplates.PUSH, this.pushTemplateForm.value); |
|
|
|
} else { |
|
|
|
delete formValue.configuration.deliveryMethodsTemplates.PUSH; |
|
|
|
} |
|
|
|
if (formValue.configuration.deliveryMethodsTemplates.EMAIL.enabled) { |
|
|
|
Object.assign(formValue.configuration.deliveryMethodsTemplates.EMAIL, this.emailTemplateForm.value); |
|
|
|
} else { |
|
|
|
delete formValue.configuration.deliveryMethodsTemplates.EMAIL; |
|
|
|
} |
|
|
|
if (formValue.configuration.deliveryMethodsTemplates.SMS.enabled) { |
|
|
|
Object.assign(formValue.configuration.deliveryMethodsTemplates.SMS, this.smsTemplateForm.value); |
|
|
|
} else { |
|
|
|
delete formValue.configuration.deliveryMethodsTemplates.SMS; |
|
|
|
} |
|
|
|
if (formValue.configuration.deliveryMethodsTemplates.SLACK.enabled) { |
|
|
|
Object.assign(formValue.configuration.deliveryMethodsTemplates.SLACK, this.slackTemplateForm.value); |
|
|
|
} else { |
|
|
|
delete formValue.configuration.deliveryMethodsTemplates.SLACK; |
|
|
|
} |
|
|
|
this.notificationService.saveNotificationTemplate(deepTrim(formValue)).subscribe( |
|
|
|
(target) => this.dialogRef.close(target) |
|
|
|
); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
allValid(): boolean { |
|
|
|
return !this.addNotificationTemplate.steps.find((item, index) => { |
|
|
|
if (item.stepControl.invalid) { |
|
|
|
item.interacted = true; |
|
|
|
this.addNotificationTemplate.selectedIndex = index; |
|
|
|
return true; |
|
|
|
} else { |
|
|
|
return false; |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
} |
|
|
|
|
Vladyslav_Prykhodko
4 years ago