diff --git a/ui/v2.5/src/components/List/Pagination.tsx b/ui/v2.5/src/components/List/Pagination.tsx index bbe85ab64..cc06f183e 100644 --- a/ui/v2.5/src/components/List/Pagination.tsx +++ b/ui/v2.5/src/components/List/Pagination.tsx @@ -1,5 +1,6 @@ import React from "react"; import { Button, ButtonGroup } from "react-bootstrap"; +import { useIntl } from "react-intl"; interface IPaginationProps { itemsPerPage: number; @@ -8,6 +9,13 @@ interface IPaginationProps { onChangePage: (page: number) => void; } +interface IPaginationIndexProps { + itemsPerPage: number; + currentPage: number; + totalItems: number; + onClick?: () => void; +} + export const Pagination: React.FC = ({ itemsPerPage, currentPage, @@ -99,3 +107,19 @@ export const Pagination: React.FC = ({ ); }; + +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 e423c31f4..64ed97d90 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()} );