mirrors/homebox
1
0
Fork 1
mirror of https://github.com/hay-kot/homebox.git synced 2024-11-16 21:58:40 +00:00
Code Issues Projects Releases Packages Wiki Activity

fix: auto-select bug (#59)

Browse source
This commit is contained in:
Hayden 2022-10-13 16:45:18 -08:00 committed by GitHub
parent ae73b194c4
commit 889197994b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 26 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
frontend/components/Form/Select.vue
View file

@ -42,50 +42,31 @@
default: null, default: null,
required: false, required: false,
}, },
selectFirst: {
type: Boolean,
default: false,
},
}); });
function syncSelect() { const selectedIdx = ref(-1);
if (!props.modelValue) { const internalSelected = useVModel(props, "modelValue", emit);
if (props.selectFirst) {
selectedIdx.value = 0;
}
return;
}
// Check if we're already synced
if (props.value) {
if (props.modelValue[props.value] === props.items[selectedIdx.value][props.value]) {
return;
}
} else if (props.modelValue === props.items[selectedIdx.value]) {
return;
}
const idx = props.items.findIndex(item => { watch(selectedIdx, newVal => {
if (props.value) { internalSelected.value = props.items[newVal];
return item[props.value] === props.modelValue;
}
return item === props.modelValue;
}); });
selectedIdx.value = idx; // eslint-disable-next-line @typescript-eslint/no-explicit-any
function compare(a: any, b: any): boolean {
if (props.value != null) {
return a[props.value] === b[props.value];
}
return a === b;
} }
watch(() => props.items, syncSelect);
watch(() => props.modelValue, syncSelect);
const selectedIdx = ref(0);
watch( watch(
() => selectedIdx.value, internalSelected,
() => { () => {
if (props.value) { const idx = props.items.findIndex(item => compare(item, internalSelected.value));
emit("update:modelValue", props.items[selectedIdx.value][props.value]); selectedIdx.value = idx;
return; },
} {
emit("update:modelValue", props.items[selectedIdx.value]); immediate: true,
} }
); );
</script> </script>

2
frontend/components/Item/CreateModal.vue
View file

@ -2,7 +2,7 @@
<BaseModal v-model="modal"> <BaseModal v-model="modal">
<template #title> Create Item </template> <template #title> Create Item </template>
<form @submit.prevent="create"> <form @submit.prevent="create">
<FormSelect v-model="form.location" label="Location" :items="locations ?? []" select-first /> <FormSelect v-model="form.location" label="Location" :items="locations ?? []" />
<FormTextField <FormTextField
ref="locationNameRef" ref="locationNameRef"
v-model="form.name" v-model="form.name"

9
frontend/pages/item/[id]/edit.vue
View file

@ -30,6 +30,13 @@
return; return;
} }
if (locations) {
const location = locations.value.find(l => l.id === data.location.id);
if (location) {
data.location = location;
}
}
return data; return data;
}); });
onMounted(() => { onMounted(() => {
@ -308,7 +315,7 @@
</template> </template>
</BaseSectionHeader> </BaseSectionHeader>
<div class="px-5 mb-6 grid md:grid-cols-2 gap-4"> <div class="px-5 mb-6 grid md:grid-cols-2 gap-4">
<FormSelect v-model="item.location" label="Location" :items="locations ?? []" select-first /> <FormSelect v-if="item" v-model="item.location" label="Location" :items="locations ?? []" />
<FormMultiselect v-model="item.labels" label="Labels" :items="labels ?? []" /> <FormMultiselect v-model="item.labels" label="Labels" :items="labels ?? []" />
</div> </div>