Merge pull request #4402 from abpframework/ngx-datatable

Modified Ngx-Datatable Sorting Behavior

npm/ng-packs/packages/core/src/lib/services/list.service.ts

@@ -1,6 +1,6 @@
 import { Inject, Injectable, OnDestroy, Optional } from '@angular/core';
-import { BehaviorSubject, Observable, ReplaySubject } from 'rxjs';
+import { BehaviorSubject, Observable, of, ReplaySubject } from 'rxjs';
-import { debounceTime, shareReplay, switchMap, tap } from 'rxjs/operators';
+import { catchError, debounceTime, filter, shareReplay, switchMap, tap } from 'rxjs/operators';
 import { ABP } from '../models/common';
 import { PagedResultDto } from '../models/dtos';
 import { LIST_QUERY_DEBOUNCE_TIME } from '../tokens/list.token';
@@ -88,7 +88,8 @@ export class ListService<QueryParamsType = ABP.PageQueryParams> implements OnDes
     this._isLoading$.next(true);
 
     return this.query$.pipe(
-      switchMap(streamCreatorCallback),
+      switchMap(query => streamCreatorCallback(query).pipe(catchError(() => of(null)))),
+      filter(Boolean),
       tap(() => this._isLoading$.next(false)),
       shareReplay({ bufferSize: 1, refCount: true }),
       takeUntilDestroy(this),

npm/ng-packs/packages/theme-shared/src/lib/directives/ngx-datatable-list.directive.ts

@@ -36,8 +36,15 @@ export class NgxDatatableListDirective implements OnChanges, OnDestroy, OnInit {
 
   private subscribeToSort() {
     const sub = this.table.sort.subscribe(({ sorts: [{ prop, dir }] }) => {
+      if (prop === this.list.sortKey && this.list.sortOrder === 'desc') {
+        this.list.sortKey = '';
+        this.list.sortOrder = '';
+        this.table.sorts = [];
+        this.cdRef.detectChanges();
+      } else {
         this.list.sortKey = prop;
         this.list.sortOrder = dir;
+      }
     });
     this.subscription.add(sub);
   }
@@ -45,7 +52,7 @@ export class NgxDatatableListDirective implements OnChanges, OnDestroy, OnInit {
   private subscribeToIsLoading() {
     const sub = this.list.isLoading$.subscribe(loading => {
       this.table.loadingIndicator = loading;
-      this.cdRef.markForCheck();
+      this.cdRef.detectChanges();
     });
     this.subscription.add(sub);
   }