diff --git a/ui/v2.5/src/components/List/Pagination.tsx b/ui/v2.5/src/components/List/Pagination.tsx index b34ea41e2b4..6dba6df2250 100644 --- a/ui/v2.5/src/components/List/Pagination.tsx +++ b/ui/v2.5/src/components/List/Pagination.tsx @@ -9,21 +9,21 @@ interface IPaginationProps { onChangePage: (page: number) => void; } +interface IPaginationIndexProps { + itemsPerPage: number; + currentPage: number; + totalItems: number; + onClick?: () => void; +} + export const Pagination: React.FC = ({ itemsPerPage, currentPage, totalItems, onChangePage, }) => { - const intl = useIntl(); - const totalPages = Math.ceil(totalItems / itemsPerPage); - // Build the pagination index string - const firstItemCount:number = Math.min((currentPage-1)*itemsPerPage+1, totalItems); - const lastItemCount:number = Math.min(firstItemCount+(itemsPerPage-1), totalItems); - const indexText:string = `${intl.formatNumber(firstItemCount)}-${intl.formatNumber(lastItemCount)} of ${intl.formatNumber(totalItems)}`; - let startPage: number; let endPage: number; if (totalPages <= 10) { @@ -104,12 +104,22 @@ export const Pagination: React.FC = ({ Last - ); }; + +export const PaginationIndex: React.FC = ({ + itemsPerPage, + currentPage, + totalItems, + onClick +}) => { + const intl = useIntl(); + + // Build the pagination index string + const firstItemCount:number = Math.min((currentPage-1)*itemsPerPage+1, totalItems); + const lastItemCount:number = Math.min(firstItemCount+(itemsPerPage-1), totalItems); + const indexText:string = `${intl.formatNumber(firstItemCount)}-${intl.formatNumber(lastItemCount)} of ${intl.formatNumber(totalItems)}`; + + return {indexText} +}; \ No newline at end of file diff --git a/ui/v2.5/src/hooks/ListHook.tsx b/ui/v2.5/src/hooks/ListHook.tsx index e423c31f416..64ed97d90ce 100644 --- a/ui/v2.5/src/hooks/ListHook.tsx +++ b/ui/v2.5/src/hooks/ListHook.tsx @@ -24,7 +24,7 @@ import { } from "src/hooks/LocalForage"; import { LoadingIndicator } from "src/components/Shared"; import { ListFilter } from "src/components/List/ListFilter"; -import { Pagination } from "src/components/List/Pagination"; +import { Pagination, PaginationIndex } from "src/components/List/Pagination"; import { StashService } from "src/core/StashService"; import { Criterion } from "src/models/list-filter/criteria/criterion"; import { ListFilterModel } from "src/models/list-filter/filter"; @@ -357,6 +357,19 @@ const useList = ( } } + function maybeRenderPaginationIndex() { + if (!result.loading && !result.error) { + return ( + {}} + /> + ); + } + } + function maybeRenderPagination() { if (!result.loading && !result.error) { return ( @@ -394,6 +407,7 @@ const useList = ( {(result.loading || !forageInitialised) && } {result.error &&

{result.error.message}

} {maybeRenderContent()} + {maybeRenderPaginationIndex()} {maybeRenderPagination()} );