Implement minimal autocomplete for Payees

web/src/pages/Account.vue

@@ -1,12 +1,18 @@
 <script lang="ts">
 import { defineComponent } from "vue"
 
+interface Payee {
+    ID : string
+    Name : string
+}
+
 export default defineComponent({
     data() {
         return {
             TransactionDate: new Date().toISOString().substring(0, 10),
-            Payee: "",
-            SearchPayees: null,
+            PayeeID: "",
+            SearchPayees: "",
+            Payees: new Array<Payee>(),
             Category: "",
             Memo: "",
             Amount: 0
@@ -15,25 +21,43 @@ export default defineComponent({
     props: ["budgetid", "accountid"],
     watch: {
         SearchPayees() {
-            GetPayees(this.$data.SearchPayees);
+            this.GetPayees(this.$data.SearchPayees);
         }
     },
     methods: {
         saveTransaction(e : MouseEvent) {
             e.preventDefault();
         },
-        GetPayees() {
-           fetch("/api/v1/budget/" + this.$store.getters.CurrentBudget.ID + "/autocomplete/payees?s=" + this.$data.SearchPayees, {
+        GetPayees(text : string) {
+            if (text == ""){
+                this.$data.Payees = [];
+                return;
+            }
+
+           fetch("/api/v1/budget/" + this.$store.getters.CurrentBudget.ID + "/autocomplete/payees?s=" + text, {
                headers: this.$store.getters.AuthHeaders
            }) .then(x=>x.json())
-           .then(x => console.log(x));
+           .then(x => {
+               let payees = x || [];
+               if(payees.length > 10){
+                   payees = payees.slice(0, 10);
+               }
+               this.$data.Payees = payees;
+               console.log(x);
+           });
+        },
+        selectPayee(e : MouseEvent) {
+            this.$data.PayeeID = e.target.attributes.value.nodeValue;
+            this.$data.Payees = [];
+        },
+        clearPayee() {
+            this.$data.PayeeID = "";
         }
     }
 })
 </script>
 
 <template>
-    <v-container>
         <h1>{{ $store.getters.CurrentAccount.Name }}</h1>
         <p>
             Current Balance:
@@ -48,7 +72,13 @@ export default defineComponent({
                 </td>
                 <td style="max-width: 150px;">
                     <!--<v-autocomplete v-model="Payee" :loading="PayeesLoading" :search-input.sync="SearchPayees" label="Select payee" />-->
-                    <input @change="GetPayees" v-model="SearchPayees" />
+                    <input v-if="PayeeID == ''" v-model="SearchPayees" />
+                    <span @click="clearPayee" v-if="PayeeID != ''">Selected: {{PayeeID}}</span>
+                    <div v-if="Payees.length > 0" class="absolute bg-gray-400 w-64 p-2">
+                        <span v-for="payee in Payees" class="block" @click="selectPayee" :value="payee.ID">
+                            {{payee.Name}}
+                        </span>
+                    </div>
                 </td>
                 <td style="max-width: 200px;">
                     <input type="text" v-model="Category" />
@@ -88,7 +118,6 @@ export default defineComponent({
                 <td style="width: 20px;">{{ transaction.GroupID ? "☀" : "" }}</td>
             </tr>
         </table>
-    </v-container>
 </template>
 
 <style>