Fix sort event raised at each model update on datatable

src/app/shared/components/data-table/data-table.component.html

 <div class="data-table">
-<p-table
-  [columns]="columns"
-  [value]="datas"
-  selectionMode="single"
-  [responsive]="true"
-  [sortMode]="disableSort == true ? 'off' : 'single'"
-  (sortFunction)="backendSort($event)"
-  [customSort]="true">
-  <ng-template pTemplate="header" let-columns>
-    <tr>
-      <th *ngFor="let col of columns"
-          [pSortableColumn]="col.field">
-        {{col.header | translate}}
-        <p-sortIcon [field]="col.field"></p-sortIcon>
-      </th>
-    </tr>
-    <tr>
-      <th *ngFor="let col of columns" [ngSwitch]="col.type" class="data-table-filter">
-        <div *ngSwitchCase="fieldTypeString">
-          <mat-form-field style="width: 100%" appearance="fill" [floatLabel]="'never'">
-            <input #filter matInput (keyup)="onValueChange(col, $event.target.value)" [value]="getValue(col.field)">
-          <button mat-button *ngIf="filter.value" matSuffix mat-icon-button aria-label="Clear" (click)="filter.value='';onValueChange(col, filter.value)">
-            <fa-icon matSuffix icon="times"></fa-icon>
-          </button>
-          </mat-form-field>
-        </div>
-      </th>
-    </tr>
-  </ng-template>
-  <ng-template pTemplate="body" let-rowData let-value let-columns="columns">
-    <tr pSelectableRow="row" (click)="showDetail(rowData)">
-      <td *ngFor="let col of columns">
-        {{getCellData(rowData, col)}}
-      </td>
-    </tr>
-  </ng-template>
-</p-table>
-<div *ngIf="isDatasPresent === false" class="no-datas">
-  {{'table.nodata' | translate}}
-</div>
+  <p-table
+    [columns]="columns"
+    [value]="datas"
+    selectionMode="single"
+    [responsive]="true"
+    [sortMode]="'single'"
+    [lazy]="true"
+    (onLazyLoad)="backendSort($event)"
+    [customSort]="true">
+    <ng-template pTemplate="header" let-columns>
+      <tr>
+        <th *ngFor="let col of columns"
+            [pSortableColumn]="col.field">
+          {{col.header | translate}}
+          <p-sortIcon [field]="col.field"></p-sortIcon>
+        </th>
+      </tr>
+      <tr>
+        <th *ngFor="let col of columns" [ngSwitch]="col.type" class="data-table-filter">
+          <div *ngSwitchCase="fieldTypeString">
+            <mat-form-field style="width: 100%" appearance="fill" [floatLabel]="'never'">
+              <input #filter matInput (keyup)="onValueChange(col, $event.target.value)" [value]="getValue(col.field)">
+              <button mat-button *ngIf="filter.value" matSuffix mat-icon-button aria-label="Clear" (click)="filter.value='';onValueChange(col, filter.value)">
+                <fa-icon matSuffix icon="times"></fa-icon>
+              </button>
+            </mat-form-field>
+          </div>
+        </th>
+      </tr>
+    </ng-template>
+    <ng-template pTemplate="body" let-rowData let-value let-columns="columns">
+      <tr pSelectableRow="row" (click)="showDetail(rowData)">
+        <td *ngFor="let col of columns">
+          {{getCellData(rowData, col)}}
+        </td>
+      </tr>
+    </ng-template>
+  </p-table>
+  <div *ngIf="isDatasPresent === false" class="no-datas">
+    {{'table.nodata' | translate}}
+  </div>
 
-<dlcm-paginator *ngIf="isDatasPresent === true"
-                #paginator
-                [pagingModel]="queryParameters.paging"
-                (pageEvent)="pageEvent($event)">
-</dlcm-paginator>
+  <dlcm-paginator *ngIf="isDatasPresent === true"
+                  #paginator
+                  [pagingModel]="queryParameters.paging"
+                  (pageEvent)="pageEvent($event)">
+  </dlcm-paginator>
 </div>

src/app/shared/components/data-table/data-table.component.ts

@@ -9,16 +9,18 @@ import {
   ViewChild,
   ViewEncapsulation,
 } from "@angular/core";
-import {PaginatorComponent} from '@app/shared/components/paginator/paginator.component';
+import {PaginatorComponent} from "@app/shared/components/paginator/paginator.component";
 import {FieldTypeEnum} from "@app/shared/enums/field-type.enum";
