feat(backend): add option to use local filtering/sorting strategy

- add 2x new flags (useLocalFiltering & useLocalSorting) that could optionally be used with a backend service

Author: ghiscoding-SE

src/app/examples/grid-odata.component.ts

@@ -110,10 +110,9 @@ export class GridOdataComponent implements OnInit {
       backendServiceApi: {
         service: new GridOdataService(),
         options: {
-          // useLocalFiltering: true,
           enableCount: this.isCountEnabled, // add the count in the OData query, which will return a property named "odata.count" (v2) or "@odata.count" (v4)
           version: this.odataVersion        // defaults to 2, the query string is slightly different between OData 2 and 4
-        } as OdataOption,
+        },
         preProcess: () => this.displaySpinner(true),
         process: (query) => this.getCustomerApiCall(query),
         postProcess: (response) => {

src/app/modules/angular-slickgrid/components/__tests__/angular-slickgrid-constructor.spec.ts

@@ -20,7 +20,7 @@ import {
   SharedService,
   SortService,
 } from '../../services';
-import { Column, CurrentFilter, CurrentSorter, GridOption, GridState, GridStateChange, GridStateType, Pagination } from '../../models';
+import { Column, CurrentFilter, CurrentSorter, GridOption, GridState, GridStateChange, GridStateType, Pagination, GraphqlServiceApi, GraphqlServiceOption } from '../../models';
 import { Filters } from '../../filters';
 import { Editors } from '../../editors';
 import * as utilities from '../../services/backend-utilities';
@@ -490,6 +490,24 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () =
 
         expect(syncSpy).toHaveBeenCalledWith(component.grid, true, false);
       });
+
+      it('should bind local filter when "enableFiltering" is set', () => {
+        const bindLocalSpy = jest.spyOn(filterServiceStub, 'bindLocalOnFilter');
+
+        component.gridOptions = { enableFiltering: true } as GridOption;
+        component.ngAfterViewInit();
+
+        expect(bindLocalSpy).toHaveBeenCalledWith(mockGrid, mockDataView);
+      });
+
+      it('should bind local sort when "enableSorting" is set', () => {
+        const bindLocalSpy = jest.spyOn(sortServiceStub, 'bindLocalOnSort');
+
+        component.gridOptions = { enableSorting: true } as GridOption;
+        component.ngAfterViewInit();
+
+        expect(bindLocalSpy).toHaveBeenCalledWith(mockGrid, mockDataView);
+      });
     });
 
     describe('flag checks', () => {
@@ -820,7 +838,7 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () =
 
       it('should execute backend service "init" method when set', () => {
         const mockPagination = { pageNumber: 1, pageSizes: [10, 25, 50], pageSize: 10, totalItems: 100 };
-        const mockGraphqlOptions = { extraQueryArguments: [{ field: 'userId', value: 123 }] };
+        const mockGraphqlOptions = { datasetName: 'users', extraQueryArguments: [{ field: 'userId', value: 123 }] } as GraphqlServiceOption;
         const bindBackendSpy = jest.spyOn(sortServiceStub, 'bindBackendOnSort');
         const mockGraphqlService2 = { ...mockGraphqlService, init: jest.fn() } as unknown as GraphqlService;
         const initSpy = jest.spyOn(mockGraphqlService2, 'init');
@@ -831,8 +849,8 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () =
             service: mockGraphqlService2,
             options: mockGraphqlOptions,
             preProcess: () => jest.fn(),
-            process: (query) => new Promise((resolve) => resolve('process resolved')),
-          },
+            process: (query) => new Promise((resolve) => resolve({ data: { users: { nodes: [], totalCount: 100 } } })),
+          } as GraphqlServiceApi,
           pagination: mockPagination,
         } as GridOption;
         component.ngAfterViewInit();
@@ -841,32 +859,40 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () =
         expect(initSpy).toHaveBeenCalledWith(mockGraphqlOptions, mockPagination, mockGrid);
       });
 
