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

enhance: status displayed by member search

Browse source
This commit is contained in:
Julian Krauser 2025-01-21 08:58:47 +01:00
parent 883559d8a5
commit 131b3747de
1 changed files with 16 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/components/admin/MemberSearchSelect.vue
View file

@ -19,13 +19,25 @@
<ComboboxOptions <ComboboxOptions
class="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-md ring-1 ring-black/5 focus:outline-none sm:text-sm" class="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-md ring-1 ring-black/5 focus:outline-none sm:text-sm"
> >
<ComboboxOption v-if="filtered.length === 0" as="template" disabled> <ComboboxOption v-if="loading || deferingSearch" as="template" disabled>
<li class="flex flex-row gap-2 text-text relative cursor-default select-none py-2 pl-3 pr-4">
<Spinner />
<span class="font-normal block truncate">suche</span>
</li>
</ComboboxOption>
<ComboboxOption v-else-if="filtered.length === 0 && query == ''" as="template" disabled>
<li class="text-text relative cursor-default select-none py-2 pl-3 pr-4"> <li class="text-text relative cursor-default select-none py-2 pl-3 pr-4">
<span class="font-normal block truncate">Keine Auswahl</span> <span class="font-normal block truncate">tippe, um zu suchen...</span>
</li>
</ComboboxOption>
<ComboboxOption v-else-if="filtered.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">Keine Auswahl gefunden.</span>
</li> </li>
</ComboboxOption> </ComboboxOption>
<ComboboxOption <ComboboxOption
v-if="!(loading || deferingSearch)"
v-for="member in filtered" v-for="member in filtered"
as="template" as="template"
:key="member.id" :key="member.id"
@ -74,6 +86,7 @@ import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
import { useMemberStore } from "@/stores/admin/club/member/member"; import { useMemberStore } from "@/stores/admin/club/member/member";
import type { MemberViewModel } from "@/viewmodels/admin/club/member/member.models"; import type { MemberViewModel } from "@/viewmodels/admin/club/member/member.models";
import difference from "lodash.difference"; import difference from "lodash.difference";
import Spinner from "../Spinner.vue";
</script> </script>
<script lang="ts"> <script lang="ts">
@ -142,6 +155,7 @@ export default defineComponent({
...mapActions(useMemberStore, ["searchMembers", "getMembersByIds"]), ...mapActions(useMemberStore, ["searchMembers", "getMembersByIds"]),
search() { search() {
this.filtered = []; this.filtered = [];
if (this.query == "") return;
this.loading = true; this.loading = true;
this.searchMembers(this.query) this.searchMembers(this.query)
.then((res) => { .then((res) => {