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

UI: Refactoring attributes-table component, add changeDetection for load widget bundle

Browse Source
This commit is contained in:
Vladyslav_Prykhodko 2021-08-31 18:57:07 +03:00
parent bde3ff8435
commit 499a6dbe7f
3 changed files with 18 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.html
View File

@ -112,8 +112,8 @@
fxFlex fxFlex
[selectFirstBundle]="false" [selectFirstBundle]="false"
[selectBundleAlias]="selectedWidgetsBundleAlias" [selectBundleAlias]="selectedWidgetsBundleAlias"
[(ngModel)]="widgetsBundle" [ngModel]="null"
(ngModelChange)="onWidgetsBundleChanged()"> (ngModelChange)="onWidgetsBundleChanged($event)">
</tb-widgets-bundle-select> </tb-widgets-bundle-select>
</div> </div>
<button mat-raised-button [fxShow]="widgetsList.length > 0" <button mat-raised-button [fxShow]="widgetsList.length > 0"
@ -245,11 +245,11 @@
</ngx-hm-carousel> </ngx-hm-carousel>
<span translate *ngIf="mode === 'widget' && widgetsLoaded && <span translate *ngIf="mode === 'widget' && widgetsLoaded &&
widgetsList.length === 0 && widgetsList.length === 0 &&
widgetsBundle" widgetBundleSet"
fxFlex fxLayoutAlign="center center" fxFlex fxLayoutAlign="center center"
style="display: flex;" style="display: flex;"
class="mat-headline">widgets-bundle.empty</span> class="mat-headline">widgets-bundle.empty</span>
<span translate *ngIf="mode === 'widget' && !widgetsBundle" <span translate *ngIf="mode === 'widget' && !widgetBundleSet"
fxFlex fxLayoutAlign="center center" fxFlex fxLayoutAlign="center center"
style="display: flex;" style="display: flex;"
class="mat-headline">widget.select-widgets-bundle</span> class="mat-headline">widget.select-widgets-bundle</span>

20
ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.ts
View File

@ -17,6 +17,7 @@
import { import {
AfterViewInit, AfterViewInit,
ChangeDetectionStrategy, ChangeDetectionStrategy,
ChangeDetectorRef,
Component, Component,
ElementRef, ElementRef,
Injector, Injector,
@ -118,7 +119,7 @@ export class AttributeTableComponent extends PageComponent implements AfterViewI
viewsInited = false; viewsInited = false;
selectedWidgetsBundleAlias: string = null; selectedWidgetsBundleAlias: string = null;
widgetsBundle: WidgetsBundle = null; widgetBundleSet = false;
widgetsLoaded = false; widgetsLoaded = false;
widgetsCarouselIndex = 0; widgetsCarouselIndex = 0;
widgetsList: Array<Array<Widget>> = []; widgetsList: Array<Array<Widget>> = [];
@ -182,7 +183,8 @@ export class AttributeTableComponent extends PageComponent implements AfterViewI
private utils: UtilsService, private utils: UtilsService,
private dashboardUtils: DashboardUtilsService, private dashboardUtils: DashboardUtilsService,
private widgetService: WidgetService, private widgetService: WidgetService,
private zone: NgZone) { private zone: NgZone,
private cd: ChangeDetectorRef) {
super(store); super(store);
this.dirtyValue = !this.activeValue; this.dirtyValue = !this.activeValue;
const sortOrder: SortOrder = { property: 'key', direction: Direction.ASC }; const sortOrder: SortOrder = { property: 'key', direction: Direction.ASC };
@ -380,8 +382,8 @@ export class AttributeTableComponent extends PageComponent implements AfterViewI
this.widgetsList = []; this.widgetsList = [];
this.widgetsListCache = []; this.widgetsListCache = [];
this.widgetsLoaded = false; this.widgetsLoaded = false;
this.widgetBundleSet = false;
this.widgetsCarouselIndex = 0; this.widgetsCarouselIndex = 0;
this.widgetsBundle = null;
this.selectedWidgetsBundleAlias = 'cards'; this.selectedWidgetsBundleAlias = 'cards';
const entityAlias: EntityAlias = { const entityAlias: EntityAlias = {
@ -440,15 +442,17 @@ export class AttributeTableComponent extends PageComponent implements AfterViewI
} }
} }
onWidgetsBundleChanged() { onWidgetsBundleChanged(widgetsBundle: WidgetsBundle) {
if (this.mode === 'widget') { if (this.mode === 'widget') {
this.widgetsList = []; this.widgetsList = [];
this.widgetsListCache = []; this.widgetsListCache = [];
this.widgetsCarouselIndex = 0; this.widgetsCarouselIndex = 0;
if (this.widgetsBundle) { this.widgetBundleSet = false;
if (widgetsBundle) {
this.widgetsLoaded = false; this.widgetsLoaded = false;
const bundleAlias = this.widgetsBundle.alias; this.widgetBundleSet = true;
const isSystem = this.widgetsBundle.tenantId.id === NULL_UUID; const bundleAlias = widgetsBundle.alias;
const isSystem = widgetsBundle.tenantId.id === NULL_UUID;
this.widgetService.getBundleWidgetTypes(bundleAlias, isSystem).subscribe( this.widgetService.getBundleWidgetTypes(bundleAlias, isSystem).subscribe(
(widgetTypes) => { (widgetTypes) => {
widgetTypes = widgetTypes.sort((a, b) => { widgetTypes = widgetTypes.sort((a, b) => {
@ -486,6 +490,7 @@ export class AttributeTableComponent extends PageComponent implements AfterViewI
} }
} }
this.widgetsLoaded = true; this.widgetsLoaded = true;
this.cd.markForCheck();
} }
); );
} }
@ -510,6 +515,7 @@ export class AttributeTableComponent extends PageComponent implements AfterViewI
exitWidgetMode() { exitWidgetMode() {
this.selectedWidgetsBundleAlias = null; this.selectedWidgetsBundleAlias = null;
this.widgetBundleSet = false;
this.mode = 'default'; this.mode = 'default';
} }

1
ui-ngx/src/app/shared/components/widgets-bundle-select.component.ts
View File

@ -142,6 +142,7 @@ export class WidgetsBundleSelectComponent implements ControlValueAccessor, OnIni
} }
} else { } else {
this.widgetsBundle = null; this.widgetsBundle = null;
this.updateView();
} }
} }