Add index/total count to end of pagination buttons (#490)

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<IPaginationProps> = ({
   itemsPerPage,
   currentPage,
@@ -99,3 +107,19 @@ export const Pagination: React.FC<IPaginationProps> = ({
     </ButtonGroup>
   );
 };
+
+export const PaginationIndex: React.FC<IPaginationIndexProps> = ({
+  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 <span className="filter-container text-muted paginationIndex" onClick={onClick}>{indexText}</span>
+};

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 = <QueryResult extends IQueryResult, QueryData extends IDataItem>(
     }
   }
 
+  function maybeRenderPaginationIndex() {
+    if (!result.loading && !result.error) {
+      return (
+        <PaginationIndex
+          itemsPerPage={filter.itemsPerPage}
+          currentPage={filter.currentPage}
+          totalItems={totalCount}
+          onClick={() => {}}
+        />
+      );
+    }
+  }
+
   function maybeRenderPagination() {
     if (!result.loading && !result.error) {
       return (
@@ -394,6 +407,7 @@ const useList = <QueryResult extends IQueryResult, QueryData extends IDataItem>(
       {(result.loading || !forageInitialised) && <LoadingIndicator />}
       {result.error && <h1>{result.error.message}</h1>}
       {maybeRenderContent()}
+      {maybeRenderPaginationIndex()}
       {maybeRenderPagination()}
     </div>
   );