feat: add sab vm

Author: iobuhov

packages/pluggableWidgets/datagrid-web/src/Datagrid.xml

@@ -219,27 +219,13 @@
                     <description>If enabled, selected items will stay selected unless cleared by the user or a Nanoflow.</description>
                 </property>
                 <property key="selectAllPagesEnabled" type="boolean" defaultValue="false">
-                    <caption>Enable select all pages</caption>
-                    <description>Allow select all through multiple pages (based on current filter). Only works if total count is known.</description>
+                    <caption>Enable select all</caption>
+                    <description>Allow select all through multiple pages (based on current filter).</description>
                 </property>
-                <property key="selectAllPagesPageSize" type="integer" defaultValue="500">
+                <property key="selectAllPagesPageSize" type="integer" defaultValue="1024">
                     <caption>Select all page size</caption>
                     <description>When selecting items from a large data source, items are selected in batches. This setting controls the size of the batches.</description>
                 </property>
-                <property key="selectingAllLabel" type="textTemplate" required="false">
-                    <caption>Selecting all label</caption>
-                    <description>Label shown in the progress dialog when selecting all items</description>
-                    <translations>
-                        <translation lang="en_US">Selecting all items...</translation>
-                    </translations>
-                </property>
-                <property key="cancelSelectionLabel" type="textTemplate" required="false">
-                    <caption>Cancel selection label</caption>
-                    <description>Label for the cancel button in the selection progress dialog</description>
-                    <translations>
-                        <translation lang="en_US">Cancel selection</translation>
-                    </translations>
-                </property>
             </propertyGroup>
             <propertyGroup caption="Loading state">
                 <property key="loadingType" type="enumeration" defaultValue="spinner" required="true">
@@ -363,7 +349,7 @@
                 </property>
             </propertyGroup>
         </propertyGroup>
-        <propertyGroup caption="Accessibility">
+        <propertyGroup caption="Texts">
             <propertyGroup caption="Aria labels">
                 <property key="filterSectionTitle" type="textTemplate" required="false">
                     <caption>Filter section</caption>
@@ -384,19 +370,35 @@
                     </translations>
                 </property>
                 <property key="selectRowLabel" type="textTemplate" required="false">
-                    <caption>Select row</caption>
+                    <caption>Select row label</caption>
                     <description>If selection is enabled, assistive technology will read this upon reaching a checkbox.</description>
                     <translations>
                         <translation lang="en_US">Select row</translation>
                     </translations>
                 </property>
                 <property key="selectAllRowsLabel" type="textTemplate" required="false">
-                    <caption>Select all row</caption>
+                    <caption>Select all label</caption>
                     <description>If selection is enabled, assistive technology will read this upon reaching 'Select all' checkbox.</description>
                     <translations>
                         <translation lang="en_US">Select all rows</translation>
                     </translations>
                 </property>
+                <property key="selectingAllLabel" type="textTemplate" required="false">
+                    <caption>Selecting all label</caption>
+                    <description>ARIA label for the progress dialog when selecting all items</description>
+                    <translations>
+                        <translation lang="en_US">Selecting all items...</translation>
+                    </translations>
+                </property>
+                <property key="cancelSelectionLabel" type="textTemplate" required="false">
+                    <caption>Cancel selection label</caption>
+                    <description>ARIA label for the cancel button in the selection progress dialog</description>
+                    <translations>
+                        <translation lang="en_US">Cancel selection</translation>
+                    </translations>
+                </property>
+            </propertyGroup>
+            <propertyGroup caption="Captions">
                 <property key="selectedCountTemplateSingular" type="textTemplate" required="false">
                     <caption>Row count singular</caption>
                     <description>Must include '%d' to denote number position ('%d row selected')</description>
@@ -405,6 +407,27 @@
                     <caption>Row count plural</caption>
                     <description>Must include '%d' to denote number position ('%d rows selected')</description>
                 </property>
+                <property key="selectAllTemplate" type="textTemplate">
+                    <caption>Select all</caption>
+                    <description>This caption used when total count is available.</description>
+                    <translations>
+                        <translation lang="en_US">Select all %d items in the data source.</translation>
+                    </translations>
+                </property>
+                <property key="selectRemainingTemplate" type="textTemplate">
+                    <caption>2</caption>
+                    <description />
+                    <translations>
+                        <translation lang="en_US">Select remaining items in the data source.</translation>
+                    </translations>
+                </property>
+                <property key="clearSelectionCaption" type="textTemplate">
+                    <caption>Clear selection caption</caption>
+                    <description />
+                    <translations>
+                        <translation lang="en_US">Clear selection</translation>
+                    </translations>
+                </property>
             </propertyGroup>
         </propertyGroup>
     </properties>

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

