From 131b3747de4ae177e193fe69d7476eb10dec189d Mon Sep 17 00:00:00 2001
From: Julian Krauser <jkrauser209@gmail.com>
Date: Tue, 21 Jan 2025 08:58:47 +0100
Subject: [PATCH] enhance: status displayed by member search

---
 src/components/admin/MemberSearchSelect.vue | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/components/admin/MemberSearchSelect.vue b/src/components/admin/MemberSearchSelect.vue
index e9013f2..cf67fa9 100644
--- a/src/components/admin/MemberSearchSelect.vue
+++ b/src/components/admin/MemberSearchSelect.vue
@@ -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) => {