From b91285fe24a7f7f96d3a2ea2f3601a202e69b00c Mon Sep 17 00:00:00 2001
From: nijmra <armijn@gmail.com>
Date: Tue, 15 Oct 2024 10:58:08 +0200
Subject: [PATCH] feat: add to history

---
 .../src/components/DateRangePicker.vue        |  9 +++----
 .../publicatie/PublicatiesOverview.vue        |  6 +++--
 .../composables/use-paged-search.ts           | 24 +++++++++----------
 3 files changed, 18 insertions(+), 21 deletions(-)

diff --git a/odpc.client/src/components/DateRangePicker.vue b/odpc.client/src/components/DateRangePicker.vue
index c8442a6..f7cabfd 100644
--- a/odpc.client/src/components/DateRangePicker.vue
+++ b/odpc.client/src/components/DateRangePicker.vue
@@ -8,7 +8,7 @@
         id="fromDate"
         ref="fromDateRef"
         v-model="fromDateModel"
-        @change="onFromDateChange"
+        @change="$emit('update:fromDate', fromDateModel)"
         :max="today"
       />
     </div>
@@ -21,7 +21,7 @@
         id="untilDate"
         ref="untilDateRef"
         v-model="untilDateModel"
-        @change="onUntilDateChange"
+        @change="$emit('update:untilDate', untilDateModel)"
         :max="today"
       />
     </div>
@@ -33,7 +33,7 @@ import { ref, watch } from "vue";
 
 const props = defineProps<{ fromDate: string; untilDate: string }>();
 
-const emit = defineEmits<{
+defineEmits<{
   (e: "update:fromDate", payload: string): void;
   (e: "update:untilDate", payload: string): void;
 }>();
@@ -51,9 +51,6 @@ watch(
   }
 );
 
-const onFromDateChange = () => emit("update:fromDate", fromDateModel.value);
-const onUntilDateChange = () => emit("update:untilDate", untilDateModel.value);
-
 const fromDateRef = ref<HTMLInputElement>();
 const untilDateRef = ref<HTMLInputElement>();
 
diff --git a/odpc.client/src/features/publicatie/PublicatiesOverview.vue b/odpc.client/src/features/publicatie/PublicatiesOverview.vue
index 5beb34f..bcdead6 100644
--- a/odpc.client/src/features/publicatie/PublicatiesOverview.vue
+++ b/odpc.client/src/features/publicatie/PublicatiesOverview.vue
@@ -4,7 +4,7 @@
   </p>
 
   <form>
-    <fieldset>
+    <fieldset :disabled="isFetching">
       <div class="form-group form-group-button">
         <label for="zoeken">Zoek op titel</label>
 
@@ -15,11 +15,12 @@
     </fieldset>
 
     <date-range-picker
+      :disabled="isFetching"
       v-model:from-date="queryParams.registratiedatum__gte"
       v-model:until-date="queryParams.registratiedatum__lte"
     />
 
-    <fieldset>
+    <fieldset :disabled="isFetching">
       <div class="form-group">
         <label for="sorteer">Sorteer op</label>
 
@@ -40,6 +41,7 @@
 
   <template v-else>
     <page-nav
+      v-if="pageCount"
       :paged-result="pagedResult"
       :page="queryParams.page"
       :page-count="pageCount"
diff --git a/odpc.client/src/features/publicatie/composables/use-paged-search.ts b/odpc.client/src/features/publicatie/composables/use-paged-search.ts
index 5d55caf..4e3d5e4 100644
--- a/odpc.client/src/features/publicatie/composables/use-paged-search.ts
+++ b/odpc.client/src/features/publicatie/composables/use-paged-search.ts
@@ -1,4 +1,5 @@
 import { ref, watch, computed, onMounted, type Ref } from "vue";
+import { useRouter } from "vue-router";
 import { useUrlSearchParams, type UrlParams } from "@vueuse/core";
 import { useFetchApi } from "@/api/use-fetch-api";
 
@@ -32,6 +33,8 @@ export const usePagedSearch = <T, U extends string>(endpoint: string, params: Ur
   const queryParams = ref(params) as Ref<QueryParams>;
   const searchString = ref("");
 
+  const router = useRouter();
+
   const initQueryParams = () => {
     queryParams.value = paramKeys.reduce(
       (result, key) => ({ ...result, [key]: urlSearchParams[key] || "" }),
@@ -70,18 +73,7 @@ export const usePagedSearch = <T, U extends string>(endpoint: string, params: Ur
   );
 
   watch(searchParams, async (value) => {
-    // Reset to page 1 when page param not set or filter/sort changes
-    if (queryParams.value.page !== "1" && queryParams.value.page === urlSearchParams.page) {
-      queryParams.value.page = "1";
-
-      return;
-    }
-
-    // Clear all urlSearchParams
-    for (const k in urlSearchParams) urlSearchParams[k] = "";
-
-    // Set new urlSearchParams
-    for (const [k, v] of value) urlSearchParams[k] = v;
+    router.push({ query: { ...Object.fromEntries(value.entries()) } });
 
     // Search but wait if fetching
     await new Promise<void>((resolve) => {
@@ -103,7 +95,13 @@ export const usePagedSearch = <T, U extends string>(endpoint: string, params: Ur
     }
   ).json<PagedResult<T>>();
 
-  watch(data, (value) => (pagedResult.value = value || pagedResult.value));
+  watch(data, (value) => {
+    pagedResult.value = value || pagedResult.value;
+
+    if (pageCount.value < +queryParams.value.page) {
+      queryParams.value.page = "1";
+    }
+  });
 
   onMounted(initQueryParams);