feat: change pagination config

Author: iobuhov

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

@@ -3,17 +3,10 @@ import { observer } from "mobx-react-lite";
 import { ReactElement } from "react";
 import { SelectionCounter } from "../features/selection-counter/SelectionCounter";
 import { useSelectionCounterViewModel } from "../features/selection-counter/injection-hooks";
-import {
-    useCustomPagination,
-    useDatagridConfig,
-    usePaginationConfig,
-    usePaginationVM,
-    useTexts
-} from "../model/hooks/injection-hooks";
+import { useCustomPagination, usePaginationConfig, usePaginationVM, useTexts } from "../model/hooks/injection-hooks";
 import { Pagination } from "./Pagination";
 
 export const WidgetFooter = observer(function WidgetFooter(): ReactElement {
-    const config = useDatagridConfig();
     const pgConfig = usePaginationConfig();
     const paging = usePaginationVM();
     const { loadMoreButtonCaption } = useTexts();
@@ -40,7 +33,7 @@ export const WidgetFooter = observer(function WidgetFooter(): ReactElement {
                     </div>
                 </If>
                 <div className="widget-datagrid-pb-end">
-                    <If condition={config.pagingPosition !== "top"}>
+                    <If condition={pgConfig.pagingPosition !== "top"}>
                         <Pagination />
                     </If>
                     <If condition={pgConfig.customPaginationEnabled}>{customPagination.get()}</If>

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

@@ -3,11 +3,11 @@ import { observer } from "mobx-react-lite";
 import { ReactElement } from "react";
 import { SelectionCounter } from "../features/selection-counter/SelectionCounter";
 import { useSelectionCounterViewModel } from "../features/selection-counter/injection-hooks";
-import { useDatagridConfig } from "../model/hooks/injection-hooks";
+import { usePaginationConfig } from "../model/hooks/injection-hooks";
 import { Pagination } from "./Pagination";
 
 export const WidgetTopBar = observer(function WidgetTopBar(): ReactElement {
-    const config = useDatagridConfig();
+    const pgConfig = usePaginationConfig();
     const selectionCounter = useSelectionCounterViewModel();
 
     return (
@@ -19,7 +19,7 @@ export const WidgetTopBar = observer(function WidgetTopBar(): ReactElement {
                     </If>
                 </div>
                 <div className="widget-datagrid-tb-end">
-                    <If condition={config.pagingPosition !== "bottom"}>
+                    <If condition={pgConfig.pagingPosition !== "bottom"}>
                         <Pagination />
                     </If>
                 </div>

packages/pluggableWidgets/datagrid-web/src/features/pagination/pagination.config.ts

@@ -1,16 +1,18 @@
-import { PaginationEnum, ShowPagingButtonsEnum } from "../../../typings/DatagridProps";
+import { PaginationEnum, PagingPositionEnum, ShowPagingButtonsEnum } from "../../../typings/DatagridProps";
 import { MainGateProps } from "../../../typings/MainGateProps";
 
 export interface PaginationConfig {
     pagination: PaginationEnum;
+    pagingPosition: PagingPositionEnum;
     paginationKind: PaginationKind;
     showPagingButtons: ShowPagingButtonsEnum;
     showNumberOfRows: boolean;
-    pageSize: number;
+    constPageSize: number;
     isLimitBased: boolean;
     dynamicPageSizeEnabled: boolean;
     dynamicPageEnabled: boolean;
     customPaginationEnabled: boolean;
+    requestTotalCount: boolean;
 }
 
 export type PaginationKind = `${PaginationEnum}.${ShowPagingButtonsEnum}` | "custom";
@@ -20,12 +22,14 @@ export function paginationConfig(props: MainGateProps): PaginationConfig {
         pagination: props.pagination,
         showPagingButtons: props.showPagingButtons,
         showNumberOfRows: props.showNumberOfRows,
-        pageSize: props.pageSize,
+        constPageSize: props.pageSize,
         isLimitBased: isLimitBased(props),
         paginationKind: paginationKind(props),
         dynamicPageSizeEnabled: dynamicPageSizeEnabled(props),
         dynamicPageEnabled: dynamicPageEnabled(props),
-        customPaginationEnabled: props.useCustomPagination
+        customPaginationEnabled: props.useCustomPagination,
+        pagingPosition: props.pagingPosition,
+        requestTotalCount: requestTotalCount(props)
     };
 
     return Object.freeze(config);
@@ -50,3 +54,7 @@ export function dynamicPageEnabled(props: MainGateProps): boolean {
 function isLimitBased(props: MainGateProps): boolean {
     return props.pagination === "virtualScrolling" || props.pagination === "loadMore";
 }
+
+function requestTotalCount(props: MainGateProps): boolean {
+    return props.pagination === "buttons" || props.showNumberOfRows;
+}

packages/pluggableWidgets/datagrid-web/src/model/configs/Datagrid.config.ts

@@ -1,6 +1,6 @@
 import { SelectionMode, SelectionType } from "@mendix/widget-plugin-grid/selection";
 import { generateUUID } from "@mendix/widget-plugin-platform/framework/generate-uuid";
-import { DatagridContainerProps, LoadingTypeEnum, PagingPositionEnum } from "../../../typings/DatagridProps";
+import { DatagridContainerProps, LoadingTypeEnum } from "../../../typings/DatagridProps";
 import { type SelectionMethod } from "../../features/row-interaction/base";
 
 /** Config for static values that don't change at runtime. */
@@ -19,7 +19,6 @@ export interface DatagridConfig {
     settingsStorageEnabled: boolean;
     enableSelectAll: boolean;
     keepSelection: boolean;
-    pagingPosition: PagingPositionEnum;
     multiselectable: true | undefined;
     loadingType: LoadingTypeEnum;
     columnsDraggable: boolean;
@@ -28,8 +27,6 @@ export interface DatagridConfig {
     columnsResizable: boolean;
     columnsSortable: boolean;
     isInteractive: boolean;
-    requestTotalCount: boolean;
-    constPageSize: number;
 }
 
 export function datagridConfig(props: DatagridContainerProps): DatagridConfig {
@@ -50,17 +47,14 @@ export function datagridConfig(props: DatagridContainerProps): DatagridConfig {
         settingsStorageEnabled: isSettingsStorageEnabled(props),
         enableSelectAll: props.enableSelectAll,
         keepSelection: props.keepSelection,
-        pagingPosition: props.pagingPosition,
         multiselectable: isMultiselectable(props),
         loadingType: props.loadingType,
         columnsHidable: props.columnsHidable,
         columnsDraggable: props.columnsDraggable,
         columnsFilterable: props.columnsFilterable,
         columnsResizable: props.columnsResizable,
         columnsSortable: props.columnsSortable,
-        isInteractive: isInteractive(props),
-        requestTotalCount: requestTotalCount(props),
-        constPageSize: props.pageSize
+        isInteractive: isInteractive(props)
     };
 
     return Object.freeze(config);
@@ -97,7 +91,3 @@ function selectionType(props: DatagridContainerProps): SelectionType {
 function selectionMethod(props: DatagridContainerProps): SelectionMethod {
     return props.itemSelection ? props.itemSelectionMethod : "none";
 }
-
-function requestTotalCount(props: DatagridContainerProps): boolean {
-    return props.pagination === "buttons" || props.showNumberOfRows;
-}

packages/pluggableWidgets/datagrid-web/src/model/configs/__tests__/config.spec.ts

@@ -20,7 +20,6 @@ describe("datagridConfig", () => {
             loadingType: "spinner",
             multiselectable: undefined,
             name: "datagrid2_1",
-            pagingPosition: "bottom",
             refreshIntervalMs: 0,
             selectAllCheckboxEnabled: true,
             selectionEnabled: false,

packages/pluggableWidgets/datagrid-web/src/model/containers/Datagrid.container.ts

@@ -242,8 +242,9 @@ export class DatagridContainer extends Container {
         this.get(DG.dynamicPagination); // Enable dynamic pagination feature
 
         const query = this.get(DG.query);
-        query.requestTotalCount(config.requestTotalCount);
-        query.setBaseLimit(config.constPageSize);
+        const pgConfig = this.get(DG.paginationConfig);
+        query.requestTotalCount(pgConfig.requestTotalCount);
+        query.setBaseLimit(pgConfig.constPageSize);
 
         if (config.settingsStorageEnabled) {
             this.get(DG.personalizationService);

packages/pluggableWidgets/datagrid-web/src/utils/test-utils.tsx

@@ -84,6 +84,8 @@ export function mockContainerProps(overrides?: Partial<DatagridContainerProps>):
         selectAllText: dynamic("Select all items"),
         selectAllTemplate: dynamic("Select all %d items"),
         allSelectedText: dynamic("All items selected"),
+        useCustomPagination: false,
+        customPagination: undefined,
         ...overrides
     };
 }

packages/pluggableWidgets/datagrid-web/typings/MainGateProps.ts

@@ -27,6 +27,7 @@ export type MainGateProps = Pick<
     | "onSelectionChange"
     | "pageSize"
     | "pagination"
+    | "pagingPosition"
     | "refreshIndicator"
     | "refreshInterval"
     | "rowClass"