From a60ecd13722199b6f8ff73d4f915a48951b13c44 Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Mon, 18 Jul 2022 16:56:03 +0300
Subject: [PATCH] UI: Fixed responsive create/restore complex version

---
 ...entity-types-version-create.component.html | 97 +++++++++----------
 ...entity-types-version-create.component.scss |  4 +
 .../entity-types-version-create.component.ts  |  2 +
 .../entity-types-version-load.component.html  | 71 +++++++-------
 .../entity-types-version-load.component.scss  |  4 +
 .../vc/entity-types-version-load.component.ts |  2 +
 .../vc/entity-versions-table.component.ts     |  4 +-
 7 files changed, 97 insertions(+), 87 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/vc/entity-types-version-create.component.html b/ui-ngx/src/app/modules/home/components/vc/entity-types-version-create.component.html
index 656664784d..bc2131c5a1 100644
--- a/ui-ngx/src/app/modules/home/components/vc/entity-types-version-create.component.html
+++ b/ui-ngx/src/app/modules/home/components/vc/entity-types-version-create.component.html
@@ -22,7 +22,8 @@
       <div *ngFor="let entityTypeFormGroup of entityTypesFormGroupArray(); trackBy: trackByEntityType;
                let $index = index; last as isLast;"
            fxLayout="row" fxLayoutAlign="start center" [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}">
-        <mat-expansion-panel class="entity-type-config" fxFlex [formGroup]="entityTypeFormGroup" [expanded]="entityTypesFormGroupExpanded(entityTypeFormGroup)">
+        <mat-expansion-panel class="entity-type-config" [ngClass]="{'load': loading}" fxFlex [formGroup]="entityTypeFormGroup"
+                             [expanded]="entityTypesFormGroupExpanded(entityTypeFormGroup)" (opened)="loading = false">
           <mat-expansion-panel-header>
             <div fxFlex fxLayout="row" fxLayoutAlign="start center">
               <mat-panel-title>
@@ -40,57 +41,55 @@
               </button>
             </div>
           </mat-expansion-panel-header>
-          <ng-template matExpansionPanelContent>
-            <div class="entity-type-config-content" fxLayout="column" fxLayoutGap="0.5em">
-              <mat-divider></mat-divider>
-              <div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
-                <tb-entity-type-select
-                  showLabel
-                  formControlName="entityType"
-                  required
-                  [filterAllowedEntityTypes]="false"
-                  [allowedEntityTypes]="allowedEntityTypes(entityTypeFormGroup)">
-                </tb-entity-type-select>
-                <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px" formGroupName="config">
-                  <mat-form-field fxFlex class="mat-block">
-                    <mat-label translate>version-control.sync-strategy</mat-label>
-                    <mat-select formControlName="syncStrategy">
-                      <mat-option [value]="'default'">
-                        {{ 'version-control.default' | translate }}
-                      </mat-option>
-                      <mat-option *ngFor="let strategy of syncStrategies" [value]="strategy">
-                        {{syncStrategyTranslations.get(strategy) | translate}}
-                      </mat-option>
-                    </mat-select>
-                  </mat-form-field>
-                  <div fxFlex fxLayout="column" fxLayoutGap="8px">
-                    <mat-checkbox *ngIf="entityTypeFormGroup.get('entityType').value === entityTypes.DEVICE" formControlName="saveCredentials">
-                      {{ 'version-control.export-credentials' | translate }}
-                    </mat-checkbox>
-                    <mat-checkbox formControlName="saveAttributes">
-                      {{ 'version-control.export-attributes' | translate }}
-                    </mat-checkbox>
-                    <mat-checkbox formControlName="saveRelations">
-                      {{ 'version-control.export-relations' | translate }}
-                    </mat-checkbox>
-                  </div>
+          <div class="entity-type-config-content" fxLayout="column" fxLayoutGap="0.5em">
+            <mat-divider></mat-divider>
+            <div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
+              <tb-entity-type-select
+                showLabel
+                formControlName="entityType"
+                required
+                [filterAllowedEntityTypes]="false"
+                [allowedEntityTypes]="allowedEntityTypes(entityTypeFormGroup)">
+              </tb-entity-type-select>
+              <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px" formGroupName="config">
+                <mat-form-field fxFlex class="mat-block">
+                  <mat-label translate>version-control.sync-strategy</mat-label>
+                  <mat-select formControlName="syncStrategy">
+                    <mat-option [value]="'default'">
+                      {{ 'version-control.default' | translate }}
+                    </mat-option>
+                    <mat-option *ngFor="let strategy of syncStrategies" [value]="strategy">
+                      {{syncStrategyTranslations.get(strategy) | translate}}
+                    </mat-option>
+                  </mat-select>
+                </mat-form-field>
+                <div fxFlex fxLayout="column" fxLayoutGap="8px">
+                  <mat-checkbox *ngIf="entityTypeFormGroup.get('entityType').value === entityTypes.DEVICE" formControlName="saveCredentials">
+                    {{ 'version-control.export-credentials' | translate }}
+                  </mat-checkbox>
+                  <mat-checkbox formControlName="saveAttributes">
+                    {{ 'version-control.export-attributes' | translate }}
+                  </mat-checkbox>
+                  <mat-checkbox formControlName="saveRelations">
+                    {{ 'version-control.export-relations' | translate }}
+                  </mat-checkbox>
                 </div>
               </div>