+import {OrderEnum} from "@app/shared/enums/order.enum";
 import {DataTableColumnsModel} from "@app/shared/models/data-table-columns.model";
-import {PagingModel} from '@app/shared/models/paging.model';
-import {QueryParametersModel} from '@app/shared/models/query-parameters.model';
-import {SortModel} from '@app/shared/models/sort.model';
-import {MapUtil} from '@app/shared/utils/map.util';
-import {ObjectUtil} from '@app/shared/utils/object.util';
+import {PagingModel} from "@app/shared/models/paging.model";
+import {QueryParametersModel} from "@app/shared/models/query-parameters.model";
+import {SortModel} from "@app/shared/models/sort.model";
+import {MapUtil} from "@app/shared/utils/map.util";
+import {ObjectUtil} from "@app/shared/utils/object.util";
 import _ from "lodash";
 import * as moment from "moment";
+import {LazyLoadEvent} from "primeng/api";
 
 @Component({
   selector: "dlcm-data-table",
@@ -43,18 +45,13 @@ export class DataTableComponent implements OnChanges {
   @Output()
   queryParametersEvent: EventEmitter<QueryParametersModel>;
 
-  @ViewChild('paginator')
+  @ViewChild("paginator")
   paginator: PaginatorComponent;
 
   isDatasPresent: boolean;
 
-  disableSort: boolean = false;
-
   fieldTypeString: FieldTypeEnum = FieldTypeEnum.string;
 
-  private isSortedEventRaised: boolean = false;
-  private isClickSortedEvent: boolean = false;
-
   private readonly SEPARATOR = ".";
   private readonly FORMAT_TIME_ONLY = "LTS";
   private readonly FORMAT_DATE_ONLY = "L";
@@ -66,20 +63,12 @@ export class DataTableComponent implements OnChanges {
 
   ngOnChanges(changes: SimpleChanges): void {
     this.computeIsDatasPresent();
-    this.resetSortFeatureAfterNewDatasLoading();
   }
 
   private computeIsDatasPresent() {
     this.isDatasPresent = this.datas.length > 0;
   }
 
-  private resetSortFeatureAfterNewDatasLoading() {
-    // TO FIX Find a best way to avoid infinity sort loop
-    setTimeout(() => {
-      this.disableSort = false;
-    }, 600);
-  }
-
   showDetail(row: any) {
     this.selectEvent.emit(row);
   }
@@ -112,11 +101,21 @@ export class DataTableComponent implements OnChanges {
     return data;
   }
 
-  backendSort($event: SortModel) {
+  backendSort($event: LazyLoadEvent): void {
+    if ($event.sortField === undefined) {
+      return;
+    }
+    const sort = this.adaptLazyLoadEventToSortModel($event);
     const queryParameters = ObjectUtil.clone(this.queryParameters);
-    queryParameters.sort = $event;
+    queryParameters.sort = sort;
     this.queryParametersEvent.emit(queryParameters);
-    this.disableSort = true;
+  }
+
+  private adaptLazyLoadEventToSortModel($event: LazyLoadEvent): SortModel {
+    return {
+      field: $event.sortField,
+      order: $event.sortOrder === -1 ? OrderEnum.descending : OrderEnum.ascending,
+    } as SortModel;
   }
 
   pageEvent($event: PagingModel) {
@@ -127,7 +126,7 @@ export class DataTableComponent implements OnChanges {
 
   onValueChange(col: DataTableColumnsModel, value: string) {
     const queryParameters = ObjectUtil.clone(this.queryParameters);
-    if (value === '') {
+    if (value === "") {
       queryParameters.search.searchItems.delete(col.field);
     } else {
       MapUtil.addOrUpdate(queryParameters.search.searchItems, col.field, value);
@@ -137,7 +136,7 @@ export class DataTableComponent implements OnChanges {
 
   getValue(field: string) {
     const value = this.queryParameters.search.searchItems.get(field);
-    if (value === null || value === undefined || value === '') {
+    if (value === null || value === undefined || value === "") {
       return null;
     }
     return value;

src/app/shared/models/sort.model.ts

 import {OrderEnum} from '@app/shared/enums/order.enum';
 
 export interface SortModel {
-  mode: string;
   field: string;
   order: OrderEnum;
 }