refactor(theme-shared): add trackByFn

#2537

npm/ng-packs/packages/theme-shared/src/lib/components/index.ts

@@ -2,6 +2,7 @@ export * from './breadcrumb/breadcrumb.component';
 export * from './button/button.component';
 export * from './chart/chart.component';
 export * from './confirmation/confirmation.component';
+export * from './loading/loading.component';
 export * from './loader-bar/loader-bar.component';
 export * from './modal/modal.component';
 export * from './paginator/paginator.component';

npm/ng-packs/packages/theme-shared/src/lib/components/paginator/paginator.component.html

@@ -15,7 +15,7 @@
     ><span class="ui-paginator-icon pi pi-caret-left"></span></a
   ><span class="ui-paginator-pages"
     ><a
-      *ngFor="let page of pageArray"
+      *ngFor="let page of pageArray; trackBy: trackByFn"
       (click)="changePage(page)"
       class="ui-paginator-page ui-paginator-element ui-state-default ui-corner-all"
       [class.ui-state-active]="page === value"

npm/ng-packs/packages/theme-shared/src/lib/components/paginator/paginator.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core';
+import { Component, Input, OnInit, Output, EventEmitter, TrackByFunction } from '@angular/core';
 
 @Component({
   selector: 'abp-paginator',
@@ -11,8 +11,7 @@ export class PaginatorComponent implements OnInit {
     return this._value;
   }
   set value(newValue: number) {
-    if (newValue < 1) return;
-    else if (newValue > this.totalPages) return;
+    if (newValue < 1 || newValue > this.totalPages || newValue === this._value) return;
 
     this._value = newValue;
     this.valueChange.emit(newValue);
@@ -36,6 +35,8 @@ export class PaginatorComponent implements OnInit {
     }
   }
 
+  trackByFn: TrackByFunction<number> = (_, page) => page;
+
   ngOnInit() {
     if (!this.value || this.value < 1 || this.value > this.totalPages) {
       this.value = 1;

npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.html

@@ -46,9 +46,7 @@
 </ng-template>
 
 <ng-template #colGroup>
-  <colgroup>
-    <ng-container *ngTemplateOutlet="colgroupTemplate"></ng-container>
-  </colgroup>
+  <ng-container *ngTemplateOutlet="colgroupTemplate"></ng-container>
 </ng-template>
 
 <ng-template #head>
@@ -60,7 +58,7 @@
 <ng-template #body>
   <tbody class="ui-table-tbody">
     <ng-container
-      *ngFor="let val of slicedValue"
+      *ngFor="let val of slicedValue; trackBy: trackByFn"
       [ngTemplateOutlet]="bodyTemplate"
       [ngTemplateOutletContext]="{ $implicit: val }"
     ></ng-container>

npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.ts

@@ -1,4 +1,12 @@
-import { Component, OnInit, Input, TemplateRef, Output, EventEmitter } from '@angular/core';
+import {
+  Component,
+  OnInit,
+  Input,
+  TemplateRef,
+  Output,
+  EventEmitter,
+  TrackByFunction,
+} from '@angular/core';
 
 @Component({
   selector: 'abp-table',
@@ -28,6 +36,9 @@ export class TableComponent implements OnInit {
   @Input()
   rows: number;
 
+  @Input()
+  trackingProp = 'id';
+
   @Output()
   readonly pageChange = new EventEmitter<number>();
 
@@ -35,6 +46,10 @@ export class TableComponent implements OnInit {
 
   bodyScrollLeft = 0;
 
+  trackByFn: TrackByFunction<any> = (_, value) => {
+    return typeof value === 'object' ? value[this.trackingProp] || value : value;
+  };
+
   @Input()
   get totalRecords(): number {
     return this._totalRecords || this.value.length;

npm/ng-packs/packages/theme-shared/src/lib/directives/index.ts

@@ -1 +1,2 @@
+export * from './loading.directive';
 export * from './table-sort.directive';

npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts

@@ -24,6 +24,8 @@ import { httpErrorConfigFactory, HTTP_ERROR_CONFIG } from './tokens/http-error.t
 import { DateParserFormatter } from './utils/date-parser-formatter';
 import { chartJsLoaded$ } from './utils/widget-utils';
 import { PaginatorComponent } from './components/paginator/paginator.component';
+import { LoadingComponent } from './components/loading/loading.component';
+import { LoadingDirective } from './directives/loading.directive';
 
 export function appendScript(injector: Injector) {
   const fn = () => {
@@ -45,12 +47,14 @@ export function appendScript(injector: Injector) {
     ConfirmationComponent,
     HttpErrorWrapperComponent,
     LoaderBarComponent,
+    LoadingComponent,
     ModalComponent,
     PaginatorComponent,
     TableComponent,
     TableEmptyMessageComponent,
     ToastComponent,
     SortOrderIconComponent,
+    LoadingDirective,
     TableSortDirective,
   ],
   exports: [
@@ -59,16 +63,18 @@ export function appendScript(injector: Injector) {
     ChartComponent,
     ConfirmationComponent,
     LoaderBarComponent,
+    LoadingComponent,
     ModalComponent,
     PaginatorComponent,
     TableComponent,
     TableEmptyMessageComponent,
     ToastComponent,
     SortOrderIconComponent,
+    LoadingDirective,
     TableSortDirective,
   ],
   providers: [DatePipe],
-  entryComponents: [HttpErrorWrapperComponent],
+  entryComponents: [HttpErrorWrapperComponent, LoadingComponent],
 })
 export class ThemeSharedModule {
   constructor(private errorHandler: ErrorHandler) {}