-              <div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px" fxLayoutAlign.gt-xs="start center"
-                   formGroupName="config" ngStyle.gt-xs="min-height: 76px;">
-                <mat-slide-toggle formControlName="allEntities">
-                  {{ 'version-control.all-entities' | translate }}
-                </mat-slide-toggle>
-                <tb-entity-list
-                  fxFlex
-                  [fxShow]="!entityTypeFormGroup.get('config').get('allEntities').value"
-                  [entityType]="entityTypeFormGroup.get('entityType').value"
-                  required
-                  formControlName="entityIds">
-                </tb-entity-list>
-              </div>
             </div>
-          </ng-template>
+            <div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px" fxLayoutAlign.gt-xs="start center"
+                 formGroupName="config" ngStyle.gt-xs="min-height: 76px;">
+              <mat-slide-toggle formControlName="allEntities">
+                {{ 'version-control.all-entities' | translate }}
+              </mat-slide-toggle>
+              <tb-entity-list
+                fxFlex
+                [fxShow]="!entityTypeFormGroup.get('config').get('allEntities').value"
+                [entityType]="entityTypeFormGroup.get('entityType').value"
+                required
+                formControlName="entityIds">
+              </tb-entity-list>
+            </div>
+          </div>
         </mat-expansion-panel>
       </div>
       <div *ngIf="!entityTypesFormGroupArray().length">
diff --git a/ui-ngx/src/app/modules/home/components/vc/entity-types-version-create.component.scss b/ui-ngx/src/app/modules/home/components/vc/entity-types-version-create.component.scss
index 62b29bed53..47b5de00b8 100644
--- a/ui-ngx/src/app/modules/home/components/vc/entity-types-version-create.component.scss
+++ b/ui-ngx/src/app/modules/home/components/vc/entity-types-version-create.component.scss
@@ -55,5 +55,9 @@
     .mat-expansion-panel-body {
       padding: 0;
     }
+    &.load .mat-expansion-panel-content {
+      height: 0;
+      visibility: hidden;
+    }
   }
 }
diff --git a/ui-ngx/src/app/modules/home/components/vc/entity-types-version-create.component.ts b/ui-ngx/src/app/modules/home/components/vc/entity-types-version-create.component.ts
index 6434329447..f7e8541d07 100644
--- a/ui-ngx/src/app/modules/home/components/vc/entity-types-version-create.component.ts
+++ b/ui-ngx/src/app/modules/home/components/vc/entity-types-version-create.component.ts
@@ -74,6 +74,8 @@ export class EntityTypesVersionCreateComponent extends PageComponent implements
 
   entityTypes = EntityType;
 
