CardView: hotfix filterSync issues (#30154)

Author: wdevfx

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

@@ -35,15 +35,16 @@ describe('ColumnsController', () => {
 
     it('should infer dataType and format from firstItems', () => {
       const { columnsController } = setup({
+        dataSource: [
+          {
+            id: 1,
+            price: 9.99,
+            createdAt: new Date('2023-01-01T00:00:00Z'),
+          },
+        ],
         columns: ['id', 'price', 'createdAt'],
       });
 
-      columnsController.setColumnOptionsFromDataItem({
-        id: 1,
-        price: 9.99,
-        createdAt: new Date('2023-01-01T00:00:00Z'),
-      });
-
       const columns = columnsController.columns.peek();
 
       expect(columns).toMatchObject([
@@ -64,13 +65,15 @@ describe('ColumnsController', () => {
     });
 
     it('should generate columns from firstItems when no columns config is provided', () => {
-      const { columnsController } = setup();
-
-      columnsController.setColumnOptionsFromDataItem({
-        id: 1,
-        title: 'Hello',
-        price: 99.99,
-        createdAt: new Date('2024-01-01T00:00:00Z'),
+      const { columnsController } = setup({
+        dataSource: [
+          {
+            id: 1,
+            title: 'Hello',
+            price: 99.99,
+            createdAt: new Date('2024-01-01T00:00:00Z'),
+          },
+        ],
       });
 
       const columns = columnsController.columns.peek();

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

@@ -241,7 +241,7 @@ export class DataController {
         const pageIndex = this.pageIndex.value;
         const pageSize = this.pageSize.value;
         const isLoaded = this.isLoaded.value;
-        const displayFilter = this.normalizedDisplayFilter.value;
+        const displayFilter = this.filterController.displayFilter.value;
         const pagingEnabled = this.pagingEnabled.value;
         const sortParameters = this.sortingController.sortParameters.value;
 
@@ -348,9 +348,7 @@ export class DataController {
 
     const firstItem = items[0];
 
-    if (firstItem) {
-      this.columnsController.setColumnOptionsFromDataItem(firstItem);
-    }
+    this.columnsController.setColumnOptionsFromDataItem(firstItem ?? {});
 
     this._items.value = items;
     this.pageIndex.value = dataSource.pageIndex();

packages/devextreme/js/__internal/grids/new/grid_core/filtering/filter_sync/__intergation__/date_type.ts

@@ -186,32 +186,8 @@ export const DATE_HEADER_FILTER: TestCaseHeaderFilter[] = [
 ];
 
 export const DATE_FILTER_PANEL: TestCaseFilterPanel[] = [
-  {
-    caseName: 'equal year',
-    filteredIds: [0, 1, 2, 3],
-    changes: {
-      filterPanel: ['value', '=', 2024],
-    },
-    expected: {
-      headerFilterType: 'include',
-      headerFilter: [2024],
-      // Same filter by meaning as initial one
-      filterPanel: ['value', 'anyof', [2024]],
-    },
-  },
-  {
-    caseName: 'equal month',
-    filteredIds: [2, 3],
-    changes: {
-      filterPanel: ['value', '=', '2024/2'],
-    },
-    expected: {
-      headerFilterType: 'include',
-      headerFilter: ['2024/2'],
-      // Same filter by meaning as initial one
-      filterPanel: ['value', 'anyof', ['2024/2']],
-    },
-  },
+  // NOTE: FilterPanel filter that equal part of date is an incorrect configuration (filter)
+  // E.g: ['value', '=', '2024/2'] or ['value', '=', 2024]
   {
     caseName: 'equal date',
     filteredIds: [4],
@@ -221,8 +197,7 @@ export const DATE_FILTER_PANEL: TestCaseFilterPanel[] = [
     expected: {
       headerFilterType: 'include',
       headerFilter: ['2025/1/1'],
-      // Same filter by meaning as initial one
-      filterPanel: ['value', 'anyof', ['2025/1/1']],
+      filterPanel: ['value', '=', '2025/1/1'],
     },
   },
   {
@@ -297,32 +272,8 @@ export const DATE_FILTER_PANEL: TestCaseFilterPanel[] = [
       filterPanel: ['value', 'anyof', ['2025/1/1', '2026/1/2']],
     },
   },
-  {
-    caseName: 'not equal year',
-    filteredIds: [4, 5, 6, 7],
-    changes: {
-      filterPanel: ['value', '<>', 2024],
-    },
-    expected: {
-      headerFilterType: 'exclude',
-      headerFilter: [2024],
-      // Same filter by meaning as initial one
-      filterPanel: ['value', 'noneof', [2024]],
-    },
-  },
-  {
-    caseName: 'not equal month',
-    filteredIds: [0, 1, 4, 5, 6, 7],
-    changes: {
-      filterPanel: ['value', '<>', '2024/2'],
-    },
-    expected: {
-      headerFilterType: 'exclude',
-      headerFilter: ['2024/2'],
-      // Same filter by meaning as initial one
-      filterPanel: ['value', 'noneof', ['2024/2']],
-    },
-  },
+  // NOTE: FilterPanel filter that not equal part of date is an incorrect configuration (filter)
+  // E.g: ['value', '<>', '2024/2'] or ['value', '<>', 2024]
   {
     caseName: 'not equal date',
     filteredIds: [0, 1, 2, 3, 5, 6, 7],
@@ -333,7 +284,7 @@ export const DATE_FILTER_PANEL: TestCaseFilterPanel[] = [
       headerFilterType: 'exclude',
       headerFilter: ['2025/1/1'],
       // Same filter by meaning as initial one
-      filterPanel: ['value', 'noneof', ['2025/1/1']],
+      filterPanel: ['value', '<>', '2025/1/1'],
     },
   },
   {

packages/devextreme/js/__internal/grids/new/grid_core/filtering/filter_sync/__intergation__/number_type.ts

@@ -275,8 +275,7 @@ export const NUMBER_FILTER_PANEL: TestCaseFilterPanel[] = [
     expected: {
       headerFilterType: 'include',
       headerFilter: [1],
-      // Same filter by meaning as initial one
-      filterPanel: ['value', '=', 1],
+      filterPanel: ['value', 'anyof', [1]],
     },
   },
   {
@@ -300,8 +299,7 @@ export const NUMBER_FILTER_PANEL: TestCaseFilterPanel[] = [
     expected: {
       headerFilterType: 'exclude',
       headerFilter: [1],
-      // Same filter by meaning as initial one
-      filterPanel: ['value', '<>', 1],
+      filterPanel: ['value', 'noneof', [1]],
     },
   },
   {

packages/devextreme/js/__internal/grids/new/grid_core/filtering/filter_sync/__intergation__/string_type.ts

@@ -222,8 +222,7 @@ export const STRING_FILTER_PANEL: TestCaseFilterPanel[] = [
     expected: {
       headerFilterType: 'include',
       headerFilter: ['A_0'],
-      // Same filter by meaning as initial one
-      filterPanel: ['value', '=', 'A_0'],
+      filterPanel: ['value', 'anyof', ['A_0']],
     },
   },
   {
@@ -247,8 +246,7 @@ export const STRING_FILTER_PANEL: TestCaseFilterPanel[] = [
     expected: {
       headerFilterType: 'exclude',
       headerFilter: ['A_0'],
-      // Same filter by meaning as initial one
-      filterPanel: ['value', '<>', 'A_0'],
+      filterPanel: ['value', 'noneof', ['A_0']],
     },
   },
   {
@@ -330,8 +328,7 @@ export const STRING_DS_VALUES_FILTER_PANEL: TestCaseFilterPanel[] = [
     expected: {
       headerFilterType: 'include',
       headerFilter: ['A_0'],
-      // anyof here because we select one of custom ds values
-      filterPanel: ['value', 'anyof', ['A_0']],
+      filterPanel: ['value', '=', 'A_0'],
     },
   },
   {
@@ -379,7 +376,7 @@ export const STRING_DS_VALUES_FILTER_PANEL: TestCaseFilterPanel[] = [
     expected: {
       headerFilterType: 'include',
       headerFilter: ['A_200'],
-      filterPanel: ['value', 'anyof', ['A_200']],
+      filterPanel: ['value', '=', 'A_200'],
     },
   },
 ];

packages/devextreme/js/__internal/grids/new/grid_core/filtering/filter_sync/controller.ts

@@ -1,7 +1,7 @@
 // import type { ReadonlySignal } from '@preact/signals-core';
 // import { computed } from '@preact/signals-core';
 import { equalByValue } from '@js/core/utils/common';
-import { batch } from '@preact/signals-core';
+import { batch, effect } from '@preact/signals-core';
 import { getMatchedConditions } from '@ts/filter_builder/m_utils';
 import type { HeaderFilterInfo } from '@ts/grids/new/grid_core/filtering/header_filter/types';
 import { SearchController } from '@ts/grids/new/grid_core/search/index';
@@ -31,6 +31,10 @@ export class FilterSyncController {
 
   private previousFilterPanelValue: FilterValue | null = null;
 
+  private previousFilterPanelEnabled: boolean = this.filterController
+    .filterPanelFilterEnabled
+    .peek();
+
   private previousHeaderFilterInfoArray: HeaderFilterInfo[] = [];
 
   // 🚨🚨🚨 This controller was hotfixed during severe issues in filterSync feature.
@@ -44,56 +48,52 @@ export class FilterSyncController {
     private readonly searchController: SearchController,
   ) {
     // --- FilterPanel -> HeaderFilter ---
-    this.filterController.filterPanelValue.subscribe((filterPanelValue) => {
-      // NOTE: Handle first load with empty FilterPanel value
-      if (this.previousFilterPanelValue === null && filterPanelValue === null) {
+    effect(() => {
+      const filterPanelValue = this.filterController.filterValueOption.value;
+      const isFilterPanelEnabled = this.filterController.filterPanelFilterEnabled.value;
+
+      if (equalByValue(
+        this.previousFilterPanelValue,
+        filterPanelValue,
+        FILTER_DEEP_COMPARISON_OPTS,
+      ) && this.previousFilterPanelEnabled === isFilterPanelEnabled) {
         return;
       }
 
       this.previousFilterPanelValue = filterPanelValue;
+      this.previousFilterPanelEnabled = isFilterPanelEnabled;
 
       // NOTE: If filterSync is disabled -> do nothing
       const isSyncEnabled = this.filterController.filterSyncEnabled.peek();
       if (!isSyncEnabled) {
         return;
       }
 
-      // NOTE: If FilterPanel value is empty -> clear HeaderFilter values
-      if (filterPanelValue === null) {
+      // NOTE: If FilterPanel value is empty or disabled -> clear HeaderFilter values
+      if (!isFilterPanelEnabled || filterPanelValue === null) {
         this.headerFilterController.clearHeaderFilters();
-        return;
-      }
-
-      // NOTE: If HeaderFilter is empty and FilterPanel isn't
-      // sync FilterPanel -> HeaderFilter
-      const headerFilterInfoArray = this.headerFilterController.headerFilterInfoArray.peek();
-      if (!headerFilterInfoArray.length) {
-        this.handleFilterPanelSync(filterPanelValue);
-        return;
-      }
-
-      // NOTE: If merged from HeaderFilter values equals current FilterPanel values
-      // do nothing
-      const newFilterPanelValue = mergeFilterPanelWithHeaderFilterValues(
-        filterPanelValue ?? [],
-        headerFilterInfoArray,
-      );
-      if (equalByValue(
-        filterPanelValue ?? [],
-        newFilterPanelValue,
-        FILTER_DEEP_COMPARISON_OPTS,
-      )) {
+        this.previousHeaderFilterInfoArray = this.headerFilterController
+          .headerFilterInfoArray
+          .peek();
         return;
       }
 
       // NOTE: If all conditions above passed sync FilterPanel -> HeaderFilter values
       this.handleFilterPanelSync(filterPanelValue);
+      this.previousHeaderFilterInfoArray = this.headerFilterController
+        .headerFilterInfoArray
+        .peek();
     });
 
     // --- HeaderFilter -> FilterPanel ---
-    this.headerFilterController.headerFilterInfoArray.subscribe((headerFilterInfoArray) => {
-      // NOTE: Handle first load with empty HeaderFilter values
-      if (!this.previousHeaderFilterInfoArray?.length && !headerFilterInfoArray.length) {
+    effect(() => {
+      const headerFilterInfoArray = this.headerFilterController.headerFilterInfoArray.value;
+
+      if (equalByValue(
+        this.previousHeaderFilterInfoArray,
+        headerFilterInfoArray,
+        FILTER_DEEP_COMPARISON_OPTS,
+      )) {
         return;
       }
 
@@ -105,13 +105,6 @@ export class FilterSyncController {
         return;
       }
 
-      // NOTE: If HeaderFilter values is empty & filter panel disabled -> clear FilterPanel value
-      const filterPanelEnabled = this.filterController.filterPanelFilterEnabled.value;
-      if (!headerFilterInfoArray.length && filterPanelEnabled) {
-        this.filterController.filterValueOption.value = null;
-        return;
-      }
-
       // NOTE: If merged from HeaderFilter values equals current FilterPanel values
       // do nothing
       const filterPanelValue = this.filterController.filterPanelValue.peek() ?? [];
@@ -125,6 +118,7 @@ export class FilterSyncController {
 
       // NOTE: If all conditions above passed sync HeaderFilter -> FilterPanel values
       this.handleHeaderFilterSync(newFilterPanelValue);
+      this.previousFilterPanelValue = newFilterPanelValue;
     });
   }
 
@@ -154,20 +148,22 @@ export class FilterSyncController {
 
         return {
           ...column,
-          filterValues,
           filterType,
+          filterValues,
         };
       }),
     );
   }
 
-  private handleHeaderFilterSync(headerFilter: FilterValue): void {
+  private handleHeaderFilterSync(newFilterPanelValue: FilterValue): void {
+    const normalizedValue = !newFilterPanelValue?.length
+      ? null
+      : newFilterPanelValue;
+
     // NOTE: If we update filters from HeaderFilter side
     // For better UX the filter panel will be enabled
     batch(() => {
-      this.filterController.filterValueOption.value = headerFilter.length === 0
-        ? null
-        : headerFilter;
+      this.filterController.filterValueOption.value = normalizedValue;
       this.filterController.filterPanelFilterEnabled.value = true;
     });
   }

packages/devextreme/js/__internal/grids/new/grid_core/filtering/filter_sync/utils.ts

@@ -63,8 +63,10 @@ export const getConditionFromHeaderFilter = ({
     case type === 'values-or-condition' && filterType === 'exclude':
       return [columnId, 'noneof', filterValues];
     case type === 'values-or-condition' && filterType === 'include':
-    default:
       return [columnId, 'anyof', filterValues];
+    case type === 'empty':
+    default:
+      return null;
   }
 };
 

packages/devextreme/js/__internal/grids/new/grid_core/filtering/header_filter/types.ts

@@ -88,7 +88,7 @@ export interface HeaderFilterRootOptions extends HeaderFilterBaseOptions {
   visible?: boolean;
 }
 
-export type HeaderFilterValuesType = 'single-value' | 'values-or-condition';
+export type HeaderFilterValuesType = 'single-value' | 'values-or-condition' | 'empty';
 
 export interface HeaderFilterInfo {
   type: HeaderFilterValuesType;