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

UI: Fixed responsive create/restore complex version

Browse Source
This commit is contained in:
Vladyslav_Prykhodko 2022-07-18 16:56:03 +03:00
parent 58e418578c
commit a60ecd1372
7 changed files with 97 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

97
ui-ngx/src/app/modules/home/components/vc/entity-types-version-create.component.html
View File

@ -22,7 +22,8 @@
<div *ngFor="let entityTypeFormGroup of entityTypesFormGroupArray(); trackBy: trackByEntityType; <div *ngFor="let entityTypeFormGroup of entityTypesFormGroupArray(); trackBy: trackByEntityType;
let $index = index; last as isLast;" let $index = index; last as isLast;"
fxLayout="row" fxLayoutAlign="start center" [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}"> 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> <mat-expansion-panel-header>
<div fxFlex fxLayout="row" fxLayoutAlign="start center"> <div fxFlex fxLayout="row" fxLayoutAlign="start center">
<mat-panel-title> <mat-panel-title>
@ -40,57 +41,55 @@
</button> </button>
</div> </div>
</mat-expansion-panel-header> </mat-expansion-panel-header>
<ng-template matExpansionPanelContent> <div class="entity-type-config-content" fxLayout="column" fxLayoutGap="0.5em">
<div class="entity-type-config-content" fxLayout="column" fxLayoutGap="0.5em"> <mat-divider></mat-divider>
<mat-divider></mat-divider> <div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
<div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px"> <tb-entity-type-select
<tb-entity-type-select showLabel
showLabel formControlName="entityType"
formControlName="entityType" required
required [filterAllowedEntityTypes]="false"
[filterAllowedEntityTypes]="false" [allowedEntityTypes]="allowedEntityTypes(entityTypeFormGroup)">
[allowedEntityTypes]="allowedEntityTypes(entityTypeFormGroup)"> </tb-entity-type-select>
</tb-entity-type-select> <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px" formGroupName="config">
<div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px" formGroupName="config"> <mat-form-field fxFlex class="mat-block">
<mat-form-field fxFlex class="mat-block"> <mat-label translate>version-control.sync-strategy</mat-label>
<mat-label translate>version-control.sync-strategy</mat-label> <mat-select formControlName="syncStrategy">
<mat-select formControlName="syncStrategy"> <mat-option [value]="'default'">
<mat-option [value]="'default'"> {{ 'version-control.default' | translate }}
{{ 'version-control.default' | translate }} </mat-option>
</mat-option> <mat-option *ngFor="let strategy of syncStrategies" [value]="strategy">
<mat-option *ngFor="let strategy of syncStrategies" [value]="strategy"> {{syncStrategyTranslations.get(strategy) | translate}}
{{syncStrategyTranslations.get(strategy) | translate}} </mat-option>
</mat-option> </mat-select>
</mat-select> </mat-form-field>
</mat-form-field> <div fxFlex fxLayout="column" fxLayoutGap="8px">
<div fxFlex fxLayout="column" fxLayoutGap="8px"> <mat-checkbox *ngIf="entityTypeFormGroup.get('entityType').value === entityTypes.DEVICE" formControlName="saveCredentials">
<mat-checkbox *ngIf="entityTypeFormGroup.get('entityType').value === entityTypes.DEVICE" formControlName="saveCredentials"> {{ 'version-control.export-credentials' | translate }}
{{ 'version-control.export-credentials' | translate }} </mat-checkbox>
</mat-checkbox> <mat-checkbox formControlName="saveAttributes">
<mat-checkbox formControlName="saveAttributes"> {{ 'version-control.export-attributes' | translate }}
{{ 'version-control.export-attributes' | translate }} </mat-checkbox>
</mat-checkbox> <mat-checkbox formControlName="saveRelations">
<mat-checkbox formControlName="saveRelations"> {{ 'version-control.export-relations' | translate }}
{{ 'version-control.export-relations' | translate }} </mat-checkbox>
</mat-checkbox>
</div>
</div> </div>
</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> </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> </mat-expansion-panel>
</div> </div>
<div *ngIf="!entityTypesFormGroupArray().length"> <div *ngIf="!entityTypesFormGroupArray().length">

4
ui-ngx/src/app/modules/home/components/vc/entity-types-version-create.component.scss
View File

@ -55,5 +55,9 @@
.mat-expansion-panel-body { .mat-expansion-panel-body {
padding: 0; padding: 0;
} }
&.load .mat-expansion-panel-content {
height: 0;
visibility: hidden;
}
} }
} }

2
ui-ngx/src/app/modules/home/components/vc/entity-types-version-create.component.ts
View File

