feat(datagrid-web): wip:refactor, MultiPageSelectionController

rahmanunver · rahmanunver · commit a4bb82961cf6 · 2025-09-26T15:43:20.000+02:00
diff --git a/packages/pluggableWidgets/datagrid-web/src/Datagrid.editorPreview.tsx b/packages/pluggableWidgets/datagrid-web/src/Datagrid.editorPreview.tsx
@@ -97,6 +97,7 @@ export function preview(props: DatagridPreviewProps): ReactElement {
             selectActionHelper,
             cellEventsController: eventsController,
             checkboxEventsController: eventsController,
+            multiPageSelectionController: {} as any, // Mock for preview
             focusController,
             selectionCountStore,
             selectAllProgressStore: new SelectAllProgressStore(),
diff --git a/packages/pluggableWidgets/datagrid-web/src/Datagrid.tsx b/packages/pluggableWidgets/datagrid-web/src/Datagrid.tsx
@@ -74,8 +74,8 @@ const Container = observer((props: Props): ReactElement => {
             checkboxEventsController,
             focusController,
             selectionCountStore: rootStore.selectionCountStore,
-            selectAllProgressStore: rootStore.selectAllProgressStore,
-            rootStore
+            multiPageSelectionController: rootStore.multiPageSelectionController,
+            selectAllProgressStore: rootStore.selectAllProgressStore
         };
     });
 
