show who does not have newsletter configured

This commit is contained in:
Julian Krauser 2025-04-19 09:24:55 +02:00
parent 48502efc1d
commit fb78360946
2 changed files with 55 additions and 36 deletions

View file

@ -1,10 +1,11 @@
<template>
<div class="w-full">
<Combobox v-model="selected" :disabled="disabled" multiple>
<ComboboxLabel>{{ title }}</ComboboxLabel>
<div class="relative mt-1">
<ComboboxLabel v-if="!showTitleAsPlaceholder">{{ title }}</ComboboxLabel>
<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: {

View file

@ -4,51 +4,53 @@
<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 class="flex flex-col gap-2 grow overflow-y-auto">
<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 title="Empfänger manuell hinzufügen" @click="showMemberSelect = true">
<UserPlusIcon class="w-7 h-7 cursor-pointer" />
</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">
<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?.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>
<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 +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";