fix(backend): clear filters was calling too many queries (1x/filter)

- this commit is mostly all perf improvement, calling only the necessary amount of queries to backend
- when having multiple filters it should call only 1 query to clear all filters
- add new "clearAllFiltersAndSorts()" method to clear both in 1 query
- add extra argument to clearSorting to skip querying (clear both filters+sorts should call only 1 query)

Author: Ghislain Beaulac

src/app/modules/angular-slickgrid/models/backendService.interface.ts

@@ -20,6 +20,12 @@ export interface BackendService {
   /** Build and the return the backend service query string */
   buildQuery: (serviceOptions?: BackendServiceOption) => string;
 
+  /** Clear all sorts */
+  clearFilters?: () => void;
+
+  /** Clear all sorts */
+  clearSorters?: () => void;
+
   /** initialize the backend service with certain options */
   init?: (serviceOptions?: BackendServiceOption, pagination?: Pagination, grid?: any) => void;
 

src/app/modules/angular-slickgrid/services/filter.service.ts

@@ -111,12 +111,15 @@ export class FilterService {
         debounceTypingDelay = backendApi.filterTypingDebounce || DEFAULT_FILTER_TYPING_DEBOUNCE;
       }
 
-      // call the service to get a query back
-      if (debounceTypingDelay > 0) {
-        clearTimeout(timer);
-        timer = setTimeout(() => this.executeBackendCallback(event, args, startTime, backendApi), debounceTypingDelay);
-      } else {
-        this.executeBackendCallback(event, args, startTime, backendApi);
+      // query backend, except when it's called by a ClearFilters then we won't
+      if (args && !args.clearFilterTriggered) {
+        // call the service to get a query back
+        if (debounceTypingDelay > 0) {
+          clearTimeout(timer);
+          timer = setTimeout(() => this.executeBackendCallback(event, args, startTime, backendApi), debounceTypingDelay);
+        } else {
+          this.executeBackendCallback(event, args, startTime, backendApi);
+        }
       }
     } catch (error) {
       onBackendError(error, backendApi);
@@ -126,7 +129,7 @@ export class FilterService {
   async executeBackendCallback(event: KeyboardEvent, args: any, startTime: Date, backendApi: BackendServiceApi) {
     const query = await backendApi.service.processOnFilterChanged(event, args);
 
-    // emit an onFilterChanged event when it's not called by clearAllFilters
+    // emit an onFilterChanged event when it's not called by a clear filter
     if (args && !args.clearFilterTriggered) {
       this.emitFilterChanged('remote');
     }
@@ -161,7 +164,7 @@ export class FilterService {
       if (columnId != null) {
         dataView.refresh();
       }
-      // emit an onFilterChanged event when it's not called by clearAllFilters
+      // emit an onFilterChanged event when it's not called by a clear filter
       if (args && !args.clearFilterTriggered) {
         this.emitFilterChanged('local');
       }
@@ -210,10 +213,14 @@ export class FilterService {
     }
 
     // we also need to refresh the dataView and optionally the grid (it's optional since we use DataView)
-    if (this._dataView) {
+    if (this._dataView && this._grid) {
       this._dataView.refresh();
       this._grid.invalidate();
-      this._grid.render();
+    }
+
+    // when using backend service, we need to query only once so it's better to do it here
+    if (this._gridOptions && this._gridOptions.backendServiceApi) {
+      this.executeBackendCallback(undefined, { clearFilterTriggered: true, grid: this._grid, columnFilters: this._columnFilters }, new Date(), this._gridOptions.backendServiceApi);
     }
 
     // emit an event when filters are all cleared

src/app/modules/angular-slickgrid/services/graphql.service.ts

@@ -169,6 +169,16 @@ export class GraphqlService implements BackendService {
       .replace(/\}$/, '');
   }
 
+  clearFilters() {
+    this._currentFilters = [];
+    this.updateOptions({ filteringOptions: [] });
+  }
+
+  clearSorters() {
+    this._currentSorters = [];
+    this.updateOptions({ sortingOptions: [] });
+  }
+
   init(serviceOptions?: GraphqlServiceOption, pagination?: Pagination, grid?: any): void {
     this._grid = grid;
     this.options = serviceOptions || {};

src/app/modules/angular-slickgrid/services/grid-odata.service.ts

@@ -55,6 +55,16 @@ export class GridOdataService implements BackendService {
     return this.odataService.buildQuery();
   }
 
+  clearFilters() {
+    this._currentFilters = [];
+    this.updateOptions({ filteringOptions: [] });
+  }
+
+  clearSorters() {
+    this._currentSorters = [];
+    this.updateOptions({ sortingOptions: [] });
+  }
+
   init(options: OdataOption, pagination?: Pagination, grid?: any): void {
     this._grid = grid;
     const mergedOptions = { ...this.defaultOptions, ...options };

src/app/modules/angular-slickgrid/services/grid.service.ts

@@ -36,6 +36,17 @@ export class GridService {
     this._dataView = dataView;
   }
 
+  /** Clear all Filters & Sorts */
+  clearAllFiltersAndSorts() {
+    // call both clear Filters & Sort but only trigger the last one to avoid sending multiple backend queries
+    if (this.sortService && this.sortService.clearSorting) {
+      this.sortService.clearSorting(false); // skip event trigger on this one
+    }
+    if (this.filterService && this.filterService.clearFilters) {
+      this.filterService.clearFilters();
+    }
+  }
+
   /**
    * From a SlickGrid Event triggered get the Column Definition and Item Data Context
    *

src/app/modules/angular-slickgrid/services/sort.service.ts

@@ -125,26 +125,34 @@ export class SortService {
     });
   }
 
-  clearSorting() {
+  clearSorting(triggerQueryEvent = true) {
     if (this._grid && this._gridOptions && this._dataView) {
       // remove any sort icons (this setSortColumns function call really does only that)
       this._grid.setSortColumns([]);
 
       // we also need to trigger a sort change
       // for a backend grid, we will trigger a backend sort changed with an empty sort columns array
       // however for a local grid, we need to pass a sort column and so we will sort by the 1st column
-      if (this._isBackendGrid) {
-        this.onBackendSortChanged(undefined, { grid: this._grid, sortCols: [] });
-      } else {
-        if (this._columnDefinitions && Array.isArray(this._columnDefinitions)) {
-          this.onLocalSortChanged(this._grid, this._dataView, new Array({sortAsc: true, sortCol: this._columnDefinitions[0] }));
+      if (triggerQueryEvent) {
+        if (this._isBackendGrid) {
+          this.onBackendSortChanged(undefined, { grid: this._grid, sortCols: [] });
+        } else {
+          if (this._columnDefinitions && Array.isArray(this._columnDefinitions)) {
+            this.onLocalSortChanged(this._grid, this._dataView, new Array({sortAsc: true, sortCol: this._columnDefinitions[0] }));
+          }
+        }
+      } else if (this._isBackendGrid) {
+        const backendService = this._gridOptions && this._gridOptions.backendServiceApi && this._gridOptions.backendServiceApi.service;
+        if (backendService && backendService.clearSorters) {
+          backendService.clearSorters();
         }
       }
     }
+
     // set current sorter to empty & emit a sort changed event
     this._currentLocalSorters = [];
 
-    // emit an event when filters are all cleared
+    // emit an event when sorts are all cleared
     this.onSortCleared.next(true);
   }
 
@@ -221,7 +229,7 @@ export class SortService {
           const columnSortObj = sortColumns[i];
           if (columnSortObj && columnSortObj.sortCol) {
             const sortDirection = columnSortObj.sortAsc ? SortDirectionNumber.asc : SortDirectionNumber.desc;
-            const sortField = columnSortObj.sortCol.queryField || columnSortObj.sortCol.queryFieldFilter || columnSortObj.sortCol.field;
+            const sortField = columnSortObj.sortCol.queryField || columnSortObj.sortCol.queryFieldSorter || columnSortObj.sortCol.field;
             const fieldType = columnSortObj.sortCol.type || FieldType.string;
             let value1 = dataRow1[sortField];
             let value2 = dataRow2[sortField];