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

Merge pull request #3791 from vvlladd28/improvement/table/trackBy 

UI: Added trackBy in table widget
pull/3797/head
Igor Kulikov 6 years ago
committed by GitHub
parent
e32e1883d1 2cf6de81c0
commit
d8d04debbd
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 32 additions and 16 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.html
  2. 8
      ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.ts
  3. 6
      ui-ngx/src/app/modules/home/components/widget/lib/entities-table-widget.component.html
  4. 8
      ui-ngx/src/app/modules/home/components/widget/lib/entities-table-widget.component.ts
  5. 8
      ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.html
  6. 12
      ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.ts

6
ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.html
View File

@ -61,7 +61,7 @@
</div>
</mat-toolbar>
<div fxFlex class="table-container">
<table mat-table [dataSource]="alarmsDatasource" [trackBy]="trackByRowIndex"
<table mat-table [dataSource]="alarmsDatasource" [trackBy]="trackByAlarmId"
matSort [matSortActive]="sortOrderProperty" [matSortDirection]="pageLinkSortDirection()" matSortDisableClear>
<ng-container matColumnDef="select" sticky>
<mat-header-cell *matHeaderCellDef style="width: 30px;">
@ -96,7 +96,7 @@
width: (actionCellDescriptors.length * 40) + 'px' }">
<div fxHide fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end">
<button mat-button mat-icon-button [disabled]="(isLoading$ | async) || !actionEnabled(alarm, actionDescriptor)"
*ngFor="let actionDescriptor of actionCellDescriptors"
*ngFor="let actionDescriptor of actionCellDescriptors; trackBy: trackByActionCellDescriptionId"
matTooltip="{{ actionDescriptor.displayName }}"
matTooltipPosition="above"
(click)="onActionButtonClick($event, alarm, actionDescriptor)">
@ -110,7 +110,7 @@
<mat-icon class="material-icons">more_vert</mat-icon>
</button>
<mat-menu #cellActionsMenu="matMenu" xPosition="before">
<button mat-menu-item *ngFor="let actionDescriptor of actionCellDescriptors"
<button mat-menu-item *ngFor="let actionDescriptor of actionCellDescriptors; trackBy: trackByActionCellDescriptionId"
[disabled]="(isLoading$ | async) || !actionEnabled(alarm, actionDescriptor)"
(click)="onActionButtonClick($event, alarm, actionDescriptor)">
<mat-icon>{{actionDescriptor.icon}}</mat-icon>

8
ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.ts
View File

