100 lines
3.1 KiB
Vue
100 lines
3.1 KiB
Vue
<script lang="ts" setup>
|
|
import { defineComponent, PropType, ref, watch } from "vue"
|
|
import { GET } from "../api";
|
|
import { useBudgetsStore } from "../stores/budget";
|
|
|
|
export interface Suggestion {
|
|
ID: string
|
|
Name: string
|
|
}
|
|
|
|
interface Data {
|
|
Selected: Suggestion | undefined
|
|
SearchQuery: String
|
|
Suggestions: Suggestion[]
|
|
}
|
|
|
|
const props = defineProps<{
|
|
modelValue: Suggestion | undefined,
|
|
type: String
|
|
}>();
|
|
|
|
const Selected = ref<Suggestion | undefined>(props.modelValue || undefined);
|
|
const SearchQuery = ref(props.modelValue?.Name || "");
|
|
const Suggestions = ref<Array<Suggestion>>([]);
|
|
const emit = defineEmits(["update:modelValue"]);
|
|
watch(SearchQuery, () => {
|
|
load(SearchQuery.value);
|
|
});
|
|
function saveTransaction(e: MouseEvent) {
|
|
e.preventDefault();
|
|
};
|
|
function load(text: String) {
|
|
emit('update:modelValue', { ID: null, Name: text });
|
|
if (text == "") {
|
|
Suggestions.value = [];
|
|
return;
|
|
}
|
|
|
|
const budgetStore = useBudgetsStore();
|
|
GET("/budget/" + budgetStore.CurrentBudgetID + "/autocomplete/" + props.type + "?s=" + text)
|
|
.then(x => x.json())
|
|
.then(x => {
|
|
let suggestions = x || [];
|
|
if (suggestions.length > 10) {
|
|
suggestions = suggestions.slice(0, 10);
|
|
}
|
|
Suggestions.value = suggestions;
|
|
});
|
|
};
|
|
function keypress(e: KeyboardEvent) {
|
|
if (e.key == "Enter") {
|
|
const selected = Suggestions.value[0];
|
|
selectElement(selected);
|
|
const el = (<HTMLInputElement>e.target);
|
|
const inputElements = Array.from(el.ownerDocument.querySelectorAll('input:not([disabled]):not([readonly])'));
|
|
const currentIndex = inputElements.indexOf(el);
|
|
const nextElement = inputElements[currentIndex < inputElements.length - 1 ? currentIndex + 1 : 0];
|
|
(<HTMLInputElement>nextElement).focus();
|
|
|
|
}
|
|
};
|
|
function selectElement(element: Suggestion) {
|
|
Selected.value = element;
|
|
Suggestions.value = [];
|
|
emit('update:modelValue', element);
|
|
};
|
|
function select(e: MouseEvent) {
|
|
const target = (<HTMLInputElement>e.target);
|
|
const valueAttribute = target.attributes.getNamedItem("value");
|
|
let selectedID = "";
|
|
if (valueAttribute != null)
|
|
selectedID = valueAttribute.value;
|
|
const selected = Suggestions.value.filter(x => x.ID == selectedID)[0];
|
|
selectElement(selected);
|
|
};
|
|
function clear() {
|
|
Selected.value = undefined;
|
|
emit('update:modelValue', { ID: null, Name: SearchQuery.value });
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<input
|
|
class="border-b-2 border-black"
|
|
@keypress="keypress"
|
|
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 }}</span>
|
|
</div>
|
|
</div>
|
|
</template> |