From b19bcdfe9a3b0eae6409654a4a7a92597767b8b1 Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Wed, 23 Dec 2020 17:31:08 +0200
Subject: [PATCH] UI: Improvement time rendering profiles seated too many
 parameters

---
 .../alarm/device-profile-alarm.component.html | 164 +++++++++---------
 .../profile/device-profile.component.html     |  38 ++--
 .../tenant-profile-data.component.html        |  10 +-
 3 files changed, 113 insertions(+), 99 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/profile/alarm/device-profile-alarm.component.html b/ui-ngx/src/app/modules/home/components/profile/alarm/device-profile-alarm.component.html
index cec0f48259..79fa9b7383 100644
--- a/ui-ngx/src/app/modules/home/components/profile/alarm/device-profile-alarm.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/alarm/device-profile-alarm.component.html
@@ -33,87 +33,91 @@
       </button>
     </div>
   </mat-expansion-panel-header>
-  <div fxLayout="column" fxLayoutGap="0.5em">
-    <mat-divider></mat-divider>
-    <mat-form-field fxFlex floatLabel="always">
-      <mat-label>{{'device-profile.alarm-type' | translate}}</mat-label>
-      <input required matInput formControlName="alarmType" placeholder="Enter alarm type">
-      <mat-error *ngIf="alarmFormGroup.get('alarmType').hasError('required')">
-        {{ 'device-profile.alarm-type-required' | translate }}
-      </mat-error>
-      <mat-error *ngIf="alarmFormGroup.get('alarmType').hasError('unique')">
-        {{ 'device-profile.alarm-type-unique' | translate }}
-      </mat-error>
-    </mat-form-field>
-  </div>
-  <mat-expansion-panel class="advanced-settings" [expanded]="false">
-    <mat-expansion-panel-header>
-      <mat-panel-title>
-        <div fxFlex fxLayout="row" fxLayoutAlign="end center">
-          <div class="tb-small" translate>device-profile.advanced-settings</div>
-        </div>
-      </mat-panel-title>
-    </mat-expansion-panel-header>
-    <mat-checkbox formControlName="propagate" style="display: block; padding-bottom: 16px;">
-      {{ 'device-profile.propagate-alarm' | translate }}
-    </mat-checkbox>
-    <section *ngIf="alarmFormGroup.get('propagate').value === true" style="padding-bottom: 1em;">
-      <mat-form-field floatLabel="always" class="mat-block">
-        <mat-label translate>device-profile.alarm-rule-relation-types-list</mat-label>
-        <mat-chip-list #relationTypesChipList [disabled]="disabled">
-          <mat-chip
-            *ngFor="let key of alarmFormGroup.get('propagateRelationTypes').value;"
-            (removed)="removeRelationType(key)">
-            {{key}}
-            <mat-icon matChipRemove>close</mat-icon>
-          </mat-chip>
-          <input matInput type="text" placeholder="{{'device-profile.alarm-rule-relation-types-list' | translate}}"
-                 style="max-width: 200px;"
-                 [matChipInputFor]="relationTypesChipList"
-                 [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
-                 (matChipInputTokenEnd)="addRelationType($event)"
-                 [matChipInputAddOnBlur]="true">
-        </mat-chip-list>
-        <mat-hint innerHTML="{{ 'device-profile.alarm-rule-relation-types-list-hint' | translate }}"></mat-hint>
+  <ng-template matExpansionPanelContent>
+    <div fxLayout="column" fxLayoutGap="0.5em">
+      <mat-divider></mat-divider>
+      <mat-form-field fxFlex floatLabel="always">
+        <mat-label>{{'device-profile.alarm-type' | translate}}</mat-label>
+        <input required matInput formControlName="alarmType" placeholder="Enter alarm type">
+        <mat-error *ngIf="alarmFormGroup.get('alarmType').hasError('required')">
+          {{ 'device-profile.alarm-type-required' | translate }}
+        </mat-error>
+        <mat-error *ngIf="alarmFormGroup.get('alarmType').hasError('unique')">
+          {{ 'device-profile.alarm-type-unique' | translate }}
+        </mat-error>
       </mat-form-field>
-    </section>
-  </mat-expansion-panel>
-  <div fxFlex fxLayout="column">
-    <div translate class="tb-small" style="padding-bottom: 8px;">device-profile.create-alarm-rules</div>
-    <tb-create-alarm-rules formControlName="createRules"
-                           style="padding-bottom: 16px;"
-                           [deviceProfileId]="deviceProfileId">
-    </tb-create-alarm-rules>
-    <div translate class="tb-small" style="padding-bottom: 8px;">device-profile.clear-alarm-rule</div>
-    <div fxLayout="row" fxLayoutGap="8px;" fxLayoutAlign="start center"
-         [fxShow]="alarmFormGroup.get('clearRule').value"
-         style="padding-bottom: 8px;">
-      <div class="clear-alarm-rule" fxFlex fxLayout="row">
-        <tb-alarm-rule formControlName="clearRule" fxFlex [deviceProfileId]="deviceProfileId">
-        </tb-alarm-rule>
+    </div>
+    <mat-expansion-panel class="advanced-settings" [expanded]="false">
+      <mat-expansion-panel-header>
+        <mat-panel-title>
+          <div fxFlex fxLayout="row" fxLayoutAlign="end center">
+            <div class="tb-small" translate>device-profile.advanced-settings</div>
+          </div>
+        </mat-panel-title>
+      </mat-expansion-panel-header>
+      <ng-template matExpansionPanelContent>
+        <mat-checkbox formControlName="propagate" style="display: block; padding-bottom: 16px;">
+          {{ 'device-profile.propagate-alarm' | translate }}
+        </mat-checkbox>
+        <section *ngIf="alarmFormGroup.get('propagate').value === true" style="padding-bottom: 1em;">
+          <mat-form-field floatLabel="always" class="mat-block">
+            <mat-label translate>device-profile.alarm-rule-relation-types-list</mat-label>
+            <mat-chip-list #relationTypesChipList [disabled]="disabled">
+              <mat-chip
+                *ngFor="let key of alarmFormGroup.get('propagateRelationTypes').value;"
+                (removed)="removeRelationType(key)">
+                {{key}}
+                <mat-icon matChipRemove>close</mat-icon>
+              </mat-chip>
+              <input matInput type="text" placeholder="{{'device-profile.alarm-rule-relation-types-list' | translate}}"
+                     style="max-width: 200px;"
+                     [matChipInputFor]="relationTypesChipList"
+                     [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
+                     (matChipInputTokenEnd)="addRelationType($event)"
+                     [matChipInputAddOnBlur]="true">
+            </mat-chip-list>
+            <mat-hint innerHTML="{{ 'device-profile.alarm-rule-relation-types-list-hint' | translate }}"></mat-hint>
+          </mat-form-field>
+        </section>
+      </ng-template>
+    </mat-expansion-panel>
+    <div fxFlex fxLayout="column">
+      <div translate class="tb-small" style="padding-bottom: 8px;">device-profile.create-alarm-rules</div>
+      <tb-create-alarm-rules formControlName="createRules"
+                             style="padding-bottom: 16px;"
+                             [deviceProfileId]="deviceProfileId">
+      </tb-create-alarm-rules>
+      <div translate class="tb-small" style="padding-bottom: 8px;">device-profile.clear-alarm-rule</div>
+      <div fxLayout="row" fxLayoutGap="8px;" fxLayoutAlign="start center"
+           [fxShow]="alarmFormGroup.get('clearRule').value"
+           style="padding-bottom: 8px;">
+        <div class="clear-alarm-rule" fxFlex fxLayout="row">
+          <tb-alarm-rule formControlName="clearRule" fxFlex [deviceProfileId]="deviceProfileId">
+          </tb-alarm-rule>
+        </div>
+        <button *ngIf="!disabled"
+                mat-icon-button color="primary" style="min-width: 40px;"
+                type="button"
+                (click)="removeClearAlarmRule()"
+                matTooltip="{{ 'action.remove' | translate }}"
+                matTooltipPosition="above">
+          <mat-icon>remove_circle_outline</mat-icon>
+        </button>
+      </div>
+      <div *ngIf="disabled && !alarmFormGroup.get('clearRule').value">
+        <span translate fxLayoutAlign="center center" style="margin: 16px 0"
+              class="tb-prompt">device-profile.no-clear-alarm-rule</span>
+      </div>
+      <div *ngIf="!disabled" [fxShow]="!alarmFormGroup.get('clearRule').value">
+        <button mat-stroked-button color="primary"
+                type="button"
+                (click)="addClearAlarmRule()"
+                matTooltip="{{ 'device-profile.add-clear-alarm-rule' | translate }}"
+                matTooltipPosition="above">
+          <mat-icon class="button-icon">add_circle_outline</mat-icon>
+          {{ 'device-profile.add-clear-alarm-rule' | translate }}
+        </button>
       </div>
-      <button *ngIf="!disabled"
-              mat-icon-button color="primary" style="min-width: 40px;"
-              type="button"
-              (click)="removeClearAlarmRule()"
-              matTooltip="{{ 'action.remove' | translate }}"
-              matTooltipPosition="above">
-        <mat-icon>remove_circle_outline</mat-icon>
-      </button>
     </div>
-    <div *ngIf="disabled && !alarmFormGroup.get('clearRule').value">
-      <span translate fxLayoutAlign="center center" style="margin: 16px 0"
-            class="tb-prompt">device-profile.no-clear-alarm-rule</span>
-    </div>
-    <div *ngIf="!disabled" [fxShow]="!alarmFormGroup.get('clearRule').value">
-      <button mat-stroked-button color="primary"
-              type="button"
-              (click)="addClearAlarmRule()"
-              matTooltip="{{ 'device-profile.add-clear-alarm-rule' | translate }}"
-              matTooltipPosition="above">
-        <mat-icon class="button-icon">add_circle_outline</mat-icon>
-        {{ 'device-profile.add-clear-alarm-rule' | translate }}
-      </button>
-    </div>
-  </div>
+  </ng-template>
 </mat-expansion-panel>
diff --git a/ui-ngx/src/app/modules/home/components/profile/device-profile.component.html b/ui-ngx/src/app/modules/home/components/profile/device-profile.component.html
index 4cba236d2a..bb3d6e7e43 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device-profile.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device-profile.component.html
@@ -91,10 +91,12 @@
                 <div translate>device-profile.profile-configuration</div>
               </mat-panel-title>
             </mat-expansion-panel-header>
-            <tb-device-profile-configuration
-              formControlName="configuration"
-              required>
-            </tb-device-profile-configuration>
+            <ng-template matExpansionPanelContent>
+              <tb-device-profile-configuration
+                formControlName="configuration"
+                required>
+              </tb-device-profile-configuration>
+            </ng-template>
           </mat-expansion-panel>
           <mat-expansion-panel *ngIf="displayTransportConfiguration" [expanded]="true">
             <mat-expansion-panel-header>
@@ -102,10 +104,12 @@
                 <div translate>device-profile.transport-configuration</div>
               </mat-panel-title>
             </mat-expansion-panel-header>
-            <tb-device-profile-transport-configuration
-              formControlName="transportConfiguration"
-              required>
-            </tb-device-profile-transport-configuration>
+            <ng-template matExpansionPanelContent>
+              <tb-device-profile-transport-configuration
+                formControlName="transportConfiguration"
+                required>
+              </tb-device-profile-transport-configuration>
+            </ng-template>
           </mat-expansion-panel>
           <mat-expansion-panel [expanded]="false">
             <mat-expansion-panel-header>
@@ -115,10 +119,12 @@
                       entityForm.get('profileData.alarms').value.length : 0} }}</div>
               </mat-panel-title>
             </mat-expansion-panel-header>
