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
[selectFirstBundle]="false"
[selectBundleAlias]="selectedWidgetsBundleAlias"
[(ngModel)]="widgetsBundle"
(ngModelChange)="onWidgetsBundleChanged()">
[ngModel]="null"
(ngModelChange)="onWidgetsBundleChanged($event)">
</tb-widgets-bundle-select>
</div>
<button mat-raised-button [fxShow]="widgetsList.length > 0"
@ -245,11 +245,11 @@
</ngx-hm-carousel>
<span translate *ngIf="mode === 'widget' && widgetsLoaded &&
widgetsList.length === 0 &&
widgetsBundle"
widgetBundleSet"
fxFlex fxLayoutAlign="center center"
style="display: flex;"
class="mat-headline">widgets-bundle.empty</span>
<span translate *ngIf="mode === 'widget' && !widgetsBundle"
<span translate *ngIf="mode === 'widget' && !widgetBundleSet"
fxFlex fxLayoutAlign="center center"
style="display: flex;"
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 {
AfterViewInit,
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
ElementRef,
Injector,
@ -118,7 +119,7 @@ export class AttributeTableComponent extends PageComponent implements AfterViewI
viewsInited = false;
selectedWidgetsBundleAlias: string = null;
widgetsBundle: WidgetsBundle = null;
widgetBundleSet = false;
widgetsLoaded = false;
widgetsCarouselIndex = 0;
widgetsList: Array<Array<Widget>> = [];
@ -182,7 +183,8 @@ export class AttributeTableComponent extends PageComponent implements AfterViewI
private utils: UtilsService,
private dashboardUtils: DashboardUtilsService,
private widgetService: WidgetService,
private zone: NgZone) {
private zone: NgZone,
private cd: ChangeDetectorRef) {
super(store);
this.dirtyValue = !this.activeValue;
const sortOrder: SortOrder = { property: 'key', direction: Direction.ASC };
@ -380,8 +382,8 @@ export class AttributeTableComponent extends PageComponent implements AfterViewI
this.widgetsList = [];
this.widgetsListCache = [];
this.widgetsLoaded = false;
this.widgetBundleSet = false;
this.widgetsCarouselIndex = 0;
this.widgetsBundle = null;
this.selectedWidgetsBundleAlias = 'cards';
const entityAlias: EntityAlias = {
@ -440,15 +442,17 @@ export class AttributeTableComponent extends PageComponent implements AfterViewI
}
}
onWidgetsBundleChanged() {
onWidgetsBundleChanged(widgetsBundle: WidgetsBundle) {
if (this.mode === 'widget') {
this.widgetsList = [];
this.widgetsListCache = [];
this.widgetsCarouselIndex = 0;
if (this.widgetsBundle) {
this.widgetBundleSet = false;
if (widgetsBundle) {
this.widgetsLoaded = false;
const bundleAlias = this.widgetsBundle.alias;
const isSystem = this.widgetsBundle.tenantId.id === NULL_UUID;
this.widgetBundleSet = true;
const bundleAlias = widgetsBundle.alias;
const isSystem = widgetsBundle.tenantId.id === NULL_UUID;
this.widgetService.getBundleWidgetTypes(bundleAlias, isSystem).subscribe(
(widgetTypes) => {
widgetTypes = widgetTypes.sort((a, b) => {
@ -486,6 +490,7 @@ export class AttributeTableComponent extends PageComponent implements AfterViewI
}
}
this.widgetsLoaded = true;
this.cd.markForCheck();
}
);
}
@ -510,6 +515,7 @@ export class AttributeTableComponent extends PageComponent implements AfterViewI
exitWidgetMode() {
this.selectedWidgetsBundleAlias = null;
this.widgetBundleSet = false;
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 {
this.widgetsBundle = null;
this.updateView();
}
}