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

Make autocomplete usable for multiple types

Browse Source
This commit is contained in:
Jan Bader 2022-02-04 20:47:50 +00:00
parent 0305aa86c1
commit 056071c6e6
2 changed files with 15 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
web/src/components/Autocomplete.vue
View File

@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import { defineComponent } from "vue" import { defineComponent } from "vue"
interface Payee { interface Suggestion {
ID : string ID : string
Name : string Name : string
} }
@ -11,38 +11,38 @@ export default defineComponent({
return { return {
SelectedID: "", SelectedID: "",
SearchQuery: this.modelValue || "", SearchQuery: this.modelValue || "",
Suggestions: new Array<Payee>(), Suggestions: new Array<Suggestion>(),
} }
}, },
props: ["modelValue"], props: ["modelValue", "type"],
watch: { watch: {
SearchQuery() { SearchQuery() {
this.LoadSuggestions(this.$data.SearchQuery); this.load(this.$data.SearchQuery);
} }
}, },
methods: { methods: {
saveTransaction(e : MouseEvent) { saveTransaction(e : MouseEvent) {
e.preventDefault(); e.preventDefault();
}, },
LoadSuggestions(text : string) { load(text : string) {
this.$emit('update:modelValue', text); this.$emit('update:modelValue', text);
if (text == ""){ if (text == ""){
this.$data.Suggestions = []; this.$data.Suggestions = [];
return; 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 headers: this.$store.getters.AuthHeaders
}) .then(x=>x.json()) }) .then(x=>x.json())
.then(x => { .then(x => {
let payees = x || []; let suggestions = x || [];
if(payees.length > 10){ if(suggestions.length > 10){
payees = payees.slice(0, 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 target = (<HTMLInputElement>e.target);
const valueAttribute = target.attributes.getNamedItem("value"); const valueAttribute = target.attributes.getNamedItem("value");
let selectedID = ""; let selectedID = "";
@ -52,7 +52,7 @@ export default defineComponent({
this.$data.Suggestions = []; this.$data.Suggestions = [];
this.$emit('update:modelValue', selectedID); this.$emit('update:modelValue', selectedID);
}, },
clearPayee() { clear() {
this.$data.SelectedID = ""; this.$data.SelectedID = "";
this.$emit('update:modelValue', this.$data.SearchQuery); this.$emit('update:modelValue', this.$data.SearchQuery);
} }
@ -63,9 +63,9 @@ export default defineComponent({
<template> <template>
<div> <div>
<input v-if="SelectedID == ''" v-model="SearchQuery" /> <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"> <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}} {{suggestion.Name}}
</span> </span>
</div> </div>

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

@ -41,7 +41,7 @@ export default defineComponent({
<input type="date" v-model="TransactionDate" /> <input type="date" v-model="TransactionDate" />
</td> </td>
<td style="max-width: 150px;"> <td style="max-width: 150px;">
<Autocomplete v-model="Payee" /> <Autocomplete v-model="Payee" type="payees" />
</td> </td>
<td style="max-width: 200px;"> <td style="max-width: 200px;">
<input type="text" v-model="Category" /> <input type="text" v-model="Category" />