Replace modelValue by models for id and name

web/src/components/Autocomplete.vue

@@ -8,21 +8,15 @@ export interface Suggestion {
     Name: string
 }
 
-interface Data {
-    Selected: Suggestion | undefined
-    SearchQuery: String
-    Suggestions: Suggestion[]
-}
-
 const props = defineProps<{
-    modelValue: Suggestion | undefined,
+    text: String,
+    id: String | undefined,
     type: String
 }>();
 
-const Selected = ref<Suggestion | undefined>(props.modelValue || undefined);
-const SearchQuery = ref(props.modelValue?.Name || "");
+const SearchQuery = ref(props.text || "");
 const Suggestions = ref<Array<Suggestion>>([]);
-const emit = defineEmits(["update:modelValue"]);
+const emit = defineEmits(["update:id", "update:text"]);
 watch(SearchQuery, () => {
     load(SearchQuery.value);
 });
@@ -30,7 +24,8 @@ function saveTransaction(e: MouseEvent) {
     e.preventDefault();
 };
 function load(text: String) {
-    emit('update:modelValue', { ID: null, Name: text });
+    emit('update:id', null);
+    emit('update:text', text);
     if (text == "") {
         Suggestions.value = [];
         return;
@@ -56,13 +51,12 @@ function keypress(e: KeyboardEvent) {
         const currentIndex = inputElements.indexOf(el);
         const nextElement = inputElements[currentIndex < inputElements.length - 1 ? currentIndex + 1 : 0];
         (<HTMLInputElement>nextElement).focus();
-
     }
 };
 function selectElement(element: Suggestion) {
-    Selected.value = element;
+    emit('update:id', element.ID);
+    emit('update:text', element.Name);
     Suggestions.value = [];
-    emit('update:modelValue', element);
 };
 function select(e: MouseEvent) {
     const target = (<HTMLInputElement>e.target);
@@ -74,8 +68,8 @@ function select(e: MouseEvent) {
     selectElement(selected);
 };
 function clear() {
-    Selected.value = undefined;
-    emit('update:modelValue', { ID: null, Name: SearchQuery.value });
+    emit('update:id', null);
+    emit('update:text', SearchQuery.value);
 };
 </script>
 
@@ -84,10 +78,10 @@ function clear() {
         <input
             class="border-b-2 border-black"
             @keypress="keypress"
-            v-if="Selected == undefined"
+            v-if="id == undefined"
             v-model="SearchQuery"
         />
-        <span @click="clear" v-if="Selected != undefined" class="bg-gray-300">{{ Selected.Name }}</span>
+        <span @click="clear" v-if="id != undefined" class="bg-gray-300">{{ text }}</span>
         <div v-if="Suggestions.length > 0" class="absolute bg-gray-400 w-64 p-2">
             <span
                 v-for="suggestion in Suggestions"