From 056071c6e6df0034976f99c5ab1a7117223bdb9d Mon Sep 17 00:00:00 2001
From: Jan Bader <jan@javil.eu>
Date: Fri, 4 Feb 2022 20:47:50 +0000
Subject: [PATCH] Make autocomplete usable for multiple types

---
 web/src/components/Autocomplete.vue | 28 ++++++++++++++--------------
 web/src/pages/Account.vue           |  2 +-
 2 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/web/src/components/Autocomplete.vue b/web/src/components/Autocomplete.vue
index 610aba3..19a6256 100644
--- a/web/src/components/Autocomplete.vue
+++ b/web/src/components/Autocomplete.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
 import { defineComponent } from "vue"
 
-interface Payee {
+interface Suggestion {
     ID : string
     Name : string
 }
@@ -11,38 +11,38 @@ export default defineComponent({
         return {
             SelectedID: "",
             SearchQuery: this.modelValue || "",
-            Suggestions: new Array<Payee>(),
+            Suggestions: new Array<Suggestion>(),
         }
     },
-    props: ["modelValue"],
+    props: ["modelValue", "type"],
     watch: {
         SearchQuery() {
-            this.LoadSuggestions(this.$data.SearchQuery);
+            this.load(this.$data.SearchQuery);
         }
     },
     methods: {
         saveTransaction(e : MouseEvent) {
             e.preventDefault();
         },
-        LoadSuggestions(text : string) {
+        load(text : string) {
             this.$emit('update:modelValue', text);
             if (text == ""){
                 this.$data.Suggestions = [];
                 return;
             }
             
-            fetch("/api/v1/budget/" + this.$store.getters.CurrentBudget.ID + "/autocomplete/payees?s=" + text, {
+            fetch("/api/v1/budget/" + this.$store.getters.CurrentBudget.ID + "/autocomplete/" + this.type + "?s=" + text, {
                 headers: this.$store.getters.AuthHeaders
             }) .then(x=>x.json())
             .then(x => {
-                let payees = x || [];
-                if(payees.length > 10){
-                    payees = payees.slice(0, 10);
+                let suggestions = x || [];
+                if(suggestions.length > 10){
+                    suggestions = suggestions.slice(0, 10);
                 }
-                this.$data.Suggestions = payees;
+                this.$data.Suggestions = suggestions;
             });
         },
-        selectSuggestion(e : MouseEvent) {
+        select(e : MouseEvent) {
             const target = (<HTMLInputElement>e.target);
             const valueAttribute = target.attributes.getNamedItem("value");
             let selectedID = "";
@@ -52,7 +52,7 @@ export default defineComponent({
             this.$data.Suggestions = [];
             this.$emit('update:modelValue', selectedID);
         },
-        clearPayee() {
+        clear() {
             this.$data.SelectedID = "";
             this.$emit('update:modelValue', this.$data.SearchQuery);
         }
@@ -63,9 +63,9 @@ export default defineComponent({
 <template>
     <div>
         <input v-if="SelectedID == ''" v-model="SearchQuery" />
-        <span @click="clearPayee" v-if="SelectedID != ''">Selected: {{SelectedID}}</span>
+        <span @click="clear" v-if="SelectedID != ''">Selected: {{SelectedID}}</span>
         <div v-if="Suggestions.length > 0" class="absolute bg-gray-400 w-64 p-2">
-            <span v-for="suggestion in Suggestions" class="block" @click="selectSuggestion" :value="suggestion.ID">
+            <span v-for="suggestion in Suggestions" class="block" @click="select" :value="suggestion.ID">
                 {{suggestion.Name}}
             </span>
         </div>
diff --git a/web/src/pages/Account.vue b/web/src/pages/Account.vue
index c6e706a..c7a4177 100644
--- a/web/src/pages/Account.vue
+++ b/web/src/pages/Account.vue
@@ -41,7 +41,7 @@ export default defineComponent({
                     <input type="date" v-model="TransactionDate" />
                 </td>
                 <td style="max-width: 150px;">
-                    <Autocomplete v-model="Payee" />
+                    <Autocomplete v-model="Payee" type="payees" />
                 </td>
                 <td style="max-width: 200px;">
                     <input type="text" v-model="Category" />