feat(pagination): implement windowed pagination for improved navigation
- Introduced windowed pagination logic in the TendersTable component to enhance user experience by allowing for a more manageable view of pages. - Updated the pagination component to accept new props for page range and margin pages, enabling customizable pagination display. - Refactored the useTenderListPresenter to utilize the new windowed pagination functionality, improving clarity and maintainability of pagination handling.
This commit is contained in:
@@ -346,6 +346,42 @@ const useTenderListPresenter = () => {
|
||||
error,
|
||||
});
|
||||
|
||||
const MAX_PAGE_JUMP = 10;
|
||||
const paginationWindow = useMemo(() => {
|
||||
const windowStart = Math.max(0, pagination.currentPage - MAX_PAGE_JUMP);
|
||||
const windowEnd = Math.min(
|
||||
Math.max(pagination.totalPages - 1, 0),
|
||||
pagination.currentPage + MAX_PAGE_JUMP,
|
||||
);
|
||||
return {
|
||||
windowStart,
|
||||
virtualCurrent: pagination.currentPage - windowStart,
|
||||
virtualTotal: Math.max(windowEnd - windowStart + 1, 1),
|
||||
};
|
||||
}, [pagination.currentPage, pagination.totalPages]);
|
||||
|
||||
const handleWindowedPaginationChange = useCallback(
|
||||
(e: { selected: number }) => {
|
||||
handlePaginationChange({
|
||||
selected: e.selected + paginationWindow.windowStart,
|
||||
});
|
||||
},
|
||||
[handlePaginationChange, paginationWindow.windowStart],
|
||||
);
|
||||
|
||||
const buildWindowedPageLabel = useCallback(
|
||||
(virtualPage: number) => String(virtualPage + paginationWindow.windowStart),
|
||||
[paginationWindow.windowStart],
|
||||
);
|
||||
|
||||
const windowedPagination = useMemo(
|
||||
() => ({
|
||||
currentPage: paginationWindow.virtualCurrent,
|
||||
totalPages: paginationWindow.virtualTotal,
|
||||
}),
|
||||
[paginationWindow.virtualCurrent, paginationWindow.virtualTotal],
|
||||
);
|
||||
|
||||
const shouldShowPagination =
|
||||
!isPending && (data?.meta?.pages ?? 1) * (data?.meta?.limit ?? 10) > 10;
|
||||
|
||||
@@ -498,10 +534,11 @@ const useTenderListPresenter = () => {
|
||||
tendersList,
|
||||
navigateToTenderDetails,
|
||||
navigateToTenderFeedback,
|
||||
handlePaginationChange,
|
||||
handlePaginationChange: handleWindowedPaginationChange,
|
||||
buildWindowedPageLabel,
|
||||
getRowNumber,
|
||||
formatDateTimeCell,
|
||||
pagination,
|
||||
pagination: windowedPagination,
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user