@@ -1,20 +1,28 @@
+import { If } from "@mendix/widget-plugin-component-kit/If";
 import { observer } from "mobx-react-lite";
 import { createElement } from "react";
 import { useDatagridRootScope } from "../helpers/root-context";
 
 export const SelectAllBar = observer(function SelectAllBar(): React.ReactNode {
-    const {
-        selectAllController,
-        basicData: { selectionStatus }
-    } = useDatagridRootScope();
+    const { selectAllBarViewModel } = useDatagridRootScope();
+    const { barVisible, selectionCountText, clearVisible, clearSelectionLabel, selectAllVisible, selectAllLabel } =
+        selectAllBarViewModel;
 
-    if (selectionStatus === "unknown") return null;
-
-    if (selectionStatus === "none") return null;
+    if (!barVisible) return null;
 
     return (
         <div className="widget-datagrid-select-all-bar">
-            <button onClick={() => selectAllController.selectAllPages()}>Select remaining</button>
+            {selectionCountText}&nbsp;
+            <If condition={selectAllVisible}>
+                <button className="btn" onClick={() => selectAllBarViewModel.onSelectAll()}>
+                    {selectAllLabel}
+                </button>
+            </If>
+            <If condition={clearVisible}>
+                <button className="btn" onClick={() => selectAllBarViewModel.onClear()}>
+                    {clearSelectionLabel}
+                </button>
+            </If>
         </div>
     );
 });

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

