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/components/admin/configuration/newsletterConfig/NewsletterConfigListItem.vue

@@ -3,13 +3,13 @@
     <div class="bg-primary p-2 text-white flex flex-row justify-between items-center">
       <p>Newsletter bei Type "{{ comType.type }}" versenden/exportieren als</p>
       <div v-if="can('create', 'configuration', 'newsletter_config')" class="flex flex-row justify-end w-16">
-        <button v-if="status == null" type="submit" class="p-0! h-fit! w-fit!" title="speichern">
+        <button v-if="status == null" type="submit" class="p-0! h-fit! w-fit!" title="Änderung speichern">
           <ArchiveBoxArrowDownIcon class="w-5 h-5 p-1 box-content pointer-events-none" />
         </button>
         <Spinner v-else-if="status == 'loading'" class="my-auto" />
         <SuccessCheckmark v-else-if="status?.status == 'success'" />
         <FailureXMark v-else-if="status?.status == 'failed'" />
-        <button type="button" class="p-0! h-fit! w-fit!" title="zurücksetzen" @click="resetForm">
+        <button type="button" class="p-0! h-fit! w-fit!" title="Änderung zurücksetzen" @click="resetForm">
           <ArchiveBoxXMarkIcon class="w-5 h-5 p-1 box-content pointer-events-none" />
         </button>
       </div>
@@ -36,7 +36,7 @@ import Spinner from "@/components/Spinner.vue";
 import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
 import FailureXMark from "@/components/FailureXMark.vue";
 import { useModalStore } from "@/stores/modal";
-import { NewsletterConfigType } from "@/enums/newsletterConfigType";
+import { NewsletterConfigEnum } from "@/enums/newsletterConfigEnum";
 import type { AxiosResponse } from "axios";
 import type { CommunicationTypeViewModel } from "@/viewmodels/admin/configuration/communicationType.models";
 import { useAbilityStore } from "@/stores/ability";
@@ -62,7 +62,7 @@ export default defineComponent({
     },
   },
   mounted() {
-    this.configs = Object.values(NewsletterConfigType);
+    this.configs = Object.values(NewsletterConfigEnum);
   },
   beforeUnmount() {
     try {

src/enums/newsletterConfigEnum.ts

@@ -0,0 +1,5 @@
+export enum NewsletterConfigEnum {
+  pdf = "pdf",
+  mail = "mail",
+  none = "none",
+}

src/enums/newsletterConfigType.ts

@@ -1,4 +0,0 @@
-export enum NewsletterConfigType {
-  pdf = "pdf",
-  mail = "mail",
-}

src/stores/admin/configuration/newsletterConfig.ts

@@ -6,7 +6,7 @@ import type {
 import { http } from "@/serverCom";
 import type { AxiosResponse } from "axios";
 
-export const useNewsletterConfigStore = defineStore("newsletterConfi", {
+export const useNewsletterConfigStore = defineStore("newsletterConfig", {
   state: () => {
     return {
       config: [] as Array<NewsletterConfigViewModel>,

src/viewmodels/admin/configuration/newsletterConfig.models.ts

@@ -1,13 +1,13 @@
-import type { NewsletterConfigType } from "@/enums/newsletterConfigType";
+import type { NewsletterConfigEnum } from "@/enums/newsletterConfigEnum";
 import type { CommunicationTypeViewModel } from "./communicationType.models";
 
 export interface NewsletterConfigViewModel {
   comTypeId: number;
-  config: NewsletterConfigType;
+  config: NewsletterConfigEnum;
   comType: CommunicationTypeViewModel;
 }
 
 export interface SetNewsletterConfigViewModel {
   comTypeId: number;
-  config: NewsletterConfigType;
+  config: NewsletterConfigEnum;
 }

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

@@ -4,51 +4,55 @@
     <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 v-else class="flex flex-row gap-2 items-center">
-    </div>
-    <div class="flex flex-col gap-2 h-1/2">
       <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">
+        <ArchiveBoxIcon class="w-7 h-7 cursor-pointer" />
+      </div>
+    </div>
+
+    <p v-if="!showMemberSelect">Empfänger durch gespeicherte Abfrage</p>
+    <p v-else>Ausgewählte Empfänger</p>
 
-      <p>Ausgewählte Empfänger</p>
     <div class="flex flex-col gap-2 grow overflow-y-auto">
       <div
-          v-for="member in selected"
+        v-for="member in showRecipientsByMode"
         :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"
+        class="flex flex-row gap-2 h-fit w-full border border-primary rounded-md bg-primary p-2 text-white items-center"
       >
-          <div>
+        <ExclamationTriangleIcon v-if="member.sendNewsletter == 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>
+          <p>Newsletter senden an Typ: {{ member.sendNewsletter?.type.type ?? "---" }}</p>
         </div>
 
         <TrashIcon
-            v-if="can('create', 'club', 'newsletter')"
+          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 +71,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 +97,7 @@ export default defineComponent({
     return {
       query: "" as String,
       members: [] as Array<MemberViewModel>,
+      showMemberSelect: false as boolean,
     };
   },
   computed: {
@@ -125,6 +130,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 != null;
+        const bHasConfig = b.sendNewsletter != null;
+        if (aHasConfig === bHasConfig) return 0;
+        return aHasConfig ? -1 : 1;
+      });
+    },
+    countOfNoConfig() {
+      return this.showRecipientsByMode.filter((member) => member.sendNewsletter == null).length;
+    },
     recipientsByQueryId: {
       get() {
         return this.activeNewsletterObj?.recipientsByQueryId ?? "def";