refactor: minor fixes

Author: iobuhov

packages/pluggableWidgets/datagrid-web/src/helpers/state/RootGridStore.ts

@@ -137,30 +137,9 @@ export class RootGridStore extends BaseControllerHost {
         add(this.columnsStore.setup());
         add(() => this.settingsStore.dispose());
         add(autorun(() => this.updateProps(this.gate.props)));
-        add(this.setupSelectAllProgressStore());
-
         return disposeAll;
     }
 
-    private setupSelectAllProgressStore() {
-        const controller = this.selectAllController;
-        const loadstart = (e: ProgressEvent): void => this.selectAllProgressStore.onloadstart(e);
-        const loadend = (e: ProgressEvent): void => this.selectAllProgressStore.onloadstart(e);
-        const progress = (e: ProgressEvent): void => this.selectAllProgressStore.onprogress(e);
-
-        controller.addEventListener("loadstart", loadstart);
-        controller.addEventListener("loadend", loadend);
-        controller.addEventListener("abort", loadend);
-        controller.addEventListener("progress", progress);
-
-        return () => {
-            controller.removeEventListener("loadstart", loadstart);
-            controller.removeEventListener("loadend", loadend);
-            controller.removeEventListener("abort", loadend);
-            controller.removeEventListener("progress", progress);
-        };
-    }
-
     private updateProps(props: RequiredProps): void {
         this.columnsStore.updateProps(props);
         this.settingsStore.updateProps(props);

packages/pluggableWidgets/datagrid-web/src/helpers/state/useRootStore.ts

@@ -1,6 +1,7 @@
 import { SelectAllHost } from "@mendix/widget-plugin-grid/selection";
 import { ProgressStore } from "@mendix/widget-plugin-grid/stores/ProgressStore";
 import { ClosableGateProvider } from "@mendix/widget-plugin-mobx-kit/ClosableGateProvider";
+import { GateProvider } from "@mendix/widget-plugin-mobx-kit/GateProvider";
 import { useConst } from "@mendix/widget-plugin-mobx-kit/react/useConst";
 import { useSetup } from "@mendix/widget-plugin-mobx-kit/react/useSetup";
 import { useEffect } from "react";
@@ -19,10 +20,7 @@ export function useRootStore(props: DatagridContainerProps): RootGridStore {
         });
     });
 
