150 lines
4.0 KiB
Vue
150 lines
4.0 KiB
Vue
<template>
|
|
<div class="webmailing-form">
|
|
<div class="form-section mb-4">
|
|
<h5 class="mb-3">Destinataires</h5>
|
|
<soft-input
|
|
v-model="formData.recipients"
|
|
type="email"
|
|
placeholder="Entrez les adresses email (séparées par des virgules)"
|
|
icon="fas fa-envelope"
|
|
icon-dir="left"
|
|
/>
|
|
</div>
|
|
|
|
<div class="form-section mb-4">
|
|
<h5 class="mb-3">Sujet</h5>
|
|
<webmailing-subject-input
|
|
v-model="formData.subject"
|
|
@blur="validateSubject"
|
|
/>
|
|
</div>
|
|
|
|
<div class="form-section mb-4">
|
|
<h5 class="mb-3">Contenu du message</h5>
|
|
<webmailing-body-input
|
|
v-model="formData.body"
|
|
@blur="validateBody"
|
|
/>
|
|
</div>
|
|
|
|
<div class="form-section mb-4">
|
|
<h5 class="mb-3">Pièces jointes</h5>
|
|
<webmailing-attachment
|
|
@files-selected="handleFilesSelected"
|
|
/>
|
|
<div v-if="formData.attachments.length > 0" class="mt-3">
|
|
<h6>Fichiers sélectionnés:</h6>
|
|
<ul class="list-unstyled">
|
|
<li v-for="file in formData.attachments" :key="file.name" class="mb-2">
|
|
<span class="badge bg-info">{{ file.name }}</span>
|
|
<small class="ms-2 text-muted">({{ formatFileSize(file.size) }})</small>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-section">
|
|
<h5 class="mb-3">Options</h5>
|
|
<div class="form-check mb-2">
|
|
<input
|
|
id="send-copy"
|
|
v-model="formData.sendCopy"
|
|
type="checkbox"
|
|
class="form-check-input"
|
|
/>
|
|
<label class="form-check-label" for="send-copy">
|
|
M'envoyer une copie
|
|
</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input
|
|
id="send-scheduled"
|
|
v-model="formData.scheduled"
|
|
type="checkbox"
|
|
class="form-check-input"
|
|
/>
|
|
<label class="form-check-label" for="send-scheduled">
|
|
Programmer l'envoi
|
|
</label>
|
|
</div>
|
|
<div v-if="formData.scheduled" class="mt-3">
|
|
<soft-input
|
|
v-model="formData.scheduledDate"
|
|
type="datetime-local"
|
|
placeholder="Date et heure d'envoi"
|
|
icon="fas fa-calendar"
|
|
icon-dir="left"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { defineEmits, defineProps } from "vue";
|
|
import { ref } from "vue";
|
|
import SoftInput from "@/components/SoftInput.vue";
|
|
import WebmailingSubjectInput from "@/components/atoms/Webmailing/WebmailingSubjectInput.vue";
|
|
import WebmailingBodyInput from "@/components/atoms/Webmailing/WebmailingBodyInput.vue";
|
|
import WebmailingAttachment from "@/components/atoms/Webmailing/WebmailingAttachment.vue";
|
|
|
|
const props = defineProps({
|
|
initialData: {
|
|
type: Object,
|
|
default: () => ({}),
|
|
},
|
|
});
|
|
|
|
const emit = defineEmits(["form-data-change"]);
|
|
|
|
const formData = ref({
|
|
recipients: props.initialData.recipients || "",
|
|
subject: props.initialData.subject || "",
|
|
body: props.initialData.body || "",
|
|
attachments: props.initialData.attachments || [],
|
|
sendCopy: props.initialData.sendCopy || false,
|
|
scheduled: props.initialData.scheduled || false,
|
|
scheduledDate: props.initialData.scheduledDate || "",
|
|
});
|
|
|
|
const validateSubject = () => {
|
|
// Add validation logic if needed
|
|
};
|
|
|
|
const validateBody = () => {
|
|
// Add validation logic if needed
|
|
};
|
|
|
|
const handleFilesSelected = (files) => {
|
|
formData.value.attachments = files;
|
|
emitFormData();
|
|
};
|
|
|
|
const emitFormData = () => {
|
|
emit("form-data-change", formData.value);
|
|
};
|
|
|
|
const formatFileSize = (bytes) => {
|
|
if (bytes === 0) return "0 Bytes";
|
|
const k = 1024;
|
|
const sizes = ["Bytes", "KB", "MB", "GB"];
|
|
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
|
return Math.round(bytes / Math.pow(k, i) * 100) / 100 + " " + sizes[i];
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.webmailing-form {
|
|
background-color: #f8f9fa;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.form-section {
|
|
background-color: white;
|
|
padding: 15px;
|
|
border-radius: 6px;
|
|
border-left: 4px solid #17a2b8;
|
|
}
|
|
</style>
|