115 lines
3.3 KiB
Vue
115 lines
3.3 KiB
Vue
<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";
|
|
import InfoText from "../../../../Views/Components/InfoText.vue";
|
|
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 infoMessage = ref(null)
|
|
|
|
const emit = defineEmits([
|
|
'closeComposer',
|
|
|
|
]);
|
|
|
|
function close() {
|
|
emit('closeComposer');
|
|
}
|
|
|
|
|
|
async function sendMail() {
|
|
document.getElementById('sendMessageButton').style.display = 'none';
|
|
infoMessage.value = 'Die Rundmail wird nun gesendet. Dies kann einen Moment dauern. Bitte verlasse diese Seite nicht.'
|
|
|
|
toast.info('Die Rundmail wird nun gesendet. Dies kann einen Moment dauern. Bitte verlasse diese Seite nicht.')
|
|
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) {
|
|
infoMessage.value = null
|
|
document.getElementById('sendMessageButton').style.display = 'block';
|
|
close();
|
|
toast.success(response.message)
|
|
|
|
} else {
|
|
infoMessage.value = null
|
|
document.getElementById('sendMessageButton').style.display = 'block';
|
|
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>
|
|
<info-text :message="infoMessage" />
|
|
<input type="button" id="sendMessageButton" @click="sendMail" value="Senden" class="" />
|
|
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|