jacob1123/budgeteer
1
1
Fork 0
Code Issues 12 Pull Requests 1 Packages Releases 1 Wiki Activity

Implement minimal autocomplete for Payees

Browse Source
This commit is contained in:
Jan Bader 2022-02-04 20:24:29 +00:00
parent b93e44930a
commit e18ef79839
1 changed files with 38 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
web/src/pages/Account.vue
View File

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