From 53aaa35a3b2eb947f1e934501751e0e0f4a64556 Mon Sep 17 00:00:00 2001
From: h3llrais3r <pooh_beer_1@hotmail.com>
Date: Sun, 11 Dec 2022 18:38:47 +0100
Subject: [PATCH 1/4] Show total count when no pagination is applied

If no pagination is applied (or disabled in the settings), there is no view on how many items you have in your library. By showing the pagination text (without the pagination buttons) it's still visible for the user how many items are listed in the library.
---
 src/components/common/Pagination.tsx | 9 +++++++++
 src/scripts/libraryBrowser.js        | 4 ++++
 2 files changed, 13 insertions(+)

diff --git a/src/components/common/Pagination.tsx b/src/components/common/Pagination.tsx
index 1c0e9de2a2..79d632abee 100644
--- a/src/components/common/Pagination.tsx
+++ b/src/components/common/Pagination.tsx
@@ -88,6 +88,15 @@ const Pagination: FC<PaginationProps> = ({ viewQuerySettings, setViewQuerySettin
                         />
                     </div>
                 )}
+                {!showControls && (
+                    <div className='listPaging' style={{ display: 'flex', alignItems: 'center' }}>
+
+                        <span>
+                            {globalize.translate('ListPaging', (totalRecordCount ? startIndex + 1 : 0), totalRecordCount, totalRecordCount)}
+                        </span>
+
+                    </div>
+                )}
             </div>
         </div>
     );
