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

Display name if selected

Browse Source
This commit is contained in:
Jan Bader 2022-02-04 21:14:02 +00:00
parent d647650142
commit ebc2286116
1 changed files with 21 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,15 +6,24 @@ interface Suggestion {
Name : string Name : string
} }
interface Data {
Selected: Suggestion | undefined
SearchQuery: String
Suggestions: Suggestion[]
}
export default defineComponent({ export default defineComponent({
data() { data() {
return { return {
SelectedID: "", Selected: undefined,
SearchQuery: this.modelValue || "", SearchQuery: this.modelValue || "",
Suggestions: new Array<Suggestion>(), Suggestions: new Array<Suggestion>(),
} } as Data
},
props: {
modelValue: String,
type: String
}, },
props: ["modelValue", "type"],
watch: { watch: {
SearchQuery() { SearchQuery() {
this.load(this.$data.SearchQuery); this.load(this.$data.SearchQuery);
@ -24,8 +33,8 @@ export default defineComponent({
saveTransaction(e : MouseEvent) { saveTransaction(e : MouseEvent) {
e.preventDefault(); e.preventDefault();
}, },
load(text : string) { load(text : String) {
this.$emit('update:modelValue', text); this.$emit('update:modelValue', {ID: "", Name: text});
if (text == ""){ if (text == ""){
this.$data.Suggestions = []; this.$data.Suggestions = [];
return; return;
@ -48,13 +57,14 @@ export default defineComponent({
let selectedID = ""; let selectedID = "";
if(valueAttribute != null) if(valueAttribute != null)
selectedID = valueAttribute.value; selectedID = valueAttribute.value;
this.$data.SelectedID = selectedID; const selected = this.$data.Suggestions.filter(x => x.ID == selectedID)[0];
this.$data.Selected = selected;
this.$data.Suggestions = []; this.$data.Suggestions = [];
this.$emit('update:modelValue', selectedID); this.$emit('update:modelValue', selected);
}, },
clear() { clear() {
this.$data.SelectedID = ""; this.$data.Selected = undefined;
this.$emit('update:modelValue', this.$data.SearchQuery); this.$emit('update:modelValue', {ID: "", Name: this.$data.SearchQuery});
} }
} }
}) })
@ -62,8 +72,8 @@ export default defineComponent({
<template> <template>
<div> <div>
<input v-if="SelectedID == ''" v-model="SearchQuery" /> <input v-if="Selected == undefined" v-model="SearchQuery" />
<span @click="clear" v-if="SelectedID != ''">Selected: {{SelectedID}}</span> <span @click="clear" v-if="Selected != undefined" class="bg-gray-300">{{Selected.Name}}</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="select" :value="suggestion.ID"> <span v-for="suggestion in Suggestions" class="block" @click="select" :value="suggestion.ID">
{{suggestion.Name}} {{suggestion.Name}}