lots of configuration progress.
This commit is contained in:
123
app/templates/partials/pending_emails_dialog.html
Normal file
123
app/templates/partials/pending_emails_dialog.html
Normal file
@@ -0,0 +1,123 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user