dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: Fixed expand notification delivery template when editing

Browse Source
This commit is contained in:
Vladyslav_Prykhodko 2024-03-15 10:51:32 +02:00
parent 01250f13e6
commit 8ef012bfda
2 changed files with 24 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
ui-ngx/src/app/modules/home/pages/notification/template/configuration/notification-template-configuration.component.html
View File

@ -30,7 +30,7 @@
<section class="tb-form-panel tb-slide-toggle stroked"
[formGroupName]="NotificationDeliveryMethod.WEB"
*ngIf="templateConfigurationForm.get('WEB.enabled').value">
<mat-expansion-panel class="tb-settings" [expanded]="templateConfigurationForm.get('WEB').invalid">
<mat-expansion-panel class="tb-settings" expanded="{{ expandedForm(NotificationDeliveryMethod.WEB) }}">
<mat-expansion-panel-header fxLayout="row wrap" class="fill-width">
<mat-panel-title class="template-tittle">
<tb-icon>{{ NotificationDeliveryMethodInfoMap.get(NotificationDeliveryMethod.WEB).icon }}</tb-icon>
@ -83,7 +83,7 @@
<section class="tb-form-panel tb-slide-toggle stroked"
[formGroupName]="NotificationDeliveryMethod.MOBILE_APP"
*ngIf="templateConfigurationForm.get('MOBILE_APP.enabled').value">
<mat-expansion-panel class="tb-settings" [expanded]="templateConfigurationForm.get('MOBILE_APP').invalid">
<mat-expansion-panel class="tb-settings" expanded="{{ expandedForm(NotificationDeliveryMethod.MOBILE_APP) }}">
<mat-expansion-panel-header fxLayout="row wrap" class="fill-width">
<mat-panel-title class="template-tittle">
<tb-icon>{{ NotificationDeliveryMethodInfoMap.get(NotificationDeliveryMethod.MOBILE_APP).icon }}</tb-icon>
@ -138,7 +138,7 @@
<tb-notification-action-button-configuration
formControlName="onClick"
hideButtonText
[sliderHint]="hotificationTapActionHint"
[sliderHint]="notificationTapActionHint"
actionTitle="{{ 'notification.notification-tap-action' | translate }}">
</tb-notification-action-button-configuration>
</div>
@ -148,7 +148,7 @@
<section class="tb-form-panel tb-slide-toggle stroked"
[formGroupName]="NotificationDeliveryMethod.SMS"
*ngIf="templateConfigurationForm.get('SMS.enabled').value">
<mat-expansion-panel class="tb-settings" [expanded]="templateConfigurationForm.get('SMS').invalid">
<mat-expansion-panel class="tb-settings" expanded="{{ expandedForm(NotificationDeliveryMethod.SMS) }}">
<mat-expansion-panel-header fxLayout="row wrap" class="fill-width">
<mat-panel-title class="template-tittle">
<tb-icon>{{ NotificationDeliveryMethodInfoMap.get(NotificationDeliveryMethod.SMS).icon }}</tb-icon>
@ -180,7 +180,7 @@
<section class="tb-form-panel tb-slide-toggle stroked"
[formGroupName]="NotificationDeliveryMethod.EMAIL"
*ngIf="templateConfigurationForm.get('EMAIL.enabled').value">
<mat-expansion-panel class="tb-settings" [expanded]="templateConfigurationForm.get('EMAIL').invalid">
<mat-expansion-panel class="tb-settings" expanded="{{ expandedForm(NotificationDeliveryMethod.EMAIL) }}">
<mat-expansion-panel-header fxLayout="row wrap" class="fill-width">
<mat-panel-title class="template-tittle">
<tb-icon>{{ NotificationDeliveryMethodInfoMap.get(NotificationDeliveryMethod.EMAIL).icon }}</tb-icon>
@ -210,7 +210,7 @@
<section class="tb-form-panel tb-slide-toggle stroked"
[formGroupName]="NotificationDeliveryMethod.SLACK"
*ngIf="templateConfigurationForm.get('SLACK.enabled').value">
<mat-expansion-panel class="tb-settings" [expanded]="templateConfigurationForm.get('SLACK').invalid">
<mat-expansion-panel class="tb-settings" expanded="{{ expandedForm(NotificationDeliveryMethod.SLACK) }}">
<mat-expansion-panel-header fxLayout="row wrap" class="fill-width">
<mat-panel-title class="template-tittle">
<tb-icon>{{ NotificationDeliveryMethodInfoMap.get(NotificationDeliveryMethod.SLACK).icon }}</tb-icon>
@ -236,7 +236,7 @@
<section class="tb-form-panel tb-slide-toggle stroked"
[formGroupName]="NotificationDeliveryMethod.MICROSOFT_TEAMS"
*ngIf="templateConfigurationForm.get('MICROSOFT_TEAMS.enabled').value">
<mat-expansion-panel class="tb-settings" [expanded]="templateConfigurationForm.get('MICROSOFT_TEAMS').invalid">
<mat-expansion-panel class="tb-settings" expanded="{{ expandedForm(NotificationDeliveryMethod.MICROSOFT_TEAMS) }}">
<mat-expansion-panel-header fxLayout="row wrap" class="fill-width">
<mat-panel-title class="template-tittle">
<tb-icon>{{ NotificationDeliveryMethodInfoMap.get(NotificationDeliveryMethod.MICROSOFT_TEAMS).icon }}</tb-icon>

18
ui-ngx/src/app/modules/home/pages/notification/template/configuration/notification-template-configuration.component.ts
View File

@ -66,6 +66,7 @@ export class NotificationTemplateConfigurationComponent implements OnDestroy, Co
if (isDefinedAndNotNull(value)) {
this.templateConfigurationForm.patchValue(value, {emitEvent: false});
this.updateDisabledForms();
this.updateExpandedForm();
this.templateConfigurationForm.updateValueAndValidity();
}
}
@ -96,6 +97,7 @@ export class NotificationTemplateConfigurationComponent implements OnDestroy, Co
private propagateChange = (v: any) => { };
private readonly destroy$ = new Subject<void>();
private expendedBlocks: NotificationDeliveryMethod[];
constructor(private fb: FormBuilder,
private translate: TranslateService) {
@ -122,6 +124,7 @@ export class NotificationTemplateConfigurationComponent implements OnDestroy, Co
}
}
this.templateConfigurationForm.patchValue(settings, {emitEvent: false});
this.updateExpandedForm();
}
registerOnChange(fn: any): void {
@ -147,7 +150,7 @@ export class NotificationTemplateConfigurationComponent implements OnDestroy, Co
};
}
get hotificationTapActionHint(): string {
get notificationTapActionHint(): string {
switch (this.notificationType) {
case NotificationType.ALARM:
case NotificationType.ALARM_ASSIGNMENT:
@ -157,6 +160,19 @@ export class NotificationTemplateConfigurationComponent implements OnDestroy, Co
return '';
}
expandedForm(name: NotificationDeliveryMethod): boolean {
return this.expendedBlocks.includes(name);
}
private updateExpandedForm() {
this.expendedBlocks = [];
Object.keys(this.templateConfigurationForm.controls).forEach((name: NotificationDeliveryMethod) => {
if (this.templateConfigurationForm.get(name).invalid) {
this.expendedBlocks.push(name);
}
});
}
private updateDisabledForms(){
Object.values(NotificationDeliveryMethod).forEach((method) => {
const form = this.templateConfigurationForm.get(method);