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) => {

src/stores/admin/club/member/member.ts

@@ -40,6 +40,11 @@ export const useMemberStore = defineStore("member", {
           this.loading = "failed";
         });
     },
+    async getAllMembers(): Promise<AxiosResponse<any, any>> {
+      return await http.get(`/admin/member?noLimit=true`).then((res) => {
+        return { ...res, data: res.data.members };
+      });
+    },
     async getMembersByIds(ids: Array<number>): Promise<AxiosResponse<any, any>> {
       return await http.get(`/admin/member?ids=${ids.join(",")}&noLimit=true`).then((res) => {
         return { ...res, data: res.data.members };

src/views/admin/club/newsletter/NewsletterRecipients.vue

@@ -27,8 +27,6 @@
       title="weitere Empfänger suchen"
       v-model="recipients"
       :disabled="!can('create', 'club', 'newsletter')"
-      @add:member="(s) => members.push(s)"
-      @add:member-by-array="(s) => members.push(...s)"
     />
 
     <p>Ausgewählte Empfänger</p>
@@ -149,9 +147,10 @@ export default defineComponent({
     // this.fetchNewsletterRecipients();
     this.fetchQueries();
     this.loadQuery();
+    this.loadMembers();
   },
   methods: {
-    ...mapActions(useMemberStore, ["fetchMembers"]),
+    ...mapActions(useMemberStore, ["getAllMembers"]),
     ...mapActions(useNewsletterRecipientsStore, ["fetchNewsletterRecipients"]),
     ...mapActions(useQueryStoreStore, ["fetchQueries"]),
     ...mapActions(useQueryBuilderStore, ["sendQuery"]),
@@ -161,6 +160,13 @@ export default defineComponent({
         this.recipients.splice(index, 1);
       }
     },
+    loadMembers() {
+      this.getAllMembers()
+        .then((res) => {
+          this.members = res.data;
+        })
+        .catch(() => {});
+    },
     loadQuery() {
       if (this.recipientsByQuery) {
         this.sendQuery(0, 1000, this.recipientsByQuery.query);