diff --git a/src/scripts/libraryBrowser.js b/src/scripts/libraryBrowser.js
index eaec777401..5ad69fb85e 100644
--- a/src/scripts/libraryBrowser.js
+++ b/src/scripts/libraryBrowser.js
@@ -90,6 +90,10 @@ export function getQueryPagingHtml (options) {
         html += '<span style="vertical-align:middle;">';
         html += globalize.translate('ListPaging', totalRecordCount ? startIndex + 1 : 0, recordsEnd, totalRecordCount);
         html += '</span>';
+    } else {
+        html += '<span style="vertical-align:middle;">';
+        html += globalize.translate('ListPaging', totalRecordCount ? startIndex + 1 : 0, totalRecordCount, totalRecordCount);
+        html += '</span>';
     }
 
     if (showControls || options.viewButton || options.filterButton || options.sortButton || options.addLayoutButton) {

From b019eef37b56edb9b65f6df39723fdeec1f1f034 Mon Sep 17 00:00:00 2001
From: h3llrais3r <pooh_beer_1@hotmail.com>
Date: Tue, 13 Dec 2022 21:26:28 +0100
Subject: [PATCH 2/4] Simplify logic

---
 src/components/common/Pagination.tsx | 47 +++++++++++-----------------
 src/scripts/libraryBrowser.js        | 12 ++-----
 2 files changed, 22 insertions(+), 37 deletions(-)

diff --git a/src/components/common/Pagination.tsx b/src/components/common/Pagination.tsx
index 79d632abee..b20e510bb8 100644
--- a/src/components/common/Pagination.tsx
+++ b/src/components/common/Pagination.tsx
@@ -69,34 +69,25 @@ const Pagination: FC<PaginationProps> = ({ viewQuerySettings, setViewQuerySettin
     return (
         <div ref={element}>
             <div className='paging'>
-                {showControls && (
-                    <div className='listPaging' style={{ display: 'flex', alignItems: 'center' }}>
-
-                        <span>
-                            {globalize.translate('ListPaging', (totalRecordCount ? startIndex + 1 : 0), recordsEnd, totalRecordCount)}
-                        </span>
-
-                        <IconButtonElement
-                            is='paper-icon-button-light'
-                            className='btnPreviousPage autoSize'
-                            icon='material-icons arrow_back'
-                        />
-                        <IconButtonElement
-                            is='paper-icon-button-light'
-                            className='btnNextPage autoSize'
-                            icon='material-icons arrow_forward'
-                        />
-                    </div>
-                )}
-                {!showControls && (
-                    <div className='listPaging' style={{ display: 'flex', alignItems: 'center' }}>
-
-                        <span>
-                            {globalize.translate('ListPaging', (totalRecordCount ? startIndex + 1 : 0), totalRecordCount, totalRecordCount)}
-                        </span>
-
-                    </div>
-                )}
+                <div className='listPaging' style={{ display: 'flex', alignItems: 'center' }}>
+                    <span>
+                        {globalize.translate('ListPaging', (totalRecordCount ? startIndex + 1 : 0), recordsEnd || totalRecordCount, totalRecordCount)}
+                    </span>
+                    {showControls && (
+                        <div style={{ display: 'inline-flex' }}>
+                            <IconButtonElement
+                                is='paper-icon-button-light'
+                                className='btnPreviousPage autoSize'
+                                icon='material-icons arrow_back'
+                            />
+                            <IconButtonElement
+                                is='paper-icon-button-light'
+                                className='btnNextPage autoSize'
+                                icon='material-icons arrow_forward'
+                            />
+                        </div>
+                    )}
+                </div>
             </div>
         </div>
     );
diff --git a/src/scripts/libraryBrowser.js b/src/scripts/libraryBrowser.js
index 5ad69fb85e..c4fdd0577f 100644
--- a/src/scripts/libraryBrowser.js
+++ b/src/scripts/libraryBrowser.js
@@ -86,15 +86,9 @@ export function getQueryPagingHtml (options) {
 
     html += '<div class="listPaging">';
 
-    if (showControls) {
-        html += '<span style="vertical-align:middle;">';
-        html += globalize.translate('ListPaging', totalRecordCount ? startIndex + 1 : 0, recordsEnd, totalRecordCount);
-        html += '</span>';
-    } else {
-        html += '<span style="vertical-align:middle;">';
-        html += globalize.translate('ListPaging', totalRecordCount ? startIndex + 1 : 0, totalRecordCount, totalRecordCount);
-        html += '</span>';
-    }
+    html += '<span style="vertical-align:middle;">';
+    html += globalize.translate('ListPaging', totalRecordCount ? startIndex + 1 : 0, recordsEnd || totalRecordCount, totalRecordCount);
+    html += '</span>';
 
     if (showControls || options.viewButton || options.filterButton || options.sortButton || options.addLayoutButton) {
         html += '<div style="display:inline-block;">';

From c74717cd6d233570527337e2a6e0d32be54eb1ae Mon Sep 17 00:00:00 2001
From: h3llrais3r <pooh_beer_1@hotmail.com>
Date: Fri, 16 Dec 2022 09:29:29 +0100
Subject: [PATCH 3/4] Use react fragment instead of div

---
 src/components/common/Pagination.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/common/Pagination.tsx b/src/components/common/Pagination.tsx
index b20e510bb8..287b218d69 100644
--- a/src/components/common/Pagination.tsx
+++ b/src/components/common/Pagination.tsx
@@ -74,7 +74,7 @@ const Pagination: FC<PaginationProps> = ({ viewQuerySettings, setViewQuerySettin
                         {globalize.translate('ListPaging', (totalRecordCount ? startIndex + 1 : 0), recordsEnd || totalRecordCount, totalRecordCount)}
                     </span>
                     {showControls && (
-                        <div style={{ display: 'inline-flex' }}>
+                        <>
                             <IconButtonElement
                                 is='paper-icon-button-light'
                                 className='btnPreviousPage autoSize'
@@ -85,7 +85,7 @@ const Pagination: FC<PaginationProps> = ({ viewQuerySettings, setViewQuerySettin
                                 className='btnNextPage autoSize'
                                 icon='material-icons arrow_forward'
                             />
-                        </div>
+                        </>
                     )}
                 </div>
             </div>

From fb244080ded52c14fc0379bfc31389953de7286a Mon Sep 17 00:00:00 2001
From: h3llrais3r <h3llrais3r.github@gmail.com>
Date: Wed, 11 Jan 2023 17:08:35 +0100
Subject: [PATCH 4/4] Changes after review

---
 src/components/common/Pagination.tsx | 5 +++--
 src/scripts/libraryBrowser.js        | 7 ++++---
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/components/common/Pagination.tsx b/src/components/common/Pagination.tsx
index 287b218d69..3dd5a60ffd 100644
--- a/src/components/common/Pagination.tsx
+++ b/src/components/common/Pagination.tsx
@@ -15,7 +15,8 @@ const Pagination: FC<PaginationProps> = ({ viewQuerySettings, setViewQuerySettin
     const limit = userSettings.libraryPageSize(undefined);
     const totalRecordCount = itemsResult.TotalRecordCount || 0;
     const startIndex = viewQuerySettings.StartIndex || 0;
-    const recordsEnd = Math.min(startIndex + limit, totalRecordCount);
+    const recordsStart = totalRecordCount ? startIndex + 1 : 0;
+    const recordsEnd = limit ? Math.min(startIndex + limit, totalRecordCount) : totalRecordCount;
     const showControls = limit > 0 && limit < totalRecordCount;
     const element = useRef<HTMLDivElement>(null);
 
@@ -71,7 +72,7 @@ const Pagination: FC<PaginationProps> = ({ viewQuerySettings, setViewQuerySettin
             <div className='paging'>
                 <div className='listPaging' style={{ display: 'flex', alignItems: 'center' }}>
                     <span>
-                        {globalize.translate('ListPaging', (totalRecordCount ? startIndex + 1 : 0), recordsEnd || totalRecordCount, totalRecordCount)}
+                        {globalize.translate('ListPaging', recordsStart, recordsEnd, totalRecordCount)}
                     </span>
                     {showControls && (
                         <>
diff --git a/src/scripts/libraryBrowser.js b/src/scripts/libraryBrowser.js
index c4fdd0577f..0a44aaad36 100644
--- a/src/scripts/libraryBrowser.js
+++ b/src/scripts/libraryBrowser.js
@@ -81,13 +81,14 @@ export function getQueryPagingHtml (options) {
     const limit = options.limit;
     const totalRecordCount = options.totalRecordCount;
     let html = '';
-    const recordsEnd = Math.min(startIndex + limit, totalRecordCount);
-    const showControls = limit < totalRecordCount;
+    const recordsStart = totalRecordCount ? startIndex + 1 : 0;
+    const recordsEnd = limit ? Math.min(startIndex + limit, totalRecordCount) : totalRecordCount;
+    const showControls = limit > 0 && limit < totalRecordCount;
 
     html += '<div class="listPaging">';
 
     html += '<span style="vertical-align:middle;">';
-    html += globalize.translate('ListPaging', totalRecordCount ? startIndex + 1 : 0, recordsEnd || totalRecordCount, totalRecordCount);
+    html += globalize.translate('ListPaging', recordsStart, recordsEnd, totalRecordCount);
     html += '</span>';
 
     if (showControls || options.viewButton || options.filterButton || options.sortButton || options.addLayoutButton) {