@ -563,8 +563,12 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit,
return column.def;
}
public trackByRowIndex(index: number) {
return index;
public trackByAlarmId(index: number, alarm: AlarmData) {
return alarm.id.id;
}
public trackByActionCellDescriptionId(index: number, action: WidgetActionDescriptor) {
return action.id;
}
public headerStyle(key: EntityColumn): any {

6
ui-ngx/src/app/modules/home/components/widget/lib/entities-table-widget.component.html
View File

@ -38,7 +38,7 @@
</div>
</mat-toolbar>
<div fxFlex class="table-container">
<table mat-table [dataSource]="entityDatasource" [trackBy]="trackByRowIndex"
<table mat-table [dataSource]="entityDatasource" [trackBy]="trackByEntityId"
matSort [matSortActive]="sortOrderProperty" [matSortDirection]="pageLinkSortDirection()" matSortDisableClear>
<ng-container [matColumnDef]="column.def" *ngFor="let column of columns; trackBy: trackByColumnDef;">
<mat-header-cell [ngStyle]="headerStyle(column)" *matHeaderCellDef mat-sort-header> {{ column.title }} </mat-header-cell>
@ -57,7 +57,7 @@
width: (actionCellDescriptors.length * 40) + 'px' }">
<div fxHide fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end">
<button mat-button mat-icon-button [disabled]="isLoading$ | async"
*ngFor="let actionDescriptor of actionCellDescriptors"
*ngFor="let actionDescriptor of actionCellDescriptors; trackBy: trackByActionCellDescriptionId"
matTooltip="{{ actionDescriptor.displayName }}"
matTooltipPosition="above"
(click)="onActionButtonClick($event, entity, actionDescriptor)">
@ -71,7 +71,7 @@
<mat-icon class="material-icons">more_vert</mat-icon>
</button>
<mat-menu #cellActionsMenu="matMenu" xPosition="before">
<button mat-menu-item *ngFor="let actionDescriptor of actionCellDescriptors"
<button mat-menu-item *ngFor="let actionDescriptor of actionCellDescriptors; trackBy: trackByActionCellDescriptionId"
[disabled]="isLoading$ | async"
(click)="onActionButtonClick($event, entity, actionDescriptor)">
<mat-icon>{{actionDescriptor.icon}}</mat-icon>

8
ui-ngx/src/app/modules/home/components/widget/lib/entities-table-widget.component.ts
View File

@ -486,8 +486,12 @@ export class EntitiesTableWidgetComponent extends PageComponent implements OnIni
return column.def;
}
public trackByRowIndex(index: number) {
return index;
public trackByEntityId(index: number, entity: EntityData) {
return entity.id.id;
}
public trackByActionCellDescriptionId(index: number, action: WidgetActionDescriptor) {
return action.id;
}
public headerStyle(key: EntityColumn): any {

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

@ -39,9 +39,9 @@
</mat-toolbar>
<mat-tab-group [ngClass]="{'tb-headless': sources.length === 1}" fxFlex
[(selectedIndex)]="sourceIndex" (selectedIndexChange)="onSourceIndexChanged()">
<mat-tab *ngFor="let source of sources" label="{{ source.datasource.name }}">
<mat-tab *ngFor="let source of sources; trackBy: trackBySourcesIndex" label="{{ source.datasource.name }}">
<div fxFlex class="table-container">
<table mat-table [dataSource]="source.timeseriesDatasource" [trackBy]="trackByRowIndex"
<table mat-table [dataSource]="source.timeseriesDatasource" [trackBy]="trackByRowTimestamp"
matSort [matSortActive]="source.pageLink.sortOrder.property" [matSortDirection]="source.pageLink.sortDirection()" matSortDisableClear>
<ng-container *ngIf="showTimestamp" [matColumnDef]="'0'">
<mat-header-cell *matHeaderCellDef mat-sort-header>Timestamp</mat-header-cell>
@ -67,7 +67,7 @@
width: (actionCellDescriptors.length * 40) + 'px' }">
<div fxHide fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end">
<button mat-button mat-icon-button [disabled]="isLoading$ | async"
*ngFor="let actionDescriptor of actionCellDescriptors"
*ngFor="let actionDescriptor of actionCellDescriptors; trackBy: trackByActionCellDescriptionId"
matTooltip="{{ actionDescriptor.displayName }}"
matTooltipPosition="above"
(click)="onActionButtonClick($event, row, actionDescriptor)">
@ -81,7 +81,7 @@
<mat-icon class="material-icons">more_vert</mat-icon>
</button>
<mat-menu #cellActionsMenu="matMenu" xPosition="before">
<button mat-menu-item *ngFor="let actionDescriptor of actionCellDescriptors"
<button mat-menu-item *ngFor="let actionDescriptor of actionCellDescriptors; trackBy: trackByActionCellDescriptionId"
[disabled]="isLoading$ | async"
(click)="onActionButtonClick($event, row, actionDescriptor)">
<mat-icon>{{actionDescriptor.icon}}</mat-icon>

12
ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.ts
View File

@ -366,8 +366,16 @@ export class TimeseriesTableWidgetComponent extends PageComponent implements OnI
return header.index;
}
public trackByRowIndex(index: number) {
return index;
public trackByRowTimestamp(index: number, row: TimeseriesRow) {
return row[0];
}
public trackByActionCellDescriptionId(index: number, action: WidgetActionDescriptor) {
return action.id;
}
public trackBySourcesIndex(index: number, source: TimeseriesTableSource) {
return source.datasource.entityId;
}
public cellStyle(source: TimeseriesTableSource, index: number, value: any): any {

Write Preview
Loading…
Cancel
Save