Filter params in url

admin_ui/src/components/ArrayWidget.vue

@@ -150,7 +150,7 @@ export default defineComponent({
             this.internalArray = newValue ? [...newValue] : []
         }
     },
-    mounted() {
+    created() {
         this.internalArray = [...this.array]
     }
 })

admin_ui/src/components/FilterForm.vue

@@ -47,14 +47,21 @@
 </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"
 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>

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>
 

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>

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,13 +121,29 @@ 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: {
         async tableName(value: string) {
             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()
         }
     }
 })

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>

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>

admin_ui/src/components/RowFilter.vue

@@ -22,7 +22,7 @@
 import { defineComponent } 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: {
@@ -87,6 +87,11 @@ export default defineComponent({
                 }
             }
 
+            // adding filter params to url
+            syncQueryParams(this.$router.path, {
+                ...json
+            })
+
             this.$store.commit("updateFilterParams", json)
             this.$store.commit("updateCurrentPageNumber", 1)
 
@@ -108,6 +113,9 @@ export default defineComponent({
 
             form.reset()
 
+            // cleaning filter params from url
+            syncQueryParams(this.$router.path, {})
+
             this.$store.commit("updateFilterParams", {})
             this.$store.commit("updateCurrentPageNumber", 1)