resolve search state problems

frontend/composables/use-route-params.ts

@@ -1,3 +1,5 @@
+import { useRouteQuery as useRouteQueryBase } from "@vueuse/router";
+
 /* eslint no-redeclare: 0 */
 import { WritableComputedRef } from "vue";
 
@@ -10,12 +12,24 @@ export function useRouteQuery(q: string, def: any): WritableComputedRef<any> {
   const route = useRoute();
   const router = useRouter();
 
+  const v = useRouteQueryBase(q, def);
+
+  const first = computed<string>(() => {
+    const qv = route.query[q];
+    if (Array.isArray(qv)) {
+      return qv[0]?.toString() || def;
+    }
+    return qv?.toString() || def;
+  });
+
+  onMounted(() => {
+    if (route.query[q] === undefined) {
+      v.value = def;
+    }
+  });
+
   switch (typeof def) {
     case "string":
-      if (route.query[q] === undefined) {
-        router.push({ query: { ...route.query, [q]: def } });
-      }
-
       return computed({
         get: () => {
           const qv = route.query[q];
@@ -46,11 +60,7 @@ export function useRouteQuery(q: string, def: any): WritableComputedRef<any> {
     case "boolean":
       return computed({
         get: () => {
-          const qv = route.query[q];
-          if (Array.isArray(qv)) {
-            return qv[0] === "true";
-          }
-          return qv === "true";
+          return first.value === "true";
         },
         set: v => {
           const query = { ...route.query, [q]: `${v}` };
@@ -59,16 +69,9 @@ export function useRouteQuery(q: string, def: any): WritableComputedRef<any> {
       });
     case "number":
       return computed({
-        get: () => {
-          const qv = route.query[q];
-          if (Array.isArray(qv) && qv.length > 0) {
-            return parseInt(qv[0] as string, 10);
-          }
-          return parseInt(qv as string, 10) || def;
-        },
-        set: v => {
-          const query = { ...route.query, [q]: `${v}` };
-          router.push({ query });
+        get: () => parseInt(first.value, 10),
+        set: nv => {
+          v.value = nv.toString();
         },
       });
   }

frontend/package.json

@@ -35,6 +35,7 @@
     "@tailwindcss/forms": "^0.5.2",
     "@tailwindcss/typography": "^0.5.4",
     "@vueuse/nuxt": "^9.1.1",
+    "@vueuse/router": "^9.9.0",
     "autoprefixer": "^10.4.8",
     "chart.js": "^4.0.1",
     "daisyui": "^2.24.0",
@@ -44,6 +45,7 @@
     "postcss": "^8.4.16",
     "tailwindcss": "^3.1.8",
     "vue": "^3.2.38",
-    "vue-chartjs": "^4.1.2"
+    "vue-chartjs": "^4.1.2",
+    "vue-router": "4"
   }
 }

frontend/pages/items.vue

@@ -13,6 +13,8 @@
   });
 
   const searchLocked = ref(false);
+  const queryParamsInitialized = ref(false);
+  const initialSearch = ref(true);
 
   const api = useUserApi();
   const loading = useMinLoader(2000);
@@ -20,21 +22,21 @@
   const total = ref(0);
 
   const page = useRouteQuery("page", 1);
-  const perPage = useRouteQuery("perPage", 24);
+  const pageSize = useRouteQuery("pageSize", 21);
   const query = useRouteQuery("q", "");
   const advanced = useRouteQuery("advanced", false);
   const includeArchived = useRouteQuery("archived", false);
 
   const hasNext = computed(() => {
-    return page.value * perPage.value < total.value;
+    return page.value * pageSize.value < total.value;
   });
 
   const totalPages = computed(() => {
-    return Math.ceil(total.value / perPage.value);
+    return Math.ceil(total.value / pageSize.value);
   });
 
   function next() {
-    page.value = Math.min(Math.ceil(total.value / perPage.value), page.value + 1);
+    page.value = Math.min(Math.ceil(total.value / pageSize.value), page.value + 1);
   }
 
   const hasPrev = computed(() => {
@@ -46,7 +48,14 @@
   }
 
   async function resetPageSearch() {
+    if (searchLocked.value) {
+      return;
+    }
+
+    if (!initialSearch.value) {
       page.value = 1;
+    }
+
     items.value = [];
     await search();
   }
@@ -67,29 +76,30 @@
       labels,
       includeArchived: includeArchived.value,
       page: page.value,
-      pageSize: perPage.value,
+      pageSize: pageSize.value,
     });
     if (error) {
-      page.value--;
+      page.value = Math.max(1, page.value - 1);
       loading.value = false;
       return;
     }
 
     if (!data.items || data.items.length === 0) {
-      page.value--;
+      page.value = Math.max(1, page.value - 1);
+      loading.value = false;
+      return;
     }
 
     total.value = data.total;
     items.value = data.items;
 
     loading.value = false;
+    initialSearch.value = false;
   }
 
   const route = useRoute();
   const router = useRouter();
 
-  const queryParamsInitialized = ref(false);
-
   onMounted(async () => {
     loading.value = true;
     // Wait until locations and labels are loaded
@@ -166,8 +176,10 @@
     }
   });
 
-  watchDebounced([selectedLocations, selectedLabels, query, page, perPage], search, { debounce: 250, maxWait: 1000 });
-  watch(includeArchived, search);
+  watchDebounced([selectedLocations, selectedLabels, query], resetPageSearch, { debounce: 250, maxWait: 1000 });
+  watch(includeArchived, resetPageSearch);
+
+  watchDebounced([page, pageSize], search, { debounce: 250, maxWait: 1000 });
 </script>
 
 <template>
@@ -199,20 +211,33 @@
     </BaseCard>
     <section class="mt-10">
       <BaseSectionHeader> Items </BaseSectionHeader>
-      <span class="text-base font-medium"> {{ total }} Results </span>
+      <p class="text-base font-medium flex items-center">
+        {{ total }} Results
+        <span class="text-base ml-auto"> Page {{ page }} of {{ totalPages }}</span>
+      </p>
+
       <div ref="cardgrid" class="grid mt-4 grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
-        <TransitionGroup appear name="list">
         <ItemCard v-for="item in items" :key="item.id" :item="item" />
-        </TransitionGroup>
+
         <div class="hidden first:inline text-xl">No Items Found</div>
       </div>
-      <div v-if="items.length > 0" class="flex">
-        <div class="btn-group mx-auto mt-10">
-          <button :disabled="!hasPrev" class="btn" @click="prev">«</button>
-          <button class="btn">Page {{ page }} of {{ totalPages }}</button>
-          <button :disabled="!hasNext" class="btn" @click="next">»</button>
+      <div v-if="items.length > 0" class="mt-10 flex gap-2 flex-col items-center">
+        <div class="flex">
+          <div class="btn-group">
+            <button :disabled="!hasPrev" class="btn text-no-transform" @click="prev">
+              <Icon class="mr-1 h-6 w-6" name="mdi-chevron-left" />
+              Prev
+            </button>
+            <button v-if="hasPrev" class="btn text-no-transform" @click="page = 1">First</button>
+            <button v-if="hasNext" class="btn text-no-transform" @click="page = totalPages">Last</button>
+            <button :disabled="!hasNext" class="btn text-no-transform" @click="next">
+              Next
+              <Icon class="ml-1 h-6 w-6" name="mdi-chevron-right" />
+            </button>
           </div>
         </div>
+        <p class="text-sm font-bold">Page {{ page }} of {{ totalPages }}</p>
+      </div>
     </section>
   </BaseContainer>
 </template>

frontend/pnpm-lock.yaml

@@ -12,6 +12,7 @@ specifiers:
   '@typescript-eslint/eslint-plugin': ^5.36.2
   '@typescript-eslint/parser': ^5.36.2
   '@vueuse/nuxt': ^9.1.1
+  '@vueuse/router': ^9.9.0
   autoprefixer: ^10.4.8
   chart.js: ^4.0.1
   daisyui: ^2.24.0
@@ -32,6 +33,7 @@ specifiers:
   vitest: ^0.22.1
   vue: ^3.2.38
   vue-chartjs: ^4.1.2
+  vue-router: '4'
 
 dependencies:
   '@iconify/vue': 3.2.1_vue@3.2.45
@@ -41,6 +43,7 @@ dependencies:
   '@tailwindcss/forms': 0.5.3_tailwindcss@3.2.4
   '@tailwindcss/typography': 0.5.8_tailwindcss@3.2.4
   '@vueuse/nuxt': 9.6.0_nuxt@3.0.0+vue@3.2.45
+  '@vueuse/router': 9.9.0_xsxatmlnmmg5bcuv3xdnj6fj7y
   autoprefixer: 10.4.13_postcss@8.4.19
   chart.js: 4.0.1
   daisyui: 2.43.0_2lwn2upnx27dqeg6hqdu7sq75m
@@ -51,6 +54,7 @@ dependencies:
   tailwindcss: 3.2.4_postcss@8.4.19
   vue: 3.2.45
   vue-chartjs: 4.1.2_chart.js@4.0.1+vue@3.2.45
+  vue-router: 4.1.6_vue@3.2.45
 
 devDependencies:
   '@faker-js/faker': 7.6.0
@@ -1339,6 +1343,19 @@ packages:
       - vue
     dev: false
 
+  /@vueuse/router/9.9.0_xsxatmlnmmg5bcuv3xdnj6fj7y:
+    resolution: {integrity: sha512-C6w3HZrU3aLde8t3cjcMfFVnw722Is9FtBNJH2wwUPUv7Fc0bKsqcOEq1yFM0f6K5QktHxlp2vcuV4/nA3xPQw==}
+    peerDependencies:
+      vue-router: '>=4.0.0-rc.1'
+    dependencies:
+      '@vueuse/shared': 9.9.0_vue@3.2.45
+      vue-demi: 0.13.11_vue@3.2.45
+      vue-router: 4.1.6_vue@3.2.45
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+    dev: false
+
   /@vueuse/shared/9.6.0_vue@3.2.45:
     resolution: {integrity: sha512-/eDchxYYhkHnFyrb00t90UfjCx94kRHxc7J1GtBCqCG4HyPMX+krV9XJgVtWIsAMaxKVU4fC8NSUviG1JkwhUQ==}
     dependencies:
@@ -1348,6 +1365,15 @@ packages:
       - vue
     dev: false
 
+  /@vueuse/shared/9.9.0_vue@3.2.45:
+    resolution: {integrity: sha512-+D0XFwHG0T+uaIbCSlROBwm1wzs71B7n3KyDOxnvfEMMHDOzl09rYKwaE2AENmYwYPXfHPbSBRDD2gBVHbvTcg==}
+    dependencies:
+      vue-demi: 0.13.11_vue@3.2.45
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+    dev: false
+
   /@zhead/schema/1.0.7:
     resolution: {integrity: sha512-jN2ipkz39YrHd8uulgw/Y7x8iOxvR/cTkin/E9zRQVP5JBIrrJMiGyFFj6JBW4Q029xJ5dKtpwy/3RZWpz+dkQ==}