@@ -44,8 +44,9 @@ const SelectionCounter = observer(function SelectionCounter() {
     const { selectionCountStore, selectActionHelper } = useDatagridRootScope();
 
     return (
-        <If condition={selectionCountStore.displayCount !== ""}>
-            <span className="widget-datagrid-selection-count">{selectionCountStore.displayCount}</span>&nbsp;|&nbsp;
+        <If condition={selectionCountStore.selectedCountText !== ""}>
+            <span className="widget-datagrid-selection-count">{selectionCountStore.selectedCountText}</span>
+            &nbsp;|&nbsp;
             <button className="widget-datagrid-clear-selection" onClick={selectActionHelper.onClearSelection}>
                 Clear selection
             </button>

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

@@ -6,6 +6,7 @@ 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";
 
 export interface DatagridRootScope {
     basicData: GridBasicData;
@@ -18,6 +19,7 @@ export interface DatagridRootScope {
     focusController: FocusTargetController;
     selectionCountStore: SelectionCountStore;
     selectAllProgressStore: ProgressStore;
+    selectAllBarViewModel: SelectAllBarViewModel;
 }
 
 export const DatagridContext = createContext<DatagridRootScope | null>(null);

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

@@ -13,11 +13,18 @@ type Props = Pick<
     | "onClick"
     | "selectingAllLabel"
     | "cancelSelectionLabel"
+    | "selectAllTemplate"
+    | "selectRemainingTemplate"
+    | "clearSelectionCaption"
 >;
 
 type Gate = DerivedPropsGate<Props>;
 
-/** This is basic data class, just a props mapper. Don't add any state or complex logic. */
+/**
+ * This is basic data class, just a props mapper.
+ * Don't add any state or complex logic.
+ * Don't use this class to share instances. Use context.
+ */
 export class GridBasicData {
     private gate: Gate;
     private selectionHelper: SelectionHelper | null = null;
@@ -58,12 +65,4 @@ export class GridBasicData {
     get selectionStatus(): SelectionStatus {
         return this.selectionHelper?.type === "Multi" ? this.selectionHelper.selectionStatus : "none";
     }
-
-    get currentSelectionHelper(): SelectionHelper | null {
-        return this.selectionHelper;
-    }
-
-    setSelectionHelper(selectionHelper: SelectionHelper | undefined): void {
-        this.selectionHelper = selectionHelper ?? null;
-    }
 }

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

@@ -0,0 +1,85 @@
+import { SelectAllController } from "@mendix/widget-plugin-grid/selection";
+import { SelectionCountStore } from "@mendix/widget-plugin-grid/stores/SelectionCountStore";
+import { DerivedPropsGate } from "@mendix/widget-plugin-mobx-kit/props-gate";
+import { makeAutoObservable } from "mobx";
+import { DatagridContainerProps } from "../../../typings/DatagridProps";
+
+type Props = Pick<
+    DatagridContainerProps,
+    | "cancelSelectionLabel"
+    | "selectAllTemplate"
+    | "selectRemainingTemplate"
+    | "clearSelectionCaption"
+    | "itemSelection"
+    | "selectedCountTemplatePlural"
+    | "selectedCountTemplateSingular"
+    | "datasource"
+>;
+
+type Gate = DerivedPropsGate<Props>;
+
+export class SelectAllBarViewModel {
+    showClear = false;
+
+    constructor(
+        private gate: Gate,
+        private selectAllController: SelectAllController,
+        private count = new SelectionCountStore(gate)
+    ) {
+        makeAutoObservable(this);
+    }
+
+    private setShowClear(value: boolean): void {
+        this.showClear = value;
+    }
+
+    private get total(): number {
+        return this.gate.props.datasource.totalCount ?? 0;
+    }
+
+    private get selectAllFormat(): string {
+        return this.gate.props.selectAllTemplate?.value ?? "select.all.items";
+    }
+
+    private get selectRemainingText(): string {
+        return this.gate.props.selectRemainingTemplate?.value ?? "select.remaining.items";
+    }
+
+    get selectAllLabel(): string {
+        if (this.total > 0) return this.selectAllFormat.replace("%d", `${this.total}`);
+        return this.selectRemainingText;
+    }
+
+    get clearSelectionLabel(): string {
+        return this.gate.props.clearSelectionCaption?.value ?? "clear.selection.caption";
+    }
+
+    get selectionCountText(): string {
+        return this.count.selectedCountText;
+    }
+
+    get barVisible(): boolean {
+        return this.count.selectedCountText !== "";
+    }
+
+    get clearVisible(): boolean {
+        if (this.total > 0) return this.total === this.count.selectedCount;
+        return this.showClear;
+    }
+
+    get selectAllVisible(): boolean {
+        if (this.clearVisible) return false;
+        if (this.total > 0) return this.total > this.count.selectedCount;
+        return this.gate.props.datasource.hasMoreItems ?? false;
+    }
+
+    onClear(): void {
+        this.selectAllController.clearSelection();
+        this.setShowClear(false);
+    }
+
+    async onSelectAll(): Promise<void> {
+        await this.selectAllController.selectAllPages();
+        this.setShowClear(true);
+    }
+}

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

@@ -103,8 +103,6 @@ export interface DatagridContainerProps {
     keepSelection: boolean;
     selectAllPagesEnabled: boolean;
     selectAllPagesPageSize: number;
-    selectingAllLabel?: DynamicValue<string>;
-    cancelSelectionLabel?: DynamicValue<string>;
     loadingType: LoadingTypeEnum;
     refreshIndicator: boolean;
     pageSize: number;
@@ -128,8 +126,13 @@ export interface DatagridContainerProps {
     cancelExportLabel?: DynamicValue<string>;
     selectRowLabel?: DynamicValue<string>;
     selectAllRowsLabel?: DynamicValue<string>;
+    selectingAllLabel?: DynamicValue<string>;
+    cancelSelectionLabel?: DynamicValue<string>;
     selectedCountTemplateSingular?: DynamicValue<string>;
     selectedCountTemplatePlural?: DynamicValue<string>;
+    selectAllTemplate: DynamicValue<string>;
+    selectRemainingTemplate: DynamicValue<string>;
+    clearSelectionCaption: DynamicValue<string>;
 }
 
 export interface DatagridPreviewProps {
@@ -158,8 +161,6 @@ export interface DatagridPreviewProps {
     keepSelection: boolean;
     selectAllPagesEnabled: boolean;
     selectAllPagesPageSize: number | null;
-    selectingAllLabel: string;
-    cancelSelectionLabel: string;
     loadingType: LoadingTypeEnum;
     refreshIndicator: boolean;
     pageSize: number | null;
@@ -184,6 +185,11 @@ export interface DatagridPreviewProps {
     cancelExportLabel: string;
     selectRowLabel: string;
     selectAllRowsLabel: string;
+    selectingAllLabel: string;
+    cancelSelectionLabel: string;
     selectedCountTemplateSingular: string;
     selectedCountTemplatePlural: string;
+    selectAllTemplate: string;
+    selectRemainingTemplate: string;
+    clearSelectionCaption: string;
 }

packages/shared/widget-plugin-grid/src/stores/SelectionCountStore.ts

@@ -6,6 +6,7 @@ type Gate = DerivedPropsGate<{
     itemSelection?: SelectionSingleValue | SelectionMultiValue;
     selectedCountTemplateSingular?: DynamicValue<string>;
     selectedCountTemplatePlural?: DynamicValue<string>;
+    clearSelectionCaption?: DynamicValue<string>;
 }>;
 
 export class SelectionCountStore {
@@ -19,18 +20,18 @@ export class SelectionCountStore {
         this.gate = gate;
 
         makeObservable(this, {
-            displayCount: computed,
+            selectedCountText: computed,
             selectedCount: computed,
-            fmtSingular: computed,
-            fmtPlural: computed
+            formatSingular: computed,
+            formatPlural: computed
         });
     }
 
-    get fmtSingular(): string {
+    get formatSingular(): string {
         return this.gate.props.selectedCountTemplateSingular?.value || this.singular;
     }
 
-    get fmtPlural(): string {
+    get formatPlural(): string {
         return this.gate.props.selectedCountTemplatePlural?.value || this.plural;
     }
 
@@ -49,10 +50,14 @@ export class SelectionCountStore {
         return itemSelection.selection?.length ?? 0;
     }
 
-    get displayCount(): string {
+    get selectedCountText(): string {
         const count = this.selectedCount;
         if (count === 0) return "";
-        if (count === 1) return this.fmtSingular.replace("%d", "1");
-        return this.fmtPlural.replace("%d", `${count}`);
+        if (count === 1) return this.formatSingular.replace("%d", "1");
+        return this.formatPlural.replace("%d", `${count}`);
+    }
+
+    get clearSelectionLabel(): string {
+        return this.gate.props.clearSelectionCaption?.value ?? "clear.selection.caption";
     }
 }