fix selects, both operator and match selects and value selects

Author: sinisaos

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/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>