feat: add selection count visibility to config

Author: yordan-st

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

@@ -118,6 +118,7 @@ const Container = observer((props: Props): ReactElement => {
                 paginationType={props.pagination}
                 loadMoreButtonCaption={props.loadMoreButtonCaption?.value}
                 clearSelectionButtonLabel={props.clearSelectionButtonLabel?.value}
+                selectionCountVisibility={props.selectionCountVisibility}
                 paging={paginationCtrl.showPagination}
                 pagingPosition={props.pagingPosition}
                 showPagingButtons={props.showPagingButtons}

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

@@ -65,13 +65,6 @@
                     <caption>Show refresh indicator</caption>
                     <description>Show a refresh indicator when the data is being loaded.</description>
                 </property>
-                <property key="clearSelectionButtonLabel" type="textTemplate" required="false">
-                    <caption>Clear selection</caption>
-                    <description>Customize the label of the 'Clear section' button</description>
-                    <translations>
-                        <translation lang="en_US">Clear selection</translation>
-                    </translations>
-                </property>
             </propertyGroup>
             <propertyGroup caption="Columns">
                 <property key="columns" type="object" isList="true">
@@ -251,6 +244,22 @@
                         <enumerationValue key="both">Both</enumerationValue>
                     </enumerationValues>
                 </property>
+                <property key="selectionCountVisibility" type="enumeration" defaultValue="bottom" required="true">
+                    <caption>Show selection count</caption>
+                    <description />
+                    <enumerationValues>
+                        <enumerationValue key="top">Top</enumerationValue>
+                        <enumerationValue key="bottom">Bottom</enumerationValue>
+                        <enumerationValue key="off">Off</enumerationValue>
+                    </enumerationValues>
+                </property>
+                <property key="clearSelectionButtonLabel" type="textTemplate" required="false">
+                    <caption>Clear selection label</caption>
+                    <description>Customize the label of the 'Clear section' button</description>
+                    <translations>
+                        <translation lang="en_US">Clear selection</translation>
+                    </translations>
+                </property>
                 <property key="loadMoreButtonCaption" type="textTemplate" required="false">
                     <caption>Load more caption</caption>
                     <description />

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

@@ -0,0 +1,21 @@
+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 SelectionCounter = observer(function SelectionCounter({
+    clearSelectionButtonLabel
+}: {
+    clearSelectionButtonLabel?: string;
+}) {
+    const { selectionCountStore, selectActionHelper } = useDatagridRootScope();
+
+    return (
+        <If condition={selectionCountStore.displayCount !== ""}>
+            <span className="widget-datagrid-selection-count">{selectionCountStore.displayCount}</span>&nbsp;|&nbsp;
+            <button className="widget-datagrid-clear-selection" onClick={selectActionHelper.onClearSelection}>
+                {clearSelectionButtonLabel || "Clear selection"}
+            </button>
+        </If>
+    );
+});

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

@@ -9,7 +9,8 @@ import {
     LoadingTypeEnum,
     PaginationEnum,
     PagingPositionEnum,
-    ShowPagingButtonsEnum
+    ShowPagingButtonsEnum,
+    SelectionCountVisibilityEnum
 } from "../../typings/DatagridProps";
 import { SelectActionHelper } from "../helpers/SelectActionHelper";
 import { useDatagridRootScope } from "../helpers/root-context";
@@ -49,6 +50,7 @@ export interface WidgetProps<C extends GridColumn, T extends ObjectItem = Object
     paginationType: PaginationEnum;
     loadMoreButtonCaption?: string;
     clearSelectionButtonLabel?: string;
+    selectionCountVisibility?: SelectionCountVisibilityEnum;
     pageSize: number;
     paging: boolean;
     pagingPosition: PagingPositionEnum;
@@ -120,6 +122,7 @@ const Main = observer(<C extends GridColumn>(props: WidgetProps<C>): ReactElemen
         headerTitle,
         loadMoreButtonCaption,
         clearSelectionButtonLabel,
+        selectionCountVisibility,
         numberOfItems,
         page,
         pageSize,
@@ -162,7 +165,14 @@ const Main = observer(<C extends GridColumn>(props: WidgetProps<C>): ReactElemen
 
     return (
         <Fragment>
-            {showTopBar && <WidgetTopBar>{pagination}</WidgetTopBar>}
+            {showTopBar && (
+                <WidgetTopBar
+                    selectionCountVisibility={selectionCountVisibility}
+                    clearSelectionButtonLabel={clearSelectionButtonLabel}
+                >
+                    {pagination}
+                </WidgetTopBar>
+            )}
             {showHeader && <WidgetHeader headerTitle={headerTitle}>{headerContent}</WidgetHeader>}
             <WidgetContent>
                 <Grid
@@ -238,6 +248,7 @@ const Main = observer(<C extends GridColumn>(props: WidgetProps<C>): ReactElemen
                 paginationType={paginationType}
                 loadMoreButtonCaption={loadMoreButtonCaption}
                 clearSelectionButtonLabel={clearSelectionButtonLabel}
+                selectionCountVisibility={selectionCountVisibility}
                 hasMoreItems={hasMoreItems}
                 setPage={setPage}
             />

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

@@ -1,69 +1,35 @@
-import { If } from "@mendix/widget-plugin-component-kit/If";
-import { observer } from "mobx-react-lite";
-import { JSX, ReactElement, ReactNode } from "react";
-import { PaginationEnum, PagingPositionEnum } from "../../typings/DatagridProps";
-import { useDatagridRootScope } from "../helpers/root-context";
+import { ReactElement, ReactNode } from "react";
+import { PaginationEnum } from "../../typings/DatagridProps";
 
 type WidgetFooterProps = {
-    pagingPosition: PagingPositionEnum;
     pagination: ReactNode;
+    selectionCount: ReactNode;
     paginationType: PaginationEnum;
     loadMoreButtonCaption?: string;
-    clearSelectionButtonLabel?: string;
     hasMoreItems: boolean;
     setPage?: (computePage: (prevPage: number) => number) => void;
 } & JSX.IntrinsicElements["div"];
 
 export function WidgetFooter(props: WidgetFooterProps): ReactElement | null {
-    const {
-        pagingPosition,
-        pagination,
-        paginationType,
-        loadMoreButtonCaption,
-        clearSelectionButtonLabel,
-        hasMoreItems,
-        setPage,
-        ...rest
-    } = props;
+    const { pagination, selectionCount, paginationType, loadMoreButtonCaption, hasMoreItems, setPage, ...rest } = props;
 
     return (
         <div {...rest} className="widget-datagrid-footer table-footer">
             <div className="widget-datagrid-paging-bottom">
-                <div className="widget-datagrid-pb-start">
-                    <SelectionCounter clearSelectionButtonLabel={clearSelectionButtonLabel} />
-                </div>
-                {hasMoreItems && paginationType === "loadMore" && (
-                    <div className="widget-datagrid-pb-middle">
+                {selectionCount}
+                <div className="widget-datagrid-pb-end">
+                    {pagination}
+                    {hasMoreItems && paginationType === "loadMore" && (
                         <button
                             className="btn btn-primary widget-datagrid-load-more"
                             onClick={() => setPage && setPage(prev => prev + 1)}
                             tabIndex={0}
                         >
                             {loadMoreButtonCaption}
                         </button>
-                    </div>
-                )}
-                <div className="widget-datagrid-pb-end">
-                    {(pagingPosition === "bottom" || pagingPosition === "both") && pagination}
+                    )}
                 </div>
             </div>
         </div>
     );
 }
-
-const SelectionCounter = observer(function SelectionCounter({
-    clearSelectionButtonLabel
-}: {
-    clearSelectionButtonLabel?: string;
-}) {
-    const { selectionCountStore, selectActionHelper } = useDatagridRootScope();
-
-    return (
-        <If condition={selectionCountStore.displayCount !== ""}>
-            <span className="widget-datagrid-selection-count">{selectionCountStore.displayCount}</span>&nbsp;|&nbsp;
-            <button className="widget-datagrid-clear-selection" onClick={selectActionHelper.onClearSelection}>
-                {clearSelectionButtonLabel || "Clear selection"}
-            </button>
-        </If>
-    );
-});

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

@@ -1,9 +1,19 @@
-import { JSX, ReactElement } from "react";
+import { ReactElement, ReactNode } from "react";
+
+type WidgetTopBarProps = {
+    pagination: ReactNode;
+    selectionCount: ReactNode;
+} & JSX.IntrinsicElements["div"];
+
+export function WidgetTopBar(props: WidgetTopBarProps): ReactElement {
+    const { pagination, selectionCount, ...rest } = props;
 
-export function WidgetTopBar(props: JSX.IntrinsicElements["div"]): ReactElement {
     return (
-        <div {...props} className="widget-datagrid-top-bar table-header">
-            {props.children}
+        <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>}
+            </div>
         </div>
     );
 }

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

@@ -53,6 +53,8 @@ export type ShowPagingButtonsEnum = "always" | "auto";
 
 export type PagingPositionEnum = "bottom" | "top" | "both";
 
+export type SelectionCountVisibilityEnum = "top" | "bottom" | "off";
+
 export type ShowEmptyPlaceholderEnum = "none" | "custom";
 
 export type OnClickTriggerEnum = "single" | "double";
@@ -98,14 +100,15 @@ export interface DatagridContainerProps {
     keepSelection: boolean;
     loadingType: LoadingTypeEnum;
     refreshIndicator: boolean;
-    clearSelectionButtonLabel?: DynamicValue<string>;
     columns: ColumnsType[];
     columnsFilterable: boolean;
     pageSize: number;
     pagination: PaginationEnum;
     showPagingButtons: ShowPagingButtonsEnum;
     showNumberOfRows: boolean;
     pagingPosition: PagingPositionEnum;
+    selectionCountVisibility: SelectionCountVisibilityEnum;
+    clearSelectionButtonLabel?: DynamicValue<string>;
     loadMoreButtonCaption?: DynamicValue<string>;
     showEmptyPlaceholder: ShowEmptyPlaceholderEnum;
     emptyPlaceholder?: ReactNode;
@@ -151,14 +154,15 @@ export interface DatagridPreviewProps {
     keepSelection: boolean;
     loadingType: LoadingTypeEnum;
     refreshIndicator: boolean;
-    clearSelectionButtonLabel: string;
     columns: ColumnsPreviewType[];
     columnsFilterable: boolean;
     pageSize: number | null;
     pagination: PaginationEnum;
     showPagingButtons: ShowPagingButtonsEnum;
     showNumberOfRows: boolean;
     pagingPosition: PagingPositionEnum;
+    selectionCountVisibility: SelectionCountVisibilityEnum;
+    clearSelectionButtonLabel: string;
     loadMoreButtonCaption: string;
     showEmptyPlaceholder: ShowEmptyPlaceholderEnum;
     emptyPlaceholder: { widgetCount: number; renderer: ComponentType<{ children: ReactNode; caption?: string }> };