@ -74,6 +74,8 @@ export class EntityTypesVersionCreateComponent extends PageComponent implements
entityTypes = EntityType; entityTypes = EntityType;
loading = true;
constructor(protected store: Store<AppState>, constructor(protected store: Store<AppState>,
private translate: TranslateService, private translate: TranslateService,
private fb: FormBuilder) { private fb: FormBuilder) {

71
ui-ngx/src/app/modules/home/components/vc/entity-types-version-load.component.html
View File

@ -22,7 +22,8 @@
<div *ngFor="let entityTypeFormGroup of entityTypesFormGroupArray(); trackBy: trackByEntityType; <div *ngFor="let entityTypeFormGroup of entityTypesFormGroupArray(); trackBy: trackByEntityType;
let $index = index; last as isLast;" let $index = index; last as isLast;"
fxLayout="row" fxLayoutAlign="start center" [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}"> 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> <mat-expansion-panel-header>
<div fxFlex fxLayout="row" fxLayoutAlign="start center"> <div fxFlex fxLayout="row" fxLayoutAlign="start center">
<mat-panel-title> <mat-panel-title>
@ -40,44 +41,42 @@
</button> </button>
</div> </div>
</mat-expansion-panel-header> </mat-expansion-panel-header>
<ng-template matExpansionPanelContent> <div class="entity-type-config-content" fxLayout="column" fxLayoutGap="0.5em">
<div class="entity-type-config-content" fxLayout="column" fxLayoutGap="0.5em"> <mat-divider></mat-divider>
<mat-divider></mat-divider> <div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="32px">
<div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="32px"> <tb-entity-type-select
<tb-entity-type-select fxFlex
fxFlex showLabel
showLabel formControlName="entityType"
formControlName="entityType" required
required [filterAllowedEntityTypes]="false"
[filterAllowedEntityTypes]="false" [allowedEntityTypes]="allowedEntityTypes(entityTypeFormGroup)">
[allowedEntityTypes]="allowedEntityTypes(entityTypeFormGroup)"> </tb-entity-type-select>
</tb-entity-type-select> <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px" fxLayoutGap.xs="8px" formGroupName="config">
<div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px" fxLayoutGap.xs="8px" formGroupName="config"> <div fxFlex fxLayout="column" fxLayoutGap="8px">
<div fxFlex fxLayout="column" fxLayoutGap="8px"> <mat-checkbox #removeOtherEntitiesCheckbox
<mat-checkbox #removeOtherEntitiesCheckbox formControlName="removeOtherEntities"
formControlName="removeOtherEntities" (click)="onRemoveOtherEntities(removeOtherEntitiesCheckbox, entityTypeFormGroup, $event)">
(click)="onRemoveOtherEntities(removeOtherEntitiesCheckbox, entityTypeFormGroup, $event)"> {{ 'version-control.remove-other-entities' | translate }}
{{ 'version-control.remove-other-entities' | translate }} </mat-checkbox>
</mat-checkbox> <mat-checkbox formControlName="findExistingEntityByName">
<mat-checkbox formControlName="findExistingEntityByName"> {{ 'version-control.find-existing-entity-by-name' | translate }}
{{ 'version-control.find-existing-entity-by-name' | translate }} </mat-checkbox>
</mat-checkbox> </div>
</div> <div fxFlex fxLayout="column" fxLayoutGap="8px">
<div fxFlex fxLayout="column" fxLayoutGap="8px"> <mat-checkbox *ngIf="entityTypeFormGroup.get('entityType').value === entityTypes.DEVICE" formControlName="loadCredentials">
<mat-checkbox *ngIf="entityTypeFormGroup.get('entityType').value === entityTypes.DEVICE" formControlName="loadCredentials"> {{ 'version-control.load-credentials' | translate }}
{{ 'version-control.load-credentials' | translate }} </mat-checkbox>
</mat-checkbox> <mat-checkbox formControlName="loadAttributes">
<mat-checkbox formControlName="loadAttributes"> {{ 'version-control.load-attributes' | translate }}
{{ 'version-control.load-attributes' | translate }} </mat-checkbox>
</mat-checkbox> <mat-checkbox formControlName="loadRelations">
<mat-checkbox formControlName="loadRelations"> {{ 'version-control.load-relations' | translate }}
{{ 'version-control.load-relations' | translate }} </mat-checkbox>
</mat-checkbox>
</div>
</div> </div>
</div> </div>
</div> </div>
</ng-template> </div>
</mat-expansion-panel> </mat-expansion-panel>
</div> </div>
<div *ngIf="!entityTypesFormGroupArray().length"> <div *ngIf="!entityTypesFormGroupArray().length">

4
ui-ngx/src/app/modules/home/components/vc/entity-types-version-load.component.scss
View File

@ -55,5 +55,9 @@
.mat-expansion-panel-body { .mat-expansion-panel-body {
padding: 0; padding: 0;
} }
&.load .mat-expansion-panel-content {
height: 0;
visibility: hidden;
}
} }
} }

2
ui-ngx/src/app/modules/home/components/vc/entity-types-version-load.component.ts
View File

@ -68,6 +68,8 @@ export class EntityTypesVersionLoadComponent extends PageComponent implements On
entityTypes = EntityType; entityTypes = EntityType;
loading = true;
constructor(protected store: Store<AppState>, constructor(protected store: Store<AppState>,
private translate: TranslateService, private translate: TranslateService,
private popoverService: TbPopoverService, private popoverService: TbPopoverService,

4
ui-ngx/src/app/modules/home/components/vc/entity-versions-table.component.ts
View File

@ -248,7 +248,7 @@ export class EntityVersionsTableComponent extends PageComponent implements OnIni
} }
}, },
{maxHeight: '90vh', height: '100%', padding: '10px'}, {maxHeight: '90vh', height: '100%', padding: '10px'},
{width: '600px', minWidth: '100%', maxWidth: '100%'}, {}, false); {}, {}, false);
complexCreateVersionPopover.tbComponentRef.instance.popoverComponent = complexCreateVersionPopover; complexCreateVersionPopover.tbComponentRef.instance.popoverComponent = complexCreateVersionPopover;
} }
} }
@ -321,7 +321,7 @@ export class EntityVersionsTableComponent extends PageComponent implements OnIni
} }
}, },
{maxHeight: '80vh', height: '100%', padding: '10px'}, {maxHeight: '80vh', height: '100%', padding: '10px'},
{width: '600px', minWidth: '100%', maxWidth: '100%'}, {}, false); {}, {}, false);
restoreEntitiesVersionPopover.tbComponentRef.instance.popoverComponent = restoreEntitiesVersionPopover; restoreEntitiesVersionPopover.tbComponentRef.instance.popoverComponent = restoreEntitiesVersionPopover;
} }
} }