Merge pull request #185

* feat: changeable items per table page

* Merge branch 'main' into main

Author: tonyaellie

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;

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 }
   );