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