refactor: change to selection counter view model

Author: iobuhov

packages/pluggableWidgets/datagrid-web/src/Datagrid.depsContainer.ts

@@ -1,9 +1,12 @@
 import { FilterAPI, WidgetFilterAPI } from "@mendix/widget-plugin-filtering/context";
 import { CombinedFilter, CombinedFilterConfig } from "@mendix/widget-plugin-filtering/stores/generic/CombinedFilter";
 import { CustomFilterHost } from "@mendix/widget-plugin-filtering/stores/generic/CustomFilterHost";
-import { DatasourceService, QueryService, RefreshController } from "@mendix/widget-plugin-grid/main";
-
-import { SelectionCountStore } from "@mendix/widget-plugin-grid/selection/stores/SelectionCountStore";
+import {
+    DatasourceService,
+    QueryService,
+    RefreshController,
+    SelectionCounterViewModel
+} from "@mendix/widget-plugin-grid/main";
 import { ClosableGateProvider } from "@mendix/widget-plugin-mobx-kit/ClosableGateProvider";
 import { GateProvider } from "@mendix/widget-plugin-mobx-kit/GateProvider";
 import { DerivedPropsGate, SetupComponentHost } from "@mendix/widget-plugin-mobx-kit/main";
@@ -13,7 +16,7 @@ import { useSetup } from "@mendix/widget-plugin-mobx-kit/react/useSetup";
 import { generateUUID } from "@mendix/widget-plugin-platform/framework/generate-uuid";
 import { Container, injected, token } from "brandi";
 import { useEffect } from "react";
-import { DatagridContainerProps } from "../typings/DatagridProps";
+import { DatagridContainerProps, SelectionCounterPositionEnum } from "../typings/DatagridProps";
 import { DatasourceParamsController } from "./controllers/DatasourceParamsController";
 import { DerivedLoaderController, DerivedLoaderControllerConfig } from "./controllers/DerivedLoaderController";
 import { PaginationConfig, PaginationController } from "./controllers/PaginationController";
@@ -66,7 +69,8 @@ export const TOKENS = {
     query: token<QueryService>("QueryService"),
     refreshInterval: token<number>("refreshInterval"),
     refreshService: token<RefreshController>("DatagridRefreshService"),
-    selectionCounter: token<SelectionCountStore>("SelectionCountStore"),
+    selectionCounter: token<SelectionCounterViewModel>("SelectionCounterViewModel"),
+    selectionCounterPosition: token<SelectionCounterPositionEnum>("SelectionCounterPositionEnum"),
     setupService: token<SetupComponentHost>("DatagridSetupHost"),
     staticInfo: token<StaticInfo>("StaticInfo")
 };
@@ -148,8 +152,8 @@ class DatagridContainer extends Container {
         );
 
         // Selection counter view model
-        this.bind(TOKENS.selectionCounter).toInstance(SelectionCountStore).inSingletonScope();
-        injected(SelectionCountStore, TOKENS.mainGate);
+        this.bind(TOKENS.selectionCounter).toInstance(SelectionCounterViewModel).inSingletonScope();
+        injected(SelectionCounterViewModel, TOKENS.mainGate, TOKENS.selectionCounterPosition);
     }
 }
 
@@ -192,6 +196,9 @@ export function useDatagridDepsContainer(props: DatagridContainerProps): Contain
                 pageSize: props.pageSize
             });
 
+            // Bind selection counter position
+            container.bind(TOKENS.selectionCounterPosition).toConstant(props.selectionCounterPosition);
+
             // Make sure essential services are created upfront
             container.get(TOKENS.refreshService);
             container.get(TOKENS.paramsService);

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

