From 3a639d9a3c722a6a5900d3089d1b97d90d0abd56 Mon Sep 17 00:00:00 2001
From: Roman <mail@romanh.de>
Date: Thu, 2 May 2024 16:40:06 +0200
Subject: [PATCH] pagination fix

---
 Core/Localization/de_DE/general.php  |  3 ++-
 Core/Localization/en_US/general.php  |  3 ++-
 react/shared/elements/data-table.css |  5 ++++-
 react/shared/hooks/pagination.js     | 12 ++++++++----
 4 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/Core/Localization/de_DE/general.php b/Core/Localization/de_DE/general.php
index a994ede..a09daff 100644
--- a/Core/Localization/de_DE/general.php
+++ b/Core/Localization/de_DE/general.php
@@ -64,8 +64,9 @@ return [
   "overwrite" => "Überschreiben",
 
   # data table
-  "showing_x_of_y_entries" => "Zeige %d von %d Einträgen",
+  "showing_x_to_y_of_z_entries" => "Zeige %d bis %d von %d Einträgen",
   "controls" => "Steuerung",
+  "entries_per_page" => "pro Seite",
 
   # date / time
   "date" => "Datum",
diff --git a/Core/Localization/en_US/general.php b/Core/Localization/en_US/general.php
index 8dff1b9..d26f23e 100644
--- a/Core/Localization/en_US/general.php
+++ b/Core/Localization/en_US/general.php
@@ -64,8 +64,9 @@ return [
   "overwrite" => "Overwrite",
 
   # data table
-  "showing_x_of_y_entries" => "Showing %d of %d entries",
+  "showing_x_to_y_of_z_entries" => "Showing %d to %d of %d entries",
   "controls" => "Controls",
+  "entries_per_page" => "per Page",
 
   # date / time
   "date" => "Date",
diff --git a/react/shared/elements/data-table.css b/react/shared/elements/data-table.css
index 729955f..1852cf8 100644
--- a/react/shared/elements/data-table.css
+++ b/react/shared/elements/data-table.css
@@ -33,9 +33,12 @@
 
 .pagination-controls {
     margin-top: 6px;
+    display: grid;
+    grid-template-columns: 75px auto;
+    align-items: center;
 }
 
-.pagination-page-size > div {
+.pagination-controls select {
     padding-top: 5px;
     padding-bottom: 5px;
 }
diff --git a/react/shared/hooks/pagination.js b/react/shared/hooks/pagination.js
index 114b832..4b1e6f1 100644
--- a/react/shared/hooks/pagination.js
+++ b/react/shared/hooks/pagination.js
@@ -1,5 +1,5 @@
 import React, {useState} from "react";
-import {FormControl, Box, Select, Pagination as MuiPagination} from "@mui/material";
+import {FormControl, Box, Select, Pagination as MuiPagination, InputLabel} from "@mui/material";
 import {sprintf} from "sprintf-js";
 
 class Pagination {
@@ -55,14 +55,18 @@ class Pagination {
 
     renderPagination(L, numEntries, options = null) {
         options = options || [10, 25, 50, 100];
+        let start = (this.getPage() - 1) * this.data.pageSize + 1;
+        let end = Math.min(this.data.total, start + numEntries - 1);
 
-        return <Box display={"grid"} gridTemplateColumns={"75px auto"} className={"pagination-controls"}>
+        return <Box className={"pagination-controls"}>
             <FormControl>
+                <InputLabel id="page-size-label">{L("general.entries_per_page")}</InputLabel>
                 <Select
                     native
+                    labelId="page-size-label"
+                    label={L("general.entries_per_page")}
                     value={this.data.pageSize}
                     className={"pagination-page-size"}
-                    label={L("general.entries_per_page")}
                     onChange={(e) => this.setPageSize(parseInt(e.target.value))}
                     size={"small"}
                 >
@@ -74,7 +78,7 @@ class Pagination {
                 onChange={(_, page) => this.setPage(page)}
             />
             <Box gridColumn={"1 / 3"} mt={1}>
-                {sprintf(L("general.showing_x_of_y_entries"), numEntries, this.data.total)}
+                {sprintf(L("general.showing_x_to_y_of_z_entries"), start, end, this.data.total)}
             </Box>
         </Box>
     }