+  loading = true;
+
   constructor(protected store: Store<AppState>,
               private translate: TranslateService,
               private fb: FormBuilder) {
diff --git a/ui-ngx/src/app/modules/home/components/vc/entity-types-version-load.component.html b/ui-ngx/src/app/modules/home/components/vc/entity-types-version-load.component.html
index f50098c9dd..824759bec0 100644
--- a/ui-ngx/src/app/modules/home/components/vc/entity-types-version-load.component.html
+++ b/ui-ngx/src/app/modules/home/components/vc/entity-types-version-load.component.html
@@ -22,7 +22,8 @@
       <div *ngFor="let entityTypeFormGroup of entityTypesFormGroupArray(); trackBy: trackByEntityType;
                let $index = index; last as isLast;"
            fxLayout="row" fxLayoutAlign="start center" [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}">
-        <mat-expansion-panel class="entity-type-config" fxFlex [formGroup]="entityTypeFormGroup" [expanded]="entityTypesFormGroupExpanded(entityTypeFormGroup)">
+        <mat-expansion-panel class="entity-type-config" [ngClass]="{'load': loading}" fxFlex [formGroup]="entityTypeFormGroup"
+                             [expanded]="entityTypesFormGroupExpanded(entityTypeFormGroup)" (opened)="loading = false">
           <mat-expansion-panel-header>
             <div fxFlex fxLayout="row" fxLayoutAlign="start center">
               <mat-panel-title>
@@ -40,44 +41,42 @@
               </button>
             </div>
           </mat-expansion-panel-header>
-          <ng-template matExpansionPanelContent>
-            <div class="entity-type-config-content" fxLayout="column" fxLayoutGap="0.5em">
-              <mat-divider></mat-divider>
-              <div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="32px">
-                <tb-entity-type-select
-                  fxFlex
-                  showLabel
-                  formControlName="entityType"
-                  required
-                  [filterAllowedEntityTypes]="false"
-                  [allowedEntityTypes]="allowedEntityTypes(entityTypeFormGroup)">
-                </tb-entity-type-select>
-                <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px" fxLayoutGap.xs="8px" formGroupName="config">
-                  <div fxFlex fxLayout="column" fxLayoutGap="8px">
-                    <mat-checkbox #removeOtherEntitiesCheckbox
-                                  formControlName="removeOtherEntities"
-                                  (click)="onRemoveOtherEntities(removeOtherEntitiesCheckbox, entityTypeFormGroup, $event)">
-                      {{ 'version-control.remove-other-entities' | translate }}
-                    </mat-checkbox>
-                    <mat-checkbox formControlName="findExistingEntityByName">
-                      {{ 'version-control.find-existing-entity-by-name' | translate }}
-                    </mat-checkbox>
-                  </div>
-                  <div fxFlex fxLayout="column" fxLayoutGap="8px">
-                    <mat-checkbox *ngIf="entityTypeFormGroup.get('entityType').value === entityTypes.DEVICE" formControlName="loadCredentials">
-                      {{ 'version-control.load-credentials' | translate }}
-                    </mat-checkbox>
-                    <mat-checkbox formControlName="loadAttributes">
-                      {{ 'version-control.load-attributes' | translate }}
-                    </mat-checkbox>
-                    <mat-checkbox formControlName="loadRelations">
-                      {{ 'version-control.load-relations' | translate }}
-                    </mat-checkbox>
-                  </div>
+          <div class="entity-type-config-content" fxLayout="column" fxLayoutGap="0.5em">
+            <mat-divider></mat-divider>
+            <div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="32px">
+              <tb-entity-type-select
+                fxFlex
+                showLabel
+                formControlName="entityType"
+                required
+                [filterAllowedEntityTypes]="false"
+                [allowedEntityTypes]="allowedEntityTypes(entityTypeFormGroup)">
+              </tb-entity-type-select>
+              <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px" fxLayoutGap.xs="8px" formGroupName="config">
+                <div fxFlex fxLayout="column" fxLayoutGap="8px">
+                  <mat-checkbox #removeOtherEntitiesCheckbox
+                                formControlName="removeOtherEntities"
+                                (click)="onRemoveOtherEntities(removeOtherEntitiesCheckbox, entityTypeFormGroup, $event)">
+                    {{ 'version-control.remove-other-entities' | translate }}
+                  </mat-checkbox>
+                  <mat-checkbox formControlName="findExistingEntityByName">
+                    {{ 'version-control.find-existing-entity-by-name' | translate }}
+                  </mat-checkbox>
+                </div>
+                <div fxFlex fxLayout="column" fxLayoutGap="8px">
+                  <mat-checkbox *ngIf="entityTypeFormGroup.get('entityType').value === entityTypes.DEVICE" formControlName="loadCredentials">
+                    {{ 'version-control.load-credentials' | translate }}
+                  </mat-checkbox>
+                  <mat-checkbox formControlName="loadAttributes">
+                    {{ 'version-control.load-attributes' | translate }}
+                  </mat-checkbox>
+                  <mat-checkbox formControlName="loadRelations">
+                    {{ 'version-control.load-relations' | translate }}
+                  </mat-checkbox>
                 </div>
               </div>
             </div>
-          </ng-template>
+          </div>
         </mat-expansion-panel>
       </div>
       <div *ngIf="!entityTypesFormGroupArray().length">
diff --git a/ui-ngx/src/app/modules/home/components/vc/entity-types-version-load.component.scss b/ui-ngx/src/app/modules/home/components/vc/entity-types-version-load.component.scss
index a02e782b76..6f1f26c640 100644
--- a/ui-ngx/src/app/modules/home/components/vc/entity-types-version-load.component.scss
+++ b/ui-ngx/src/app/modules/home/components/vc/entity-types-version-load.component.scss
@@ -55,5 +55,9 @@
     .mat-expansion-panel-body {
       padding: 0;
     }
+    &.load .mat-expansion-panel-content {
+      height: 0;
+      visibility: hidden;
+    }
   }
 }
