Ehrenamt/ff-admin
2
0
Fork 0
Code Issues 13 Pull requests Projects Releases 30 Packages Wiki Activity Actions

search select component improvements

Browse source
This commit is contained in:
Julian Krauser 2025-06-15 22:04:41 +02:00
parent fe0f31ce6b
commit e7078960ba
7 changed files with 146 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

26
src/components/search/WearableSearchSelect.vue
View file

@ -32,12 +32,12 @@
<span class="font-normal block truncate">suche</span>
</li>
</ComboboxOption>
<ComboboxOption v-else-if="filtered.length === 0 && query == ''" as="template" disabled>
<ComboboxOption v-else-if="available.length === 0 && all.length == 0" as="template" disabled>
<li class="text-text relative cursor-default select-none py-2 pl-3 pr-4">
<span class="font-normal block truncate">tippe, um zu suchen...</span>
</li>
</ComboboxOption>
<ComboboxOption v-else-if="filtered.length === 0" as="template" disabled>
<ComboboxOption v-else-if="available.length === 0 && query != ''" as="template" disabled>
<li class="text-text relative cursor-default select-none py-2 pl-3 pr-4">
<span class="font-normal block truncate">Keine Auswahl gefunden.</span>
</li>
@ -45,7 +45,7 @@
<ComboboxOption
v-if="!(loading || deferingSearch)"
v-for="wearable in filtered"
v-for="wearable in available"
as="template"
:key="wearable.id"
:value="wearable.id"
@ -137,11 +137,15 @@ export default defineComponent({
deferingSearch: false as boolean,
timer: undefined as any,
query: "" as string,
all: [] as Array<WearableViewModel>,
filtered: [] as Array<WearableViewModel>,
chosen: undefined as undefined | WearableViewModel,
};
},
computed: {
available() {
return this.query == "" ? this.all : this.filtered;
},
selected: {
get() {
return this.modelValue;
@ -154,10 +158,22 @@ export default defineComponent({
},
mounted() {
this.loadWearableInitial();
this.preloadAll();
},
methods: {
...mapActions(useWearableStore, ["searchWearables", "fetchWearableById"]),
...mapActions(useWearableStore, ["searchWearables", "fetchWearableById", "getAllWearables"]),
...mapActions(useModalStore, ["openModal"]),
preloadAll() {
this.loading = true;
this.getAllWearables()
.then((res) => {
this.all = res.data;
})
.catch((err) => {})
.finally(() => {
this.loading = false;
});
},
search() {
this.filtered = [];
if (this.query == "") return;
@ -172,7 +188,7 @@ export default defineComponent({
});
},
getWearableFromSearch(id: string) {
return this.filtered.find((f) => f.id == id);
return this.all.find((f) => f.id == id);
},
loadWearableInitial() {
if (this.modelValue == "") return;