refactor: separate code in plugin

iobuhov · iobuhov · commit b7be08981464 · 2025-12-02T09:14:58.000+01:00
diff --git a/packages/shared/widget-plugin-grid/src/core/models/selection.model.ts b/packages/shared/widget-plugin-grid/src/core/models/selection.model.ts
@@ -1,7 +1,11 @@
 import { atomFactory, ComputedAtom, DerivedPropsGate } from "@mendix/widget-plugin-mobx-kit/main";
-import { computed } from "mobx";
+import { DynamicValue } from "mendix";
+import { computed, observable } from "mobx";
 
-/** Returns selected count in multi-selection mode and -1 otherwise. */
+/**
+ * Returns selected count in multi-selection mode and -1 otherwise.
+ * @injectable
+ */
 export function selectedCountMulti(gate: {
     itemSelection?: { type: string; selection: { length: number } };
 }): ComputedAtom<number> {
@@ -68,3 +72,32 @@ export function isCurrentPageSelectedAtom(
         return isCurrentPageSelected(selection.selection, items);
     });
 }
+
+interface ObservableSelectorTexts {
+    clearSelectionButtonLabel: string;
+    selectedCountText: string;
+}
+
+export function selectedCounterTextsStore(
+    gate: DerivedPropsGate<{
+        clearSelectionButtonLabel?: DynamicValue<string>;
+        selectedCountTemplateSingular?: DynamicValue<string>;
+        selectedCountTemplatePlural?: DynamicValue<string>;
+    }>,
+    selectedCount: ComputedAtom<number>
+): ObservableSelectorTexts {
+    return observable({
+        get clearSelectionButtonLabel() {
+            return gate.props.clearSelectionButtonLabel?.value || "Clear selection";
+        },
+        get selectedCountText() {
+            const formatSingular = gate.props.selectedCountTemplateSingular?.value || "%d item selected";
+            const formatPlural = gate.props.selectedCountTemplatePlural?.value || "%d items selected";
+            const count = selectedCount.get();
+
+            if (count > 1) return formatPlural.replace("%d", `${count}`);
+            if (count === 1) return formatSingular.replace("%d", "1");
+            return "";
+        }
+    });
+}
diff --git a/packages/shared/widget-plugin-grid/src/select-all/SelectAll.service.ts b/packages/shared/widget-plugin-grid/src/select-all/SelectAll.service.ts
@@ -1,30 +1,26 @@
-import { DerivedPropsGate, SetupComponent, SetupComponentHost } from "@mendix/widget-plugin-mobx-kit/main";
+import { DerivedPropsGate, Emitter } from "@mendix/widget-plugin-mobx-kit/main";
 import { ObjectItem, SelectionMultiValue, SelectionSingleValue } from "mendix";
 import { action, computed, makeObservable, observable, when } from "mobx";
 import { QueryService } from "../interfaces/QueryService";
-import { TaskProgressService } from "../interfaces/TaskProgressService";
+import { ServiceEvents } from "./select-all.model";
 
 interface DynamicProps {
     itemSelection?: SelectionMultiValue | SelectionSingleValue;
 }
 
