From 25c76522d6687c2545dddbcd51e3e4af95393d3f Mon Sep 17 00:00:00 2001
From: Tonya <tonya@tokia.dev>
Date: Thu, 5 Sep 2024 23:57:12 +0000
Subject: [PATCH] Merge pull request #185

* feat: changeable items per table page

* Merge branch 'main' into main
---
 frontend/components/Item/View/Table.vue | 20 ++++++++++++++++++--
 frontend/composables/use-preferences.ts |  2 ++
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/frontend/components/Item/View/Table.vue b/frontend/components/Item/View/Table.vue
index 2c0e94c98..069456105 100644
--- a/frontend/components/Item/View/Table.vue
+++ b/frontend/components/Item/View/Table.vue
@@ -63,7 +63,14 @@
         </tr>
       </tbody>
     </table>
-    <div v-if="hasPrev || hasNext" class="border-t p-3 justify-end flex">
+    <div v-if="items.length > 10" class="border-t p-3 justify-end flex gap-3">
+      <div class="flex items-center">Rows per page</div>
+      <select v-model.number="pagination.rowsPerPage" class="select select-sm select-primary">
+        <option :value="10">10</option>
+        <option :value="25">25</option>
+        <option :value="50">50</option>
+        <option :value="100">100</option>
+      </select>
       <div class="btn-group">
         <button :disabled="!hasPrev" class="btn btn-sm" @click="prev()">«</button>
         <button class="btn btn-sm">Page {{ pagination.page }}</button>
@@ -97,13 +104,22 @@
     ] as TableHeader[];
   });
 
+  const preferences = useViewPreferences();
+
   const pagination = reactive({
     descending: false,
     page: 1,
-    rowsPerPage: 10,
+    rowsPerPage: preferences.value.itemsPerTablePage,
     rowsNumber: 0,
   });
 
+  watch(
+    () => pagination.rowsPerPage,
+    newRowsPerPage => {
+      preferences.value.itemsPerTablePage = newRowsPerPage;
+    }
+  );
+
   const next = () => pagination.page++;
   const hasNext = computed<boolean>(() => {
     return pagination.page * pagination.rowsPerPage < props.items.length;
diff --git a/frontend/composables/use-preferences.ts b/frontend/composables/use-preferences.ts
index 848617510..93f81ccb0 100644
--- a/frontend/composables/use-preferences.ts
+++ b/frontend/composables/use-preferences.ts
@@ -9,6 +9,7 @@ export type LocationViewPreferences = {
   editorAdvancedView: boolean;
   itemDisplayView: ViewType;
   theme: DaisyTheme;
+  itemsPerTablePage: number;
 };
 
 /**
@@ -24,6 +25,7 @@ export function useViewPreferences(): Ref<LocationViewPreferences> {
       editorAdvancedView: false,
       itemDisplayView: "card",
       theme: "homebox",
+      itemsPerTablePage: 10,
     },
     { mergeDefaults: true }
   );