resolve search state problems

2024-11-22 16:45:43 +00:00 · 2022-12-31 12:46:58 -09:00 · 2022-12-31 12:46:58 -09:00 · b5b65af6b4
commit b5b65af6b4
parent 412977ea6c
4 changed files with 97 additions and 41 deletions
--- a/frontend/composables/use-route-params.ts
+++ b/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();
        },
      });
  }
--- a/frontend/package.json
+++ b/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"
  }
 }
--- a/frontend/pages/items.vue
+++ b/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() {
-    page.value = 1;
+    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,19 +211,32 @@
    </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>
+        <ItemCard v-for="item in items" :key="item.id" :item="item" />
+
        <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>
--- a/frontend/pnpm-lock.yaml
+++ b/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==}