-      it('should bind local sort when "enableSorting" is set', () => {
-        const bindLocalSpy = jest.spyOn(sortServiceStub, 'bindLocalOnSort');
+      it('should call bind backend sorting when "enableSorting" is set', () => {
+        const bindBackendSpy = jest.spyOn(sortServiceStub, 'bindBackendOnSort');
 
-        component.gridOptions = { enableSorting: true } as GridOption;
+        component.gridOptions = {
+          enableSorting: true,
+          backendServiceApi: {
+            service: mockGraphqlService,
+            preProcess: () => jest.fn(),
+            process: (query) => new Promise((resolve) => resolve('process resolved')),
+          }
+        } as GridOption;
         component.ngAfterViewInit();
 
-        expect(bindLocalSpy).toHaveBeenCalledWith(mockGrid, mockDataView);
+        expect(bindBackendSpy).toHaveBeenCalledWith(mockGrid, mockDataView);
       });
 
-      it('should reflect column filters when "enableSorting" is set', () => {
-        const bindBackendSpy = jest.spyOn(sortServiceStub, 'bindBackendOnSort');
+      it('should call bind local sorting when "enableSorting" is set and "useLocalSorting" is set as well', () => {
+        const bindLocalSpy = jest.spyOn(sortServiceStub, 'bindLocalOnSort');
 
         component.gridOptions = {
           enableSorting: true,
           backendServiceApi: {
             service: mockGraphqlService,
+            useLocalSorting: true,
             preProcess: () => jest.fn(),
             process: (query) => new Promise((resolve) => resolve('process resolved')),
           }
         } as GridOption;
         component.ngAfterViewInit();
 
-        expect(bindBackendSpy).toHaveBeenCalledWith(mockGrid, mockDataView);
+        expect(bindLocalSpy).toHaveBeenCalledWith(mockGrid, mockDataView);
       });
 
-      it('should reflect column filters when "enableFiltering" is set', () => {
+      it('should call bind backend filtering when "enableFiltering" is set', () => {
         const initSpy = jest.spyOn(filterServiceStub, 'init');
         const bindLocalSpy = jest.spyOn(filterServiceStub, 'bindLocalOnFilter');
         const populateSpy = jest.spyOn(filterServiceStub, 'populateColumnFilterSearchTermPresets');
@@ -879,6 +905,23 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () =
         expect(populateSpy).not.toHaveBeenCalled();
       });
 
+      it('should call bind local filtering when "enableFiltering" is set and "useLocalFiltering" is set as well', () => {
+        const bindLocalSpy = jest.spyOn(filterServiceStub, 'bindLocalOnFilter');
+
+        component.gridOptions = {
+          enableFiltering: true,
+          backendServiceApi: {
+            service: mockGraphqlService,
+            useLocalFiltering: true,
+            preProcess: () => jest.fn(),
+            process: (query) => new Promise((resolve) => resolve('process resolved')),
+          }
+        } as GridOption;
+        component.ngAfterViewInit();
+
+        expect(bindLocalSpy).toHaveBeenCalledWith(mockGrid, mockDataView);
+      });
+
       it('should reflect column filters when "enableFiltering" is set', () => {
         const initSpy = jest.spyOn(filterServiceStub, 'init');
         const bindBackendSpy = jest.spyOn(filterServiceStub, 'bindBackendOnFilter');

src/app/modules/angular-slickgrid/components/angular-slickgrid.component.ts

@@ -418,7 +418,12 @@ export class AngularSlickgridComponent implements AfterViewInit, OnDestroy, OnIn
 
     // bind external sorting (backend) when available or default onSort (dataView)
     if (gridOptions.enableSorting && !this.customDataView) {
-      gridOptions.backendServiceApi ? this.sortService.bindBackendOnSort(grid, dataView) : this.sortService.bindLocalOnSort(grid, dataView);
+      // bind external sorting (backend) unless specified to use the local one
+      if (gridOptions.backendServiceApi && !gridOptions.backendServiceApi.useLocalSorting) {
+        this.sortService.bindBackendOnSort(grid, dataView);
+      } else {
+        this.sortService.bindLocalOnSort(grid, dataView);
+      }
     }
 
     // bind external filter (backend) when available or default onFilter (dataView)
@@ -429,7 +434,12 @@ export class AngularSlickgridComponent implements AfterViewInit, OnDestroy, OnIn
       if (gridOptions.presets && Array.isArray(gridOptions.presets.filters) && gridOptions.presets.filters.length > 0) {
         this.filterService.populateColumnFilterSearchTermPresets(gridOptions.presets.filters);
       }
-      gridOptions.backendServiceApi ? this.filterService.bindBackendOnFilter(grid, this.dataView) : this.filterService.bindLocalOnFilter(grid, this.dataView);
+      // bind external filter (backend) unless specified to use the local one
+      if (gridOptions.backendServiceApi && !gridOptions.backendServiceApi.useLocalFiltering) {
+        this.filterService.bindBackendOnFilter(grid, this.dataView);
+      } else {
+        this.filterService.bindLocalOnFilter(grid, this.dataView);
+      }
     }
 
     // if user set an onInit Backend, we'll run it right away (and if so, we also need to run preProcess, internalPostProcess & postProcess)

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

@@ -3,12 +3,35 @@ import { Observable } from 'rxjs';
 import { BackendService } from './backendService.interface';
 
 export interface BackendServiceApi {
+  /** How long to wait until we start querying backend to avoid sending too many requests to backend server. Default to 750ms */
+  filterTypingDebounce?: number;
+
   /** Backend Service Options */
   options?: any;
 
   /** Backend Service instance (could be OData, GraphQL or any other Backend Service) */
   service: BackendService;
 
+  /**
+   * Do we want to optionally use the local (in memory) filtering strategy?
+   * This could be useful if user wishes to load the entire dataset only once with a OData/GraphQL Backend Service
+   * and then use local filter strategy (with SlickGrid DataView) with only current local dataset (only what got loaded in memory).
+   * This option could be used alone and/or with the "useLocalSorting" property.
+   */
+  useLocalFiltering?: boolean;
+
+  /**
+   * Do we want to optionally use the local (in memory) sorting strategy?
+   * This could be useful if user wishes to load the entire dataset only once with a OData/GraphQL Backend Service
+   * and then use local sorting strategy (with SlickGrid DataView) with only current local dataset (only what got loaded in memory).
+   * This option could be used alone and/or with the "useLocalFiltering" property.
+   */
+  useLocalSorting?: boolean;
+
+  // --
+  // available methods
+  // ------------------
+
   /** On error callback, when an error is thrown by the process execution */
   onError?: (e) => void;
 
@@ -24,8 +47,6 @@ export interface BackendServiceApi {
   /** After executing the query, what action to perform? For example, stop the spinner */
   postProcess?: (response: any) => void;
 
-  /** How long to wait until we start querying backend to avoid sending too many requests to backend server. Default to 750ms */
-  filterTypingDebounce?: number;
 
   /**
    * INTERNAL USAGE ONLY by Angular-Slickgrid