added pagination to tonies page

toniebox-reverse-engineering · May 1, 2024 · 18ac5ec · 18ac5ec
1 parent 54cea33
commit 18ac5ec
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 6 deletions.
diff --git 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
@@ -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
@@ -1,25 +1,33 @@
 
 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,
                 sm: 2,
                 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}