From c6c2c134042b7feced82b6f860df88e44f8b5084 Mon Sep 17 00:00:00 2001
From: Amir Raminfar <findamir@gmail.com>
Date: Mon, 15 Jan 2024 10:38:21 -0800
Subject: [PATCH] feat: adds option to home page to show more than default
 containers per page (#2703)

---
 assets/components/ContainerTable.vue      | 21 ++++++++++++++++-----
 assets/components/common/DropdownMenu.vue | 21 ++++++---------------
 2 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/assets/components/ContainerTable.vue b/assets/components/ContainerTable.vue
index ac2525ec..ca96128b 100644
--- a/assets/components/ContainerTable.vue
+++ b/assets/components/ContainerTable.vue
@@ -1,5 +1,14 @@
 !
 <template>
+  <div class="text-right">
+    Show per page
+    <dropdown-menu
+      class="dropdown-left"
+      v-model="perPage"
+      :options="pageSizes.map((i) => ({ label: i.toLocaleString(), value: i }))"
+      v-if="containers.length > 0"
+    />
+  </div>
   <table class="table table-lg bg-base">
     <thead>
       <tr :data-direction="direction > 0 ? 'asc' : 'desc'">
@@ -95,12 +104,14 @@ const fields = {
   },
 };
 
-const { containers, perPage = 15 } = defineProps<{
+const { containers } = defineProps<{
   containers: Container[];
-  perPage?: number;
 }>();
 type keys = keyof typeof fields;
 
+const perPage = useStorage("DOZZLE_TABLE_PAGE_SIZE", 15);
+const pageSizes = [15, 30, 50, 100];
+
 const storage = useStorage<{ column: keys; direction: 1 | -1 }>("DOZZLE_TABLE_CONTAINERS_SORT", {
   column: "created",
   direction: -1,
@@ -115,12 +126,12 @@ const sortedContainers = computedWithControl(
   },
 );
 
-const totalPages = computed(() => Math.ceil(sortedContainers.value.length / perPage));
+const totalPages = computed(() => Math.ceil(sortedContainers.value.length / perPage.value));
 const isPaginated = computed(() => totalPages.value > 1);
 const currentPage = ref(1);
 const paginated = computed(() => {
-  const start = (currentPage.value - 1) * perPage;
-  const end = start + perPage;
+  const start = (currentPage.value - 1) * perPage.value;
+  const end = start + perPage.value;
 
   return sortedContainers.value.slice(start, end);
 });
diff --git a/assets/components/common/DropdownMenu.vue b/assets/components/common/DropdownMenu.vue
index 69700c0a..02c2b62b 100644
--- a/assets/components/common/DropdownMenu.vue
+++ b/assets/components/common/DropdownMenu.vue
@@ -1,9 +1,9 @@
 <template>
   <details class="dropdown" ref="details" v-on-click-outside="close">
     <summary class="btn btn-primary flex-nowrap" v-bind="$attrs">
-      <slot name="trigger"> {{ values[modelValue] ?? defaultLabel }} <carbon:caret-down /></slot>
+      <slot name="trigger"> {{ label }} <carbon:caret-down /></slot>
     </summary>
-    <ul class="menu dropdown-content rounded-box z-50 mt-1 w-52 border border-base-content/20 bg-base p-2 shadow">
+    <ul class="menu dropdown-content z-50 mt-1 w-52 rounded-box border border-base-content/20 bg-base p-2 shadow">
       <slot>
         <li v-for="item in options">
           <a @click="modelValue = item.value">
@@ -17,27 +17,18 @@
   </details>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup generic="T">
 import { vOnClickOutside } from "@vueuse/components";
 type DropdownItem = {
   label: string;
-  value: string;
+  value: T;
 };
 const { options = [], defaultLabel = "" } = defineProps<{ options?: DropdownItem[]; defaultLabel?: string }>();
 const { modelValue } = defineModels<{
-  modelValue: string;
+  modelValue: T;
 }>();
 
-const values = computed(() =>
-  options.reduce(
-    (acc, curr) => {
-      acc[curr.value] = curr.label;
-      return acc;
-    },
-    {} as Record<string, string>,
-  ),
-);
-
+const label = computed(() => options.find((item) => item.value === modelValue.value)?.label ?? defaultLabel);
 const details = ref<HTMLElement | null>(null);
 const close = () => details.value?.removeAttribute("open");
 watch(modelValue, () => close());