fix(backend): Clear Filter was not working correctly

- also remove any default sort on GraphQL Service
- cleanup code and add new emitterType enum

Author: Ghislain Beaulac

src/app/modules/angular-slickgrid/extensions/headerMenuExtension.ts

@@ -172,7 +172,7 @@ export class HeaderMenuExtension implements Extension {
   }
 
   /** Execute the Header Menu Commands that was triggered by the onCommand subscribe */
-  executeHeaderMenuInternalCommands(e: Event, args: HeaderMenuOnCommandArgs) {
+  executeHeaderMenuInternalCommands(event: Event, args: HeaderMenuOnCommandArgs) {
     if (args && args.command) {
       switch (args.command) {
         case 'hide':
@@ -182,15 +182,15 @@ export class HeaderMenuExtension implements Extension {
           }
           break;
         case 'clear-filter':
-          this.clearColumnFilter(e, args);
+          this.clearColumnFilter(event, args);
           break;
         case 'clear-sort':
-          this.clearColumnSort(e, args);
+          this.clearColumnSort(event, args);
           break;
         case 'sort-asc':
         case 'sort-desc':
           const isSortingAsc = (args.command === 'sort-asc');
-          this.sortColumn(e, args, isSortingAsc);
+          this.sortColumn(event, args, isSortingAsc);
           break;
         default:
           break;
@@ -268,15 +268,15 @@ export class HeaderMenuExtension implements Extension {
   }
 
   /** Sort the current column */
-  private sortColumn(e: Event, args: HeaderMenuOnCommandArgs, isSortingAsc = true) {
+  private sortColumn(event: Event, args: HeaderMenuOnCommandArgs, isSortingAsc = true) {
     if (args && args.column) {
       // get previously sorted columns
       const sortedColsWithoutCurrent: ColumnSort[] = this.sortService.getPreviousColumnSorts(args.column.id + '');
 
       // add to the column array, the column sorted by the header menu
       sortedColsWithoutCurrent.push({ sortCol: args.column, sortAsc: isSortingAsc });
       if (this.sharedService.gridOptions.backendServiceApi) {
-        this.sortService.onBackendSortChanged(e, { multiColumnSort: true, sortCols: sortedColsWithoutCurrent, grid: this.sharedService.grid });
+        this.sortService.onBackendSortChanged(event, { multiColumnSort: true, sortCols: sortedColsWithoutCurrent, grid: this.sharedService.grid });
       } else if (this.sharedService.dataView) {
         this.sortService.onLocalSortChanged(this.sharedService.grid, this.sharedService.dataView, sortedColsWithoutCurrent);
       } else {
@@ -298,22 +298,22 @@ export class HeaderMenuExtension implements Extension {
   }
 
   /** Clear the Filter on the current column (if it's actually filtered) */
-  private clearColumnFilter(e: Event, args: HeaderMenuOnCommandArgs) {
+  private clearColumnFilter(event: Event, args: HeaderMenuOnCommandArgs) {
     if (args && args.column) {
-      this.filterService.clearFilterByColumnId(args.column.id);
+      this.filterService.clearFilterByColumnId(event, args.column.id);
     }
   }
 
   /** Clear the Sort on the current column (if it's actually sorted) */
-  private clearColumnSort(e: Event, args: HeaderMenuOnCommandArgs) {
+  private clearColumnSort(event: Event, args: HeaderMenuOnCommandArgs) {
     if (args && args.column && this.sharedService) {
       // get previously sorted columns
       const allSortedCols: ColumnSort[] = this.sortService.getPreviousColumnSorts();
       const sortedColsWithoutCurrent: ColumnSort[] = this.sortService.getPreviousColumnSorts(args.column.id + '');
 
       if (allSortedCols.length !== sortedColsWithoutCurrent.length) {
         if (this.sharedService.gridOptions && this.sharedService.gridOptions.backendServiceApi) {
-          this.sortService.onBackendSortChanged(e, { multiColumnSort: true, sortCols: sortedColsWithoutCurrent, grid: this.sharedService.grid });
+          this.sortService.onBackendSortChanged(event, { multiColumnSort: true, sortCols: sortedColsWithoutCurrent, grid: this.sharedService.grid });
         } else if (this.sharedService.dataView) {
           this.sortService.onLocalSortChanged(this.sharedService.grid, this.sharedService.dataView, sortedColsWithoutCurrent, true);
         } else {

src/app/modules/angular-slickgrid/models/emitterType.enum.ts

@@ -0,0 +1,5 @@
+export enum EmitterType {
+  local = 'local',
+  remote = 'remote'
+}
+

src/app/modules/angular-slickgrid/models/index.ts

@@ -31,6 +31,7 @@ export * from './editorArgs.interface';
 export * from './editorValidator.interface';
 export * from './editorValidatorOutput.interface';
 export * from './elementPosition.interface';
+export * from './emitterType.enum';
 export * from './exportOption.interface';
 export * from './extension.interface';
 export * from './extensionModel.interface';

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

@@ -4,6 +4,7 @@ import {
   Column,
   ColumnFilter,
   ColumnFilters,
+  EmitterType,
   Filter,
   FilterArguments,
   FilterCallbackArg,
@@ -131,7 +132,7 @@ export class FilterService {
 
     // emit an onFilterChanged event when it's not called by a clear filter
     if (args && !args.clearFilterTriggered) {
-      this.emitFilterChanged('remote');
+      this.emitFilterChanged(EmitterType.remote);
     }
 
     // the processes can be Observables (like HttpClient) or Promises
@@ -166,7 +167,7 @@ export class FilterService {
       }
       // emit an onFilterChanged event when it's not called by a clear filter
       if (args && !args.clearFilterTriggered) {
-        this.emitFilterChanged('local');
+        this.emitFilterChanged(EmitterType.local);
       }
     });
 
@@ -176,7 +177,7 @@ export class FilterService {
     });
   }
 
-  clearFilterByColumnId(columnId: number | string) {
+  clearFilterByColumnId(event: Event, columnId: number | string) {
     const colFilter: Filter = this._filters.find((filter: Filter) => filter.columnDef.id === columnId);
     if (colFilter && colFilter.clear) {
       colFilter.clear();
@@ -190,9 +191,17 @@ export class FilterService {
       }
     }
 
+    let emitter: EmitterType = EmitterType.local;
+    const isBackendApi = this._gridOptions && this._gridOptions.backendServiceApi || false;
+
+    // when using a backend service, we need to manually trigger a filter change
+    if (isBackendApi) {
+      emitter = EmitterType.remote;
+      this.onBackendFilterChange(event as KeyboardEvent, { grid: this._grid, columnFilters: this._columnFilters });
+    }
+
     // emit an event when filter is cleared
-    const sender = this._gridOptions && this._gridOptions.backendServiceApi ? 'remote' : 'local';
-    this.emitFilterChanged(sender);
+    this.emitFilterChanged(emitter);
   }
 
   /** Clear the search filters (below the column titles) */
@@ -486,15 +495,15 @@ export class FilterService {
    * Other services, like Pagination, can then subscribe to it.
    * @param caller
    */
-  emitFilterChanged(caller: 'local' | 'remote') {
-    if (caller === 'remote' && this._gridOptions && this._gridOptions.backendServiceApi) {
+  emitFilterChanged(caller: EmitterType) {
+    if (caller === EmitterType.remote && this._gridOptions && this._gridOptions.backendServiceApi) {
       let currentFilters: CurrentFilter[] = [];
       const backendService = this._gridOptions.backendServiceApi.service;
       if (backendService && backendService.getCurrentFilters) {
         currentFilters = backendService.getCurrentFilters() as CurrentFilter[];
       }
       this.onFilterChanged.next(currentFilters);
-    } else if (caller === 'local') {
+    } else if (caller === EmitterType.local) {
       this.onFilterChanged.next(this.getCurrentLocalFilters());
     }
   }

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

@@ -36,7 +36,6 @@ export class GraphqlService implements BackendService {
   private _grid: any;
   options: GraphqlServiceOption;
   pagination: Pagination | undefined;
-  defaultOrderBy: GraphqlSortingOption = { field: 'id', direction: SortDirection.ASC };
   defaultPaginationOptions: GraphqlPaginationOption | GraphqlCursorPaginationOption = {
     first: DEFAULT_ITEMS_PER_PAGE,
     offset: 0
@@ -437,7 +436,7 @@ export class GraphqlService implements BackendService {
    */
   updateSorters(sortColumns?: ColumnSort[], presetSorters?: CurrentSorter[]) {
     let currentSorters: CurrentSorter[] = [];
-    let graphqlSorters: GraphqlSortingOption[] = [];
+    const graphqlSorters: GraphqlSortingOption[] = [];
 
     if (!sortColumns && presetSorters) {
       // make the presets the current sorters, also make sure that all direction are in uppercase for GraphQL
@@ -470,23 +469,18 @@ export class GraphqlService implements BackendService {
     } else if (sortColumns && !presetSorters) {
       // build the orderBy array, it could be multisort, example
       // orderBy:[{field: lastName, direction: ASC}, {field: firstName, direction: DESC}]
-      if (sortColumns && sortColumns.length === 0) {
-        graphqlSorters = new Array(this.defaultOrderBy); // when empty, use the default sort
-        currentSorters = new Array({ columnId: this.defaultOrderBy.field, direction: this.defaultOrderBy.direction });
-      } else {
-        if (sortColumns) {
-          for (const column of sortColumns) {
-            if (column && column.sortCol) {
-              currentSorters.push({
-                columnId: column.sortCol.id + '',
-                direction: column.sortAsc ? SortDirection.ASC : SortDirection.DESC
-              });
-
-              graphqlSorters.push({
-                field: (column.sortCol.queryField || column.sortCol.queryFieldSorter || column.sortCol.field || column.sortCol.id) + '',
-                direction: column.sortAsc ? SortDirection.ASC : SortDirection.DESC
-              });
-            }
+      if (Array.isArray(sortColumns) && sortColumns.length > 0) {
+        for (const column of sortColumns) {
+          if (column && column.sortCol) {
+            currentSorters.push({
+              columnId: column.sortCol.id + '',
+              direction: column.sortAsc ? SortDirection.ASC : SortDirection.DESC
+            });
+
+            graphqlSorters.push({
+              field: (column.sortCol.queryField || column.sortCol.queryFieldSorter || column.sortCol.field || column.sortCol.id) + '',
+              direction: column.sortAsc ? SortDirection.ASC : SortDirection.DESC
+            });
           }
         }
       }

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

@@ -2,6 +2,7 @@ import {
   Column,
   ColumnSort,
   CurrentSorter,
+  EmitterType,
   FieldType,
   GraphqlResult,
   GridOption,
@@ -73,7 +74,7 @@ export class SortService {
       }
 
       const query = backendApi.service.processOnSortChanged(event, args);
-      this.emitSortChanged('remote');
+      this.emitSortChanged(EmitterType.remote);
 
       // the processes can be Observables (like HttpClient) or Promises
       const process = backendApi.process(query);
@@ -121,7 +122,7 @@ export class SortService {
       }
 
       this.onLocalSortChanged(grid, dataView, sortColumns);
-      this.emitSortChanged('local');
+      this.emitSortChanged(EmitterType.local);
     });
   }
 
@@ -277,15 +278,15 @@ export class SortService {
    * Other services, like Pagination, can then subscribe to it.
    * @param sender
    */
-  emitSortChanged(sender: 'local' | 'remote') {
-    if (sender === 'remote' && this._gridOptions && this._gridOptions.backendServiceApi) {
+  emitSortChanged(sender: EmitterType) {
+    if (sender === EmitterType.remote && this._gridOptions && this._gridOptions.backendServiceApi) {
       let currentSorters: CurrentSorter[] = [];
       const backendService = this._gridOptions.backendServiceApi.service;
       if (backendService && backendService.getCurrentSorters) {
         currentSorters = backendService.getCurrentSorters() as CurrentSorter[];
       }
       this.onSortChanged.next(currentSorters);
-    } else if (sender === 'local') {
+    } else if (sender === EmitterType.local) {
       this.onSortChanged.next(this.getCurrentLocalSorters());
     }
   }