From a875ef99bf3e9a245d6c5092fad9c1fcbfd94d4d Mon Sep 17 00:00:00 2001
From: sinisaos <sinisaos@gmail.com>
Date: Fri, 19 Dec 2025 11:22:57 +0100
Subject: [PATCH 1/7] add filter params to url query params

---
 admin_ui/src/components/RowFilter.vue | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/admin_ui/src/components/RowFilter.vue b/admin_ui/src/components/RowFilter.vue
index 88552f65..3fce7555 100644
--- a/admin_ui/src/components/RowFilter.vue
+++ b/admin_ui/src/components/RowFilter.vue
@@ -87,6 +87,14 @@ export default defineComponent({
                 }
             }
 
+            // adding query params to url
+            this.$router.replace({
+                path: this.$router.path,
+                query: {
+                    ...json
+                }
+            })
+
             this.$store.commit("updateFilterParams", json)
             this.$store.commit("updateCurrentPageNumber", 1)
 
@@ -108,6 +116,12 @@ export default defineComponent({
 
             form.reset()
 
+            // cleaning query params from url
+            this.$router.replace({
+                path: this.$router.path,
+                query: {}
+            })
+
             this.$store.commit("updateFilterParams", {})
             this.$store.commit("updateCurrentPageNumber", 1)
 

From b2086f9a13e8f39926722479b19b30360d016a09 Mon Sep 17 00:00:00 2001
From: sinisaos <sinisaos@gmail.com>
Date: Fri, 19 Dec 2025 16:05:16 +0100
Subject: [PATCH 2/7] use existing syncQueryParams utils function

---
 admin_ui/src/components/RowFilter.vue | 25 +++++++++++--------------
 1 file changed, 11 insertions(+), 14 deletions(-)

diff --git a/admin_ui/src/components/RowFilter.vue b/admin_ui/src/components/RowFilter.vue
index 3fce7555..b390cde3 100644
--- a/admin_ui/src/components/RowFilter.vue
+++ b/admin_ui/src/components/RowFilter.vue
@@ -19,14 +19,17 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue"
+import { defineComponent, type PropType } from "vue"
 import FilterForm from "./FilterForm.vue"
 import { type APIResponseMessage, getFormat, getType } from "../interfaces"
-import { secondsToISO8601Duration } from "../utils"
+import { secondsToISO8601Duration, syncQueryParams } from "../utils"
 
 export default defineComponent({
     props: {
-        showFilterSidebar: Boolean
+        showFilterSidebar: Boolean,
+        tableName: {
+            type: String as PropType<string>
+        }
     },
     components: {
         FilterForm
@@ -87,12 +90,9 @@ export default defineComponent({
                 }
             }
 
-            // adding query params to url
-            this.$router.replace({
-                path: this.$router.path,
-                query: {
-                    ...json
-                }
+            // adding filter params to url
+            syncQueryParams(this.$router.path, {
+                ...json
             })
 
             this.$store.commit("updateFilterParams", json)
@@ -116,11 +116,8 @@ export default defineComponent({
 
             form.reset()
 
-            // cleaning query params from url
-            this.$router.replace({
-                path: this.$router.path,
-                query: {}
-            })
+            // cleaning filter params from url
+            syncQueryParams(this.$router.path, {})
 
             this.$store.commit("updateFilterParams", {})
             this.$store.commit("updateCurrentPageNumber", 1)

From 572677390a2882453de4e20ac1cdcae3a64b4ff5 Mon Sep 17 00:00:00 2001
From: sinisaos <sinisaos@gmail.com>
Date: Fri, 19 Dec 2025 16:20:20 +0100
Subject: [PATCH 3/7] clean up

---
 admin_ui/src/components/RowFilter.vue | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/admin_ui/src/components/RowFilter.vue b/admin_ui/src/components/RowFilter.vue
index b390cde3..81ce94da 100644
--- a/admin_ui/src/components/RowFilter.vue
+++ b/admin_ui/src/components/RowFilter.vue
@@ -19,17 +19,14 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, type PropType } from "vue"
+import { defineComponent } from "vue"
 import FilterForm from "./FilterForm.vue"
 import { type APIResponseMessage, getFormat, getType } from "../interfaces"
 import { secondsToISO8601Duration, syncQueryParams } from "../utils"
 
 export default defineComponent({
     props: {
-        showFilterSidebar: Boolean,
-        tableName: {
-            type: String as PropType<string>
-        }
+        showFilterSidebar: Boolean
     },
     components: {
         FilterForm

From 0ceb2a933921cd8731b967e1f2275d15421ca43d Mon Sep 17 00:00:00 2001
From: sinisaos <sinisaos@gmail.com>
Date: Sat, 20 Dec 2025 16:50:07 +0100
Subject: [PATCH 4/7] populating filter form fields from query params

---
 admin_ui/src/components/FilterForm.vue | 22 ++++++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/admin_ui/src/components/FilterForm.vue b/admin_ui/src/components/FilterForm.vue
index 4b818d41..01649455 100644
--- a/admin_ui/src/components/FilterForm.vue
+++ b/admin_ui/src/components/FilterForm.vue
@@ -47,7 +47,8 @@
 </template>
 
 <script setup lang="ts">
-import { type PropType, toRef } from "vue"
+import { type PropType, toRef, computed } from "vue"
+import { useStore } from "vuex"
 
 import InputField from "./InputField.vue"
 import KeySearch from "./KeySearch.vue"
@@ -55,6 +56,12 @@ import { type Schema, getFormat, getType } from "@/interfaces"
 
 /*****************************************************************************/
 
+const store = useStore()
+
+const filterParams = computed(() => store.state.filterParams)
+
+/*****************************************************************************/
+
 const props = defineProps({
     schema: {
         type: Object as PropType<Schema>,
@@ -67,10 +74,17 @@ const schema = toRef(props, "schema")
 /*****************************************************************************/
 
 const getValue = (columnName: string) => {
-    if (getType(schema.value.properties[columnName]) == "boolean") {
+    const value = filterParams.value[columnName]
+
+    // if there is value in query params
+    if (value !== undefined) {
+        return value
+    }
+
+    if (getType(schema.value.properties[columnName]) === "boolean") {
         return "all"
-    } else {
-        return null
     }
+
+    return null
 }
 </script>

From e8e91c8ce21fc866d6042fef6938162fa8fc4aa9 Mon Sep 17 00:00:00 2001
From: sinisaos <sinisaos@gmail.com>
Date: Mon, 22 Dec 2025 13:01:50 +0100
Subject: [PATCH 5/7] fix selects, both operator and match selects and value
 selects

---
 admin_ui/src/components/InputField.vue    |  3 +-
 admin_ui/src/components/MatchField.vue    | 42 +++++++++++++++--------
 admin_ui/src/components/OperatorField.vue | 26 +++++++++++---
 3 files changed, 50 insertions(+), 21 deletions(-)

diff --git a/admin_ui/src/components/InputField.vue b/admin_ui/src/components/InputField.vue
index 8f1d8da8..24e8e1e6 100644
--- a/admin_ui/src/components/InputField.vue
+++ b/admin_ui/src/components/InputField.vue
@@ -22,12 +22,13 @@
 
         <template v-if="choices && type != 'array'">
             <OperatorField :columnName="columnName" v-if="isFilter" />
+            <!-- prevent null value as default -->
             <ChoiceSelect
                 :choices="choices"
                 :fieldName="columnName"
                 :isFilter="isFilter"
                 :isNullable="isNullable"
-                :value="value"
+                :value="localValue || 'all'"
             />
         </template>
 
diff --git a/admin_ui/src/components/MatchField.vue b/admin_ui/src/components/MatchField.vue
index b96bdf1b..685944bb 100644
--- a/admin_ui/src/components/MatchField.vue
+++ b/admin_ui/src/components/MatchField.vue
@@ -1,27 +1,39 @@
 <template>
-    <select :name="columnName + '__match'">
-        <option
-            :key="match"
-            :selected="match == 'contains'"
-            :value="match"
-            v-for="match in matches"
-        >
+    <select :name="columnName + '__match'" v-model="selectedMatch">
+        <option :key="match" :value="match" v-for="match in matches">
             {{ match }}
         </option>
     </select>
 </template>
 
-<script setup lang="ts">
-import type { PropType } from "vue"
+<script lang="ts">
+import { defineComponent, type PropType } from "vue"
 
-defineProps({
-    columnName: {
-        type: String as PropType<string>,
-        required: true
+export default defineComponent({
+    props: {
+        columnName: {
+            type: String as PropType<string>,
+            required: true
+        }
+    },
+    data() {
+        return {
+            selectedMatch: "contains", // default
+            matches: ["contains", "exact", "starts", "ends"]
+        }
+    },
+    mounted() {
+        // read query params from url
+        const queryValue = this.$route.query[
+            this.columnName + "__match"
+        ] as string
+
+        // use match if present in query params, otherwise keep default
+        if (queryValue && this.matches.includes(queryValue)) {
+            this.selectedMatch = queryValue
+        }
     }
 })
-
-const matches: string[] = ["contains", "exact", "starts", "ends"]
 </script>
 
 <style>
diff --git a/admin_ui/src/components/OperatorField.vue b/admin_ui/src/components/OperatorField.vue
index d00b88ce..2f9ba7e3 100644
--- a/admin_ui/src/components/OperatorField.vue
+++ b/admin_ui/src/components/OperatorField.vue
@@ -1,10 +1,9 @@
 <template>
-    <select :name="columnName + '__operator'">
+    <select :name="columnName + '__operator'" v-model="selectedOperator">
         <option
-            :key="operator.label"
-            :selected="operator.value == 'e'"
-            :value="operator.value"
             v-for="operator in operators"
+            :key="operator.value"
+            :value="operator.value"
         >
             {{ operator.label }}
         </option>
@@ -23,6 +22,7 @@ export default defineComponent({
     },
     data() {
         return {
+            selectedOperator: "e", // default
             operators: [
                 {
                     label: "Equals",
@@ -50,8 +50,24 @@ export default defineComponent({
                 }
             ]
         }
+    },
+    mounted() {
+        // read query params from url
+        const queryValue = this.$route.query[
+            this.columnName + "__operator"
+        ] as string
+
+        // use operator if present in query params otherwise keep default
+        if (
+            queryValue &&
+            this.operators.some(
+                (operator: any) => operator.value === queryValue
+            )
+        ) {
+            this.selectedOperator = queryValue
+        }
     }
 })
 </script>
 
-<style></style>
+<style></style>
\ No newline at end of file

From a010d9147e612d02b24967f260d1b5f7aacc68a1 Mon Sep 17 00:00:00 2001
From: sinisaos <sinisaos@gmail.com>
Date: Mon, 22 Dec 2025 18:01:07 +0100
Subject: [PATCH 6/7] fix array choices by using created() which runs after the
 component instance is created, before the DOM is rendered

---
 admin_ui/src/components/ArrayWidget.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/admin_ui/src/components/ArrayWidget.vue b/admin_ui/src/components/ArrayWidget.vue
index be14f3bb..3a84cf87 100644
--- a/admin_ui/src/components/ArrayWidget.vue
+++ b/admin_ui/src/components/ArrayWidget.vue
@@ -150,7 +150,7 @@ export default defineComponent({
             this.internalArray = newValue ? [...newValue] : []
         }
     },
-    mounted() {
+    created() {
         this.internalArray = [...this.array]
     }
 })

From e29911269a2f14a0205e91da2561899f280c0016 Mon Sep 17 00:00:00 2001
From: sinisaos <sinisaos@gmail.com>
Date: Tue, 23 Dec 2025 20:01:29 +0100
Subject: [PATCH 7/7] enable populating the reference KeySearch from query
 params

---
 admin_ui/src/components/KeySearch.vue      | 13 ++++++++++---
 admin_ui/src/components/KeySearchModal.vue | 20 ++++++++++++++++++++
 2 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/admin_ui/src/components/KeySearch.vue b/admin_ui/src/components/KeySearch.vue
index 6419de80..cca221b2 100644
--- a/admin_ui/src/components/KeySearch.vue
+++ b/admin_ui/src/components/KeySearch.vue
@@ -20,6 +20,7 @@
             v-show="showModal"
             :isFilter="isFilter"
             :tableName="tableName"
+            :initialReferenceID="hiddenSelectedValue"
             @close="showModal = false"
             @update="handleUpdate($event)"
         />
@@ -84,9 +85,15 @@ export default defineComponent({
             this.hiddenSelectedValue = newValue
         }
     },
-    async mounted() {
-        this.selectedValue = this.readable
-        this.hiddenSelectedValue = this.rowID
+    mounted() {
+        if (this.isFilter) {
+            const queryValue = this.$route.query[this.fieldName]
+            if (queryValue) {
+                // only need FK query value (e.g director=1),
+                // modal will emit readable automatically
+                this.hiddenSelectedValue = queryValue
+            }
+        }
     }
 })
 </script>
diff --git a/admin_ui/src/components/KeySearchModal.vue b/admin_ui/src/components/KeySearchModal.vue
index 8eaf45f8..bb616954 100644
--- a/admin_ui/src/components/KeySearchModal.vue
+++ b/admin_ui/src/components/KeySearchModal.vue
@@ -63,6 +63,9 @@ export default defineComponent({
         isNullable: {
             type: Boolean as PropType<boolean>,
             default: true
+        },
+        initialReferenceID: {
+            type: undefined as unknown as PropType<RowID | undefined>
         }
     },
     data() {
@@ -118,6 +121,21 @@ export default defineComponent({
         },
         selectResult(id: RowID | null, readable: string) {
             this.$emit("update", { id, readable })
+        },
+        async emitInitialReferenceID() {
+            if (!this.initialReferenceID) return
+
+            // Look for readable value in fetched IDs
+            const match = this.ids.find(
+                ([id]) => id === this.initialReferenceID
+            )
+
+            if (match) {
+                this.$emit("update", {
+                    id: match[0],
+                    readable: match[1]
+                })
+            }
         }
     },
     watch: {
@@ -125,6 +143,7 @@ export default defineComponent({
             this.offset = 0
             if (value) {
                 this.ids = await this.fetchData()
+                await this.emitInitialReferenceID()
             }
         },
         async searchTerm() {
@@ -144,6 +163,7 @@ export default defineComponent({
     async mounted() {
         if (this.tableName) {
             this.ids = await this.fetchData()
+            await this.emitInitialReferenceID()
         }
     }
 })