enable populating the reference KeySearch from query params

Author: sinisaos

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()
         }
     }
 })