src/components/admin/MemberSearchSelect.vue

@@ -1,10 +1,11 @@
 <template>
   <div class="w-full">
     <Combobox v-model="selected" :disabled="disabled" multiple>
-      <ComboboxLabel>{{ title }}</ComboboxLabel>
+      <ComboboxLabel v-if="!showTitleAsPlaceholder">{{ title }}</ComboboxLabel>
-      <div class="relative mt-1">
+      <div class="relative" :class="{ 'mt-1': !showTitleAsPlaceholder }">
         <ComboboxInput
           class="rounded-md shadow-xs relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-hidden focus:ring-0 focus:z-10 sm:text-sm resize-none"
+          :placeholder="showTitleAsPlaceholder ? title : ''"
           @input="query = $event.target.value"
         />
         <ComboboxButton class="absolute inset-y-0 right-0 flex items-center pr-2">
@@ -101,6 +102,10 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    showTitleAsPlaceholder: {
+      type: Boolean,
+      default: false,
+    },
   },
   emits: ["update:model-value", "add:difference", "remove:difference", "add:member", "add:memberByArray"],
   watch: {

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

@@ -4,52 +4,54 @@
     <p v-else-if="loading == 'failed'" @click="fetchNewsletterRecipients" class="cursor-pointer">
       &#8634; laden fehlgeschlagen
     </p>
-    <div class="flex flex-col gap-2 h-1/2">
+    <div v-if="!showMemberSelect" class="flex flex-row gap-2 items-center">
       <select v-model="recipientsByQueryId">
         <option value="def">Optional</option>
         <option v-for="query in queries" :key="query.id" :value="query.id">{{ query.title }}</option>
       </select>
-      <p>Empfänger durch gespeicherte Abfrage</p>
+      <div title="Empfänger manuell hinzufügen" @click="showMemberSelect = true">
-      <div class="flex flex-col gap-2 grow overflow-y-auto">
+        <UserPlusIcon class="w-7 h-7 cursor-pointer" />
-        <div
-          v-for="member in queried"
-          :key="member.id"
-          class="flex flex-row h-fit w-full border border-primary rounded-md bg-primary p-2 text-white justify-between items-center"
-        >
-          <div>
-            <p>{{ member.lastname }}, {{ member.firstname }} {{ member.nameaffix ? `- ${member.nameaffix}` : "" }}</p>
-            <p>Newsletter senden an Typ: {{ member.sendNewsletter?.type.type }}</p>
-          </div>
-        </div>
       </div>
     </div>
-    <div class="flex flex-col gap-2 h-1/2">
+    <div v-else class="flex flex-row gap-2 items-center">
       <MemberSearchSelect
         title="weitere Empfänger suchen"
+        showTitleAsPlaceholder
         v-model="recipients"
         :disabled="!can('create', 'club', 'newsletter')"
       />
-
+      <div title="Empfänger über Query hinzufügen" @click="showMemberSelect = false">
-      <p>Ausgewählte Empfänger</p>
+        <ArchiveBoxIcon class="w-7 h-7 cursor-pointer" />
-      <div class="flex flex-col gap-2 grow overflow-y-auto">
-        <div
-          v-for="member in selected"
-          :key="member.id"
-          class="flex flex-row h-fit w-full border border-primary rounded-md bg-primary p-2 text-white justify-between items-center"
-        >
-          <div>
-            <p>{{ member.lastname }}, {{ member.firstname }} {{ member.nameaffix ? `- ${member.nameaffix}` : "" }}</p>
-            <p>Newsletter senden an Typ: {{ member.sendNewsletter?.type.type }}</p>
-          </div>
-
-          <TrashIcon
-            v-if="can('create', 'club', 'newsletter')"
-            class="w-5 h-5 p-1 box-content cursor-pointer"
-            @click="removeSelected(member.id)"
-          />
-        </div>
       </div>
     </div>
+    <p v-if="!showMemberSelect">Empfänger durch gespeicherte Abfrage</p>
+    <p v-else>Ausgewählte Empfänger</p>
+
+    <div class="flex flex-col gap-2 grow overflow-y-auto">
+      <div
+        v-for="member in showRecipientsByMode"
+        :key="member.id"
+        class="flex flex-row gap-2 h-fit w-full border border-primary rounded-md bg-primary p-2 text-white items-center"
+      >
+        <ExclamationTriangleIcon v-if="member.sendNewsletter?.type.type == null" class="w-7 h-7" />
+
+        <div class="grow">
+          <p>{{ member.lastname }}, {{ member.firstname }} {{ member.nameaffix ? `- ${member.nameaffix}` : "" }}</p>
+          <p>Newsletter senden an Typ: {{ member.sendNewsletter?.type.type ?? "---" }}</p>
+        </div>
+
+        <TrashIcon
+          v-if="can('create', 'club', 'newsletter') && showMemberSelect"
+          class="w-5 h-5 p-1 box-content cursor-pointer"
+          @click="removeSelected(member.id)"
+        />
+      </div>
+    </div>
+
+    <div v-if="countOfNoConfig != 0" class="flex flex-row items-center gap-2 pt-3">
+      <ExclamationTriangleIcon class="text-red-500 w-5 h-5" />
+      <p>{{ countOfNoConfig }} Mitglieder der Auswahl haben keinen Newsletter-Versand konfiguriert!</p>
+    </div>
   </div>
 </template>
 
@@ -67,7 +69,7 @@ import {
   TransitionRoot,
 } from "@headlessui/vue";
 import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
-import { TrashIcon } from "@heroicons/vue/24/outline";
+import { ArchiveBoxIcon, ExclamationTriangleIcon, TrashIcon, UserPlusIcon } from "@heroicons/vue/24/outline";
 import { useMemberStore } from "@/stores/admin/club/member/member";
 import type { MemberViewModel } from "@/viewmodels/admin/club/member/member.models";
 import { useNewsletterStore } from "@/stores/admin/club/newsletter/newsletter";
@@ -93,6 +95,7 @@ export default defineComponent({
     return {
       query: "" as String,
       members: [] as Array<MemberViewModel>,
+      showMemberSelect: false as boolean,
     };
   },
   computed: {
@@ -125,6 +128,17 @@ export default defineComponent({
           .some((d) => (d.memberId ?? d.id) == m.id)
       );
     },
+    showRecipientsByMode() {
+      return (this.showMemberSelect ? this.selected : this.queried).sort((a, b) => {
+        const aHasConfig = a.sendNewsletter?.type.type != null;
+        const bHasConfig = b.sendNewsletter?.type.type != null;
+        if (aHasConfig === bHasConfig) return 0;
+        return aHasConfig ? -1 : 1;
+      });
+    },
+    countOfNoConfig() {
+      return this.showRecipientsByMode.filter((member) => member.sendNewsletter?.type.type == null).length;
+    },
     recipientsByQueryId: {
       get() {
         return this.activeNewsletterObj?.recipientsByQueryId ?? "def";