Vladyslav_Prykhodko
4 years ago
9 changed files with 473 additions and 168 deletions
@ -0,0 +1,172 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2022 The Thingsboard Authors
|
||||
|
///
|
||||
|
/// Licensed under the Apache License, Version 2.0 (the "License");
|
||||
|
/// you may not use this file except in compliance with the License.
|
||||
|
/// You may obtain a copy of the License at
|
||||
|
///
|
||||
|
/// http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
///
|
||||
|
/// Unless required by applicable law or agreed to in writing, software
|
||||
|
/// distributed under the License is distributed on an "AS IS" BASIS,
|
||||
|
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
|
/// See the License for the specific language governing permissions and
|
||||
|
/// limitations under the License.
|
||||
|
///
|
||||
|
|
||||
|
import { FormBuilder, FormGroup, ValidationErrors, Validators } from '@angular/forms'; |
||||
|
import { |
||||
|
NotificationDeliveryMethod, |
||||
|
NotificationDeliveryMethodTranslateMap, |
||||
|
NotificationTemplate, |
||||
|
NotificationType |
||||
|
} from '@shared/models/notification.models'; |
||||
|
import { takeUntil } from 'rxjs/operators'; |
||||
|
import { Subject } from 'rxjs'; |
||||
|
import { Directive, OnDestroy } from '@angular/core'; |
||||
|
import { DialogComponent } from '@shared/components/dialog.component'; |
||||
|
import { Store } from '@ngrx/store'; |
||||
|
import { AppState } from '@core/core.state'; |
||||
|
import { Router } from '@angular/router'; |
||||
|
import { MatDialogRef } from '@angular/material/dialog'; |
||||
|
|
||||
|
@Directive() |
||||
|
// tslint:disable-next-line:directive-class-suffix
|
||||
|
export abstract class TemplateConfiguration<T, R = any> extends DialogComponent<T, R> implements OnDestroy{ |
||||
|
|
||||
|
templateNotificationForm: FormGroup; |
||||
|
pushTemplateForm: FormGroup; |
||||
|
emailTemplateForm: FormGroup; |
||||
|
smsTemplateForm: FormGroup; |
||||
|
slackTemplateForm: FormGroup; |
||||
|
|
||||
|
notificationDeliveryMethods = Object.keys(NotificationDeliveryMethod) as NotificationDeliveryMethod[]; |
||||
|
notificationDeliveryMethodTranslateMap = NotificationDeliveryMethodTranslateMap; |
||||
|
|
||||
|
tinyMceOptions: Record<string, any> = { |
||||
|
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 |
||||
|
}; |
||||
|
|
||||
|
protected readonly destroy$ = new Subject<void>(); |
||||
|
|
||||
|
protected deliveryMethodFormsMap: Map<NotificationDeliveryMethod, FormGroup>; |
||||
|
|
||||
|
protected constructor(protected store: Store<AppState>, |
||||
|
protected router: Router, |
||||
|
protected dialogRef: MatDialogRef<T, R>, |
||||
|
protected fb: FormBuilder) { |
||||
|
super(store, router, dialogRef); |
||||
|
|
||||
|
this.templateNotificationForm = this.fb.group({ |
||||
|
name: ['', Validators.required], |
||||
|
notificationType: [NotificationType.GENERAL], |
||||
|
configuration: this.fb.group({ |
||||
|
notificationSubject: ['', Validators.required], |
||||
|
defaultTextTemplate: ['', Validators.required], |
||||
|
deliveryMethodsTemplates: this.fb.group({}, {validators: this.atLeastOne()}) |
||||
|
}) |
||||
|
}); |
||||
|
|
||||
|
this.notificationDeliveryMethods.forEach(method => { |
||||
|
(this.templateNotificationForm.get('configuration.deliveryMethodsTemplates') as FormGroup) |
||||
|
.addControl(method, this.fb.group({enabled: method === NotificationDeliveryMethod.PUSH}), {emitEvent: false}); |
||||
|
}); |
||||
|
|
||||
|
this.pushTemplateForm = this.fb.group({ |
||||
|
subject: [''], |
||||
|
body: [''], |
||||
|
additionalConfig: this.fb.group({ |
||||
|
icon: this.fb.group({ |
||||
|
enabled: [false], |
||||
|
icon: [{value: '', disabled: true}, Validators.required], |
||||
|
color: ['#757575'] |
||||
|
}), |
||||
|
actionButtonConfig: this.fb.group({ |
||||
|
enabled: [false], |
||||
|
text: [{value: '', disabled: true}, Validators.required], |
||||
|
color: ['#305680'], |
||||
|
link: [{value: '', disabled: true}, Validators.required] |
||||
|
}), |
||||
|
}) |
||||
|
}); |
||||
|
|
||||
|
this.pushTemplateForm.get('additionalConfig.icon.enabled').valueChanges.pipe( |
||||
|
takeUntil(this.destroy$) |
||||
|
).subscribe((value) => { |
||||
|
if (value) { |
||||
|
this.pushTemplateForm.get('additionalConfig.icon.icon').enable({emitEvent: false}); |
||||
|
} else { |
||||
|
this.pushTemplateForm.get('additionalConfig.icon.icon').disable({emitEvent: false}); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
this.pushTemplateForm.get('additionalConfig.actionButtonConfig.enabled').valueChanges.pipe( |
||||
|
takeUntil(this.destroy$) |
||||
|
).subscribe((value) => { |
||||
|
if (value) { |
||||
|
this.pushTemplateForm.get('additionalConfig.actionButtonConfig.text').enable({emitEvent: false}); |
||||
|
this.pushTemplateForm.get('additionalConfig.actionButtonConfig.link').enable({emitEvent: false}); |
||||
|
} else { |
||||
|
this.pushTemplateForm.get('additionalConfig.actionButtonConfig.text').disable({emitEvent: false}); |
||||
|
this.pushTemplateForm.get('additionalConfig.actionButtonConfig.link').disable({emitEvent: false}); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
this.emailTemplateForm = this.fb.group({ |
||||
|
subject: [''], |
||||
|
body: [''] |
||||
|
}); |
||||
|
|
||||
|
this.smsTemplateForm = this.fb.group({ |
||||
|
body: [''] |
||||
|
}); |
||||
|
|
||||
|
this.slackTemplateForm = this.fb.group({ |
||||
|
body: [''] |
||||
|
}); |
||||
|
|
||||
|
this.deliveryMethodFormsMap = new Map<NotificationDeliveryMethod, FormGroup>([ |
||||
|
[NotificationDeliveryMethod.PUSH, this.pushTemplateForm], |
||||
|
[NotificationDeliveryMethod.EMAIL, this.emailTemplateForm], |
||||
|
[NotificationDeliveryMethod.SMS, this.smsTemplateForm], |
||||
|
[NotificationDeliveryMethod.SLACK, this.slackTemplateForm] |
||||
|
]); |
||||
|
} |
||||
|
|
||||
|
ngOnDestroy() { |
||||
|
this.destroy$.next(); |
||||
|
this.destroy$.complete(); |
||||
|
} |
||||
|
|
||||
|
private atLeastOne() { |
||||
|
return (group: FormGroup): ValidationErrors | null => { |
||||
|
let hasAtLeastOne = true; |
||||
|
if (group?.controls) { |
||||
|
const controlsFormValue: FormGroup[] = Object.entries(group.controls).map(method => method[1]) as any; |
||||
|
hasAtLeastOne = controlsFormValue.some(value => value.controls.enabled.value); |
||||
|
} |
||||
|
return hasAtLeastOne ? null : {atLeastOne: true}; |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
protected getNotificationTemplateValue(): NotificationTemplate { |
||||
|
const template: NotificationTemplate = this.templateNotificationForm.value; |
||||
|
this.notificationDeliveryMethods.forEach(method => { |
||||
|
if (template.configuration.deliveryMethodsTemplates[method].enabled) { |
||||
|
Object.assign(template.configuration.deliveryMethodsTemplates[method], this.deliveryMethodFormsMap.get(method).value, {method}); |
||||
|
} else { |
||||
|
delete template.configuration.deliveryMethodsTemplates[method]; |
||||
|
} |
||||
|
}); |
||||
|
return template; |
||||
|
} |
||||
|
} |
||||
Loading…
Reference in new issue