refactor: implement ds reset

iobuhov · iobuhov · commit 340421b50f6f · 2025-10-09T17:01:45.000+02:00
diff --git a/packages/modules/data-widgets/src/themesource/datawidgets/web/_datagrid.scss b/packages/modules/data-widgets/src/themesource/datawidgets/web/_datagrid.scss
@@ -420,8 +420,7 @@ $root: ".widget-datagrid";
         align-items: center;
     }
 
-    &-exporting,
-    &-selecting-all-pages {
+    &-exporting {
         .widget-datagrid-top-bar,
         .widget-datagrid-header,
         .widget-datagrid-content,
@@ -435,28 +434,28 @@ $root: ".widget-datagrid";
     }
 
     // Better positioning for multi-page selection modal
-    &-selecting-all-pages {
-        .widget-datagrid-modal {
-            &-overlay {
-                position: fixed;
-                top: 0;
-                right: 0;
-                bottom: 0;
-                left: 0;
-            }
-
-            &-main {
-                position: fixed;
-                top: 0;
-                left: 0;
-                right: 0;
-                bottom: 0;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-            }
-        }
-    }
+    // &-selecting-all-pages {
+    //     .widget-datagrid-modal {
+    //         &-overlay {
+    //             position: fixed;
+    //             top: 0;
+    //             right: 0;
+    //             bottom: 0;
+    //             left: 0;
+    //         }
+
+    //         &-main {
+    //             position: fixed;
+    //             top: 0;
+    //             left: 0;
+    //             right: 0;
+    //             bottom: 0;
+    //             display: flex;
+    //             align-items: center;
+    //             justify-content: center;
+    //         }
+    //     }
+    // }
 
     &-col-select input:focus-visible {
         outline-offset: 0;
@@ -591,6 +590,9 @@ $root: ".widget-datagrid";
     padding: 0;
     display: inline-block;
 }
+:where(#{$root}-select-all-bar) {
+    grid-column: 1 / -1;
+}
 
 @keyframes skeleton-loading {
     0% {
diff --git a/packages/pluggableWidgets/datagrid-web/src/Datagrid.tsx b/packages/pluggableWidgets/datagrid-web/src/Datagrid.tsx
@@ -30,7 +30,7 @@ const Container = observer((props: Props): ReactElement => {
     const { columnsStore, rootStore } = props;
     const { paginationCtrl } = rootStore;
 
-    const items = props.datasource.items ?? [];
+    const items = rootStore.query.items ?? [];
 
     const [exportProgress, abortExport] = useDataExport(props, props.columnsStore, props.progressStore);
 
diff --git a/packages/pluggableWidgets/datagrid-web/src/components/SelectAllBar.tsx b/packages/pluggableWidgets/datagrid-web/src/components/SelectAllBar.tsx
@@ -13,7 +13,7 @@ export const SelectAllBar = observer(function SelectAllBar(): React.ReactNode {
     if (selectionStatus === "none") return null;
 
     return (
-        <div>
+        <div className="widget-datagrid-select-all-bar">
             <button onClick={() => selectAllController.selectAllPages()}>Select remaining</button>
         </div>
     );
diff --git a/packages/shared/widget-plugin-grid/src/query/DatasourceController.ts b/packages/shared/widget-plugin-grid/src/query/DatasourceController.ts
@@ -169,17 +169,23 @@ export class DatasourceController implements ReactiveController, QueryController
         this.pageSize = size;
     }
 
+    reload(): Promise<void> {
+        const ds = this.datasource;
+        this.datasource.reload();
+        return when(() => this.datasource !== ds);
+    }
+
     fetchPage({
         limit,
         offset,
         signal
     }: {
         limit: number;
         offset: number;
-        signal: AbortSignal;
+        signal?: AbortSignal;
     }): Promise<ObjectItem[]> {
         return new Promise((resolve, reject) => {
-            if (signal.aborted) {
+            if (signal && signal.aborted) {
                 return reject(signal.reason);
             }
 
diff --git a/packages/shared/widget-plugin-grid/src/query/query-controller.ts b/packages/shared/widget-plugin-grid/src/query/query-controller.ts
@@ -19,5 +19,6 @@ export interface QueryController extends Pick<ListValue, Members> {
     isFirstLoad: boolean;
     isRefreshing: boolean;
     isFetchingNextBatch: boolean;
-    fetchPage(params: { limit: number; offset: number; signal: AbortSignal }): Promise<ObjectItem[]>;
+    fetchPage(params: { limit: number; offset: number; signal?: AbortSignal }): Promise<ObjectItem[]>;
+    reload(): Promise<void>;
 }
diff --git a/packages/shared/widget-plugin-grid/src/select-all/SelectAllController.ts b/packages/shared/widget-plugin-grid/src/select-all/SelectAllController.ts
@@ -1,7 +1,7 @@
 import { DerivedPropsGate } from "@mendix/widget-plugin-mobx-kit/props-gate";
 import { ReactiveController, ReactiveControllerHost } from "@mendix/widget-plugin-mobx-kit/reactive-controller";
 import { ObjectItem, SelectionMultiValue, SelectionSingleValue } from "mendix";
-import { action, computed, makeObservable, observable } from "mobx";
+import { action, computed, makeObservable, observable, when } from "mobx";
 import { QueryController } from "../query/query-controller";
 
 type Gate = DerivedPropsGate<{ itemSelection?: SelectionMultiValue | SelectionSingleValue }>;
@@ -19,7 +19,7 @@ export class SelectAllController implements ReactiveController {
     private readonly query: QueryController;
     private abortController?: AbortController;
     private locked = false;
-    readonly pageSize: number = 500;
+    readonly pageSize: number = 1024;
     private readonly emitter = new EventTarget();
 
     constructor(host: ReactiveControllerHost, spec: SelectAllControllerSpec) {
@@ -32,6 +32,7 @@ export class SelectAllController implements ReactiveController {
             setIsLocked: action,
             canExecute: computed,
             isExecuting: computed,
+            selection: computed,
             locked: observable,
             selectAllPages: action,
             clearSelection: action,
@@ -51,13 +52,10 @@ export class SelectAllController implements ReactiveController {
         this.emitter.removeEventListener(type, listener);
     }
 
-    /**
-     * @throws if selection is undefined or single
-     */
-    selection(): SelectionMultiValue {
+    get selection(): SelectionMultiValue | undefined {
         const selection = this.gate.props.itemSelection;
-        if (selection === undefined) throw new Error("SelectAllController: selection is undefined.");
-        if (selection.type === "Single") throw new Error("SelectAllController: single selection is not supported.");
+        if (selection === undefined) return;
+        if (selection.type === "Single") return;
         return selection;
     }
 
@@ -100,11 +98,11 @@ export class SelectAllController implements ReactiveController {
         this.setIsLocked(true);
 
         const { offset: initOffset, limit: initLimit } = this.query;
-        const initSelection = this.selection().selection;
         const hasTotal = typeof this.query.totalCount === "number";
         const totalCount = this.query.totalCount ?? 0;
         let loaded = 0;
         let offset = 0;
+        let success = false;
         const pe = (type: SelectAllEventType): ProgressEvent =>
             new ProgressEvent(type, { loaded, total: totalCount, lengthComputable: hasTotal });
         // We should avoid duplicates, so, we start with clean array.
@@ -129,32 +127,50 @@ export class SelectAllController implements ReactiveController {
                 this.emitter.dispatchEvent(pe("progress"));
                 loading = !signal.aborted && this.query.hasMoreItems;
             }
-            // Set allItems on success
-            this.selection().setSelection(allItems);
+            success = true;
         } catch (error) {
             if (!signal.aborted) {
-                throw error;
+                console.error("SelectAllController: an error was encountered during the 'select all' action.");
+                console.error(error);
             }
-            // Restore selection on abort
-            this.selection().setSelection(initSelection);
         } finally {
-            this.query.setOffset(initOffset);
-            this.query.setLimit(initLimit);
-            this.locked = false;
+            // Restore init view
+            // This step should be done before loadend to avoid UI flickering
+            await this.query.fetchPage({
+                limit: initLimit,
+                offset: initOffset
+            });
+
             this.emitter.dispatchEvent(pe("loadend"));
+
+            const selectionBeforeReload = this.selection?.selection ?? [];
+            // Reload selection to make sure setSelection is working as expected.
+            await this.reloadSelection();
+
+            this.selection?.setSelection(success ? allItems : selectionBeforeReload);
+
+            this.locked = false;
+            console.info(success, initLimit, initOffset);
             this.abortController = undefined;
             performance.mark("SelectAll_End");
             const measure1 = performance.measure("Measure1", "SelectAll_Start", "SelectAll_End");
-            console.debug(`Data grid 2: select all took ${(measure1.duration / 1000).toFixed(2)} seconds`);
+            console.debug(`Data grid 2: 'select all' took ${(measure1.duration / 1000).toFixed(2)} seconds.`);
         }
     }
 
+    reloadSelection(): Promise<void> {
+        const selection = this.selection;
+        selection?.setSelection([]);
+        // Resolve when selection value is updated
+        return when(() => this.selection !== selection);
+    }
+
     clearSelection(): void {
         if (this.locked) {
             console.debug("SelectAllController: can't clear selection while executing.");
             return;
         }
-        this.selection().setSelection([]);
+        this.selection?.setSelection([]);
     }
 
     abort(): void {

Original file line number	Diff line number	Diff line change
`@@ -19,5 +19,6 @@ export interface QueryController extends Pick<ListValue, Members> {`
`19`	`19`	`isFirstLoad: boolean;`
`20`	`20`	`isRefreshing: boolean;`
`21`	`21`	`isFetchingNextBatch: boolean;`
`22`		`- fetchPage(params: { limit: number; offset: number; signal: AbortSignal }): Promise<ObjectItem[]>;`
	`22`	`+ fetchPage(params: { limit: number; offset: number; signal?: AbortSignal }): Promise<ObjectItem[]>;`
	`23`	`+ reload(): Promise<void>;`
`23`	`24`	`}`