简柏林 / thingskit · Commits

Commit 2cf6de81c0227aea231e06fbb89b3f90b1278c39

Authored by Vladyslav_Prykhodko
1 parent e32e1883

UI: Added trackBy in table widget

Inline Side-by-side
Showing 6 changed files with 32 additions and 16 deletions
... ... @@ -61,7 +61,7 @@
61 61 </div>
62 62 </mat-toolbar>
63 63 <div fxFlex class="table-container">
64   - <table mat-table [dataSource]="alarmsDatasource" [trackBy]="trackByRowIndex"
  64 + <table mat-table [dataSource]="alarmsDatasource" [trackBy]="trackByAlarmId"
65 65 matSort [matSortActive]="sortOrderProperty" [matSortDirection]="pageLinkSortDirection()" matSortDisableClear>
66 66 <ng-container matColumnDef="select" sticky>
67 67 <mat-header-cell *matHeaderCellDef style="width: 30px;">
... ... @@ -96,7 +96,7 @@
96 96 width: (actionCellDescriptors.length * 40) + 'px' }">
97 97 <div fxHide fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end">
98 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 100 matTooltip="{{ actionDescriptor.displayName }}"
101 101 matTooltipPosition="above"
102 102 (click)="onActionButtonClick($event, alarm, actionDescriptor)">
... ... @@ -110,7 +110,7 @@
110 110 <mat-icon class="material-icons">more_vert</mat-icon>
111 111 </button>
112 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 114 [disabled]="(isLoading$ | async) || !actionEnabled(alarm, actionDescriptor)"
115 115 (click)="onActionButtonClick($event, alarm, actionDescriptor)">
116 116 <mat-icon>{{actionDescriptor.icon}}</mat-icon>
... ...
... ... @@ -563,8 +563,12 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit,
563 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 574 public headerStyle(key: EntityColumn): any {
... ...
... ... @@ -38,7 +38,7 @@
38 38 </div>
39 39 </mat-toolbar>
40 40 <div fxFlex class="table-container">
41   - <table mat-table [dataSource]="entityDatasource" [trackBy]="trackByRowIndex"
  41 + <table mat-table [dataSource]="entityDatasource" [trackBy]="trackByEntityId"
42 42 matSort [matSortActive]="sortOrderProperty" [matSortDirection]="pageLinkSortDirection()" matSortDisableClear>
43 43 <ng-container [matColumnDef]="column.def" *ngFor="let column of columns; trackBy: trackByColumnDef;">
44 44 <mat-header-cell [ngStyle]="headerStyle(column)" *matHeaderCellDef mat-sort-header> {{ column.title }} </mat-header-cell>
... ... @@ -57,7 +57,7 @@
57 57 width: (actionCellDescriptors.length * 40) + 'px' }">
58 58 <div fxHide fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end">
59 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 61 matTooltip="{{ actionDescriptor.displayName }}"
62 62 matTooltipPosition="above"
63 63 (click)="onActionButtonClick($event, entity, actionDescriptor)">
... ... @@ -71,7 +71,7 @@
71 71 <mat-icon class="material-icons">more_vert</mat-icon>
72 72 </button>
73 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 75 [disabled]="isLoading$ | async"
76 76 (click)="onActionButtonClick($event, entity, actionDescriptor)">
77 77 <mat-icon>{{actionDescriptor.icon}}</mat-icon>
... ...
... ... @@ -486,8 +486,12 @@ export class EntitiesTableWidgetComponent extends PageComponent implements OnIni
486 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 497 public headerStyle(key: EntityColumn): any {
... ...
... ... @@ -39,9 +39,9 @@
39 39 </mat-toolbar>
40 40 <mat-tab-group [ngClass]="{'tb-headless': sources.length === 1}" fxFlex
41 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 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 45 matSort [matSortActive]="source.pageLink.sortOrder.property" [matSortDirection]="source.pageLink.sortDirection()" matSortDisableClear>
46 46 <ng-container *ngIf="showTimestamp" [matColumnDef]="'0'">
47 47 <mat-header-cell *matHeaderCellDef mat-sort-header>Timestamp</mat-header-cell>
... ... @@ -67,7 +67,7 @@
67 67 width: (actionCellDescriptors.length * 40) + 'px' }">
68 68 <div fxHide fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end">
69 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 71 matTooltip="{{ actionDescriptor.displayName }}"
72 72 matTooltipPosition="above"
73 73 (click)="onActionButtonClick($event, row, actionDescriptor)">
... ... @@ -81,7 +81,7 @@
81 81 <mat-icon class="material-icons">more_vert</mat-icon>
82 82 </button>
83 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 85 [disabled]="isLoading$ | async"
86 86 (click)="onActionButtonClick($event, row, actionDescriptor)">
87 87 <mat-icon>{{actionDescriptor.icon}}</mat-icon>
... ...
... ... @@ -366,8 +366,16 @@ export class TimeseriesTableWidgetComponent extends PageComponent implements OnI
366 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 381 public cellStyle(source: TimeseriesTableSource, index: number, value: any): any {
... ...