From bf21cbfce30d533962570facf714e0619380e3e2 Mon Sep 17 00:00:00 2001
From: nijmra <armijn@gmail.com>
Date: Mon, 14 Oct 2024 17:27:27 +0200
Subject: [PATCH] fix: conditional issue

---
 .../src/components/DateRangePicker.vue        | 13 ++--
 .../publicatie/PublicatiesOverview.vue        | 63 +++++++++----------
 2 files changed, 37 insertions(+), 39 deletions(-)

diff --git a/odpc.client/src/components/DateRangePicker.vue b/odpc.client/src/components/DateRangePicker.vue
index fef7d7c..c8442a6 100644
--- a/odpc.client/src/components/DateRangePicker.vue
+++ b/odpc.client/src/components/DateRangePicker.vue
@@ -29,7 +29,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, watchEffect } from "vue";
+import { ref, watch } from "vue";
 
 const props = defineProps<{ fromDate: string; untilDate: string }>();
 
@@ -43,10 +43,13 @@ const today = ref(new Date().toISOString().split("T")[0]);
 const fromDateModel = ref<string>("");
 const untilDateModel = ref<string>("");
 
-watchEffect(() => {
-  fromDateModel.value = props.fromDate;
-  untilDateModel.value = props.untilDate;
-});
+watch(
+  () => [props.fromDate, props.untilDate],
+  ([fromDate, untilDate]) => {
+    fromDateModel.value = fromDate;
+    untilDateModel.value = untilDate;
+  }
+);
 
 const onFromDateChange = () => emit("update:fromDate", fromDateModel.value);
 const onUntilDateChange = () => emit("update:untilDate", untilDateModel.value);
diff --git a/odpc.client/src/features/publicatie/PublicatiesOverview.vue b/odpc.client/src/features/publicatie/PublicatiesOverview.vue
index d0822e6..5beb34f 100644
--- a/odpc.client/src/features/publicatie/PublicatiesOverview.vue
+++ b/odpc.client/src/features/publicatie/PublicatiesOverview.vue
@@ -3,6 +3,35 @@
     <router-link :to="{ name: 'publicatie' }" class="button">Nieuwe publicatie</router-link>
   </p>
 
+  <form>
+    <fieldset>
+      <div class="form-group form-group-button">
+        <label for="zoeken">Zoek op titel</label>
+
+        <input type="text" id="zoeken" v-model="searchString" @keydown.enter.prevent="onSearch" />
+
+        <button type="button" class="icon-after loupe" aria-label="Zoek" @click="onSearch"></button>
+      </div>
+    </fieldset>
+
+    <date-range-picker
+      v-model:from-date="queryParams.registratiedatum__gte"
+      v-model:until-date="queryParams.registratiedatum__lte"
+    />
+
+    <fieldset>
+      <div class="form-group">
+        <label for="sorteer">Sorteer op</label>
+
+        <select name="sorteer" id="sorteer" v-model="queryParams.sorteer">
+          <option v-for="(value, key) in publicatieSortingOptions" :key="key" :value="key">
+            {{ value }}
+          </option>
+        </select>
+      </div>
+    </fieldset>
+  </form>
+
   <simple-spinner v-if="isFetching"></simple-spinner>
 
   <alert-inline v-else-if="error"
@@ -10,40 +39,6 @@
   >
 
   <template v-else>
-    <form>
-      <fieldset>
-        <div class="form-group form-group-button">
-          <label for="zoeken">Zoek op titel</label>
-
-          <input type="text" id="zoeken" v-model="searchString" @keydown.enter.prevent="onSearch" />
-
-          <button
-            type="button"
-            class="icon-after loupe"
-            aria-label="Zoek"
-            @click="onSearch"
-          ></button>
-        </div>
-      </fieldset>
-
-      <date-range-picker
-        v-model:from-date="queryParams.registratiedatum__gte"
-        v-model:until-date="queryParams.registratiedatum__lte"
-      />
-
-      <fieldset>
-        <div class="form-group">
-          <label for="sorteer">Sorteer op</label>
-
-          <select name="sorteer" id="sorteer" v-model="queryParams.sorteer">
-            <option v-for="(value, key) in publicatieSortingOptions" :key="key" :value="key">
-              {{ value }}
-            </option>
-          </select>
-        </div>
-      </fieldset>
-    </form>
-
     <page-nav
       :paged-result="pagedResult"
       :page="queryParams.page"