UI: Fixed expand notification delivery template when editing

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

@@ -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>

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

@@ -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);