From 1513617f9538557c9752b66dbc3f4702a4e92898 Mon Sep 17 00:00:00 2001
From: FleetingOrchard <55274008+FleetingOrchard@users.noreply.github.com>
Date: Wed, 29 Apr 2020 08:28:57 +1000
Subject: [PATCH] Add index/total count to end of pagination buttons (#490)

---
 ui/v2.5/src/components/List/Pagination.tsx | 24 ++++++++++++++++++++++
 ui/v2.5/src/hooks/ListHook.tsx             | 16 ++++++++++++++-
 2 files changed, 39 insertions(+), 1 deletion(-)

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<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>
+};
\ 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 = <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>
   );