217 lines
11 KiB
HTML
217 lines
11 KiB
HTML
{% macro mails_tab(mails, csrf_token, users, total_pages, current_page) %}
|
|
<div class="card shadow-sm">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<h5 class="card-title mb-0">Mail Log</h5>
|
|
<div class="d-flex gap-2">
|
|
<select class="form-select form-select-sm" id="statusFilter" onchange="updateFilters()">
|
|
<option value="">All Statuses</option>
|
|
<option value="pending">Pending</option>
|
|
<option value="sent">Sent</option>
|
|
<option value="failed">Failed</option>
|
|
</select>
|
|
<select class="form-select form-select-sm" id="dateRangeFilter" onchange="updateFilters()">
|
|
<option value="24h">Last 24 Hours</option>
|
|
<option value="7d" selected>Last 7 Days</option>
|
|
<option value="30d">Last 30 Days</option>
|
|
<option value="all">All Time</option>
|
|
</select>
|
|
<select class="form-select form-select-sm" id="userFilter" onchange="updateFilters()">
|
|
<option value="">All Recipients</option>
|
|
{% for user in users %}
|
|
<option value="{{ user.id }}">{{ user.username }} {{ user.last_name }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
<button class="btn btn-secondary btn-sm" onclick="clearFilters()">
|
|
<i class="fas fa-times me-1"></i>Clear Filters
|
|
</button>
|
|
<button class="btn btn-primary btn-sm" onclick="downloadMailLog()">
|
|
<i class="fas fa-download me-1"></i>Download CSV
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mail Table -->
|
|
<div class="table-responsive">
|
|
<table class="table table-hover">
|
|
<thead>
|
|
<tr>
|
|
<th>Created At</th>
|
|
<th>Recipient</th>
|
|
<th>Subject</th>
|
|
<th>Status</th>
|
|
<th>Template</th>
|
|
<th>Sent At</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for mail in mails.items %}
|
|
<tr>
|
|
<td>{{ mail.created_at.strftime('%Y-%m-%d %H:%M:%S') }}</td>
|
|
<td>{{ mail.recipient }}</td>
|
|
<td>{{ mail.subject }}</td>
|
|
<td>
|
|
<span class="badge {% if mail.status == 'pending' %}bg-warning{% elif mail.status == 'sent' %}bg-success{% else %}bg-danger{% endif %}">
|
|
{{ mail.status }}
|
|
</span>
|
|
</td>
|
|
<td>{{ mail.template.name if mail.template else '-' }}</td>
|
|
<td>{{ mail.sent_at.strftime('%Y-%m-%d %H:%M:%S') if mail.sent_at else '-' }}</td>
|
|
<td>
|
|
<button class="btn btn-sm btn-outline-primary" onclick="viewMailDetails({{ mail.id }})">
|
|
<i class="fas fa-eye"></i>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Pagination -->
|
|
{% if total_pages > 1 %}
|
|
<div class="d-flex justify-content-between align-items-center mt-4">
|
|
<div>
|
|
<button class="btn btn-outline-secondary" onclick="changePage({{ current_page - 1 }})" {% if current_page == 1 %}disabled{% endif %}>
|
|
<i class="fas fa-chevron-left me-2"></i>Previous
|
|
</button>
|
|
<span class="mx-3">Page {{ current_page }} of {{ total_pages }}</span>
|
|
<button class="btn btn-outline-secondary" onclick="changePage({{ current_page + 1 }})" {% if current_page == total_pages %}disabled{% endif %}>
|
|
Next<i class="fas fa-chevron-right ms-2"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mail Details Modal -->
|
|
<div class="modal fade" id="mailDetailsModal" tabindex="-1">
|
|
<div class="modal-dialog modal-lg modal-dialog-centered">
|
|
<div class="modal-content">
|
|
<div class="modal-header" style="background-color: var(--primary-opacity-8);">
|
|
<h5 class="modal-title">
|
|
<i class="fas fa-envelope me-2" style="color: var(--primary-color);"></i>Mail Details
|
|
</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="row g-3">
|
|
<div class="col-md-6">
|
|
<div class="card h-100 border-0 shadow-sm">
|
|
<div class="card-body">
|
|
<div class="d-flex align-items-center mb-3">
|
|
<i class="fas fa-user-circle me-2" style="color: var(--primary-color);"></i>
|
|
<h6 class="card-subtitle mb-0" style="color: var(--primary-color); font-weight: 600;">Recipient Information</h6>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="fw-bold" style="color: var(--primary-color);">Recipient:</label>
|
|
<p id="modalRecipient" class="mb-0"></p>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="fw-bold" style="color: var(--primary-color);">Status:</label>
|
|
<p id="modalStatus" class="mb-0"></p>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="fw-bold" style="color: var(--primary-color);">Template:</label>
|
|
<p id="modalTemplate" class="mb-0"></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card h-100 border-0 shadow-sm">
|
|
<div class="card-body">
|
|
<div class="d-flex align-items-center mb-3">
|
|
<i class="fas fa-clock me-2" style="color: var(--primary-color);"></i>
|
|
<h6 class="card-subtitle mb-0" style="color: var(--primary-color); font-weight: 600;">Timing Information</h6>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="fw-bold" style="color: var(--primary-color);">Created At:</label>
|
|
<p id="modalCreatedAt" class="mb-0"></p>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="fw-bold" style="color: var(--primary-color);">Sent At:</label>
|
|
<p id="modalSentAt" class="mb-0"></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-4">
|
|
<div class="card border-0 shadow-sm">
|
|
<div class="card-body">
|
|
<div class="d-flex align-items-center mb-3">
|
|
<i class="fas fa-envelope-open-text me-2" style="color: var(--primary-color);"></i>
|
|
<h6 class="card-subtitle mb-0" style="color: var(--primary-color); font-weight: 600;">Message Content</h6>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="fw-bold" style="color: var(--primary-color);">Subject:</label>
|
|
<p id="modalSubject" class="mb-3"></p>
|
|
</div>
|
|
<div>
|
|
<label class="fw-bold" style="color: var(--primary-color);">Body:</label>
|
|
<div id="modalBody" class="border rounded p-3 mt-2" style="max-height: 300px; overflow-y: auto; background-color: var(--primary-opacity-8);"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer" style="background-color: var(--primary-opacity-8);">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function viewMailDetails(mailId) {
|
|
fetch(`/settings/mails/${mailId}`)
|
|
.then(response => response.json())
|
|
.then(mail => {
|
|
document.getElementById('modalSubject').textContent = mail.subject;
|
|
document.getElementById('modalRecipient').textContent = mail.recipient;
|
|
document.getElementById('modalStatus').innerHTML = `
|
|
<span class="badge ${mail.status === 'pending' ? 'bg-warning' : mail.status === 'sent' ? 'bg-success' : 'bg-danger'}">
|
|
${mail.status}
|
|
</span>
|
|
`;
|
|
document.getElementById('modalTemplate').textContent = mail.template ? mail.template.name : '-';
|
|
document.getElementById('modalCreatedAt').textContent = new Date(mail.created_at).toLocaleString();
|
|
document.getElementById('modalSentAt').textContent = mail.sent_at ? new Date(mail.sent_at).toLocaleString() : '-';
|
|
document.getElementById('modalBody').innerHTML = mail.body;
|
|
|
|
new bootstrap.Modal(document.getElementById('mailDetailsModal')).show();
|
|
});
|
|
}
|
|
|
|
function downloadMailLog() {
|
|
const status = document.getElementById('statusFilter').value;
|
|
const dateRange = document.getElementById('dateRangeFilter').value;
|
|
const userId = document.getElementById('userFilter').value;
|
|
|
|
window.location.href = `/settings/mails/download?status=${status}&date_range=${dateRange}&user_id=${userId}`;
|
|
}
|
|
|
|
function updateFilters() {
|
|
const status = document.getElementById('statusFilter').value;
|
|
const dateRange = document.getElementById('dateRangeFilter').value;
|
|
const userId = document.getElementById('userFilter').value;
|
|
|
|
window.location.href = `/settings/mails?status=${status}&date_range=${dateRange}&user_id=${userId}`;
|
|
}
|
|
|
|
function clearFilters() {
|
|
window.location.href = '/settings/mails';
|
|
}
|
|
|
|
function changePage(page) {
|
|
const status = document.getElementById('statusFilter').value;
|
|
const dateRange = document.getElementById('dateRangeFilter').value;
|
|
const userId = document.getElementById('userFilter').value;
|
|
|
|
window.location.href = `/settings/mails?page=${page}&status=${status}&date_range=${dateRange}&user_id=${userId}`;
|
|
}
|
|
</script>
|
|
{% endmacro %} |