Commit d8d04debbd5f4d4aea4f7f1da787586618e8f27d
Committed by
GitHub
GitHub
Merge pull request #3791 from vvlladd28/improvement/table/trackBy
UI: Added trackBy in table widget
Showing
6 changed files
with
32 additions
and
16 deletions
| @@ -61,7 +61,7 @@ | @@ -61,7 +61,7 @@ | ||
| 61 | </div> | 61 | </div> |
| 62 | </mat-toolbar> | 62 | </mat-toolbar> |
| 63 | <div fxFlex class="table-container"> | 63 | <div fxFlex class="table-container"> |
| 64 | - <table mat-table [dataSource]="alarmsDatasource" [trackBy]="trackByRowIndex" | 64 | + <table mat-table [dataSource]="alarmsDatasource" [trackBy]="trackByAlarmId" |
| 65 | matSort [matSortActive]="sortOrderProperty" [matSortDirection]="pageLinkSortDirection()" matSortDisableClear> | 65 | matSort [matSortActive]="sortOrderProperty" [matSortDirection]="pageLinkSortDirection()" matSortDisableClear> |
| 66 | <ng-container matColumnDef="select" sticky> | 66 | <ng-container matColumnDef="select" sticky> |
| 67 | <mat-header-cell *matHeaderCellDef style="width: 30px;"> | 67 | <mat-header-cell *matHeaderCellDef style="width: 30px;"> |
| @@ -96,7 +96,7 @@ | @@ -96,7 +96,7 @@ | ||
| 96 | width: (actionCellDescriptors.length * 40) + 'px' }"> | 96 | width: (actionCellDescriptors.length * 40) + 'px' }"> |
| 97 | <div fxHide fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end"> | 97 | <div fxHide fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end"> |
| 98 | <button mat-button mat-icon-button [disabled]="(isLoading$ | async) || !actionEnabled(alarm, actionDescriptor)" | 98 | <button mat-button mat-icon-button [disabled]="(isLoading$ | async) || !actionEnabled(alarm, actionDescriptor)" |
| 99 | - *ngFor="let actionDescriptor of actionCellDescriptors" | 99 | + *ngFor="let actionDescriptor of actionCellDescriptors; trackBy: trackByActionCellDescriptionId" |
| 100 | matTooltip="{{ actionDescriptor.displayName }}" | 100 | matTooltip="{{ actionDescriptor.displayName }}" |
| 101 | matTooltipPosition="above" | 101 | matTooltipPosition="above" |
| 102 | (click)="onActionButtonClick($event, alarm, actionDescriptor)"> | 102 | (click)="onActionButtonClick($event, alarm, actionDescriptor)"> |
| @@ -110,7 +110,7 @@ | @@ -110,7 +110,7 @@ | ||
| 110 | <mat-icon class="material-icons">more_vert</mat-icon> | 110 | <mat-icon class="material-icons">more_vert</mat-icon> |
| 111 | </button> | 111 | </button> |
| 112 | <mat-menu #cellActionsMenu="matMenu" xPosition="before"> | 112 | <mat-menu #cellActionsMenu="matMenu" xPosition="before"> |
| 113 | - <button mat-menu-item *ngFor="let actionDescriptor of actionCellDescriptors" | 113 | + <button mat-menu-item *ngFor="let actionDescriptor of actionCellDescriptors; trackBy: trackByActionCellDescriptionId" |
| 114 | [disabled]="(isLoading$ | async) || !actionEnabled(alarm, actionDescriptor)" | 114 | [disabled]="(isLoading$ | async) || !actionEnabled(alarm, actionDescriptor)" |
| 115 | (click)="onActionButtonClick($event, alarm, actionDescriptor)"> | 115 | (click)="onActionButtonClick($event, alarm, actionDescriptor)"> |
| 116 | <mat-icon>{{actionDescriptor.icon}}</mat-icon> | 116 | <mat-icon>{{actionDescriptor.icon}}</mat-icon> |
| @@ -563,8 +563,12 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit, | @@ -563,8 +563,12 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit, | ||
| 563 | return column.def; | 563 | return column.def; |
| 564 | } | 564 | } |
| 565 | 565 | ||
| 566 | - public trackByRowIndex(index: number) { | ||
| 567 | - return index; | 566 | + public trackByAlarmId(index: number, alarm: AlarmData) { |
| 567 | + return alarm.id.id; | ||
| 568 | + } | ||
| 569 | + | ||
| 570 | + public trackByActionCellDescriptionId(index: number, action: WidgetActionDescriptor) { | ||
| 571 | + return action.id; | ||
| 568 | } | 572 | } |
| 569 | 573 | ||
| 570 | public headerStyle(key: EntityColumn): any { | 574 | public headerStyle(key: EntityColumn): any { |
| @@ -38,7 +38,7 @@ | @@ -38,7 +38,7 @@ | ||
| 38 | </div> | 38 | </div> |
| 39 | </mat-toolbar> | 39 | </mat-toolbar> |
| 40 | <div fxFlex class="table-container"> | 40 | <div fxFlex class="table-container"> |
| 41 | - <table mat-table [dataSource]="entityDatasource" [trackBy]="trackByRowIndex" | 41 | + <table mat-table [dataSource]="entityDatasource" [trackBy]="trackByEntityId" |
| 42 | matSort [matSortActive]="sortOrderProperty" [matSortDirection]="pageLinkSortDirection()" matSortDisableClear> | 42 | matSort [matSortActive]="sortOrderProperty" [matSortDirection]="pageLinkSortDirection()" matSortDisableClear> |
| 43 | <ng-container [matColumnDef]="column.def" *ngFor="let column of columns; trackBy: trackByColumnDef;"> | 43 | <ng-container [matColumnDef]="column.def" *ngFor="let column of columns; trackBy: trackByColumnDef;"> |
| 44 | <mat-header-cell [ngStyle]="headerStyle(column)" *matHeaderCellDef mat-sort-header> {{ column.title }} </mat-header-cell> | 44 | <mat-header-cell [ngStyle]="headerStyle(column)" *matHeaderCellDef mat-sort-header> {{ column.title }} </mat-header-cell> |
| @@ -57,7 +57,7 @@ | @@ -57,7 +57,7 @@ | ||
| 57 | width: (actionCellDescriptors.length * 40) + 'px' }"> | 57 | width: (actionCellDescriptors.length * 40) + 'px' }"> |
| 58 | <div fxHide fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end"> | 58 | <div fxHide fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end"> |
| 59 | <button mat-button mat-icon-button [disabled]="isLoading$ | async" | 59 | <button mat-button mat-icon-button [disabled]="isLoading$ | async" |
| 60 | - *ngFor="let actionDescriptor of actionCellDescriptors" | 60 | + *ngFor="let actionDescriptor of actionCellDescriptors; trackBy: trackByActionCellDescriptionId" |
| 61 | matTooltip="{{ actionDescriptor.displayName }}" | 61 | matTooltip="{{ actionDescriptor.displayName }}" |
| 62 | matTooltipPosition="above" | 62 | matTooltipPosition="above" |
| 63 | (click)="onActionButtonClick($event, entity, actionDescriptor)"> | 63 | (click)="onActionButtonClick($event, entity, actionDescriptor)"> |
| @@ -71,7 +71,7 @@ | @@ -71,7 +71,7 @@ | ||
| 71 | <mat-icon class="material-icons">more_vert</mat-icon> | 71 | <mat-icon class="material-icons">more_vert</mat-icon> |
| 72 | </button> | 72 | </button> |
| 73 | <mat-menu #cellActionsMenu="matMenu" xPosition="before"> | 73 | <mat-menu #cellActionsMenu="matMenu" xPosition="before"> |
| 74 | - <button mat-menu-item *ngFor="let actionDescriptor of actionCellDescriptors" | 74 | + <button mat-menu-item *ngFor="let actionDescriptor of actionCellDescriptors; trackBy: trackByActionCellDescriptionId" |
| 75 | [disabled]="isLoading$ | async" | 75 | [disabled]="isLoading$ | async" |
| 76 | (click)="onActionButtonClick($event, entity, actionDescriptor)"> | 76 | (click)="onActionButtonClick($event, entity, actionDescriptor)"> |
| 77 | <mat-icon>{{actionDescriptor.icon}}</mat-icon> | 77 | <mat-icon>{{actionDescriptor.icon}}</mat-icon> |
| @@ -486,8 +486,12 @@ export class EntitiesTableWidgetComponent extends PageComponent implements OnIni | @@ -486,8 +486,12 @@ export class EntitiesTableWidgetComponent extends PageComponent implements OnIni | ||
| 486 | return column.def; | 486 | return column.def; |
| 487 | } | 487 | } |
| 488 | 488 | ||
| 489 | - public trackByRowIndex(index: number) { | ||
| 490 | - return index; | 489 | + public trackByEntityId(index: number, entity: EntityData) { |
| 490 | + return entity.id.id; | ||
| 491 | + } | ||
| 492 | + | ||
| 493 | + public trackByActionCellDescriptionId(index: number, action: WidgetActionDescriptor) { | ||
| 494 | + return action.id; | ||
| 491 | } | 495 | } |
| 492 | 496 | ||
| 493 | public headerStyle(key: EntityColumn): any { | 497 | public headerStyle(key: EntityColumn): any { |
| @@ -39,9 +39,9 @@ | @@ -39,9 +39,9 @@ | ||
| 39 | </mat-toolbar> | 39 | </mat-toolbar> |
| 40 | <mat-tab-group [ngClass]="{'tb-headless': sources.length === 1}" fxFlex | 40 | <mat-tab-group [ngClass]="{'tb-headless': sources.length === 1}" fxFlex |
| 41 | [(selectedIndex)]="sourceIndex" (selectedIndexChange)="onSourceIndexChanged()"> | 41 | [(selectedIndex)]="sourceIndex" (selectedIndexChange)="onSourceIndexChanged()"> |
| 42 | - <mat-tab *ngFor="let source of sources" label="{{ source.datasource.name }}"> | 42 | + <mat-tab *ngFor="let source of sources; trackBy: trackBySourcesIndex" label="{{ source.datasource.name }}"> |
| 43 | <div fxFlex class="table-container"> | 43 | <div fxFlex class="table-container"> |
| 44 | - <table mat-table [dataSource]="source.timeseriesDatasource" [trackBy]="trackByRowIndex" | 44 | + <table mat-table [dataSource]="source.timeseriesDatasource" [trackBy]="trackByRowTimestamp" |
| 45 | matSort [matSortActive]="source.pageLink.sortOrder.property" [matSortDirection]="source.pageLink.sortDirection()" matSortDisableClear> | 45 | matSort [matSortActive]="source.pageLink.sortOrder.property" [matSortDirection]="source.pageLink.sortDirection()" matSortDisableClear> |
| 46 | <ng-container *ngIf="showTimestamp" [matColumnDef]="'0'"> | 46 | <ng-container *ngIf="showTimestamp" [matColumnDef]="'0'"> |
| 47 | <mat-header-cell *matHeaderCellDef mat-sort-header>Timestamp</mat-header-cell> | 47 | <mat-header-cell *matHeaderCellDef mat-sort-header>Timestamp</mat-header-cell> |
| @@ -67,7 +67,7 @@ | @@ -67,7 +67,7 @@ | ||
| 67 | width: (actionCellDescriptors.length * 40) + 'px' }"> | 67 | width: (actionCellDescriptors.length * 40) + 'px' }"> |
| 68 | <div fxHide fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end"> | 68 | <div fxHide fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end"> |
| 69 | <button mat-button mat-icon-button [disabled]="isLoading$ | async" | 69 | <button mat-button mat-icon-button [disabled]="isLoading$ | async" |
| 70 | - *ngFor="let actionDescriptor of actionCellDescriptors" | 70 | + *ngFor="let actionDescriptor of actionCellDescriptors; trackBy: trackByActionCellDescriptionId" |
| 71 | matTooltip="{{ actionDescriptor.displayName }}" | 71 | matTooltip="{{ actionDescriptor.displayName }}" |
| 72 | matTooltipPosition="above" | 72 | matTooltipPosition="above" |
| 73 | (click)="onActionButtonClick($event, row, actionDescriptor)"> | 73 | (click)="onActionButtonClick($event, row, actionDescriptor)"> |
| @@ -81,7 +81,7 @@ | @@ -81,7 +81,7 @@ | ||
| 81 | <mat-icon class="material-icons">more_vert</mat-icon> | 81 | <mat-icon class="material-icons">more_vert</mat-icon> |
| 82 | </button> | 82 | </button> |
| 83 | <mat-menu #cellActionsMenu="matMenu" xPosition="before"> | 83 | <mat-menu #cellActionsMenu="matMenu" xPosition="before"> |
| 84 | - <button mat-menu-item *ngFor="let actionDescriptor of actionCellDescriptors" | 84 | + <button mat-menu-item *ngFor="let actionDescriptor of actionCellDescriptors; trackBy: trackByActionCellDescriptionId" |
| 85 | [disabled]="isLoading$ | async" | 85 | [disabled]="isLoading$ | async" |
| 86 | (click)="onActionButtonClick($event, row, actionDescriptor)"> | 86 | (click)="onActionButtonClick($event, row, actionDescriptor)"> |
| 87 | <mat-icon>{{actionDescriptor.icon}}</mat-icon> | 87 | <mat-icon>{{actionDescriptor.icon}}</mat-icon> |
| @@ -366,8 +366,16 @@ export class TimeseriesTableWidgetComponent extends PageComponent implements OnI | @@ -366,8 +366,16 @@ export class TimeseriesTableWidgetComponent extends PageComponent implements OnI | ||
| 366 | return header.index; | 366 | return header.index; |
| 367 | } | 367 | } |
| 368 | 368 | ||
| 369 | - public trackByRowIndex(index: number) { | ||
| 370 | - return index; | 369 | + public trackByRowTimestamp(index: number, row: TimeseriesRow) { |
| 370 | + return row[0]; | ||
| 371 | + } | ||
| 372 | + | ||
| 373 | + public trackByActionCellDescriptionId(index: number, action: WidgetActionDescriptor) { | ||
| 374 | + return action.id; | ||
| 375 | + } | ||
| 376 | + | ||
| 377 | + public trackBySourcesIndex(index: number, source: TimeseriesTableSource) { | ||
| 378 | + return source.datasource.entityId; | ||
| 371 | } | 379 | } |
| 372 | 380 | ||
| 373 | public cellStyle(source: TimeseriesTableSource, index: number, value: any): any { | 381 | public cellStyle(source: TimeseriesTableSource, index: number, value: any): any { |