From 18ac5ec8efd7ba6353af09115ca230b7b5beb5b2 Mon Sep 17 00:00:00 2001
From: henryk86 <166761451+henryk86@users.noreply.github.com>
Date: Wed, 1 May 2024 12:18:00 +0200
Subject: [PATCH] added pagination to tonies page

---
 public/translations/de.json          |  3 ++-
 public/translations/en.json          |  1 +
 src/components/tonies/ToniesList.tsx | 18 +++++++++++++-----
 3 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/public/translations/de.json b/public/translations/de.json
index 7c505dfb..761217e0 100644
--- a/public/translations/de.json
+++ b/public/translations/de.json
@@ -40,6 +40,7 @@
   "tonies": {
     "navigationTitle": "Tonies",
     "title": "Tonies",
+    "pageSelector": " Tonies / Seite",
     "tonies": {
       "navigationTitle": "Tonies",
       "title": "Tonies"
@@ -81,7 +82,7 @@
       "cloudAccessEnabled": "Cloud-Zugang aktiviert!",
       "couldNotChangeCloudFlag": "Konnte Cloud-Zugriff (nocloud) Flag nicht ändern! ",
       "downloading": "Herunterladen...",
-      "downloadedFile": "Heruntergeladene Datei",
+      "downloadedFile": "Datei heruntergeladen",
       "errorDuringDownload": "Fehler beim Herunterladen im Hintergrund: ",
       "setTonieToModelSuccessful":  "Setze Tonie-Modell auf {{selectedModel}}!",
       "setTonieToModelFailed":  "Konnte das Tonie-Modell nicht ändern!"
diff --git a/public/translations/en.json b/public/translations/en.json
index 3a79a26a..e6c756a8 100644
--- a/public/translations/en.json
+++ b/public/translations/en.json
@@ -39,6 +39,7 @@
   "tonies": {
     "navigationTitle": "Tonies",
     "title": "Tonies",
+    "pageSelector": " tonies / page",
     "tonies": {
       "navigationTitle": "Tonies",
       "title": "Tonies"
diff --git a/src/components/tonies/ToniesList.tsx b/src/components/tonies/ToniesList.tsx
index bc09be0d..df277e66 100644
--- a/src/components/tonies/ToniesList.tsx
+++ b/src/components/tonies/ToniesList.tsx
@@ -1,10 +1,15 @@
 
 import { List } from 'antd';
+import { useTranslation } from 'react-i18next'; // Assuming you are using react-i18next for translation
 import { TonieCard, TonieCardProps } from '../../components/tonies/TonieCard';
 
 export const ToniesList: React.FC<{ tonieCards: TonieCardProps[] }> = ({ tonieCards }) => {
+
+    const { t } = useTranslation();
+
     return (
         <List
+
             grid={{
                 gutter: 16,
                 xs: 1,
@@ -12,14 +17,17 @@ export const ToniesList: React.FC<{ tonieCards: TonieCardProps[] }> = ({ tonieCa
                 md: 2,
                 lg: 3,
                 xl: 4,
-                xxl: 6,
+                xxl: 6
             }}
-
             pagination={{
                 showSizeChanger: true,
-                hideOnSinglePage: true,
-                pageSizeOptions: ["10", "50", "100", "1000"],
-                position: "both"
+                defaultPageSize: 24,
+                pageSizeOptions: ["24", "48", "96", "192"],
+                position: "both",
+                style: { "marginBottom": "16px" },
+                locale: {
+                    items_per_page: t('tonies.pageSelector'), // Custom text for page size selector
+                }
             }}
 
             dataSource={tonieCards}