CardView: dataController -> paging in the remote OData DataSource not working (DevExpress#29877)

Author: pomahtri

packages/devextreme/js/__internal/grids/new/grid_core/data_controller/data_controller.test.ts

@@ -5,13 +5,11 @@ import type { Options } from '../options';
 import { OptionsControllerMock } from '../options_controller/options_controller.mock';
 import { DataController } from './data_controller';
 
-const getControllers = (options?: Options) => {
+const setup = (options?: Options) => {
   const context = getContext(options ?? {});
 
-  const optionsController = context.get(OptionsControllerMock);
-
   return {
-    optionsController,
+    optionsController: context.get(OptionsControllerMock),
     dataController: context.get(DataController),
   };
 };
@@ -21,7 +19,7 @@ const generateData = (length: number) => [...new Array(length)].map((_, index) =
 describe('DataController', () => {
   describe('pageIndex', () => {
     it('does not change after pageSize increased and pageIndex < pageCount', async () => {
-      const { optionsController, dataController } = getControllers({
+      const { optionsController, dataController } = setup({
         dataSource: generateData(20),
         paging: {
           pageIndex: 1,
@@ -37,7 +35,7 @@ describe('DataController', () => {
     });
 
     it('set to last page after pageSize increased and pageIndex >= pageCount', async () => {
-      const { optionsController, dataController } = getControllers({
+      const { optionsController, dataController } = setup({
         dataSource: generateData(20),
         paging: {
           pageIndex: 3,
@@ -53,7 +51,7 @@ describe('DataController', () => {
     });
 
     it('set to last and only page after pageSize increased and pageIndex >= pageCount == 1', async () => {
-      const { optionsController, dataController } = getControllers({
+      const { optionsController, dataController } = setup({
         dataSource: generateData(20),
         paging: {
           pageIndex: 1,
@@ -68,4 +66,46 @@ describe('DataController', () => {
       expect(optionsController.oneWay('paging.pageIndex').peek()).toEqual(0);
     });
   });
+
+  describe('regressions', () => {
+    it('should work good with odata store', async () => {
+      const { dataController } = setup({
+        dataSource: {
+          store: {
+            type: 'odata',
+            version: 2,
+            url: 'https://js.devexpress.com/Demos/DevAV/odata/Products',
+            key: 'Product_ID',
+          },
+          select: [
+            'Product_ID',
+            'Product_Name',
+            'Product_Cost',
+            'Product_Sale_Price',
+            'Product_Retail_Price',
+            'Product_Current_Inventory',
+          ],
+          filter: ['Product_Current_Inventory', '>', 0],
+        },
+        keyExpr: 'Product_ID',
+        columns: ['Product_ID', 'Product_Name'],
+        paging: {
+          pageSize: 3,
+        },
+      });
+
+      const getCurrentItemIds = () => dataController.items.value.map((item) => item.Product_ID);
+
+      await dataController.waitLoaded();
+
+      expect(dataController.pageIndex.value).toBe(0);
+      expect(getCurrentItemIds()).toEqual([1, 2, 4]);
+
+      dataController.pageIndex.value = 1;
+      await dataController.waitLoaded();
+
+      expect(dataController.pageIndex.value).toBe(1);
+      expect(getCurrentItemIds()).toEqual([5, 6, 7]);
+    });
+  });
 });

packages/devextreme/js/__internal/grids/new/grid_core/data_controller/data_controller.ts

@@ -1,4 +1,5 @@
 import type { DataSource } from '@js/common/data';
+import type { FilterDescriptor } from '@js/common/data.types';
 import ArrayStore from '@js/common/data/array_store';
 import { Deferred } from '@js/core/utils/deferred';
 import { isDefined } from '@js/core/utils/type';
@@ -8,6 +9,7 @@ import { equalByValue } from '@ts/core/utils/m_common';
 import type { PromiseWithResolvers } from '@ts/core/utils/promise';
 import { createPromise } from '@ts/core/utils/promise';
 
+import gridCoreUtils from '../../../grid_core/m_utils';
 import { ColumnsController } from '../columns_controller/columns_controller';
 import { FilterController } from '../filtering/filter_controller';
 import { OptionsController } from '../options_controller/options_controller';
@@ -43,6 +45,8 @@ export class DataController {
     ),
   );
 
+  private previousDisplayFilter: FilterDescriptor = undefined;
+
   // TODO
   private readonly cacheEnabled = this.options.oneWay('cacheEnabled');
 
@@ -131,6 +135,10 @@ export class DataController {
           changedCallback();
         };
         const customizeStoreLoadOptionsCallback = (e): void => {
+          e.storeLoadOptions.filter = this.combineFilterWithDisplayFilter(
+            e.storeLoadOptions.filter,
+          );
+
           const localOptions = this.normalizedLocalOperations.peek();
           this.pendingLocalOperations[e.operationId] = getLocalLoadOptions(
             e.storeLoadOptions,
@@ -211,6 +219,7 @@ export class DataController {
       () => {
         // eslint-disable-next-line @typescript-eslint/no-unused-expressions
         this.normalizedRemoteOptions.value;
+
         if (this.dataSource.peek().isLoaded()) {
           // eslint-disable-next-line @typescript-eslint/no-floating-promises
           this.dataSource.peek().load();
@@ -229,6 +238,7 @@ export class DataController {
         const sortParameters = this.sortingController.sortParameters.value;
 
         let someParamChanged = false;
+
         if (dataSource.pageIndex() !== pageIndex) {
           dataSource.pageIndex(pageIndex);
           someParamChanged ||= true;
@@ -250,17 +260,19 @@ export class DataController {
           someParamChanged ||= true;
         }
 
-        if (!equalByValue(
-          dataSource.filter() ?? null,
+        const filterChanged = !equalByValue(
+          this.previousDisplayFilter,
           displayFilter,
           {
             maxDepth: FILTER_OBJ_COMPARE_DEPTH,
             strict: true,
           },
-        )) {
-          dataSource.filter(displayFilter ?? null);
+        );
+        if (filterChanged && isLoaded) {
+          this.dataSource.peek().pageIndex(0);
           someParamChanged ||= true;
         }
+        this.previousDisplayFilter = displayFilter;
 
         if (!equalByValue(dataSource.paginate(), pagingEnabled)) {
           dataSource.paginate(pagingEnabled);
@@ -280,6 +292,19 @@ export class DataController {
     );
   }
 
+  public getCombinedFilter(): FilterDescriptor {
+    return this.combineFilterWithDisplayFilter(
+      this.dataSource.peek().filter(),
+    );
+  }
+
+  private combineFilterWithDisplayFilter(filter: FilterDescriptor): FilterDescriptor {
+    return gridCoreUtils.combineFilters([
+      filter,
+      this.filterController.displayFilter.peek(),
+    ]);
+  }
+
   private onChanged(dataSource: DataSource, e): void {
     let items = dataSource.items() as DataObject[];
 

packages/devextreme/js/__internal/grids/new/grid_core/data_controller/public_methods.test.ts

@@ -1,6 +1,7 @@
 import {
   describe, expect, it, jest,
 } from '@jest/globals';
+import { DataSource } from '@ts/data/data_source/m_data_source';
 import ArrayStore from '@ts/data/m_array_store';
 
 import { getContext } from '../di.test_utils';
@@ -100,11 +101,6 @@ describe('PublicMethods', () => {
       });
     });
   });
-  describe('getFilter', () => {
-    // TODO: add test once some filter module (header filter, filter row etc) is implemented
-    it.skip('should return filter applied to dataSource', () => {
-    });
-  });
 
   describe('keyOf', () => {
     it('should return key of given data object', () => {
@@ -171,4 +167,59 @@ describe('PublicMethods', () => {
       expect(gridCore.totalCount()).toBe(4);
     });
   });
+
+  describe('getCombinedFilter', () => {
+    const innerSetup = ({ dataSourceFilter, columnFilterValues }) => setup({
+      dataSource: new DataSource({
+        store: {
+          type: 'array',
+          data: [{ a: 1 }, { a: 2 }, { a: 3 }],
+        },
+        filter: dataSourceFilter,
+      }),
+      columns: [
+        { dataField: 'a', filterValues: columnFilterValues },
+      ],
+    });
+
+    describe('when displayFilter and filter from dataSource are empty', () => {
+      it('should return empty filter', () => {
+        const { gridCore } = innerSetup({
+          dataSourceFilter: undefined,
+          columnFilterValues: undefined,
+        });
+        expect(gridCore.getCombinedFilter()).toBe(undefined);
+      });
+    });
+
+    describe('when displayFilter is set and filter from dataSource is empty', () => {
+      it('should return displayFilter filter', () => {
+        const { gridCore } = innerSetup({
+          dataSourceFilter: undefined,
+          columnFilterValues: [1, 2],
+        });
+        expect(gridCore.getCombinedFilter()).toBe(undefined);
+      });
+    });
+
+    describe('when displayFilter is empty and filter from dataSource is set', () => {
+      it('should return filter from dataSource', () => {
+        const { gridCore } = innerSetup({
+          dataSourceFilter: ['a', '=', 123],
+          columnFilterValues: undefined,
+        });
+        expect(gridCore.getCombinedFilter()).toEqual(['a', '=', 123]);
+      });
+    });
+
+    describe('when displayFilter and filter from dataSource are set', () => {
+      it('should combine filters', () => {
+        const { gridCore } = innerSetup({
+          dataSourceFilter: ['a', '=', 123],
+          columnFilterValues: [1, 2],
+        });
+        expect(gridCore.getCombinedFilter()).toEqual(['a', '=', 123]);
+      });
+    });
+  });
 });

packages/devextreme/js/__internal/grids/new/grid_core/data_controller/public_methods.ts

@@ -33,8 +33,8 @@ export function PublicMethods<T extends Constructor<GridCoreNewBase>>(GridCore:
       return store.byKey(key);
     }
 
-    public getFilter(): FilterDescriptor | FilterDescriptor[] {
-      return this.getDataSource().filter();
+    public getCombinedFilter(): FilterDescriptor | FilterDescriptor[] {
+      return this.dataController.getCombinedFilter();
     }
 
     public keyOf(obj: DataObject) {