From acf034954da97d8a3439bd5f2e4827449df0c7de Mon Sep 17 00:00:00 2001 From: gjulivan Date: Fri, 10 Jan 2025 14:27:22 +0100 Subject: [PATCH] feat(dg): show numbers of rows pagination --- .../datagrid-web/CHANGELOG.md | 1 + .../datagrid-web/src/Datagrid.editorConfig.ts | 8 +- .../src/Datagrid.editorPreview.tsx | 2 +- .../datagrid-web/src/Datagrid.tsx | 7 +- .../datagrid-web/src/Datagrid.xml | 22 ++-- .../datagrid-web/src/__tests__/perf.spec.tsx | 3 +- .../datagrid-web/src/components/Widget.tsx | 3 +- .../__snapshots__/Table.spec.tsx.snap | 38 +++--- .../src/utils/useShowPagination.ts | 22 ++-- .../datagrid-web/typings/DatagridProps.d.ts | 10 +- .../gallery-web/src/components/Gallery.tsx | 1 + .../src/components/Pagination.tsx | 119 ++++++++++-------- 12 files changed, 140 insertions(+), 96 deletions(-) diff --git a/packages/pluggableWidgets/datagrid-web/CHANGELOG.md b/packages/pluggableWidgets/datagrid-web/CHANGELOG.md index 1e9e479964..e5ff91941e 100644 --- a/packages/pluggableWidgets/datagrid-web/CHANGELOG.md +++ b/packages/pluggableWidgets/datagrid-web/CHANGELOG.md @@ -9,6 +9,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), ### Added - We introduced a setting to exclude filters from being stored in the Personalization configuration. +- We have introduced show number of rows for virtual scrolling and load more pagination mode. ## [2.28.2] - 2024-12-12 diff --git a/packages/pluggableWidgets/datagrid-web/src/Datagrid.editorConfig.ts b/packages/pluggableWidgets/datagrid-web/src/Datagrid.editorConfig.ts index 352979aada..4464906c37 100644 --- a/packages/pluggableWidgets/datagrid-web/src/Datagrid.editorConfig.ts +++ b/packages/pluggableWidgets/datagrid-web/src/Datagrid.editorConfig.ts @@ -83,10 +83,16 @@ export function getProperties( ]); } }); - if (values.pagination !== "buttons") { + if (values.pagination === "buttons") { + hidePropertyIn(defaultProperties, values, "showNumberOfRows"); + } else { hidePropertyIn(defaultProperties, values, "showPagingButtons"); + } + + if (values.showNumberOfRows === false) { hidePropertyIn(defaultProperties, values, "pagingPosition"); } + if (values.pagination !== "loadMore") { hidePropertyIn(defaultProperties, values, "loadMoreButtonCaption"); } diff --git a/packages/pluggableWidgets/datagrid-web/src/Datagrid.editorPreview.tsx b/packages/pluggableWidgets/datagrid-web/src/Datagrid.editorPreview.tsx index 85d0d6b447..693d5ee729 100644 --- a/packages/pluggableWidgets/datagrid-web/src/Datagrid.editorPreview.tsx +++ b/packages/pluggableWidgets/datagrid-web/src/Datagrid.editorPreview.tsx @@ -132,7 +132,7 @@ export function preview(props: DatagridPreviewProps): ReactElement { pageSize={props.pageSize ?? numberOfItems} showPagingButtons={props.showPagingButtons} loadMoreButtonCaption={props.loadMoreButtonCaption} - paging={props.pagination === "buttons"} + paging={props.pagination === "buttons" || props.showNumberOfRows} pagingPosition={props.pagingPosition} preview processedRows={0} diff --git a/packages/pluggableWidgets/datagrid-web/src/Datagrid.tsx b/packages/pluggableWidgets/datagrid-web/src/Datagrid.tsx index d97f9ea253..3c833fd1bf 100644 --- a/packages/pluggableWidgets/datagrid-web/src/Datagrid.tsx +++ b/packages/pluggableWidgets/datagrid-web/src/Datagrid.tsx @@ -93,6 +93,8 @@ const Container = observer((props: Props): ReactElement => { return props.datasource.status === ValueStatus.Loading; }, [exportProgress, isRefreshing, props.datasource.status, props.datasource.hasMoreItems]); + const showPagingButtonsOrRows = props.pagination === "buttons" ? props.showPagingButtons : props.showNumberOfRows; + return ( { loadMoreButtonCaption={props.loadMoreButtonCaption?.value} paging={useShowPagination({ pagination: props.pagination, - showPagingButtons: props.showPagingButtons, + showPagingButtonsOrRows, totalCount: props.datasource.totalCount, - limit: props.datasource.limit + limit: props.datasource.limit, + requestTotalCount: props.datasource.requestTotalCount })} pagingPosition={props.pagingPosition} showPagingButtons={props.showPagingButtons} diff --git a/packages/pluggableWidgets/datagrid-web/src/Datagrid.xml b/packages/pluggableWidgets/datagrid-web/src/Datagrid.xml index 777bc24140..e86a8c01ea 100644 --- a/packages/pluggableWidgets/datagrid-web/src/Datagrid.xml +++ b/packages/pluggableWidgets/datagrid-web/src/Datagrid.xml @@ -236,15 +236,6 @@ Load more - - Position of paging buttons - - - Below grid - Above grid - Both - - Show paging buttons @@ -253,6 +244,19 @@ Auto + + Show number of rows + + + + Position of pagination + + + Below grid + Above grid + Both + + Load more caption diff --git a/packages/pluggableWidgets/datagrid-web/src/__tests__/perf.spec.tsx b/packages/pluggableWidgets/datagrid-web/src/__tests__/perf.spec.tsx index 2f715764e7..384d87c4cf 100644 --- a/packages/pluggableWidgets/datagrid-web/src/__tests__/perf.spec.tsx +++ b/packages/pluggableWidgets/datagrid-web/src/__tests__/perf.spec.tsx @@ -85,7 +85,8 @@ describe("Datagrid", () => { configurationStorageType: "attribute", configurationAttribute: undefined, loadingType: "spinner", - storeFiltersInPersonalization: true + storeFiltersInPersonalization: true, + showNumberOfRows: false }; const user = userEvent.setup(); let renderCount = 0; diff --git a/packages/pluggableWidgets/datagrid-web/src/components/Widget.tsx b/packages/pluggableWidgets/datagrid-web/src/components/Widget.tsx index cac6468179..3a99843e20 100644 --- a/packages/pluggableWidgets/datagrid-web/src/components/Widget.tsx +++ b/packages/pluggableWidgets/datagrid-web/src/components/Widget.tsx @@ -134,7 +134,7 @@ const Main = observer((props: WidgetProps): ReactElemen visibleColumns } = props; - const isInfinite = !paging; + const isInfinite = paginationType === "virtualScrolling"; const showHeader = !!headerContent; const showTopBar = paging && (pagingPosition === "top" || pagingPosition === "both"); @@ -149,6 +149,7 @@ const Main = observer((props: WidgetProps): ReactElemen pageSize={pageSize} showPagingButtons={props.showPagingButtons} previousPage={() => setPage && setPage(prev => prev - 1)} + pagination={paginationType} /> ) : null; diff --git a/packages/pluggableWidgets/datagrid-web/src/components/__tests__/__snapshots__/Table.spec.tsx.snap b/packages/pluggableWidgets/datagrid-web/src/components/__tests__/__snapshots__/Table.spec.tsx.snap index 8b743cefa2..216eb9ae98 100644 --- a/packages/pluggableWidgets/datagrid-web/src/components/__tests__/__snapshots__/Table.spec.tsx.snap +++ b/packages/pluggableWidgets/datagrid-web/src/components/__tests__/__snapshots__/Table.spec.tsx.snap @@ -6,7 +6,7 @@ exports[`Table renders the structure correctly 1`] = ` class="test widget-datagrid" >
- Currently showing 11 to 20 + Currently showing 11 to 0
) : null; diff --git a/packages/shared/widget-plugin-grid/src/components/Pagination.tsx b/packages/shared/widget-plugin-grid/src/components/Pagination.tsx index afb4a43b1f..cef592e119 100644 --- a/packages/shared/widget-plugin-grid/src/components/Pagination.tsx +++ b/packages/shared/widget-plugin-grid/src/components/Pagination.tsx @@ -1,6 +1,10 @@ -import { createElement, Dispatch, HTMLAttributes, ReactElement, SetStateAction } from "react"; +import { createElement, Dispatch, HTMLAttributes, ReactElement, SetStateAction, Fragment } from "react"; import ControlIcon from "../internal/ControlIcon.js"; +// copied from DatagridProps.d.ts +type PaginationEnum = "buttons" | "virtualScrolling" | "loadMore"; +type ShowPagingButtonsEnum = "always" | "auto" | "hide"; + export interface PaginationProps { canNextPage: boolean; canPreviousPage: boolean; @@ -11,13 +15,14 @@ export interface PaginationProps { pageSize: number; previousPage: () => void; setPaginationIndex?: Dispatch>; - showPagingButtons?: "always" | "auto"; + showPagingButtons?: ShowPagingButtonsEnum; labelNextPage?: string; labelPreviousPage?: string; labelFirstPage?: string; labelLastPage?: string; labelPagination?: string; labelPagingStatus?: string; + pagination: PaginationEnum; } export function Pagination(props: PaginationProps): ReactElement | null { @@ -25,9 +30,13 @@ export function Pagination(props: PaginationProps): ReactElement | null { props.numberOfItems !== undefined ? Math.ceil(props.numberOfItems / props.pageSize) : undefined; const lastPage = numberOfPages !== undefined ? numberOfPages - 1 : 0; const hasLastPage = numberOfPages !== undefined; - const initialItem = props.numberOfItems === 0 ? 0 : props.page * props.pageSize + 1; - const lastItem = getLastItem(props.canNextPage, props.numberOfItems, props.page, props.pageSize); - + const showControls = props.pagination === "buttons"; + const initialItem = props.numberOfItems === 0 ? 0 : showControls ? props.page * props.pageSize + 1 : 1; + const lastItem = showControls + ? getLastItem(props.canNextPage, props.numberOfItems ?? 0, props.page, props.pageSize) + : props.page * props.pageSize > (props.numberOfItems ?? 0) + ? props.numberOfItems ?? 0 + : props.page * props.pageSize; const setPageIndex = (page: number): void => { if (props.setPaginationIndex) { props.setPaginationIndex(page); @@ -38,63 +47,71 @@ export function Pagination(props: PaginationProps): ReactElement | null { return null; } - const pagingStatus = `${initialItem} to ${lastItem} ${ + const pagingStatus = `${showControls ? `${initialItem} to ${lastItem}` : lastItem} ${ hasLastPage ? `of ${props.numberOfItems ?? (numberOfPages ?? 1) * props.pageSize}` : "" }`; return (
- - + {showControls && ( + + + + + )} {props.labelPagingStatus ?? "Currently showing"} {pagingStatus}
{pagingStatus}
- - {hasLastPage && ( - + {showControls && ( + + + {hasLastPage && ( + + )} + )}
);