diff --git a/packages/pluggableWidgets/datagrid-web/src/components/CheckboxColumnHeader.tsx b/packages/pluggableWidgets/datagrid-web/src/components/CheckboxColumnHeader.tsx
@@ -3,7 +3,8 @@ import { createElement, Fragment, ReactElement } from "react";
 import { useDatagridRootScope } from "../helpers/root-context";
 
 export function CheckboxColumnHeader(): ReactElement {
-    const { selectActionHelper, basicData, selectAllProgressStore, rootStore } = useDatagridRootScope();
+    const { selectActionHelper, basicData, selectAllProgressStore, multiPageSelectionController } =
+        useDatagridRootScope();
     const { showCheckboxColumn, showSelectAllToggle, onSelectAll } = selectActionHelper;
     const { selectionStatus, selectAllRowsLabel } = basicData;
 
@@ -27,10 +28,14 @@ export function CheckboxColumnHeader(): ReactElement {
             if (selectActionHelper.canSelectAllPages) {
                 if (selectionStatus === "none") {
                     // Select all pages
-                    await rootStore?.startMultiPageSelectAll(selectActionHelper);
+                    const success = await multiPageSelectionController.selectAllPages();
+                    if (!success) {
+                        // Fallback to single page selection if multi-page fails
+                        onSelectAll();
+                    }
                 } else {
                     // Unselect all pages (both "all" and "some" states)
-                    await rootStore?.clearAllPages();
+                    multiPageSelectionController.clearAllPages();
                 }
                 return;
             }
diff --git a/packages/pluggableWidgets/datagrid-web/src/components/Widget.tsx b/packages/pluggableWidgets/datagrid-web/src/components/Widget.tsx
@@ -81,7 +81,7 @@ export interface WidgetProps<C extends GridColumn, T extends ObjectItem = Object
 
 export const Widget = observer(<C extends GridColumn>(props: WidgetProps<C>): ReactElement => {
     const { className, exporting, numberOfItems, onExportCancel, selectActionHelper } = props;
-    const { basicData, selectAllProgressStore, rootStore } = useDatagridRootScope();
+    const { basicData, selectAllProgressStore, multiPageSelectionController } = useDatagridRootScope();
 
     const selectionEnabled = selectActionHelper.selectionType !== "None";
 
@@ -99,7 +99,7 @@ export const Widget = observer(<C extends GridColumn>(props: WidgetProps<C>): Re
                 open={selectAllProgressStore.selecting}
                 selectingLabel={basicData.selectingAllLabel ?? "Selecting all items..."}
                 cancelLabel={basicData.cancelSelectionLabel ?? "Cancel selection"}
-                onCancel={() => rootStore.abortMultiPageSelect()}
+                onCancel={() => multiPageSelectionController.abort()}
                 progress={selectAllProgressStore.loaded}
                 total={selectAllProgressStore.total}
             />
diff --git a/packages/pluggableWidgets/datagrid-web/src/components/__tests__/Table.spec.tsx b/packages/pluggableWidgets/datagrid-web/src/components/__tests__/Table.spec.tsx
@@ -1,5 +1,9 @@
 import { ClickActionHelper } from "@mendix/widget-plugin-grid/helpers/ClickActionHelper";
-import { MultiSelectionStatus, useSelectionHelper } from "@mendix/widget-plugin-grid/selection";
+import {
+    MultiSelectionStatus,
+    useSelectionHelper,
+    MultiPageSelectionController
+} from "@mendix/widget-plugin-grid/selection";
 import { SelectionCountStore } from "@mendix/widget-plugin-grid/selection/stores/SelectionCountStore";
 import {
     list,
@@ -66,6 +70,7 @@ function withCtx(
         selectActionHelper: widgetProps.selectActionHelper,
         cellEventsController: widgetProps.cellEventsController,
         checkboxEventsController: widgetProps.checkboxEventsController,
+        multiPageSelectionController: {} as unknown as MultiPageSelectionController,
         focusController: widgetProps.focusController,
         selectionCountStore: defaultSelectionCountStore as unknown as SelectionCountStore,
         selectAllProgressStore: {} as unknown as SelectAllProgressStore,
diff --git a/packages/pluggableWidgets/datagrid-web/src/helpers/root-context.ts b/packages/pluggableWidgets/datagrid-web/src/helpers/root-context.ts
@@ -4,9 +4,9 @@ import { SelectionCountStore } from "@mendix/widget-plugin-grid/selection/stores
 import { createContext, useContext } from "react";
 import { SelectAllProgressStore } from "../features/multi-page-selection/SelectAllProgressStore";
 import { GridBasicData } from "../helpers/state/GridBasicData";
-import { RootGridStore } from "../helpers/state/RootGridStore";
 import { EventsController } from "../typings/CellComponent";
 import { SelectActionHelper } from "./SelectActionHelper";
+import { MultiPageSelectionController } from "@mendix/widget-plugin-grid/selection/MultiPageSelectionController";
 
 export interface DatagridRootScope {
     basicData: GridBasicData;
@@ -15,10 +15,10 @@ export interface DatagridRootScope {
     selectActionHelper: SelectActionHelper;
     cellEventsController: EventsController;
     checkboxEventsController: EventsController;
+    multiPageSelectionController: MultiPageSelectionController;
     focusController: FocusTargetController;
     selectionCountStore: SelectionCountStore;
     selectAllProgressStore: SelectAllProgressStore;
-    rootStore: RootGridStore;
 }
 
 export const DatagridContext = createContext<DatagridRootScope | null>(null);
diff --git a/packages/pluggableWidgets/datagrid-web/src/helpers/state/RootGridStore.ts b/packages/pluggableWidgets/datagrid-web/src/helpers/state/RootGridStore.ts
@@ -4,7 +4,7 @@ import { CustomFilterHost } from "@mendix/widget-plugin-filtering/stores/generic
 import { DatasourceController } from "@mendix/widget-plugin-grid/query/DatasourceController";
 import { QueryController } from "@mendix/widget-plugin-grid/query/query-controller";
 import { RefreshController } from "@mendix/widget-plugin-grid/query/RefreshController";
-import { clearAllPages, selectAllPages } from "@mendix/widget-plugin-grid/selection/select-all-pages";
+import { MultiPageSelectionController } from "@mendix/widget-plugin-grid/selection";
 import { SelectionCountStore } from "@mendix/widget-plugin-grid/selection/stores/SelectionCountStore";
 import { BaseControllerHost } from "@mendix/widget-plugin-mobx-kit/BaseControllerHost";
 import { disposeBatch } from "@mendix/widget-plugin-mobx-kit/disposeBatch";
@@ -38,6 +38,8 @@ type RequiredProps = Pick<
     | "pagination"
     | "showPagingButtons"
     | "showNumberOfRows"
+    | "selectAllPagesEnabled"
+    | "selectAllPagesBufferSize"
 >;
 
 type Gate = DerivedPropsGate<RequiredProps>;
@@ -55,8 +57,7 @@ export class RootGridStore extends BaseControllerHost {
     staticInfo: StaticInfo;
     exportProgressCtrl: ProgressStore;
     selectAllProgressStore: SelectAllProgressStore;
-    private selectAllAbortController?: AbortController;
-    private selectAllLocked = false;
+    multiPageSelectionController: MultiPageSelectionController;
     loaderCtrl: DerivedLoaderController;
     paginationCtrl: PaginationController;
     readonly filterAPI: FilterAPI;
@@ -104,6 +105,13 @@ export class RootGridStore extends BaseControllerHost {
 
         this.selectAllProgressStore = new SelectAllProgressStore();
 
+        this.multiPageSelectionController = new MultiPageSelectionController(this, {
+            gate,
+            query,
+            progressStore: this.selectAllProgressStore,
+            bufferSize: props.selectAllPagesBufferSize ?? 500
+        });
+
         new DatasourceParamsController(this, {
             query,
             filterHost: combinedFilter,
@@ -140,47 +148,4 @@ export class RootGridStore extends BaseControllerHost {
         this.columnsStore.updateProps(props);
         this.settingsStore.updateProps(props);
     }
-
-    async startMultiPageSelectAll(selectActionHelper: SelectActionHelper): Promise<void> {
-        if (this.selectAllLocked) {
-            return;
-        }
-
-        // Check if multi-page selection is possible
-        const canSelect = selectActionHelper.canSelectAllPages;
-
-        if (!canSelect) {
-            selectActionHelper.onSelectAll("selectAll");
-            return;
-        }
-
-        this.selectAllLocked = true;
-        this.selectAllAbortController = new AbortController();
-        const success = await selectAllPages({
-            query: this.query as QueryController,
-            gate: this.gate as any,
-            progress: this.selectAllProgressStore,
-            bufferSize: selectActionHelper.selectAllPagesBufferSize,
-            signal: this.selectAllAbortController.signal
-        });
-
-        if (!success) {
-            selectActionHelper.onSelectAll("selectAll");
-        }
-        this.selectAllLocked = false;
-        this.selectAllAbortController = undefined;
-    }
-
-    async clearAllPages(): Promise<void> {
-        clearAllPages(this.gate);
-    }
-
-    abortMultiPageSelect(): void {
-        if (this.selectAllAbortController) {
-            this.selectAllAbortController.abort();
-            this.selectAllProgressStore.oncancel();
-            this.selectAllLocked = false;
-            this.selectAllAbortController = undefined;
-        }
-    }
 }
diff --git a/packages/shared/widget-plugin-grid/src/query/DatasourceController.ts b/packages/shared/widget-plugin-grid/src/query/DatasourceController.ts
@@ -103,6 +103,10 @@ export class DatasourceController implements ReactiveController, QueryController
         return this.datasource.hasMoreItems ?? false;
     }
 
+    get items(): ObjectItem[] | undefined {
+        return this.datasource.items;
+    }
+
     /**
      * Returns computed value that holds controller copy.
      * Recomputes the copy every time the datasource changes.
diff --git a/packages/shared/widget-plugin-grid/src/query/query-controller.ts b/packages/shared/widget-plugin-grid/src/query/query-controller.ts
@@ -9,6 +9,7 @@ type Members =
     | "totalCount"
     | "limit"
     | "offset"
+    | "items"
     | "hasMoreItems";
 
 export interface QueryController extends Pick<ListValue, Members> {
diff --git a/packages/shared/widget-plugin-grid/src/selection.ts b/packages/shared/widget-plugin-grid/src/selection.ts
@@ -6,5 +6,5 @@ export {
     useCreateSelectionContextValue,
     useSelectionContextValue
 } from "./selection/context.js";
-export { selectAllPages } from "./selection/select-all-pages.js";
+export { MultiPageSelectionController } from "./selection/MultiPageSelectionController.js";
 export { SelectActionHandler } from "./selection/select-action-handler.js";
diff --git a/packages/shared/widget-plugin-grid/src/selection/MultiPageSelectionController.ts b/packages/shared/widget-plugin-grid/src/selection/MultiPageSelectionController.ts
@@ -0,0 +1,165 @@
+import { QueryController } from "../query/query-controller";
+import { DerivedPropsGate } from "@mendix/widget-plugin-mobx-kit/props-gate";
+import { ReactiveController, ReactiveControllerHost } from "@mendix/widget-plugin-mobx-kit/reactive-controller";
+import { SelectionMultiValue, SelectionSingleValue } from "mendix";
+
+type Gate = DerivedPropsGate<{ itemSelection?: SelectionMultiValue | SelectionSingleValue }>;
+
+export interface ISelectAllProgressStore {
+    selecting: boolean;
+    lengthComputable: boolean;
+    loaded: number;
+    total: number;
+    cancelled: boolean;
+    onloadstart: (total: number) => void;
+    onprogress: (loaded: number) => void;
+    onloadend: () => void;
+    oncancel: () => void;
+    progress: number;
+    displayProgress: string;
+}
+
+interface MultiPageSelectionControllerSpec {
+    gate: Gate;
+    query: QueryController;
+    progressStore: ISelectAllProgressStore;
+    bufferSize: number;
+}
+
+export class MultiPageSelectionController implements ReactiveController {
+    private readonly gate: Gate;
+    private readonly query: QueryController;
+    private readonly progressStore: ISelectAllProgressStore;
+    private readonly bufferSize: number;
+    private abortController?: AbortController;
+    private locked = false;
+
+    constructor(host: ReactiveControllerHost, spec: MultiPageSelectionControllerSpec) {
+        host.addController(this);
+        this.gate = spec.gate;
+        this.query = spec.query;
+        this.progressStore = spec.progressStore;
+        this.bufferSize = spec.bufferSize;
+    }
+
+    setup(): () => void {
+        // No specific setup needed for now
+        return () => {
+            // Cleanup
+            this.abort();
+        };
+    }
+
+    get isRunning(): boolean {
+        return this.locked;
+    }
+
+    get isMultiSelection(): boolean {
+        return this.gate.props.itemSelection?.type === "Multi";
+    }
+
+    get hasSelection(): boolean {
+        const selection = this.gate.props.itemSelection?.selection;
+        if (!selection) return false;
+        return Array.isArray(selection) ? selection.length > 0 : true;
+    }
+
+    get selectionCount(): number {
+        const selection = this.gate.props.itemSelection?.selection;
+        if (!selection) return 0;
+        return Array.isArray(selection) ? selection.length : 1;
+    }
+
+    get canSelectAllPages(): boolean {
+        return this.isMultiSelection && this.query.hasMoreItems;
+    }
+
+    async selectAllPages(): Promise<boolean> {
+        if (this.locked) {
+            return false;
+        }
+
+        if (!this.isMultiSelection) {
+            return false;
+        }
+
+        if (!this.query.hasMoreItems) {
+            return false;
+        }
+
+        this.locked = true;
+        let success = false;
+
+        try {
+            const originalOffset = this.query.offset;
+            const originalLimit = this.query.limit;
+
+            this.progressStore.onloadstart(this.query.totalCount ?? 0);
+            this.progressStore.lengthComputable = false;
+            this.abortController = new AbortController();
+
+            const pageLimit = Math.max(1, this.bufferSize || this.query.limit || 25);
+            let offset = 0;
+            let loaded = 0;
+
+            try {
+                this.gate.props.itemSelection?.setKeepSelection(() => true);
+                while (!this.abortController.signal.aborted) {
+                    await this.query.fetchPage({
+                        limit: pageLimit,
+                        offset,
+                        signal: this.abortController.signal
+                    });
+                    loaded += this.query.items?.length ?? 0;
+
+                    // Accumulate selection by spreading existing and new items
+                    const currentSelection = this.gate.props.itemSelection?.selection;
+                    const existingItems = Array.isArray(currentSelection) ? currentSelection : [];
+                    const newItems = this.query.items ?? [];
+                    const combinedSelection = [...existingItems, ...newItems];
+
+                    this.gate.props.itemSelection?.setSelection(combinedSelection as any);
+                    offset += pageLimit;
+                    this.progressStore.onprogress(loaded);
+                    if (!this.query.hasMoreItems) break;
+                }
+
+                if (this.abortController.signal.aborted) {
+                    return false;
+                }
+
+                // Restore original pagination
+                this.query.setLimit(originalLimit);
+                this.query.setOffset(originalOffset);
+                success = true;
+            } finally {
+                this.gate.props.itemSelection?.setKeepSelection(undefined);
+            }
+        } catch (error) {
+            // Selection failed or was aborted
+            console.error("MultiPageSelectionController: Selection failed", error);
+        } finally {
+            this.progressStore.onloadend();
+            this.locked = false;
+            this.abortController = undefined;
+        }
+
+        return success;
+    }
+
+    clearAllPages(): boolean {
+        if (!this.isMultiSelection) {
+            return false;
+        }
+        this.gate.props.itemSelection?.setSelection([] as any);
+        return true;
+    }
+
+    abort(): void {
+        if (this.abortController) {
+            this.abortController.abort();
+            this.progressStore.oncancel();
+            this.locked = false;
+        }
+    }
+}
diff --git a/packages/shared/widget-plugin-grid/src/selection/select-all-pages.ts b/packages/shared/widget-plugin-grid/src/selection/select-all-pages.ts
