tsai
/
thingsboard
mirror of https://github.com/thingsboard/thingsboard.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

UI: Fixed responsive create/restore complex version

pull/6963/head
Vladyslav_Prykhodko 4 years ago
parent
58e418578c
commit
a60ecd1372
7 changed files with 97 additions and 87 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 97
      ui-ngx/src/app/modules/home/components/vc/entity-types-version-create.component.html
  2. 4
      ui-ngx/src/app/modules/home/components/vc/entity-types-version-create.component.scss
  3. 2
      ui-ngx/src/app/modules/home/components/vc/entity-types-version-create.component.ts
  4. 71
      ui-ngx/src/app/modules/home/components/vc/entity-types-version-load.component.html
  5. 4
      ui-ngx/src/app/modules/home/components/vc/entity-types-version-load.component.scss
  6. 2
      ui-ngx/src/app/modules/home/components/vc/entity-types-version-load.component.ts
  7. 4
      ui-ngx/src/app/modules/home/components/vc/entity-versions-table.component.ts

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;
} }
} }

Write Preview
Loading…
Cancel
Save