vbatts/homebox
1
0
Fork 0
forked from mirrors/homebox
Code Pull requests Activity

feat: locations tree viewer (#248)

Browse source 
* 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
This commit is contained in:
Hayden 2023-01-28 11:53:00 -09:00 • committed by GitHub
parent 4d220cdd9c
commit 3d295b5132
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
33 changed files with 1119 additions and 79 deletions
Download patch file Download diff file Expand all files Collapse all files

52
frontend/components/Form/Autocomplete.vue
View file

@ -6,7 +6,7 @@
<div class="dropdown dropdown-top sm:dropdown-end">
<div class="relative">
<input
v-model="isearch"
v-model="internalSearch"
tabindex="0"
class="input w-full items-center flex flex-wrap border border-gray-400 rounded-lg"
@keyup.enter="selectFirst"
@ -26,9 +26,11 @@
class="dropdown-content mb-1 menu shadow border border-gray-400 rounded bg-base-100 w-full z-[9999] max-h-60 overflow-y-scroll"
>
<li v-for="(obj, idx) in filtered" :key="idx">
<button type="button" @click="select(obj)">
{{ usingObjects ? obj[itemText] : obj }}
</button>
<div type="button" @click="select(obj)">
<slot name="display" v-bind="{ item: obj }">
{{ usingObjects ? obj[itemText] : obj }}
</slot>
</div>
</li>
<li class="hidden first:flex">
<button disabled>
@ -49,9 +51,10 @@
interface Props {
label: string;
modelValue: string | ItemsObject;
modelValue: string | ItemsObject | null | undefined;
items: ItemsObject[] | string[];
itemText?: keyof ItemsObject;
itemSearch?: keyof ItemsObject | null;
itemValue?: keyof ItemsObject;
search?: string;
noResultsText?: string;
@ -63,21 +66,34 @@
modelValue: "",
items: () => [],
itemText: "text",
itemValue: "value",
search: "",
itemSearch: null,
itemValue: "value",
noResultsText: "No Results Found",
});
const searchKey = computed(() => props.itemSearch || props.itemText);
function clear() {
select(value.value);
}
const isearch = ref("");
watch(isearch, () => {
internalSearch.value = isearch.value;
});
const internalSearch = ref("");
watch(
() => props.search,
val => {
internalSearch.value = val;
}
);
watch(
() => internalSearch.value,
val => {
emit("update:search", val);
}
);
const internalSearch = useVModel(props, "search", emit);
const value = useVModel(props, "modelValue", emit);
const usingObjects = computed(() => {
@ -102,9 +118,9 @@
() => {
if (value.value) {
if (typeof value.value === "string") {
isearch.value = value.value;
internalSearch.value = value.value;
} else {
isearch.value = value.value[props.itemText] as string;
internalSearch.value = value.value[searchKey.value] as string;
}
}
},
@ -113,7 +129,7 @@
}
);
function select(obj: string | ItemsObject) {
function select(obj: Props["modelValue"]) {
if (isStrings(props.items)) {
if (obj === value.value) {
value.value = "";
@ -131,16 +147,16 @@
}
const filtered = computed(() => {
if (!isearch.value || isearch.value === "") {
if (!internalSearch.value || internalSearch.value === "") {
return props.items;
}
if (isStrings(props.items)) {
return props.items.filter(item => item.toLowerCase().includes(isearch.value.toLowerCase()));
return props.items.filter(item => item.toLowerCase().includes(internalSearch.value.toLowerCase()));
} else {
return props.items.filter(item => {
if (props.itemText && props.itemText in item) {
return (item[props.itemText] as string).toLowerCase().includes(isearch.value.toLowerCase());
if (searchKey.value && searchKey.value in item) {
return (item[searchKey.value] as string).toLowerCase().includes(internalSearch.value.toLowerCase());
}
return false;
});