WIP

Author: iobuhov

packages/pluggableWidgets/datagrid-web/src/features/multi-page-selection/MultiPageSelectionController.ts

@@ -1,24 +1,29 @@
 import { DatasourceController } from "@mendix/widget-plugin-grid/query/DatasourceController";
-import { MultiSelectionHelper, SelectionHelper } from "@mendix/widget-plugin-grid/selection/helpers";
+import { MultiSelectionHelper } from "@mendix/widget-plugin-grid/selection/helpers";
+import { DerivedPropsGate } from "@mendix/widget-plugin-mobx-kit/props-gate";
 import { ReactiveController, ReactiveControllerHost } from "@mendix/widget-plugin-mobx-kit/reactive-controller";
-import { ListValue, ObjectItem } from "mendix";
+import { ListValue, ObjectItem, SelectionMultiValue, SelectionSingleValue } from "mendix";
 import { SelectAllProgressStore } from "./SelectAllProgressStore";
 
 interface MultiPageSelectionControllerSpec {
     query: DatasourceController;
     progressStore: SelectAllProgressStore;
+    gate: Gate;
 }
+type Gate = DerivedPropsGate<{ itemSelection?: SelectionMultiValue | SelectionSingleValue }>;
 
 export class MultiPageSelectionController implements ReactiveController {
     private query: DatasourceController;
     private progressStore: SelectAllProgressStore;
     private abortController?: AbortController;
     private locked = false;
+    private gate: Gate;
 
     constructor(host: ReactiveControllerHost, spec: MultiPageSelectionControllerSpec) {
         host.addController(this);
         this.query = spec.query;
         this.progressStore = spec.progressStore;
+        this.gate = spec.gate;
     }
 
     get isRunning(): boolean {
@@ -43,12 +48,12 @@ export class MultiPageSelectionController implements ReactiveController {
     /**
      * Starts the multi-page selection process
      */
-    async selectAllPages(datasource: ListValue, selectionHelper: SelectionHelper): Promise<boolean> {
+    async selectAllPages(): Promise<boolean> {
         if (this.locked) {
             return false;
         }
 
-        if (selectionHelper.type !== "Multi") {
+        if (!this.gate.props.itemSelection || this.gate.props.itemSelection.type !== "Multi") {
             return false;
         }
 
@@ -75,11 +80,20 @@ export class MultiPageSelectionController implements ReactiveController {
 
             // Use controller-based traversal to properly handle pagination
             const naturalChunkSize = datasource.limit ?? 25;
-            if (selectionHelper.type !== "Multi") {
-                throw new Error("Expected MultiSelectionHelper");
-            }
+
             const multiHelper = selectionHelper;
-            await this.selectAllWithController(multiHelper, totalCount, naturalChunkSize);
+            const originalOffset = this.query.offset;
+            const originalLimit = this.query.limit;
+            const allItems: ObjectItem[] = [];
+
+            const limit = 100;
+            const offset = 0;
+
+            while (this.query.datasource.hasMoreItems) {
+                const page = await this.query.fetchPage({ limit, offset, signal: this.abortController.signal });
+                allItems.push(...page);
+            }
+            this.gate.props.itemSelection.setSelection(allItems);
 
             success = true;
         } catch (_error) {
@@ -176,8 +190,7 @@ export class MultiPageSelectionController implements ReactiveController {
         }
 
         // First, set the selection while we have all the items
-        (multiHelper as any).selectionValue.setSelection(allItems);
-        (multiHelper as any)._resetRange();
+        this.query.datasource(multiHelper as any)._resetRange();
 
         // Small delay to ensure selection is committed
         await new Promise(resolve => setTimeout(resolve, 50));
@@ -192,19 +205,19 @@ export class MultiPageSelectionController implements ReactiveController {
     /**
      * Waits for the datasource to reflect the controller changes
      */
-    private async waitForDatasourceUpdate(
-        expectedOffset: number,
-        expectedLimit: number,
-        maxAttempts = 20
-    ): Promise<void> {
-        for (let i = 0; i < maxAttempts; i++) {
-            const ds = this.query.datasource;
-            if (ds.status !== "loading" && ds.offset === expectedOffset && ds.limit === expectedLimit) {
-                return;
-            }
-            await new Promise(resolve => setTimeout(resolve, 50));
-        }
-    }
+    // private async waitForDatasourceUpdate(
+    //     expectedOffset: number,
+    //     expectedLimit: number,
+    //     maxAttempts = 20
+    // ): Promise<void> {
+    //     for (let i = 0; i < maxAttempts; i++) {
+    //         const ds = this.query.datasource;
+    //         if (ds.status !== "loading" && ds.offset === expectedOffset && ds.limit === expectedLimit) {
+    //             return;
+    //         }
+    //         await new Promise(resolve => setTimeout(resolve, 50));
+    //     }
+    // }
 
     /**
      * Ensures totalCount is available, requesting it if necessary

packages/shared/widget-plugin-grid/src/query/DatasourceController.ts

@@ -1,8 +1,8 @@
 import { disposeBatch } from "@mendix/widget-plugin-mobx-kit/disposeBatch";
 import { DerivedPropsGate } from "@mendix/widget-plugin-mobx-kit/props-gate";
 import { ReactiveController, ReactiveControllerHost } from "@mendix/widget-plugin-mobx-kit/reactive-controller";
-import { ListValue, ValueStatus } from "mendix";
-import { action, autorun, computed, IComputedValue, makeAutoObservable } from "mobx";
+import { ListValue, ObjectItem, ValueStatus } from "mendix";
+import { action, autorun, computed, IComputedValue, makeAutoObservable, when } from "mobx";
 import { QueryController } from "./query-controller";
 
 type Gate = DerivedPropsGate<{ datasource: ListValue }>;
@@ -164,4 +164,26 @@ export class DatasourceController implements ReactiveController, QueryController
     setPageSize(size: number): void {
         this.pageSize = size;
     }
+
+    fetchPage(limit: number, offset: number, signal: AbortSignal): Promise<ObjectItem[]> {
+        return new Promise((resolve, reject) => {
+            if (signal.aborted) {
+                return reject(signal.reason);
+            }
+
+            const predicate = when(
+                () =>
+                    this.datasource.offset === offset &&
+                    this.datasource.limit === limit &&
+                    this.datasource.status === "available"
+            );
+
+            predicate.then(() => resolve(this.datasource.items ?? [])).catch(reject);
+
+            this.datasource.setOffset(offset);
+            this.datasource.setLimit(limit);
+
+            signal.addEventListener("abort", () => predicate.cancel());
+        });
+    }
 }