From c728bd7c4088ff55188b1585cc9f7c0481eea747 Mon Sep 17 00:00:00 2001 From: Bipin Maharjan Date: Tue, 20 Feb 2024 12:48:04 +0545 Subject: [PATCH] fixing pagination issue in frontend --- backend/Readme.md | 1 + backend/src/utils/helper/parsePagination.ts | 2 +- frontend/src/components/addPagination.tsx | 93 ++++++++++++++ frontend/src/components/ui/pagination.tsx | 121 ++++++++++++++++++ .../afterLogin/dashboard/permission/index.tsx | 16 ++- .../pages/afterLogin/dashboard/role/index.tsx | 16 ++- .../afterLogin/dashboard/users/index.tsx | 12 +- 7 files changed, 249 insertions(+), 12 deletions(-) create mode 100644 frontend/src/components/addPagination.tsx create mode 100644 frontend/src/components/ui/pagination.tsx diff --git a/backend/Readme.md b/backend/Readme.md index 2e813de..ecd4ae9 100644 --- a/backend/Readme.md +++ b/backend/Readme.md @@ -334,6 +334,7 @@ type AuthsRequestUser> - **Breaking**: `AUTHS_DB_DRIVER` env variable is now required. - 2.0.1 (Pending Release) - Exposed `getUserById` function for backend system interactions + - [Bug Fix] - Adding missing pagination in frontend ## Examples diff --git a/backend/src/utils/helper/parsePagination.ts b/backend/src/utils/helper/parsePagination.ts index e41e05f..0a53d8e 100644 --- a/backend/src/utils/helper/parsePagination.ts +++ b/backend/src/utils/helper/parsePagination.ts @@ -13,6 +13,6 @@ export const PaginatedResponse = (totalCount: number, paginationQuery: ReturnTyp totalCount: totalCount, currentPage: skip / limit, pageSize: limit, - totalPage: totalPage - 1, + totalPage: totalPage, }; }; diff --git a/frontend/src/components/addPagination.tsx b/frontend/src/components/addPagination.tsx new file mode 100644 index 0000000..157d84e --- /dev/null +++ b/frontend/src/components/addPagination.tsx @@ -0,0 +1,93 @@ +import { + Pagination, + PaginationContent, + PaginationEllipsis, + PaginationItem, + PaginationLink, + PaginationNext, + PaginationPrevious, +} from "@/components/ui/pagination"; + +type Props = { + totalPage: number; + currentPage: number; + setPage: (page: number) => void; +}; + +export function AddPagination(props: Props) { + const paginationTags = () => { + const start = props.currentPage - 3 <= 0 ? 0 : props.currentPage - 3; + let limit = 0; + + // current page is 0 and total page is greater than 7 + if (props.currentPage <= 0 && props.totalPage > 7) { + limit = props.currentPage + 7; + } + // current page is 0 and total page is greater than 7 + else if (props.currentPage <= 0 && props.totalPage < 7) { + limit = props.totalPage; + } + // total page is greater than current page + 4 + else if (props.totalPage > props.currentPage + 4) { + limit = props.currentPage + 4; + } else { + limit = props.totalPage; + } + + const setPage = (event: React.MouseEvent, page: number) => { + event.preventDefault(); + props.setPage(page); + }; + + const pagination_elements = [ + + setPage(e, props.currentPage > 0 ? props.currentPage - 1 : 0)} /> + , + ]; + + if (props.currentPage > 3) { + pagination_elements.push( + + + + ); + } + + for (let i = start; i < limit; i++) { + pagination_elements.push( + + setPage(e, i)} isActive={i === props.currentPage}> + {i + 1} + + + ); + } + + if (props.totalPage > limit) { + pagination_elements.push( + + + + ); + } + + pagination_elements.push( + + setPage(e, props.currentPage < props.totalPage - 1 ? props.currentPage + 1 : props.totalPage - 1)} + /> + + ); + + return pagination_elements; + }; + + return ( +
+ + {paginationTags()} + +
+ ); +} diff --git a/frontend/src/components/ui/pagination.tsx b/frontend/src/components/ui/pagination.tsx new file mode 100644 index 0000000..7715f05 --- /dev/null +++ b/frontend/src/components/ui/pagination.tsx @@ -0,0 +1,121 @@ +import * as React from "react" +import { + ChevronLeftIcon, + ChevronRightIcon, + DotsHorizontalIcon, +} from "@radix-ui/react-icons" + +import { cn } from "@/lib/utils" +import { ButtonProps, buttonVariants } from "@/components/ui/button" + +const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => ( +