feat: add custom paginatino

Author: iobuhov

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

@@ -3,14 +3,22 @@ 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, usePaginationVM, useTexts } from "../model/hooks/injection-hooks";
+import {
+    useCustomPagination,
+    useDatagridConfig,
+    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();
     const selectionCounterVM = useSelectionCounterViewModel();
+    const customPagination = useCustomPagination();
 
     return (
         <div className="widget-datagrid-footer table-footer">
@@ -35,6 +43,7 @@ export const WidgetFooter = observer(function WidgetFooter(): ReactElement {
                     <If condition={config.pagingPosition !== "top"}>
                         <Pagination />
                     </If>
+                    <If condition={pgConfig.customPaginationEnabled}>{customPagination.get()}</If>
                 </div>
             </div>
         </div>

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

@@ -10,6 +10,7 @@ export interface PaginationConfig {
     isLimitBased: boolean;
     dynamicPageSizeEnabled: boolean;
     dynamicPageEnabled: boolean;
+    customPaginationEnabled: boolean;
 }
 
 export type PaginationKind = `${PaginationEnum}.${ShowPagingButtonsEnum}` | "custom";
@@ -23,7 +24,8 @@ export function paginationConfig(props: MainGateProps): PaginationConfig {
         isLimitBased: isLimitBased(props),
         paginationKind: paginationKind(props),
         dynamicPageSizeEnabled: dynamicPageSizeEnabled(props),
-        dynamicPageEnabled: dynamicPageEnabled(props)
+        dynamicPageEnabled: dynamicPageEnabled(props),
+        customPaginationEnabled: props.useCustomPagination
     };
 
     return Object.freeze(config);

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

@@ -25,7 +25,7 @@ import { EmptyPlaceholderViewModel } from "../../features/empty-message/EmptyPla
 import { DynamicPaginationFeature } from "../../features/pagination/DynamicPagination.feature";
 import { PageControlService } from "../../features/pagination/PageControl.service";
 import { paginationConfig } from "../../features/pagination/pagination.config";
-import { dynamicPageAtom, dynamicPageSizeAtom } from "../../features/pagination/pagination.model";
+import { customPaginationAtom, dynamicPageAtom, dynamicPageSizeAtom } from "../../features/pagination/pagination.model";
 import { PaginationViewModel } from "../../features/pagination/Pagination.viewModel";
 import { createCellEventsController } from "../../features/row-interaction/CellEventsController";
 import { creteCheckboxEventsController } from "../../features/row-interaction/CheckboxEventsController";
@@ -66,6 +66,7 @@ injected(
     CORE.atoms.totalCount,
     DG.pageControl
 );
+injected(customPaginationAtom, CORE.mainGate);
 
 // loader
 injected(DerivedLoaderController, DG.query, DG.exportProgressService, CORE.columnsStore, DG.loaderConfig);
@@ -137,6 +138,7 @@ export class DatagridContainer extends Container {
 
         /** Pagination **/
         this.bind(DG.currentPage).toInstance(currentPageAtom).inTransientScope();
+        this.bind(DG.customPagination).toInstance(customPaginationAtom).inTransientScope();
         this.bind(DG.dynamicPage).toInstance(dynamicPageAtom).inTransientScope();
         this.bind(DG.dynamicPageSize).toInstance(dynamicPageSizeAtom).inTransientScope();
         this.bind(DG.dynamicPagination).toInstance(DynamicPaginationFeature).inSingletonScope();

packages/pluggableWidgets/datagrid-web/src/model/hooks/injection-hooks.ts

@@ -24,3 +24,5 @@ export const [useClickActionHelper] = createInjectionHooks(DG.clickActionHelper)
 export const [useFocusService] = createInjectionHooks(DG.focusService);
 export const [useCheckboxEventsHandler] = createInjectionHooks(DG.checkboxEventsHandler);
 export const [useCellEventsHandler] = createInjectionHooks(DG.cellEventsHandler);
+export const [useCustomPagination] = createInjectionHooks(DG.customPagination);
+export const [usePaginationConfig] = createInjectionHooks(DG.paginationConfig);

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

@@ -105,6 +105,7 @@ export const DG_TOKENS = {
     loaderVM: token<DerivedLoaderController>("DatagridLoaderViewModel"),
 
     currentPage: token<ComputedAtom<number>>("@computed:currentPage"),
+    customPagination: token<ComputedAtom<ReactNode>>("@computed:customPagination"),
     dynamicPage: token<ComputedAtom<number>>("@computed:dynamicPage"),
     dynamicPageSize: token<ComputedAtom<number>>("@computed:dynamicPageSize"),
     dynamicPagination: token<DynamicPaginationFeature>("@feature:DynamicPaginationFeature"),