-    const selectAllGateProvider = useConst(() => {
-        // Closed when not selecting all
-        return new ClosableGateProvider(props, () => !selectAllProgressStore.inProgress);
-    });
+    const selectAllGateProvider = useConst(() => new GateProvider(props));
 
     const selectAllHost = useSetup(
         () => new SelectAllHost({ gate: selectAllGateProvider.gate, selectAllProgressStore })

packages/shared/widget-plugin-grid/src/selection/SelectAllController.ts renamed to packages/shared/widget-plugin-grid/src/select-all/SelectAllController.ts

@@ -14,15 +14,15 @@ interface SelectAllControllerSpec {
 
 type SelectAllEventType = "loadstart" | "progress" | "abort" | "loadend";
 
-export class SelectAllController extends EventTarget implements ReactiveController {
+export class SelectAllController implements ReactiveController {
     private readonly gate: Gate;
     private readonly query: QueryController;
     private abortController?: AbortController;
     private locked = false;
     readonly pageSize: number = 100;
+    private readonly emitter = new EventTarget();
 
     constructor(host: ReactiveControllerHost, spec: SelectAllControllerSpec) {
-        super();
         host.addController(this);
         this.gate = spec.gate;
         this.query = spec.query;
@@ -44,12 +44,12 @@ export class SelectAllController extends EventTarget implements ReactiveControll
         return () => this.abort();
     }
 
-    addEventListener(
-        type: SelectAllEventType,
-        callback: (pe: ProgressEvent<SelectAllController>) => void,
-        options?: AddEventListenerOptions | boolean
-    ): void {
-        super.addEventListener(type, callback, options);
+    on(type: SelectAllEventType, listener: (pe: ProgressEvent) => void): void {
+        this.emitter.addEventListener(type, listener);
+    }
+
+    off(type: SelectAllEventType, listener: (pe: ProgressEvent) => void): void {
+        this.emitter.removeEventListener(type, listener);
     }
 
     get selection(): SelectionMultiValue | undefined {
@@ -96,6 +96,7 @@ export class SelectAllController extends EventTarget implements ReactiveControll
         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;
@@ -104,36 +105,39 @@ export class SelectAllController extends EventTarget implements ReactiveControll
             new ProgressEvent(type, { loaded, total: totalCount, lengthComputable: hasTotal });
         // We should avoid duplicates, so, we start with clean array.
         const allItems: ObjectItem[] = [];
+        this.abortController = new AbortController();
+        const signal = this.abortController.signal;
 
         try {
-            this.abortController = new AbortController();
-            this.dispatchEvent(pe("loadstart"));
+            this.emitter.dispatchEvent(pe("loadstart"));
             let loading = true;
             while (loading) {
                 const loadedItems = await this.query.fetchPage({
                     limit: this.pageSize,
                     offset,
-                    signal: this.abortController.signal
+                    signal
                 });
 
                 allItems.push(...loadedItems);
                 loaded += loadedItems.length;
                 offset += this.pageSize;
-                this.dispatchEvent(pe("progress"));
-                loading = !this.abortController.signal.aborted && this.query.hasMoreItems;
+                this.emitter.dispatchEvent(pe("progress"));
+                loading = !signal.aborted && this.query.hasMoreItems;
             }
+            // Set allItems on success
+            this.selection?.setSelection(allItems);
         } catch (error) {
-            const aborted = this.abortController?.signal.aborted;
-            if (!aborted) {
+            if (!signal.aborted) {
                 throw error;
             }
+            // Restore selection on abort
+            this.selection?.setSelection(initSelection ?? []);
         } finally {
             this.query.setOffset(initOffset);
             this.query.setLimit(initLimit);
-            this.selection?.setSelection(allItems);
             this.locked = false;
+            this.emitter.dispatchEvent(pe("loadend"));
             this.abortController = undefined;
-            this.dispatchEvent(pe("loadend"));
         }
     }
 
@@ -147,6 +151,6 @@ export class SelectAllController extends EventTarget implements ReactiveControll
 
     abort(): void {
         this.abortController?.abort();
-        this.dispatchEvent(new ProgressEvent("abort"));
+        this.emitter.dispatchEvent(new ProgressEvent("abort"));
     }
 }

packages/shared/widget-plugin-grid/src/selection/SelectAllHost.ts renamed to packages/shared/widget-plugin-grid/src/select-all/SelectAllHost.ts

@@ -34,19 +34,17 @@ export class SelectAllHost extends BaseControllerHost {
     private setupSelectAllProgressStore() {
         const controller = this.selectAllController;
         const loadstart = (e: ProgressEvent): void => this.selectAllProgressStore.onloadstart(e);
-        const loadend = (e: ProgressEvent): void => this.selectAllProgressStore.onloadstart(e);
+        const loadend = (): void => this.selectAllProgressStore.onloadend();
         const progress = (e: ProgressEvent): void => this.selectAllProgressStore.onprogress(e);
 
-        controller.addEventListener("loadstart", loadstart);
-        controller.addEventListener("loadend", loadend);
-        controller.addEventListener("abort", loadend);
-        controller.addEventListener("progress", progress);
+        controller.on("loadstart", loadstart);
+        controller.on("loadend", loadend);
+        controller.on("progress", progress);
 
         return () => {
-            controller.removeEventListener("loadstart", loadstart);
-            controller.removeEventListener("loadend", loadend);
-            controller.removeEventListener("abort", loadend);
-            controller.removeEventListener("progress", progress);
+            controller.off("loadstart", loadstart);
+            controller.off("loadend", loadend);
+            controller.off("progress", progress);
         };
     }
 }

packages/shared/widget-plugin-grid/src/selection.ts

@@ -1,3 +1,5 @@
+export { SelectAllController } from "./select-all/SelectAllController.js";
+export { SelectAllHost } from "./select-all/SelectAllHost.js";
 export {
     getGlobalSelectionContext,
     useCreateSelectionContextValue,
@@ -6,6 +8,4 @@ export {
 export * from "./selection/helpers.js";
 export * from "./selection/keyboard.js";
 export { SelectActionHandler } from "./selection/select-action-handler.js";
-export { SelectAllController } from "./selection/SelectAllController.js";
-export { SelectAllHost } from "./selection/SelectAllHost.js";
 export * from "./selection/types.js";