mirror of
https://github.com/hay-kot/homebox.git
synced 2024-12-20 05:46:31 +00:00
3d295b5132
* location tree API * test fixes * initial tree location elements * locations tree page * update meta-data * code-gen * store item display preferences * introduce basic table/card view elements * codegen * set parent location during location creation * add item support for tree query * refactor tree view * wip: location selector improvements * type gen * rename items -> search * remove various log statements * fix markdown rendering for description * update location selectors * fix tests * fix currency tests * formatting
49 lines
1 KiB
Vue
49 lines
1 KiB
Vue
<template>
|
|
<FormAutocomplete
|
|
v-model="value"
|
|
v-model:search="form.search"
|
|
:items="locations"
|
|
item-text="display"
|
|
item-value="id"
|
|
item-search="name"
|
|
label="Parent Location"
|
|
>
|
|
<template #display="{ item }">
|
|
<div>
|
|
<div>
|
|
{{ item.name }}
|
|
</div>
|
|
<div v-if="item.name != item.display" class="text-xs mt-1">{{ item.display }}</div>
|
|
</div>
|
|
</template>
|
|
</FormAutocomplete>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { LocationSummary } from "~~/lib/api/types/data-contracts";
|
|
|
|
type Props = {
|
|
modelValue?: LocationSummary | null;
|
|
};
|
|
|
|
const props = defineProps<Props>();
|
|
|
|
const value = useVModel(props, "modelValue");
|
|
|
|
const locations = await useFlatLocations();
|
|
|
|
const form = ref({
|
|
parent: null as LocationSummary | null,
|
|
search: "",
|
|
});
|
|
|
|
// Whenever parent goes from value to null reset search
|
|
watch(
|
|
() => value.value,
|
|
() => {
|
|
if (!value.value) {
|
|
form.value.search = "";
|
|
}
|
|
}
|
|
);
|
|
</script>
|