-export class SelectAllService implements SetupComponent {
+export class SelectAllService {
     private locked = false;
     private abortController?: AbortController;
     private readonly pageSize = 1024;
 
     constructor(
-        host: SetupComponentHost,
         private gate: DerivedPropsGate<DynamicProps>,
         private query: QueryService,
-        private progress: TaskProgressService
+        private progress: Emitter<ServiceEvents>
     ) {
-        host.add(this);
-        type PrivateMembers = "setIsLocked" | "locked";
+        type PrivateMembers = "locked";
         makeObservable<this, PrivateMembers>(this, {
-            setIsLocked: action,
             canExecute: computed,
-            isExecuting: computed,
             selection: computed,
             locked: observable,
             selectAllPages: action,
@@ -33,10 +29,6 @@ export class SelectAllService implements SetupComponent {
         });
     }
 
-    setup(): () => void {
-        return () => this.abort();
-    }
-
     get selection(): SelectionMultiValue | undefined {
         const selection = this.gate.props.itemSelection;
         if (selection === undefined) return;
@@ -48,14 +40,6 @@ export class SelectAllService implements SetupComponent {
         return this.gate.props.itemSelection?.type === "Multi" && !this.locked;
     }
 
-    get isExecuting(): boolean {
-        return this.locked;
-    }
-
-    private setIsLocked(value: boolean): void {
-        this.locked = value;
-    }
-
     private beforeRunChecks(): boolean {
         const selection = this.gate.props.itemSelection;
 
@@ -94,8 +78,10 @@ export class SelectAllService implements SetupComponent {
             return { success: false };
         }
 
-        this.setIsLocked(true);
+        this.locked = true;
+        this.abortController = new AbortController();
 
+        const signal = this.abortController.signal;
         const { offset: initOffset, limit: initLimit } = this.query;
         const initSelection = this.selection?.selection ?? [];
         const hasTotal = typeof this.query.totalCount === "number";
@@ -107,12 +93,10 @@ export class SelectAllService implements SetupComponent {
             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;
 
         performance.mark("SelectAll_Start");
         try {
-            this.progress.onloadstart(pe("loadstart"));
+            this.progress.emit("loadstart", pe("loadstart"));
             let loading = true;
             while (loading) {
                 const loadedItems = await this.query.fetchPage({
@@ -124,7 +108,7 @@ export class SelectAllService implements SetupComponent {
                 allItems.push(...loadedItems);
                 loaded += loadedItems.length;
                 offset += this.pageSize;
-                this.progress.onprogress(pe("progress"));
+                this.progress.emit("progress", pe("progress"));
                 loading = !signal.aborted && this.query.hasMoreItems;
             }
             success = true;
@@ -141,9 +125,7 @@ export class SelectAllService implements SetupComponent {
                 offset: initOffset
             });
             await this.reloadSelection();
-            this.progress.onloadend();
-
-            // const selectionBeforeReload = this.selection?.selection ?? [];
+            this.progress.emit("loadend");
             // Reload selection to make sure setSelection is working as expected.
             this.selection?.setSelection(success ? allItems : initSelection);
             this.locked = false;
diff --git a/packages/shared/widget-plugin-grid/src/select-all/SelectAllBar.store.ts b/packages/shared/widget-plugin-grid/src/select-all/SelectAllBar.store.ts
@@ -1,4 +1,4 @@
-import { action, makeObservable, observable } from "mobx";
+import { makeAutoObservable } from "mobx";
 import { BarStore } from "./select-all.model";
 
 export class SelectAllBarStore implements BarStore {
@@ -7,15 +7,7 @@ export class SelectAllBarStore implements BarStore {
     clearBtnVisible = false;
 
     constructor() {
-        makeObservable(this, {
-            pending: observable,
-            visible: observable,
-            clearBtnVisible: observable,
-            setClearBtnVisible: action,
-            setPending: action,
-            hideBar: action,
-            showBar: action
-        });
+        makeAutoObservable(this);
     }
 
     setClearBtnVisible(value: boolean): void {
diff --git a/packages/shared/widget-plugin-grid/src/select-all/select-all.model.ts b/packages/shared/widget-plugin-grid/src/select-all/select-all.model.ts
@@ -1,5 +1,12 @@
-import { ComputedAtom, createEmitter, disposeBatch, Emitter } from "@mendix/widget-plugin-mobx-kit/main";
-import { reaction } from "mobx";
+import {
+    ComputedAtom,
+    createEmitter,
+    DerivedPropsGate,
+    disposeBatch,
+    Emitter
+} from "@mendix/widget-plugin-mobx-kit/main";
+import { DynamicValue } from "mendix";
+import { observable, reaction } from "mobx";
 
 export type ServiceEvents = {
     loadstart: ProgressEvent;
@@ -26,6 +33,43 @@ export function selectAllEmitter(): Emitter<SelectAllEvents> {
     return createEmitter<SelectAllEvents>();
 }
 
+interface ObservableSelectAllTexts {
+    selectionStatus: string;
+    selectAllLabel: string;
+}
+
+/** @injectable */
+export function selectAllTextsStore(
+    gate: DerivedPropsGate<{
+        allSelectedText?: DynamicValue<string>;
+        selectAllTemplate?: DynamicValue<string>;
+        selectAllText?: DynamicValue<string>;
+    }>,
+    selectedCount: ComputedAtom<number>,
+    selectedTexts: { selectedCountText: string },
+    totalCount: ComputedAtom<number>,
+    isAllItemsSelected: ComputedAtom<boolean>
+): ObservableSelectAllTexts {
+    return observable({
+        get selectAllLabel() {
+            const selectAllFormat = gate.props.selectAllTemplate?.value || "Select all %d rows in the data source";
+            const selectAllText = gate.props.selectAllText?.value || "Select all rows in the data source";
+            const total = totalCount.get();
+            if (total > 0) return selectAllFormat.replace("%d", `${total}`);
+            return selectAllText;
+        },
+        get selectionStatus() {
+            if (isAllItemsSelected.get()) return this.allSelectedText;
+            return selectedTexts.selectedCountText;
+        },
+        get allSelectedText() {
+            const str = gate.props.allSelectedText?.value ?? "All %d rows selected.";
+            const count = selectedCount.get();
+            return str.replace("%d", `${count}`);
+        }
+    });
+}
+
 export interface BarStore {
     pending: boolean;
     visible: boolean;
@@ -75,6 +119,7 @@ export function setupSelectService(service: SelectService, emitter: Emitter<Sele
     add(emitter.on("startSelecting", () => service.selectAllPages()));
     add(emitter.on("clear", () => service.clearSelection()));
     add(emitter.on("abort", () => service.abort()));
+    add(() => service.abort());
 
     return disposeAll;
 }
diff --git a/packages/shared/widget-plugin-grid/src/selection-counter/SelectionCounter.viewModel-atoms.ts b/packages/shared/widget-plugin-grid/src/selection-counter/SelectionCounter.viewModel-atoms.ts
@@ -0,0 +1,38 @@
+import { ComputedAtom } from "@mendix/widget-plugin-mobx-kit/main";
+import { makeAutoObservable } from "mobx";
+
+/** @injectable */
+export class SelectionCounterViewModel {
+    constructor(
+        private selected: ComputedAtom<number>,
+        private texts: {
+            clearSelectionButtonLabel: string;
+            selectedCountText: string;
+        },
+        private position: "top" | "bottom" | "off"
+    ) {
+        makeAutoObservable(this);
+    }
+
+    get isTopCounterVisible(): boolean {
+        if (this.position !== "top") return false;
+        return this.selected.get() > 0;
+    }
+
+    get isBottomCounterVisible(): boolean {
+        if (this.position !== "bottom") return false;
+        return this.selected.get() > 0;
+    }
+
+    get clearButtonLabel(): string {
+        return this.texts.clearSelectionButtonLabel;
+    }
+
+    get selectedCount(): number {
+        return this.selected.get();
+    }
+
+    get selectedCountText(): string {
+        return this.texts.selectedCountText;
+    }
+}
diff --git a/packages/shared/widget-plugin-grid/src/selection-counter/__tests__/SelectionCounter.viewModel.spec.ts b/packages/shared/widget-plugin-grid/src/selection-counter/__tests__/SelectionCounter.viewModel.spec.ts
