DataGrid: extract grouping dataController extender (#34973)

Author: anna-shakhova

packages/devextreme/js/__internal/grids/data_grid/grouping/__tests__/utils.test.ts

@@ -2,8 +2,11 @@ import {
   describe, expect, it,
 } from '@jest/globals';
 import type { ProcessedItem } from '@ts/grids/grid_core/data_controller/types';
+import type { RawItemData } from '@ts/grids/grid_core/data_source_adapter/types';
 
-import { isSameContinuationState, isSameExpandedState } from '../utils';
+import {
+  isGroupNode, isGroupRow, isSameContinuationState, isSameExpandedState,
+} from '../utils';
 
 const groupRow = (partial: Partial<ProcessedItem> = {}): ProcessedItem => ({
   rowType: 'group',
@@ -13,6 +16,62 @@ const groupRow = (partial: Partial<ProcessedItem> = {}): ProcessedItem => ({
   ...partial,
 });
 
+describe('isGroupNode', () => {
+  it('should return true for a group node with children', () => {
+    expect(isGroupNode({ key: 'Alex', items: [{ id: 1 }] })).toBe(true);
+  });
+
+  it('should return true for a collapsed group node, whose items are null', () => {
+    expect(isGroupNode({ key: 'Alex', items: null, count: 3 })).toBe(true);
+  });
+
+  it('should return true when the items key is present but undefined', () => {
+    expect(isGroupNode({ key: 'Alex', items: undefined })).toBe(true);
+  });
+
+  it('should return false for a data row, which has no items key', () => {
+    expect(isGroupNode({ id: 1, name: 'Alex' })).toBe(false);
+  });
+});
+
+describe('isGroupRow', () => {
+  it('should return true for a group row', () => {
+    expect(isGroupRow({ rowType: 'group', groupIndex: 1 })).toBe(true);
+  });
+
+  it('should return true for a group footer row added by the summary module', () => {
+    expect(isGroupRow({ rowType: 'groupFooter', groupIndex: 1 })).toBe(true);
+  });
+
+  it('should return true when groupIndex is zero', () => {
+    expect(isGroupRow({ rowType: 'group', groupIndex: 0 })).toBe(true);
+  });
+
+  it('should return false when groupIndex is missing', () => {
+    expect(isGroupRow({ rowType: 'group' })).toBe(false);
+  });
+
+  it('should return false when groupIndex is null', () => {
+    expect(isGroupRow({ rowType: 'group', groupIndex: null })).toBe(false);
+  });
+
+  it('should return false when rowType is not a string', () => {
+    expect(isGroupRow({ rowType: 1, groupIndex: 0 })).toBe(false);
+  });
+
+  it('should return false for a data row', () => {
+    expect(isGroupRow({ rowType: 'data', groupIndex: 0 })).toBe(false);
+  });
+
+  it('should return false when rowType only contains group', () => {
+    expect(isGroupRow({ rowType: 'detailGroup', groupIndex: 0 })).toBe(false);
+  });
+
+  it('should return false for a primitive item', () => {
+    expect(isGroupRow('Alex' as unknown as RawItemData)).toBe(false);
+  });
+});
+
 describe('isSameExpandedState', () => {
   it('should return true when both rows are expanded', () => {
     expect(isSameExpandedState(

packages/devextreme/js/__internal/grids/data_grid/grouping/extenders/grouping_columns_controller.ts

@@ -0,0 +1,17 @@
+import gridCore from '@ts/grids/data_grid/m_core';
+import type { ColumnsController } from '@ts/grids/grid_core/columns_controller/m_columns_controller';
+import type { ModuleType } from '@ts/grids/grid_core/m_types';
+
+export const groupingColumnsControllerExtender = (
+  Base: ModuleType<ColumnsController>,
+): ModuleType<ColumnsController> => class GroupingColumnsExtender extends Base {
+  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+  public _getExpandColumnOptions() {
+    const options = super._getExpandColumnOptions();
+
+    // @ts-expect-error
+    options.cellTemplate = gridCore.getExpandCellTemplate();
+
+    return options;
+  }
+};

packages/devextreme/js/__internal/grids/data_grid/grouping/extenders/grouping_data_controller.ts

@@ -0,0 +1,230 @@
+import type { DeferredObj } from '@js/core/utils/deferred';
+import { Deferred, when } from '@js/core/utils/deferred';
+import type { Properties } from '@js/ui/data_grid';
+import type { DataController } from '@ts/grids/grid_core/data_controller/data_controller';
+import type { ItemProcessingOptions, ProcessedItem } from '@ts/grids/grid_core/data_controller/types';
+import type { RawItemData } from '@ts/grids/grid_core/data_source_adapter/types';
+import type {
+  ModuleType,
+  OptionChanged,
+  OptionChangedFor,
+  RowKey,
+} from '@ts/grids/grid_core/m_types';
+
+import type {
+  ChangeRowExpandArgs, GroupItem, ProcessGroupItemsOptions,
+} from '../types';
+import {
+  isGroupNode, isGroupRow, isSameContinuationState, isSameExpandedState,
+} from '../utils';
+
+export const groupingDataControllerExtender = (
+  Base: ModuleType<DataController>,
+): ModuleType<DataController> => class GroupingDataControllerExtender extends Base {
+  public init(): void {
+    super.init();
+
+    this.createAction('onRowExpanding');
+    this.createAction('onRowExpanded');
+    this.createAction('onRowCollapsing');
+    this.createAction('onRowCollapsed');
+  }
+
+  protected _beforeProcessItems(items: RawItemData[]): (RawItemData | GroupItem)[] {
+    const baseItems = super._beforeProcessItems(items);
+
+    const groupColumns = this._columnsController.getGroupColumns();
+
+    if (!baseItems.length || !groupColumns.length) {
+      return baseItems;
+    }
+
+    return this.processGroupItems(baseItems, groupColumns.length);
+  }
+
+  protected _processItem(
+    dataItem: RawItemData | GroupItem,
+    options: ItemProcessingOptions,
+  ): ProcessedItem {
+    if (isGroupRow(dataItem)) {
+      const processedGroupItem = this.processGroupItem(dataItem, options);
+      options.dataIndex = 0;
+      return processedGroupItem;
+    }
+
+    return super._processItem(dataItem, options);
+  }
+
+  protected processGroupItem(
+    groupItem: GroupItem,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    options: ItemProcessingOptions,
+  ): ProcessedItem {
+    return groupItem;
+  }
+
+  private getDefaultProcessGroupItemsOptions(): ProcessGroupItemsOptions {
+    const scrollingMode = this.option('scrolling.mode');
+
+    return {
+      collectContinuationItems: scrollingMode !== 'virtual' && scrollingMode !== 'infinite',
+      resultItems: [],
+      path: [],
+      values: [],
+    };
+  }
+
+  protected processGroupItems(
+    items: RawItemData[] | null | undefined,
+    groupsCount: number,
+    parentOptions?: ProcessGroupItemsOptions,
+  ): (RawItemData | GroupItem)[] {
+    const groupedColumns = this._columnsController.getGroupColumns();
+    const column = groupedColumns[groupedColumns.length - groupsCount];
+
+    const options = parentOptions ?? this.getDefaultProcessGroupItemsOptions();
+    const { resultItems } = options;
+
+    if (options.data) {
+      if (options.collectContinuationItems || !options.data.isContinuation) {
+        resultItems.push({
+          rowType: 'group',
+          data: options.data,
+          groupIndex: options.path.length - 1,
+          isExpanded: !!options.data.items,
+          key: options.path.slice(),
+          values: options.values.slice(),
+        });
+      }
+    }
+
+    if (!items) {
+      return resultItems;
+    }
+
+    if (groupsCount === 0) {
+      resultItems.push(...items);
+
+      return resultItems;
+    }
+
+    for (const item of items) {
+      if (item && isGroupNode(item)) {
+        options.data = item;
+        options.path.push(item.key);
+        options.values.push(
+          column?.deserializeValue && !column.calculateDisplayValue
+            ? column.deserializeValue(item.key)
+            : item.key,
+        );
+
+        this.processGroupItems(item.items, groupsCount - 1, options);
+
+        options.data = undefined;
+        options.path.pop();
+        options.values.pop();
+      } else {
+        resultItems.push(item);
+      }
+    }
+
+    return resultItems;
+  }
+
+  protected isSameRowState(item1: ProcessedItem, item2: ProcessedItem): boolean {
+    if (item1.rowType === 'group'
+      && (!isSameExpandedState(item1, item2) || !isSameContinuationState(item1, item2))) {
+      return false;
+    }
+
+    return super.isSameRowState(item1, item2);
+  }
+
+  public publicMethods(): string[] {
+    const groupingPublicMethods = ['collapseAll', 'expandAll', 'isRowExpanded', 'expandRow', 'collapseRow'];
+
+    return [...super.publicMethods(), ...groupingPublicMethods];
+  }
+
+  private collapseAll(groupIndex: number): void {
+    const dataSource = this._dataSource;
+    if (dataSource?.collapseAll(groupIndex)) {
+      dataSource.pageIndex(0);
+      dataSource.reload();
+    }
+  }
+
+  private expandAll(groupIndex: number): void {
+    const dataSource = this._dataSource;
+    if (dataSource?.expandAll(groupIndex)) {
+      dataSource.pageIndex(0);
+      dataSource.reload();
+    }
+  }
+
+  private changeRowExpand(key: RowKey): DeferredObj<unknown> {
+    const expanded = this.isRowExpanded(key);
+    const args: ChangeRowExpandArgs = {
+      key,
+      expanded,
+    };
+
+    this.executeAction(expanded ? 'onRowCollapsing' : 'onRowExpanding', args);
+
+    if (!args.cancel) {
+      return when(this.changeRowExpandCore(key)).done(() => {
+        args.expanded = !expanded;
+        this.executeAction(expanded ? 'onRowCollapsed' : 'onRowExpanded', args);
+      });
+    }
+
+    return Deferred().resolve();
+  }
+
+  protected changeRowExpandCore(key: RowKey): DeferredObj<unknown> {
+    const dataSource = this._dataSource;
+
+    const d = Deferred();
+    if (!dataSource) {
+      d.resolve();
+    } else {
+      when(dataSource.changeRowExpand(key)).done(() => {
+        // eslint-disable-next-line @typescript-eslint/no-misused-promises
+        this.load().done(d.resolve).fail(d.reject);
+        // eslint-disable-next-line @typescript-eslint/no-misused-promises
+      }).fail(d.reject);
+    }
+
+    return d;
+  }
+
+  private isRowExpanded(key: RowKey): boolean {
+    return !!this._dataSource?.isRowExpanded(key);
+  }
+
+  private expandRow(key: RowKey): DeferredObj<unknown> {
+    if (!this.isRowExpanded(key)) {
+      return this.changeRowExpand(key);
+    }
+
+    return Deferred().resolve();
+  }
+
+  private collapseRow(key: RowKey): DeferredObj<unknown> {
+    if (this.isRowExpanded(key)) {
+      return this.changeRowExpand(key);
+    }
+
+    return Deferred().resolve();
+  }
+
+  public optionChanged(e: OptionChanged | OptionChangedFor<Pick<Properties, 'grouping'>>): void {
+    if (e.name === 'grouping') {
+      e.handled = true;
+      this.reset();
+      return;
+    }
+
+    super.optionChanged(e);
+  }
+};

packages/devextreme/js/__internal/grids/data_grid/grouping/extenders/grouping_editing_controller.ts

@@ -0,0 +1,14 @@
+import type { RawItemData } from '@ts/grids/grid_core/data_source_adapter/types';
+import type { EditingController } from '@ts/grids/grid_core/editing/m_editing';
+import type { ModuleType } from '@ts/grids/grid_core/m_types';
+
+import type { GroupItem } from '../types';
+import { isGroupRow } from '../utils';
+
+export const groupingEditingControllerExtender = (
+  Base: ModuleType<EditingController>,
+): ModuleType<EditingController> => class GroupingEditingExtender extends Base {
+  protected _isProcessedItem(item: RawItemData | GroupItem): boolean {
+    return isGroupRow(item);
+  }
+};

packages/devextreme/js/__internal/grids/data_grid/grouping/grouping_module.ts

@@ -0,0 +1,49 @@
+import messageLocalization from '@js/common/core/localization/message';
+import type { Properties } from '@js/ui/data_grid';
+import gridCore from '@ts/grids/data_grid/m_core';
+
+import { groupingColumnsControllerExtender } from './extenders/grouping_columns_controller';
+import { groupingDataControllerExtender } from './extenders/grouping_data_controller';
+import { groupingEditingControllerExtender } from './extenders/grouping_editing_controller';
+import {
+  columnHeadersViewExtender,
+  GroupingHeaderPanelExtender,
+  GroupingRowsViewExtender,
+} from './m_grouping';
+
+gridCore.registerModule('grouping', {
+  defaultOptions(): Pick<Properties, 'grouping' | 'groupPanel'> {
+    return {
+      grouping: {
+        autoExpandAll: true,
+        allowCollapsing: true,
+        contextMenuEnabled: true,
+        expandMode: 'buttonClick',
+        texts: {
+          groupContinuesMessage: messageLocalization.format('dxDataGrid-groupContinuesMessage'),
+          groupContinuedMessage: messageLocalization.format('dxDataGrid-groupContinuedMessage'),
+          groupByThisColumn: messageLocalization.format('dxDataGrid-groupHeaderText'),
+          ungroup: messageLocalization.format('dxDataGrid-ungroupHeaderText'),
+          ungroupAll: messageLocalization.format('dxDataGrid-ungroupAllText'),
+        },
+      },
+      groupPanel: {
+        visible: false,
+        emptyPanelText: messageLocalization.format('dxDataGrid-groupPanelEmptyText'),
+        allowColumnDragging: true,
+      },
+    };
+  },
+  extenders: {
+    controllers: {
+      data: groupingDataControllerExtender,
+      columns: groupingColumnsControllerExtender,
+      editing: groupingEditingControllerExtender,
+    },
+    views: {
+      headerPanel: GroupingHeaderPanelExtender,
+      rowsView: GroupingRowsViewExtender,
+      columnHeadersView: columnHeadersViewExtender,
+    },
+  },
+});