107 lines
2.5 KiB
Vue
107 lines
2.5 KiB
Vue
<template>
|
|
<div class="webmailing-list">
|
|
<div v-if="emails.length === 0" class="alert alert-info">
|
|
<i class="fas fa-info-circle"></i> Aucun email envoyé
|
|
</div>
|
|
<div v-else class="table-responsive">
|
|
<table class="table table-hover">
|
|
<thead class="table-light">
|
|
<tr>
|
|
<th>Destinataires</th>
|
|
<th>Sujet</th>
|
|
<th>Date d'envoi</th>
|
|
<th>Statut</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="email in emails" :key="email.id">
|
|
<td>
|
|
<small>{{ email.recipients }}</small>
|
|
</td>
|
|
<td>
|
|
<strong>{{ email.subject }}</strong>
|
|
</td>
|
|
<td>
|
|
<small>{{ formatDate(email.sentDate) }}</small>
|
|
</td>
|
|
<td>
|
|
<span :class="getStatusClass(email.status)">
|
|
{{ getStatusLabel(email.status) }}
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<button class="btn btn-sm btn-info" @click="viewEmail(email.id)">
|
|
<i class="fas fa-eye"></i>
|
|
</button>
|
|
<button class="btn btn-sm btn-danger ms-2" @click="deleteEmail(email.id)">
|
|
<i class="fas fa-trash"></i>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { defineProps, defineEmits } from "vue";
|
|
|
|
const props = defineProps({
|
|
emails: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
});
|
|
|
|
const emit = defineEmits(["view-email", "delete-email"]);
|
|
|
|
const formatDate = (date) => {
|
|
if (!date) return "-";
|
|
return new Date(date).toLocaleDateString("fr-FR", {
|
|
year: "numeric",
|
|
month: "short",
|
|
day: "numeric",
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
});
|
|
};
|
|
|
|
const getStatusClass = (status) => {
|
|
const statusClasses = {
|
|
sent: "badge bg-success",
|
|
pending: "badge bg-warning",
|
|
failed: "badge bg-danger",
|
|
scheduled: "badge bg-info",
|
|
};
|
|
return statusClasses[status] || "badge bg-secondary";
|
|
};
|
|
|
|
const getStatusLabel = (status) => {
|
|
const statusLabels = {
|
|
sent: "Envoyé",
|
|
pending: "En attente",
|
|
failed: "Échoué",
|
|
scheduled: "Programmé",
|
|
};
|
|
return statusLabels[status] || "Inconnu";
|
|
};
|
|
|
|
const viewEmail = (id) => {
|
|
emit("view-email", id);
|
|
};
|
|
|
|
const deleteEmail = (id) => {
|
|
emit("delete-email", id);
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.webmailing-list {
|
|
background-color: white;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
}
|
|
</style>
|