@@ -113,7 +113,6 @@ const DatagridRoot = observer((props: DatagridContainerProps): ReactElement => {
                 pageSize={props.pageSize}
                 paginationType={props.pagination}
                 loadMoreButtonCaption={props.loadMoreButtonCaption?.value}
-                selectionCountPosition={props.selectionCountPosition}
                 paging={paginationService.showPagination}
                 pagingPosition={props.pagingPosition}
                 showPagingButtons={props.showPagingButtons}

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

@@ -53,7 +53,7 @@
                     <caption>Keep selection</caption>
                     <description>If enabled, selected items will stay selected unless cleared by the user or a Nanoflow.</description>
                 </property>
-                <property key="selectionCountPosition" type="enumeration" defaultValue="bottom" required="true">
+                <property key="selectionCounterPosition" type="enumeration" defaultValue="bottom" required="true">
                     <caption>Show selection count</caption>
                     <description />
                     <enumerationValues>

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

@@ -1,31 +1,20 @@
-import { If } from "@mendix/widget-plugin-component-kit/If";
 import { observer } from "mobx-react-lite";
-import { useSelectionCounter } from "../deps-hooks";
+import { Fragment } from "react";
+import { useSelectionCounterViewModel } from "../deps-hooks";
 import { useLegacyContext } from "../helpers/root-context";
 
-type SelectionCounterLocation = "top" | "bottom" | undefined;
-
-export const SelectionCounter = observer(function SelectionCounter({
-    location
-}: {
-    location?: SelectionCounterLocation;
-}) {
-    const selectionCountStore = useSelectionCounter();
+export const SelectionCounter = observer(function SelectionCounter() {
+    const selectionCountStore = useSelectionCounterViewModel();
     const { selectActionHelper } = useLegacyContext();
 
-    const containerClass = location === "top" ? "widget-datagrid-tb-start" : "widget-datagrid-pb-start";
-
     return (
-        <If condition={selectionCountStore.displayCount !== ""}>
-            <div className={containerClass}>
-                <span className="widget-datagrid-selection-count" aria-live="polite" aria-atomic="true">
-                    {selectionCountStore.displayCount}
-                </span>
-                &nbsp;|&nbsp;
-                <button className="widget-datagrid-clear-selection" onClick={selectActionHelper.onClearSelection}>
-                    {selectionCountStore.clearButtonLabel}
-                </button>
-            </div>
-        </If>
+        <Fragment>
+            <span className="widget-datagrid-selection-count" aria-live="polite" aria-atomic="true">
+                {selectionCountStore.selectedCountText}
+            </span>
+            <button className="widget-datagrid-clear-selection" onClick={selectActionHelper.onClearSelection}>
+                {selectionCountStore.clearButtonLabel}
+            </button>
+        </Fragment>
     );
 });

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

@@ -9,10 +9,9 @@ import {
     LoadingTypeEnum,
     PaginationEnum,
     PagingPositionEnum,
-    SelectionCountPositionEnum,
     ShowPagingButtonsEnum
 } from "../../typings/DatagridProps";
-import { useBasicData, useSelectionCounter } from "../deps-hooks";
+import { useBasicData } from "../deps-hooks";
 import { SelectActionHelper } from "../helpers/SelectActionHelper";
 import { CellComponent, EventsController } from "../typings/CellComponent";
 import { ColumnId, GridColumn } from "../typings/GridColumn";
@@ -21,7 +20,6 @@ import { Grid } from "./Grid";
 import { GridBody } from "./GridBody";
 import { GridHeader } from "./GridHeader";
 import { RowsRenderer } from "./RowsRenderer";
-import { SelectionCounter } from "./SelectionCounter";
 import { WidgetContent } from "./WidgetContent";
 import { WidgetFooter } from "./WidgetFooter";
 import { WidgetHeader } from "./WidgetHeader";
@@ -50,7 +48,7 @@ export interface WidgetProps<C extends GridColumn, T extends ObjectItem = Object
     page: number;
     paginationType: PaginationEnum;
     loadMoreButtonCaption?: string;
-    selectionCountPosition?: SelectionCountPositionEnum;
+
     pageSize: number;
     paging: boolean;
     pagingPosition: PagingPositionEnum;
@@ -121,7 +119,6 @@ const Main = observer(<C extends GridColumn>(props: WidgetProps<C>): ReactElemen
         headerContent,
         headerTitle,
         loadMoreButtonCaption,
-        selectionCountPosition,
         numberOfItems,
         page,
         pageSize,
@@ -135,9 +132,7 @@ const Main = observer(<C extends GridColumn>(props: WidgetProps<C>): ReactElemen
         visibleColumns
     } = props;
 
-    // const { basicData, selectionCountStore } = useLegacyContext();
     const basicData = useBasicData();
-    const selectionCountVm = useSelectionCounter();
 
     const showHeader = !!headerContent;
     const showTopBarPagination = paging && (pagingPosition === "top" || pagingPosition === "both");
@@ -158,17 +153,6 @@ const Main = observer(<C extends GridColumn>(props: WidgetProps<C>): ReactElemen
         />
     ) : null;
 
-    const selectionCount =
-        selectionCountVm.selectedCount > 0 &&
-        selectActionHelper.selectionType === "Multi" &&
-        selectionCountPosition !== "off" &&
-        selectionCountPosition ? (
-            <SelectionCounter location={selectionCountPosition} />
-        ) : null;
-
-    const showTopbarSelectionCount = selectionCount && selectionCountPosition === "top";
-    const showFooterSelectionCount = selectionCount && selectionCountPosition === "bottom";
-
     const cssGridStyles = gridStyle(visibleColumns, {
         selectItemColumn: selectActionHelper.showCheckboxColumn,
         visibilitySelectorColumn: columnsHidable
@@ -178,10 +162,7 @@ const Main = observer(<C extends GridColumn>(props: WidgetProps<C>): ReactElemen
 
     return (
         <Fragment>
-            <WidgetTopBar
-                pagination={showTopBarPagination ? pagination : undefined}
-                selectionCount={showTopbarSelectionCount ? selectionCount : undefined}
-            ></WidgetTopBar>
+            <WidgetTopBar pagination={showTopBarPagination ? pagination : undefined} />
             {showHeader && <WidgetHeader headerTitle={headerTitle}>{headerContent}</WidgetHeader>}
             <WidgetContent>
                 <Grid
@@ -253,7 +234,6 @@ const Main = observer(<C extends GridColumn>(props: WidgetProps<C>): ReactElemen
             </WidgetContent>
             <WidgetFooter
                 pagination={showFooterPagination ? pagination : undefined}
-                selectionCount={showFooterSelectionCount ? selectionCount : undefined}
                 paginationType={paginationType}
                 loadMoreButtonCaption={loadMoreButtonCaption}
                 hasMoreItems={hasMoreItems}

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

@@ -1,22 +1,30 @@
+import { If } from "@mendix/widget-plugin-component-kit/If";
+import { observer } from "mobx-react-lite";
 import { ComponentPropsWithoutRef, ReactElement, ReactNode } from "react";
 import { PaginationEnum } from "../../typings/DatagridProps";
+import { useSelectionCounterViewModel } from "../deps-hooks";
+import { SelectionCounter } from "./SelectionCounter";
 
 type WidgetFooterProps = {
     pagination: ReactNode;
-    selectionCount: ReactNode;
     paginationType: PaginationEnum;
     loadMoreButtonCaption?: string;
     hasMoreItems: boolean;
     setPage?: (computePage: (prevPage: number) => number) => void;
 } & ComponentPropsWithoutRef<"div">;
 
-export function WidgetFooter(props: WidgetFooterProps): ReactElement | null {
-    const { pagination, selectionCount, paginationType, loadMoreButtonCaption, hasMoreItems, setPage, ...rest } = props;
+export const WidgetFooter = observer(function WidgetFooter(props: WidgetFooterProps): ReactElement | null {
+    const { pagination, paginationType, loadMoreButtonCaption, hasMoreItems, setPage, ...rest } = props;
+    const selectionCounterVM = useSelectionCounterViewModel();
 
     return (
         <div {...rest} className="widget-datagrid-footer table-footer">
             <div className="widget-datagrid-paging-bottom">
-                {selectionCount}
+                <If condition={selectionCounterVM.isBottomCounterVisible}>
+                    <div className="widget-datagrid-pb-start">
+                        <SelectionCounter />
+                    </div>
+                </If>
                 <div className="widget-datagrid-pb-end">
                     {pagination}
                     {hasMoreItems && paginationType === "loadMore" && (
@@ -32,4 +40,4 @@ export function WidgetFooter(props: WidgetFooterProps): ReactElement | null {
             </div>
         </div>
     );
-}
+});

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

@@ -1,19 +1,29 @@
+import { If } from "@mendix/widget-plugin-component-kit/If";
+import { observer } from "mobx-react-lite";
 import { ComponentPropsWithoutRef, ReactElement, ReactNode } from "react";
+import { useSelectionCounterViewModel } from "../deps-hooks";
+import { SelectionCounter } from "./SelectionCounter";
 
 type WidgetTopBarProps = {
     pagination: ReactNode;
-    selectionCount: ReactNode;
 } & ComponentPropsWithoutRef<"div">;
 
-export function WidgetTopBar(props: WidgetTopBarProps): ReactElement {
-    const { pagination, selectionCount, ...rest } = props;
+export const WidgetTopBar = observer(function WidgetTopBar(props: WidgetTopBarProps): ReactElement {
+    const { pagination, ...rest } = props;
+    const selectionCounter = useSelectionCounterViewModel();
 
     return (
         <div {...rest} className="widget-datagrid-top-bar table-header">
             <div className="widget-datagrid-padding-top">
-                {selectionCount}
-                {pagination && <div className="widget-datagrid-tb-end">{pagination}</div>}
+                <If condition={selectionCounter.isTopCounterVisible}>
+                    <div className="widget-datagrid-tb-start">
+                        <SelectionCounter />
+                    </div>
+                </If>
+                <If condition={!!pagination}>
+                    <div className="widget-datagrid-tb-end">{pagination}</div>
+                </If>
             </div>
         </div>
     );
-}
+});

packages/pluggableWidgets/datagrid-web/src/deps-hooks.ts

@@ -4,7 +4,7 @@ import { TOKENS } from "./Datagrid.depsContainer";
 const [
     useBasicData,
     usePaginationService,
-    useSelectionCounter,
+    useSelectionCounterViewModel,
     useLoaderViewModel,
     useColumnsStore,
     useExportProgressService,
@@ -31,6 +31,6 @@ export {
     useLoaderViewModel,
     useMainGate,
     usePaginationService,
-    useSelectionCounter,
+    useSelectionCounterViewModel,
     useStaticInfo
 };

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

@@ -11,7 +11,7 @@ export type ItemSelectionMethodEnum = "checkbox" | "rowClick";
 
 export type ItemSelectionModeEnum = "toggle" | "clear";
 
-export type SelectionCountPositionEnum = "top" | "bottom" | "off";
+export type SelectionCounterPositionEnum = "top" | "bottom" | "off";
 
 export type LoadingTypeEnum = "spinner" | "skeleton";
 
@@ -98,7 +98,7 @@ export interface DatagridContainerProps {
     itemSelectionMode: ItemSelectionModeEnum;
     showSelectAllToggle: boolean;
     keepSelection: boolean;
-    selectionCountPosition: SelectionCountPositionEnum;
+    selectionCounterPosition: SelectionCounterPositionEnum;
     clearSelectionButtonLabel?: DynamicValue<string>;
     loadingType: LoadingTypeEnum;
     refreshIndicator: boolean;
@@ -152,7 +152,7 @@ export interface DatagridPreviewProps {
     itemSelectionMode: ItemSelectionModeEnum;
     showSelectAllToggle: boolean;
     keepSelection: boolean;
-    selectionCountPosition: SelectionCountPositionEnum;
+    selectionCounterPosition: SelectionCounterPositionEnum;
     clearSelectionButtonLabel: string;
     loadingType: LoadingTypeEnum;
     refreshIndicator: boolean;

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

@@ -1,3 +1,4 @@
 export type { QueryService } from "./interfaces/QueryService";
 export { DatasourceService } from "./services/DatasourceService";
 export { RefreshController } from "./services/RefreshController";
+export { SelectionCounterViewModel } from "./view-models/SelectionCounterViewModel";