-            <tb-device-profile-alarms
-              formControlName="alarms"
-              [deviceProfileId]="deviceProfileId">
-            </tb-device-profile-alarms>
+            <ng-template matExpansionPanelContent>
+              <tb-device-profile-alarms
+                formControlName="alarms"
+                [deviceProfileId]="deviceProfileId">
+              </tb-device-profile-alarms>
+            </ng-template>
           </mat-expansion-panel>
           <mat-expansion-panel [expanded]="true">
             <mat-expansion-panel-header>
@@ -126,9 +132,11 @@
                 <div translate>device-profile.device-provisioning</div>
               </mat-panel-title>
             </mat-expansion-panel-header>
-            <tb-device-profile-provision-configuration
-              formControlName="provisionConfiguration">
-            </tb-device-profile-provision-configuration>
+            <ng-template matExpansionPanelContent>
+              <tb-device-profile-provision-configuration
+                formControlName="provisionConfiguration">
+              </tb-device-profile-provision-configuration>
+            </ng-template>
           </mat-expansion-panel>
         </mat-accordion>
       </div>
diff --git a/ui-ngx/src/app/modules/home/components/profile/tenant-profile-data.component.html b/ui-ngx/src/app/modules/home/components/profile/tenant-profile-data.component.html
index 3d853940f4..ae7a9540db 100644
--- a/ui-ngx/src/app/modules/home/components/profile/tenant-profile-data.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/tenant-profile-data.component.html
@@ -22,9 +22,11 @@
         <div translate>tenant-profile.profile-configuration</div>
       </mat-panel-title>
     </mat-expansion-panel-header>
-    <tb-tenant-profile-configuration
-      formControlName="configuration"
-      required>
-    </tb-tenant-profile-configuration>
+    <ng-template matExpansionPanelContent>
+      <tb-tenant-profile-configuration
+        formControlName="configuration"
+        required>
+      </tb-tenant-profile-configuration>
+    </ng-template>
   </mat-expansion-panel>
 </form>