refactor: split pagination service responsibilities

Author: iobuhov

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

@@ -301,6 +301,13 @@
                         <enumerationValue key="both">Both</enumerationValue>
                     </enumerationValues>
                 </property>
+                <property key="dynamicPageSize" type="attribute" required="false">
+                    <caption>Dynamic page size attribute</caption>
+                    <description>Optional attribute to set the page size dynamically. The attribute requires Integer type.</description>
+                    <attributeTypes>
+                        <attributeType name="Integer" />
+                    </attributeTypes>
+                </property>
                 <property key="loadMoreButtonCaption" type="textTemplate" required="false">
                     <caption>Load more caption</caption>
                     <description />

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

@@ -28,6 +28,9 @@ export interface DatagridConfig {
     columnsResizable: boolean;
     columnsSortable: boolean;
     isInteractive: boolean;
+    dynamicPageSizeEnabled: boolean;
+    requestTotalCount: boolean;
+    constPageSize: number;
 }
 
 export function datagridConfig(props: DatagridContainerProps): DatagridConfig {
@@ -56,7 +59,10 @@ export function datagridConfig(props: DatagridContainerProps): DatagridConfig {
         columnsFilterable: props.columnsFilterable,
         columnsResizable: props.columnsResizable,
         columnsSortable: props.columnsSortable,
-        isInteractive: isInteractive(props)
+        isInteractive: isInteractive(props),
+        dynamicPageSizeEnabled: dynamicPageSizeEnabled(props),
+        requestTotalCount: requestTotalCount(props),
+        constPageSize: props.pageSize
     };
 
     return Object.freeze(config);
@@ -93,3 +99,11 @@ function selectionType(props: DatagridContainerProps): SelectionType {
 function selectionMethod(props: DatagridContainerProps): SelectionMethod {
     return props.itemSelection ? props.itemSelectionMethod : "none";
 }
+
+function dynamicPageSizeEnabled(props: DatagridContainerProps): boolean {
+    return props.dynamicPageSize !== undefined;
+}
+
+function requestTotalCount(props: DatagridContainerProps): boolean {
+    return props.pagination === "buttons" || props.showNumberOfRows;
+}

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

@@ -29,15 +29,15 @@ import { gridStyleAtom } from "../models/grid.model";
 import { rowClassProvider } from "../models/rows.model";
 import { DatasourceParamsController } from "../services/DatasourceParamsController";
 import { DerivedLoaderController } from "../services/DerivedLoaderController";
-import { PaginationController } from "../services/PaginationController";
+import { PaginationService } from "../services/Pagination.service";
 import { SelectionGate } from "../services/SelectionGate.service";
 import { CORE_TOKENS as CORE, DG_TOKENS as DG, SA_TOKENS } from "../tokens";
 
 // base
 injected(ColumnGroupStore, CORE.setupService, CORE.mainGate, CORE.config, DG.filterHost);
 injected(DatasourceParamsController, CORE.setupService, DG.query, DG.combinedFilter, CORE.columnsStore);
 injected(DatasourceService, CORE.setupService, DG.queryGate, DG.refreshInterval.optional);
-injected(PaginationController, CORE.setupService, DG.paginationConfig, DG.query);
+injected(PaginationService, DG.paginationConfig, DG.query);
 injected(GridBasicData, CORE.mainGate);
 injected(WidgetRootViewModel, CORE.mainGate, CORE.config, DG.exportProgressService, SA_TOKENS.selectionDialogVM);
 
@@ -97,7 +97,7 @@ export class DatagridContainer extends Container {
         // Query service
         this.bind(DG.query).toInstance(DatasourceService).inSingletonScope();
         // Pagination service
-        this.bind(DG.paginationService).toInstance(PaginationController).inSingletonScope();
+        this.bind(DG.paginationService).toInstance(PaginationService).inSingletonScope();
         // Datasource params service
         this.bind(DG.paramsService).toInstance(DatasourceParamsController).inSingletonScope();
         // FilterAPI
@@ -213,7 +213,10 @@ export class DatagridContainer extends Container {
     private postInit(props: MainGateProps, config: DatagridConfig): void {
         // Make sure essential services are created upfront
         this.get(DG.paramsService);
-        this.get(DG.paginationService);
+
+        const query = this.get(DG.query);
+        query.requestTotalCount(config.requestTotalCount);
+        query.setBaseLimit(config.constPageSize);
 
         if (config.settingsStorageEnabled) {
             this.get(DG.personalizationService);

packages/pluggableWidgets/datagrid-web/src/model/services/PaginationController.ts renamed to packages/pluggableWidgets/datagrid-web/src/model/services/Pagination.service.ts

@@ -1,5 +1,4 @@
 import { QueryService } from "@mendix/widget-plugin-grid/main";
-import { SetupComponent, SetupComponentHost } from "@mendix/widget-plugin-mobx-kit/main";
 import { PaginationEnum, ShowPagingButtonsEnum } from "../../../typings/DatagridProps";
 
 export interface PaginationConfig {
@@ -11,21 +10,18 @@ export interface PaginationConfig {
 
 type PaginationKind = `${PaginationEnum}.${ShowPagingButtonsEnum}`;
 
-export class PaginationController implements SetupComponent {
+export class PaginationService {
     readonly pagination: PaginationEnum;
     readonly paginationKind: PaginationKind;
     readonly showPagingButtons: ShowPagingButtonsEnum;
 
     constructor(
-        host: SetupComponentHost,
         private config: PaginationConfig,
         private query: QueryService
     ) {
-        host.add(this);
         this.pagination = config.pagination;
         this.paginationKind = `${this.pagination}.${config.showPagingButtons}`;
         this.showPagingButtons = config.showPagingButtons;
-        this.setInitParams();
     }
 
     get isLimitBased(): boolean {
@@ -65,16 +61,6 @@ export class PaginationController implements SetupComponent {
         return this.query.totalCount;
     }
 
-    private setInitParams(): void {
-        if (this.pagination === "buttons" || this.config.showNumberOfRows) {
-            this.query.requestTotalCount(true);
-        }
-
-        this.query.setBaseLimit(this.pageSize);
-    }
-
-    setup(): void {}
-
     setPage = (computePage: ((prevPage: number) => number) | number): void => {
         const newPage = typeof computePage === "function" ? computePage(this.currentPage) : computePage;
         if (this.isLimitBased) {

packages/pluggableWidgets/datagrid-web/src/model/tokens.ts

@@ -39,7 +39,7 @@ import { DatagridConfig } from "./configs/Datagrid.config";
 import { RowClassProvider } from "./models/rows.model";
 import { DatagridSetupService } from "./services/DatagridSetup.service";
 import { DerivedLoaderController, DerivedLoaderControllerConfig } from "./services/DerivedLoaderController";
-import { PaginationConfig, PaginationController } from "./services/PaginationController";
+import { PaginationConfig, PaginationService } from "./services/Pagination.service";
 import { TextsService } from "./services/Texts.service";
 import { PageSizeStore } from "./stores/PageSize.store";
 
@@ -102,7 +102,7 @@ export const DG_TOKENS = {
     loaderVM: token<DerivedLoaderController>("DatagridLoaderViewModel"),
 
     paginationConfig: token<PaginationConfig>("PaginationConfig"),
-    paginationService: token<PaginationController>("PaginationService"),
+    paginationService: token<PaginationService>("PaginationService"),
 
     parentChannelName: token<string>("parentChannelName"),
     refreshInterval: token<number>("refreshInterval"),

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

@@ -120,6 +120,7 @@ export interface DatagridContainerProps {
     showPagingButtons: ShowPagingButtonsEnum;
     showNumberOfRows: boolean;
     pagingPosition: PagingPositionEnum;
+    dynamicPageSize?: EditableValue<Big>;
     loadMoreButtonCaption?: DynamicValue<string>;
     showEmptyPlaceholder: ShowEmptyPlaceholderEnum;
     emptyPlaceholder?: ReactNode;
@@ -179,6 +180,7 @@ export interface DatagridPreviewProps {
     showPagingButtons: ShowPagingButtonsEnum;
     showNumberOfRows: boolean;
     pagingPosition: PagingPositionEnum;
+    dynamicPageSize: string;
     loadMoreButtonCaption: string;
     showEmptyPlaceholder: ShowEmptyPlaceholderEnum;
     emptyPlaceholder: { widgetCount: number; renderer: ComponentType<{ children: ReactNode; caption?: string }> };

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

@@ -37,4 +37,5 @@ export type MainGateProps = Pick<
     | "showPagingButtons"
     | "storeFiltersInPersonalization"
     | "style"
+    | "dynamicPageSize"
 >;