diff --git a/ui-ngx/src/app/modules/home/components/vc/entity-types-version-load.component.ts b/ui-ngx/src/app/modules/home/components/vc/entity-types-version-load.component.ts
index ef43899c5b..0a02c95cff 100644
--- a/ui-ngx/src/app/modules/home/components/vc/entity-types-version-load.component.ts
+++ b/ui-ngx/src/app/modules/home/components/vc/entity-types-version-load.component.ts
@@ -68,6 +68,8 @@ export class EntityTypesVersionLoadComponent extends PageComponent implements On
 
   entityTypes = EntityType;
 
+  loading = true;
+
   constructor(protected store: Store<AppState>,
               private translate: TranslateService,
               private popoverService: TbPopoverService,
diff --git a/ui-ngx/src/app/modules/home/components/vc/entity-versions-table.component.ts b/ui-ngx/src/app/modules/home/components/vc/entity-versions-table.component.ts
index 1073c26acc..fc7984e878 100644
--- a/ui-ngx/src/app/modules/home/components/vc/entity-versions-table.component.ts
+++ b/ui-ngx/src/app/modules/home/components/vc/entity-versions-table.component.ts
@@ -248,7 +248,7 @@ export class EntityVersionsTableComponent extends PageComponent implements OnIni
           }
         },
         {maxHeight: '90vh', height: '100%', padding: '10px'},
-        {width: '600px', minWidth: '100%', maxWidth: '100%'}, {}, false);
+        {}, {}, false);
       complexCreateVersionPopover.tbComponentRef.instance.popoverComponent = complexCreateVersionPopover;
     }
   }
@@ -321,7 +321,7 @@ export class EntityVersionsTableComponent extends PageComponent implements OnIni
           }
         },
         {maxHeight: '80vh', height: '100%', padding: '10px'},
-        {width: '600px', minWidth: '100%', maxWidth: '100%'}, {}, false);
+        {}, {}, false);
       restoreEntitiesVersionPopover.tbComponentRef.instance.popoverComponent = restoreEntitiesVersionPopover;
     }
   }