Manual mails can be sent

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>