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" <section class="tb-form-panel tb-slide-toggle stroked"
[formGroupName]="NotificationDeliveryMethod.WEB" [formGroupName]="NotificationDeliveryMethod.WEB"
*ngIf="templateConfigurationForm.get('WEB.enabled').value"> *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-expansion-panel-header fxLayout="row wrap" class="fill-width">
<mat-panel-title class="template-tittle"> <mat-panel-title class="template-tittle">
<tb-icon>{{ NotificationDeliveryMethodInfoMap.get(NotificationDeliveryMethod.WEB).icon }}</tb-icon> <tb-icon>{{ NotificationDeliveryMethodInfoMap.get(NotificationDeliveryMethod.WEB).icon }}</tb-icon>
@ -83,7 +83,7 @@
<section class="tb-form-panel tb-slide-toggle stroked" <section class="tb-form-panel tb-slide-toggle stroked"
[formGroupName]="NotificationDeliveryMethod.MOBILE_APP" [formGroupName]="NotificationDeliveryMethod.MOBILE_APP"
*ngIf="templateConfigurationForm.get('MOBILE_APP.enabled').value"> *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-expansion-panel-header fxLayout="row wrap" class="fill-width">
<mat-panel-title class="template-tittle"> <mat-panel-title class="template-tittle">
<tb-icon>{{ NotificationDeliveryMethodInfoMap.get(NotificationDeliveryMethod.MOBILE_APP).icon }}</tb-icon> <tb-icon>{{ NotificationDeliveryMethodInfoMap.get(NotificationDeliveryMethod.MOBILE_APP).icon }}</tb-icon>
@ -138,7 +138,7 @@
<tb-notification-action-button-configuration <tb-notification-action-button-configuration
formControlName="onClick" formControlName="onClick"
hideButtonText hideButtonText
[sliderHint]="hotificationTapActionHint" [sliderHint]="notificationTapActionHint"
actionTitle="{{ 'notification.notification-tap-action' | translate }}"> actionTitle="{{ 'notification.notification-tap-action' | translate }}">
</tb-notification-action-button-configuration> </tb-notification-action-button-configuration>
</div> </div>
@ -148,7 +148,7 @@
<section class="tb-form-panel tb-slide-toggle stroked" <section class="tb-form-panel tb-slide-toggle stroked"
[formGroupName]="NotificationDeliveryMethod.SMS" [formGroupName]="NotificationDeliveryMethod.SMS"
*ngIf="templateConfigurationForm.get('SMS.enabled').value"> *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-expansion-panel-header fxLayout="row wrap" class="fill-width">
<mat-panel-title class="template-tittle"> <mat-panel-title class="template-tittle">
<tb-icon>{{ NotificationDeliveryMethodInfoMap.get(NotificationDeliveryMethod.SMS).icon }}</tb-icon> <tb-icon>{{ NotificationDeliveryMethodInfoMap.get(NotificationDeliveryMethod.SMS).icon }}</tb-icon>
@ -180,7 +180,7 @@
<section class="tb-form-panel tb-slide-toggle stroked" <section class="tb-form-panel tb-slide-toggle stroked"
[formGroupName]="NotificationDeliveryMethod.EMAIL" [formGroupName]="NotificationDeliveryMethod.EMAIL"
*ngIf="templateConfigurationForm.get('EMAIL.enabled').value"> *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-expansion-panel-header fxLayout="row wrap" class="fill-width">
<mat-panel-title class="template-tittle"> <mat-panel-title class="template-tittle">
<tb-icon>{{ NotificationDeliveryMethodInfoMap.get(NotificationDeliveryMethod.EMAIL).icon }}</tb-icon> <tb-icon>{{ NotificationDeliveryMethodInfoMap.get(NotificationDeliveryMethod.EMAIL).icon }}</tb-icon>
@ -210,7 +210,7 @@
<section class="tb-form-panel tb-slide-toggle stroked" <section class="tb-form-panel tb-slide-toggle stroked"
[formGroupName]="NotificationDeliveryMethod.SLACK" [formGroupName]="NotificationDeliveryMethod.SLACK"
*ngIf="templateConfigurationForm.get('SLACK.enabled').value"> *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-expansion-panel-header fxLayout="row wrap" class="fill-width">
<mat-panel-title class="template-tittle"> <mat-panel-title class="template-tittle">
<tb-icon>{{ NotificationDeliveryMethodInfoMap.get(NotificationDeliveryMethod.SLACK).icon }}</tb-icon> <tb-icon>{{ NotificationDeliveryMethodInfoMap.get(NotificationDeliveryMethod.SLACK).icon }}</tb-icon>
@ -236,7 +236,7 @@
<section class="tb-form-panel tb-slide-toggle stroked" <section class="tb-form-panel tb-slide-toggle stroked"
[formGroupName]="NotificationDeliveryMethod.MICROSOFT_TEAMS" [formGroupName]="NotificationDeliveryMethod.MICROSOFT_TEAMS"
*ngIf="templateConfigurationForm.get('MICROSOFT_TEAMS.enabled').value"> *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-expansion-panel-header fxLayout="row wrap" class="fill-width">
<mat-panel-title class="template-tittle"> <mat-panel-title class="template-tittle">
<tb-icon>{{ NotificationDeliveryMethodInfoMap.get(NotificationDeliveryMethod.MICROSOFT_TEAMS).icon }}</tb-icon> <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)) { if (isDefinedAndNotNull(value)) {
this.templateConfigurationForm.patchValue(value, {emitEvent: false}); this.templateConfigurationForm.patchValue(value, {emitEvent: false});
this.updateDisabledForms(); this.updateDisabledForms();
this.updateExpandedForm();
this.templateConfigurationForm.updateValueAndValidity(); this.templateConfigurationForm.updateValueAndValidity();
} }
} }
@ -96,6 +97,7 @@ export class NotificationTemplateConfigurationComponent implements OnDestroy, Co
private propagateChange = (v: any) => { }; private propagateChange = (v: any) => { };
private readonly destroy$ = new Subject<void>(); private readonly destroy$ = new Subject<void>();
private expendedBlocks: NotificationDeliveryMethod[];
constructor(private fb: FormBuilder, constructor(private fb: FormBuilder,
private translate: TranslateService) { private translate: TranslateService) {
@ -122,6 +124,7 @@ export class NotificationTemplateConfigurationComponent implements OnDestroy, Co
} }
} }
this.templateConfigurationForm.patchValue(settings, {emitEvent: false}); this.templateConfigurationForm.patchValue(settings, {emitEvent: false});
this.updateExpandedForm();
} }
registerOnChange(fn: any): void { registerOnChange(fn: any): void {
@ -147,7 +150,7 @@ export class NotificationTemplateConfigurationComponent implements OnDestroy, Co
}; };
} }
get hotificationTapActionHint(): string { get notificationTapActionHint(): string {
switch (this.notificationType) { switch (this.notificationType) {
case NotificationType.ALARM: case NotificationType.ALARM:
case NotificationType.ALARM_ASSIGNMENT: case NotificationType.ALARM_ASSIGNMENT:
@ -157,6 +160,19 @@ export class NotificationTemplateConfigurationComponent implements OnDestroy, Co
return ''; 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(){ private updateDisabledForms(){
Object.values(NotificationDeliveryMethod).forEach((method) => { Object.values(NotificationDeliveryMethod).forEach((method) => {
const form = this.templateConfigurationForm.get(method); const form = this.templateConfigurationForm.get(method);