Manual mails can be sent

app/Domains/Event/Views/Partials/MailCompose.vue

@@ -0,0 +1,104 @@
+<script setup>
+import {onMounted, reactive, ref} from "vue";
+import {useAjax} from "../../../../../resources/js/components/ajaxHandler.js";
+import TextEditor from "../../../../Views/Components/TextEditor.vue";
+import ErrorText from "../../../../Views/Components/ErrorText.vue";
+import {toast} from "vue3-toastify";
+const { request } = useAjax();
+
+
+    const props = defineProps({
+        event: Object,
+        mailToType: String,
+        recipientIdentifier: String,
+    })
+
+    const data = reactive({
+        recipients: null,
+    });
+
+onMounted(async () => {
+    const groupTypes = ['all', 'signed-off', 'by-local-group', 'by-participation-group'];
+
+    if (!groupTypes.includes(props.mailToType)) {
+        console.error('Unknown recipient identifier:', props.recipientIdentifier);
+        return;
+    }
+
+    const response = await request('/api/v1/event/' + props.event.identifier + '/mailing/compose/to-group/' + props.mailToType, {
+        method: "POST",
+        body: {
+            groupName: props.recipientIdentifier
+        }
+    });
+
+    data.recipients = response.recipients;
+    form.recipients = data.recipients.join(', ');
+});
+
+const errorMessage = ref(null)
+
+const emit = defineEmits([
+    'closeComposer',
+
+]);
+
+function close() {
+    emit('closeComposer');
+}
+
+
+async function sendMail() {
+    const response = await request('/api/v1/event/' + props.event.identifier + '/mailing/send', {
+        method: "POST",
+        body: {
+            recipients: form.recipients,
+            subject: form.subject,
+            message: form.message,
+        }
+    });
+
+    if (response.success) {
+        close();
+        toast.success(response.message)
+
+    } else {
+        errorMessage.value = response.message
+        toast.error(response.message)
+    }
+}
+
+const form = reactive({
+    recipients: '',
+    sendCopy: true,
+    subject: '',
+    message: '',
+});
+</script>
+
+<template>
+    <h2>E-Mail senden</h2>
+    <div style="display: flex; flex-direction: column; gap: 12px;">
+        <div>
+            <label style="font-weight: bold">Empfänger*innen</label>
+            <textarea v-model="form.recipients" placeholder="Senden an" style="width: 100%;" rows="3"></textarea>
+        </div>
+        <div>
+            <label style="font-weight: bold">Betreff</label>
+            <input type="text" v-model="form.subject" placeholder="Betreff" style="width: 100%;" />
+        </div><br /><br />
+        <div>
+            <label style="font-weight: bold">Nachricht</label>
+            <TextEditor v-model="form.message" />
+        </div>
+        <strong><ErrorText :message="errorMessage" /></strong>
+
+    </div>
+
+    <input type="button" @click="sendMail" value="Senden" class="" />
+
+</template>
+
+<style scoped>
+
+</style>

app/Domains/Event/Views/Partials/Overview.vue

@@ -5,6 +5,8 @@
     import CommonSettings from "./CommonSettings.vue";
     import EventManagement from "./EventManagement.vue";
     import Modal from "../../../../Views/Components/Modal.vue";
+    import MailCompose from "./MailCompose.vue";
+    import FullScreenModal from "../../../../Views/Components/FullScreenModal.vue";
 
     const props = defineProps({
         data: Object,
@@ -47,6 +49,11 @@
         Object.assign(dynamicProps, data);
     });
 
+    const mailCompose = ref(false);
+
+    function mailToGroup() {
+        mailCompose.value = true
+    }
 </script>
 
 <template>
@@ -85,7 +92,7 @@
                 </a><br/>
                 <input type="button" class="fix-button" value="Zahlungserinnerung senden" /><br/>
                 <input type="button" class="deny-button" value="Letzte Mahnung senden" /><br/>
-                <input type="button" value="Rundmail senden" /><br/>
+                <input type="button" value="Rundmail senden" @click="mailToGroup" /><br/>
             </div>
         </div>
         <div class="event-flexbox-row bottom">
@@ -130,6 +137,14 @@
         </table>
     </Modal>
 
+    <FullScreenModal
+        :show="mailCompose"
+        title="E-Mail senden"
+        @close="mailCompose = false"
+    >
+        <MailCompose @closeComposer="mailCompose = false" :event="dynamicProps.event" mailToType="all" recipientIdentifier="Alle Teilnehmenden" />
+    </FullScreenModal>
+
 </template>
 
 <style>

app/Domains/Event/Views/Partials/ParticipantsList.vue

@@ -2,10 +2,12 @@
 import { computed, reactive, ref } from "vue";
 import Modal from "../../../../Views/Components/Modal.vue";
 import ParticipantData from "./ParticipantData.vue";
+import MailCompose   from "./MailCompose.vue";
 import {toast} from "vue3-toastify";
 import {useAjax} from "../../../../../resources/js/components/ajaxHandler.js";
 import {format, getDay, getMonth, getYear} from "date-fns";
 import AmountInput from "../../../../Views/Components/AmountInput.vue";
+import FullScreenModal from "../../../../Views/Components/FullScreenModal.vue";
 
 const props = defineProps({
     data: {
@@ -14,6 +16,7 @@ const props = defineProps({
             localGroups: {},
             participants: {},
             event: {},
+            listType: '',
         }),
     },
 });
@@ -31,6 +34,8 @@ const showParticipantDetails = ref(false);
 const showParticipant = ref(null);
 const editMode = ref(false);
 
+const mailCompose = ref(false);
+
 const openCancelDialog = ref(false);
 const openPartialPaymentDialogSwitch = ref(false);
 
@@ -42,8 +47,6 @@ function openParticipantDetails(input) {
     editMode.value = false;
 }
 
-console.log(props.data.participants)
-
 async function saveParticipant(formData) {
     if (!showParticipant.value?.identifier) {
         return;
@@ -283,6 +286,15 @@ async function execPartialPayment() {
     openPartialPaymentDialogSwitch.value = false;
 }
 
+const mailToType = ref('')
+const recipientIdentifier = ref('')
+
+function mailToGroup(groupKey) {
+    recipientIdentifier.value = groupKey;
+    mailToType.value = props.data.listType;
+    mailCompose.value = true
+}
+
 </script>
 
 <template>
@@ -383,7 +395,7 @@ async function execPartialPayment() {
                         27 Jahre und älter: <strong>{{ getAgeCounts(participants)['27+'] ?? 0 }}</strong>
                     </td>
                     <td>
-                        E-Mail an Gruppe senden
+                        <input type="button" class="button" @click="mailToGroup(groupKey)" value="E-Mail an Gruppe senden" />
                     </td>
                 </tr>
                 </tbody>
@@ -394,7 +406,7 @@ async function execPartialPayment() {
     <Modal
         :show="showParticipantDetails"
         title="Anmeldedetails ansehen"
-        @close="showParticipantDetails = false;toast.success('HALLO');"
+        @close="showParticipantDetails = false;"
     >
         <ParticipantData
             @cancelParticipation="openCancelParticipationDialog"
@@ -433,6 +445,13 @@ async function execPartialPayment() {
         <button class="button" @click="execPartialPayment()">Teilbetrag buchen</button>
     </Modal>
 
+    <FullScreenModal
+        :show="mailCompose"
+        title="E-Mail senden"
+        @close="mailCompose = false"
+    >
+        <MailCompose @closeComposer="mailCompose = false" :event="event" :mailToType="mailToType" :recipientIdentifier="recipientIdentifier" />
+    </FullScreenModal>