feat: add spd vm

Author: iobuhov

packages/pluggableWidgets/datagrid-web/src/components/SelectAllBar.tsx

@@ -4,23 +4,21 @@ import { createElement } from "react";
 import { useDatagridRootScope } from "../helpers/root-context";
 
 export const SelectAllBar = observer(function SelectAllBar(): React.ReactNode {
-    const { selectAllBarViewModel } = useDatagridRootScope();
-    const { barVisible, selectionCountText, clearVisible, clearSelectionLabel, selectAllVisible, selectAllLabel } =
-        selectAllBarViewModel;
+    const { selectAllBarViewModel: vm } = useDatagridRootScope();
 
-    if (!barVisible) return null;
+    if (!vm.barVisible) return null;
 
     return (
         <div className="widget-datagrid-select-all-bar">
-            {selectionCountText}&nbsp;
-            <If condition={selectAllVisible}>
-                <button className="btn" onClick={() => selectAllBarViewModel.onSelectAll()}>
-                    {selectAllLabel}
+            {vm.selectionCountText}&nbsp;
+            <If condition={vm.selectAllVisible}>
+                <button className="btn" onClick={() => vm.onSelectAll()}>
+                    {vm.selectAllLabel}
                 </button>
             </If>
-            <If condition={clearVisible}>
-                <button className="btn" onClick={() => selectAllBarViewModel.onClear()}>
-                    {clearSelectionLabel}
+            <If condition={vm.clearVisible}>
+                <button className="btn" onClick={() => vm.onClear()}>
+                    {vm.clearSelectionLabel}
                 </button>
             </If>
         </div>

packages/pluggableWidgets/datagrid-web/src/components/SelectionProgressDialog.tsx

@@ -1,34 +1,20 @@
 import { createElement, ReactElement } from "react";
-import { PseudoModal } from "./PseudoModal";
+import { useDatagridRootScope } from "../helpers/root-context";
 import { ExportAlert } from "./ExportAlert";
+import { PseudoModal } from "./PseudoModal";
 
-export type SelectionProgressDialogProps = {
-    open: boolean;
-    selectingLabel: string;
-    cancelLabel: string;
-    onCancel: () => void;
-    progress: number;
-    total: number;
-};
-
-export function SelectionProgressDialog({
-    open,
-    selectingLabel,
-    cancelLabel,
-    onCancel,
-    progress,
-    total
-}: SelectionProgressDialogProps): ReactElement | null {
-    if (!open) return null;
+export function SelectionProgressDialog(): ReactElement | null {
+    const { selectionProgressDialogViewModel: vm } = useDatagridRootScope();
+    if (!vm.open) return null;
     return (
         <PseudoModal>
             <ExportAlert
-                alertLabel={selectingLabel}
-                cancelLabel={cancelLabel}
+                alertLabel={vm.selectingAllLabel}
+                cancelLabel={vm.cancelSelectionLabel}
                 failed={false}
-                onCancel={onCancel}
-                progress={progress}
-                total={total}
+                onCancel={() => vm.onCancel()}
+                progress={vm.progress}
+                total={vm.total}
             />
         </PseudoModal>
     );

packages/pluggableWidgets/datagrid-web/src/components/Widget.tsx

@@ -82,7 +82,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, selectAllController } = useDatagridRootScope();
+    const { basicData, selectAllProgressStore } = useDatagridRootScope();
 
     const selectionEnabled = selectActionHelper.selectionType !== "None";
 
@@ -96,14 +96,7 @@ export const Widget = observer(<C extends GridColumn>(props: WidgetProps<C>): Re
             selectingAllPages={selectAllProgressStore.inProgress}
         >
             <Main {...props} data={exporting ? [] : props.data} />
-            <SelectionProgressDialog
-                open={selectAllProgressStore.inProgress}
-                selectingLabel={basicData.selectingAllLabel ?? "Selecting all items..."}
-                cancelLabel={basicData.cancelSelectionLabel ?? "Cancel selection"}
-                onCancel={() => selectAllController.abort()}
-                progress={selectAllProgressStore.loaded}
-                total={selectAllProgressStore.total}
-            />
+            <SelectionProgressDialog />
             {exporting && (
                 <ExportWidget
                     alertLabel={basicData.exportDialogLabel ?? "Export progress"}

packages/pluggableWidgets/datagrid-web/src/helpers/root-context.ts

@@ -1,12 +1,13 @@
 import { FocusTargetController } from "@mendix/widget-plugin-grid/keyboard-navigation/FocusTargetController";
-import { SelectAllController, SelectionHelper } from "@mendix/widget-plugin-grid/selection";
+import { SelectionHelper } from "@mendix/widget-plugin-grid/selection";
 import { ProgressStore } from "@mendix/widget-plugin-grid/stores/ProgressStore";
 import { SelectionCountStore } from "@mendix/widget-plugin-grid/stores/SelectionCountStore";
 import { createContext, useContext } from "react";
 import { GridBasicData } from "../helpers/state/GridBasicData";
 import { EventsController } from "../typings/CellComponent";
 import { SelectActionHelper } from "./SelectActionHelper";
 import { SelectAllBarViewModel } from "./state/SelectAllBarViewModel";
+import { SelectionProgressDialogViewModel } from "./state/SelectionProgressDialogViewModel";
 
 export interface DatagridRootScope {
     basicData: GridBasicData;
@@ -15,11 +16,11 @@ export interface DatagridRootScope {
     selectActionHelper: SelectActionHelper;
     cellEventsController: EventsController;
     checkboxEventsController: EventsController;
-    selectAllController: SelectAllController;
     focusController: FocusTargetController;
     selectionCountStore: SelectionCountStore;
     selectAllProgressStore: ProgressStore;
     selectAllBarViewModel: SelectAllBarViewModel;
+    selectionProgressDialogViewModel: SelectionProgressDialogViewModel;
 }
 
 export const DatagridContext = createContext<DatagridRootScope | null>(null);

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

@@ -5,17 +5,7 @@ import { DatagridContainerProps } from "../../../typings/DatagridProps";
 
 type Props = Pick<
     DatagridContainerProps,
-    | "exportDialogLabel"
-    | "cancelExportLabel"
-    | "selectRowLabel"
-    | "selectAllRowsLabel"
-    | "itemSelection"
-    | "onClick"
-    | "selectingAllLabel"
-    | "cancelSelectionLabel"
-    | "selectAllTemplate"
-    | "selectRemainingTemplate"
-    | "clearSelectionCaption"
+    "exportDialogLabel" | "cancelExportLabel" | "selectRowLabel" | "selectAllRowsLabel" | "itemSelection" | "onClick"
 >;
 
 type Gate = DerivedPropsGate<Props>;
@@ -50,14 +40,6 @@ export class GridBasicData {
         return this.gate.props.selectAllRowsLabel?.value;
     }
 
-    get selectingAllLabel(): string | undefined {
-        return this.gate.props.selectingAllLabel?.value;
-    }
-
-    get cancelSelectionLabel(): string | undefined {
-        return this.gate.props.cancelSelectionLabel?.value;
-    }
-
     get gridInteractive(): boolean {
         return !!(this.gate.props.itemSelection || this.gate.props.onClick);
     }

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

@@ -0,0 +1,44 @@
+import { SelectAllController } from "@mendix/widget-plugin-grid/selection";
+import { ProgressStore } from "@mendix/widget-plugin-grid/stores/ProgressStore";
+import { DerivedPropsGate } from "@mendix/widget-plugin-mobx-kit/props-gate";
+import { DynamicValue } from "mendix";
+import { makeAutoObservable } from "mobx";
+
+type Gate = DerivedPropsGate<{
+    selectingAllLabel?: DynamicValue<string>;
+    cancelSelectionLabel?: DynamicValue<string>;
+}>;
+
+export class SelectionProgressDialogViewModel {
+    constructor(
+        private gate: Gate,
+        private progressStore: ProgressStore,
+        private selectAllController: SelectAllController
+    ) {
+        makeAutoObservable(this);
+    }
+
+    get open(): boolean {
+        return this.progressStore.inProgress;
+    }
+
+    get progress(): number {
+        return this.progressStore.loaded;
+    }
+
+    get total(): number {
+        return this.progressStore.total;
+    }
+
+    get selectingAllLabel(): string {
+        return this.gate.props.selectingAllLabel?.value ?? "Selecting all items...";
+    }
+
+    get cancelSelectionLabel(): string {
+        return this.gate.props.cancelSelectionLabel?.value ?? "Cancel selection";
+    }
+
+    onCancel(): void {
+        this.selectAllController.abort();
+    }
+}

packages/pluggableWidgets/datagrid-web/typings/DatagridProps.d.ts

@@ -3,9 +3,21 @@
  * WARNING: All changes made to this file will be overwritten
  * @author Mendix Widgets Framework Team
  */
-import { ComponentType, CSSProperties, ReactNode } from "react";
-import { ActionValue, DynamicValue, EditableValue, ListValue, ListActionValue, ListAttributeValue, ListAttributeListValue, ListExpressionValue, ListWidgetValue, SelectionSingleValue, SelectionMultiValue } from "mendix";
 import { Big } from "big.js";
+import {
+    ActionValue,
+    DynamicValue,
+    EditableValue,
+    ListActionValue,
+    ListAttributeListValue,
+    ListAttributeValue,
+    ListExpressionValue,
+    ListValue,
+    ListWidgetValue,
+    SelectionMultiValue,
+    SelectionSingleValue
+} from "mendix";
+import { ComponentType, CSSProperties, ReactNode } from "react";
 
 export type ShowContentAsEnum = "attribute" | "dynamicText" | "customContent";
 
@@ -19,7 +31,9 @@ export type AlignmentEnum = "left" | "center" | "right";
 
 export interface ColumnsType {
     showContentAs: ShowContentAsEnum;
-    attribute?: ListAttributeValue<string | Big | boolean | Date> | ListAttributeListValue<string | Big | boolean | Date>;
+    attribute?:
+        | ListAttributeValue<string | Big | boolean | Date>
+        | ListAttributeListValue<string | Big | boolean | Date>;
     content?: ListWidgetValue;
     dynamicText?: ListExpressionValue<string>;
     exportValue?: ListExpressionValue<string>;