123 lines
4.6 KiB
HTML
123 lines
4.6 KiB
HTML
<div id="pending-emails-modal" @click.away="$refs.modal.close()" class="modal-box max-w-6xl" x-data="{
|
|
errors: {{ 'true' if errors else 'false' }},
|
|
selectedEmails: []
|
|
}" x-init="$nextTick(() => { if (errors) { document.querySelector('#submit-btn').classList.add('shake'); } })">
|
|
<h3 class="font-bold text-lg mb-4">Pending Emails in {{ folder.name }}</h3>
|
|
|
|
{% if errors and errors.general %}
|
|
<div class="alert alert-error mb-4">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
|
|
<span>{{ errors.general }}</span>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="mb-4">
|
|
<div class="flex items-center space-x-4">
|
|
<div class="stat">
|
|
<div class="stat-title">Total Emails</div>
|
|
<div class="stat-value">{{ folder.total_count }}</div>
|
|
</div>
|
|
<div class="stat">
|
|
<div class="stat-title">Pending</div>
|
|
<div class="stat-value text-warning">{{ pending_emails|length }}</div>
|
|
</div>
|
|
<div class="stat">
|
|
<div class="stat-title">Processed</div>
|
|
<div class="stat-value text-success">{{ folder.total_count - pending_emails|length }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% if pending_emails %}
|
|
<div class="overflow-x-auto">
|
|
<table class="table table-sm table-zebra">
|
|
<thead>
|
|
<tr>
|
|
<th>
|
|
<label class="cursor-pointer">
|
|
<input type="checkbox" class="checkbox checkbox-xs" @change="selectAllEmails($event)">
|
|
</label>
|
|
</th>
|
|
<th>Subject</th>
|
|
<th>From</th>
|
|
<th>Date</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for email in pending_emails %}
|
|
<tr id="email-row-{{ email.uid }}">
|
|
<td>
|
|
<label class="cursor-pointer">
|
|
<input type="checkbox" name="email_uids" value="{{ email.uid }}" class="checkbox checkbox-xs">
|
|
</label>
|
|
</td>
|
|
<td class="font-medium">{{ email.subject }}</td>
|
|
<td>{{ email.from }}</td>
|
|
<td>{{ email.date }}</td>
|
|
<td>
|
|
<div class="flex items-center space-x-2">
|
|
<button
|
|
class="btn btn-xs btn-primary"
|
|
hx-post="/api/folders/{{ folder.id }}/emails/{{ email.uid }}/process"
|
|
hx-target="#email-row-{{ email.uid }}"
|
|
hx-swap="outerHTML"
|
|
data-loading-disable
|
|
>
|
|
<i class="fas fa-check mr-1"></i>
|
|
Process
|
|
</button>
|
|
<button
|
|
class="btn btn-xs btn-secondary"
|
|
onclick="previewEmail('{{ email.uid }}', '{{ folder.name }}')"
|
|
>
|
|
<i class="fas fa-eye mr-1"></i>
|
|
Preview
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="mt-4 flex justify-end">
|
|
<button
|
|
class="btn btn-primary"
|
|
hx-post="/api/folders/{{ folder.id }}/process-emails"
|
|
hx-include="[name='email_uids']"
|
|
hx-target="#modal-holder"
|
|
hx-swap="beforeend"
|
|
data-loading-disable
|
|
>
|
|
<span data-loading-class="!hidden"><i class="fas fa-check-double mr-2"></i>Process Selected</span>
|
|
<span class="loading loading-spinner loading-xs hidden" data-loading-class-remove="hidden"></span>
|
|
</button>
|
|
</div>
|
|
{% else %}
|
|
<div class="alert alert-info">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
|
|
<span>No pending emails found in this folder.</span>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="modal-action">
|
|
<button class="btn btn-outline" @click="$dispatch('close-modal')">Close</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function selectAllEmails(event) {
|
|
const checkboxes = document.querySelectorAll('input[name="email_uids"]');
|
|
checkboxes.forEach(checkbox => {
|
|
checkbox.checked = event.target.checked;
|
|
});
|
|
}
|
|
|
|
function previewEmail(uid, folderName) {
|
|
// This would typically open a modal or new window with email preview
|
|
// For now, we'll just show an alert
|
|
alert(`Preview functionality would open email ${uid} from folder ${folderName}`);
|
|
}
|
|
</script> |