enhance: status displayed by member search
This commit is contained in:
parent
883559d8a5
commit
131b3747de
1 changed files with 16 additions and 2 deletions
|
@ -19,13 +19,25 @@
|
|||
<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"
|
||||
>
|
||||
<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">
|
||||
<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>
|
||||
</ComboboxOption>
|
||||
|
||||
<ComboboxOption
|
||||
v-if="!(loading || deferingSearch)"
|
||||
v-for="member in filtered"
|
||||
as="template"
|
||||
:key="member.id"
|
||||
|
@ -74,6 +86,7 @@ import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
|
|||
import { useMemberStore } from "@/stores/admin/club/member/member";
|
||||
import type { MemberViewModel } from "@/viewmodels/admin/club/member/member.models";
|
||||
import difference from "lodash.difference";
|
||||
import Spinner from "../Spinner.vue";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
|
@ -142,6 +155,7 @@ export default defineComponent({
|
|||
...mapActions(useMemberStore, ["searchMembers", "getMembersByIds"]),
|
||||
search() {
|
||||
this.filtered = [];
|
||||
if (this.query == "") return;
|
||||
this.loading = true;
|
||||
this.searchMembers(this.query)
|
||||
.then((res) => {
|
||||
|
|
Loading…
Reference in a new issue