lots of configuration progress.
This commit is contained in:
35
app/templates/partials/destination_folders_section.html
Normal file
35
app/templates/partials/destination_folders_section.html
Normal file
@@ -0,0 +1,35 @@
|
||||
<div class="destination-folders-section mb-8">
|
||||
<div class="section-header bg-base-200 p-4 rounded-t-lg border-b border-base-300">
|
||||
<div class="flex flex-col md:flex-row md:items-center md:justify-between">
|
||||
<div>
|
||||
<h2 class="text-2xl font-bold text-base-content">Destination Folders</h2>
|
||||
<p class="text-base-content/70 mt-1">Folders where emails are organized and stored</p>
|
||||
</div>
|
||||
<button class="btn btn-primary mt-4 md:mt-0" hx-get="/api/folders/new" hx-target="#modal-holder" hx-swap="innerHTML" hx-trigger="click">
|
||||
<i class="fas fa-plus mr-2"></i>Add Destination Folder
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="destination-folders-list" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-6">
|
||||
{% for folder in destination_folders %}
|
||||
{% include 'partials/folder_card_destination.html' %}
|
||||
{% else %}
|
||||
<div class="col-span-full text-center py-12 bg-base-100 rounded-box shadow-lg border border-dashed border-base-300">
|
||||
<div class="text-5xl mb-4 text-primary">
|
||||
<i class="fas fa-folder-plus"></i>
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold mb-2">No destination folders yet</h3>
|
||||
<p class="mb-6 text-base-content/70">Create destination folders to organize your emails into categories.</p>
|
||||
<div data-loading-states>
|
||||
<button class="btn btn-primary btn-lg" hx-get="/api/folders/new" hx-target="#modal-holder" hx-swap="innerHTML"
|
||||
hx-trigger="click">
|
||||
<i class="fas fa-plus mr-2" data-loading-class="!hidden"></i>
|
||||
<span data-loading-class="!hidden">Create Folder</span>
|
||||
<span class="loading loading-spinner loading-xs hidden" data-loading-class-remove="hidden"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
@@ -31,7 +31,20 @@
|
||||
<div class="flex justify-between items-center mb-2">
|
||||
<div class="flex space-x-1">
|
||||
<span class="badge badge-outline cursor-pointer">{{ folder.total_count }} emails</span>
|
||||
{% if folder.pending_count > 0 %}
|
||||
<button
|
||||
class="badge badge-warning cursor-pointer"
|
||||
hx-get="/api/folders/{{ folder.id }}/pending-emails"
|
||||
hx-target="#modal-holder"
|
||||
hx-swap="innerHTML"
|
||||
hx-trigger="click"
|
||||
title="{{ folder.pending_count }} pending emails"
|
||||
>
|
||||
{{ folder.pending_count }} pending
|
||||
</button>
|
||||
{% else %}
|
||||
<span class="badge badge-secondary cursor-pointer" x-tooltip.raw.html="{% if folder.recent_emails %}<table class='text-xs'><tr><th class='text-left pr-2'>Subject</th><th class='text-left'>Date</th></tr>{% for email in folder.recent_emails %}<tr><td class='text-left pr-2 truncate max-w-[150px]'>{{ email.subject }}</td><td class='text-left'>{{ email.date[:10] if email.date else 'N/A' }}</td></tr>{% endfor %}</table>{% else %}No recent emails{% endif %}">{{ folder.pending_count }} pending</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if folder.priority == 1 %}
|
||||
<span class="badge badge-error">High Priority</span>
|
||||
|
||||
41
app/templates/partials/folder_card_destination.html
Normal file
41
app/templates/partials/folder_card_destination.html
Normal file
@@ -0,0 +1,41 @@
|
||||
<div id="folder-{{ folder.id }}" class="card bg-base-100 shadow-xl border border-base-300 hover:shadow-lg">
|
||||
|
||||
<div class="card-body" data-loading-states>
|
||||
<div class="flex justify-between items-start mb-2">
|
||||
<h3 class="text-xl font-bold truncate flex-grow">{{ folder.name }}</h3>
|
||||
<div class="flex space-x-2">
|
||||
<button class="btn btn-sm btn-outline"
|
||||
hx-get="/api/folders/{{ folder.id }}/edit"
|
||||
hx-target="#modal-holder"
|
||||
hx-swap="innerHTML"
|
||||
hx-trigger="click"
|
||||
data-loading-disable
|
||||
>
|
||||
<i class="fas fa-edit" data-loading-class="!hidden"></i>
|
||||
<span class="loading loading-spinner loading-xs hidden" data-loading-class-remove="hidden"></span>
|
||||
</button>
|
||||
<button class="btn btn-sm btn-outline btn-error fade-me-out"
|
||||
hx-delete="/api/folders/{{ folder.id }}"
|
||||
hx-target="#destination-folders-list"
|
||||
hx-swap="innerHTML swap:1s"
|
||||
hx-confirm="Are you sure you want to delete this folder?"
|
||||
data-loading-disable
|
||||
>
|
||||
<i class="fas fa-trash" data-loading-class="!hidden"></i>
|
||||
<span class="loading loading-spinner loading-xs hidden" data-loading-class-remove="hidden"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Email count badge for destination folders -->
|
||||
<div class="flex justify-between items-center mb-2">
|
||||
<div class="flex space-x-1">
|
||||
<span class="badge badge-primary">{{ folder.emails_count }} emails</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-base-200 rounded-box p-4 mb-4">
|
||||
<p class="text-base-content/80">{{ folder.rule_text }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
82
app/templates/partials/folder_card_tidy.html
Normal file
82
app/templates/partials/folder_card_tidy.html
Normal file
@@ -0,0 +1,82 @@
|
||||
<div id="folder-{{ folder.id }}" class="card bg-base-100 shadow-xl border border-base-300 hover:shadow-lg">
|
||||
|
||||
<div class="card-body" data-loading-states>
|
||||
<div class="flex justify-between items-start mb-2">
|
||||
<h3 class="text-xl font-bold truncate flex-grow">{{ folder.name }}</h3>
|
||||
<div class="flex space-x-2">
|
||||
<button class="btn btn-sm btn-outline"
|
||||
hx-get="/api/folders/{{ folder.id }}/edit"
|
||||
hx-target="#modal-holder"
|
||||
hx-swap="innerHTML"
|
||||
hx-trigger="click"
|
||||
data-loading-disable
|
||||
>
|
||||
<i class="fas fa-edit" data-loading-class="!hidden"></i>
|
||||
<span class="loading loading-spinner loading-xs hidden" data-loading-class-remove="hidden"></span>
|
||||
</button>
|
||||
<button class="btn btn-sm btn-outline btn-error fade-me-out"
|
||||
hx-delete="/api/folders/{{ folder.id }}"
|
||||
hx-target="#folders-to-tidy-list"
|
||||
hx-swap="innerHTML swap:1s"
|
||||
hx-confirm="Are you sure you want to delete this folder?"
|
||||
data-loading-disable
|
||||
>
|
||||
<i class="fas fa-trash" data-loading-class="!hidden"></i>
|
||||
<span class="loading loading-spinner loading-xs hidden" data-loading-class-remove="hidden"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Email count badges placed below title but in a separate row -->
|
||||
<div class="flex justify-between items-center mb-2">
|
||||
<div class="flex space-x-1">
|
||||
<span class="badge badge-outline">{{ folder.total_count }} total</span>
|
||||
{% if folder.pending_count > 0 %}
|
||||
<button
|
||||
class="badge badge-warning cursor-pointer"
|
||||
hx-get="/api/folders/{{ folder.id }}/pending-emails"
|
||||
hx-target="#modal-holder"
|
||||
hx-swap="innerHTML"
|
||||
hx-trigger="click"
|
||||
title="{{ folder.pending_count }} pending emails"
|
||||
>
|
||||
{{ folder.pending_count }} pending
|
||||
</button>
|
||||
{% else %}
|
||||
<span class="badge badge-secondary cursor-pointer" x-tooltip.raw.html="{% if folder.recent_emails %}<table class='text-xs'><tr><th class='text-left pr-2'>Subject</th><th class='text-left'>Date</th></tr>{% for email in folder.recent_emails %}<tr><td class='text-left pr-2 truncate max-w-[150px]'>{{ email.subject }}</td><td class='text-left'>{{ email.date[:10] if email.date else 'N/A' }}</td></tr>{% endfor %}</table>{% else %}No recent emails{% endif %}">{{ folder.pending_count }} pending</span>
|
||||
{% endif %}
|
||||
<span class="badge badge-success">{{ folder.total_count - folder.pending_count }} processed</span>
|
||||
</div>
|
||||
{% if folder.priority == 1 %}
|
||||
<span class="badge badge-error">High Priority</span>
|
||||
{% elif folder.priority == -1 %}
|
||||
<span class="badge badge-info">Low Priority</span>
|
||||
{% else %}
|
||||
<span class="badge badge-primary">Normal Priority</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="bg-base-200 rounded-box p-4 mb-4">
|
||||
<p class="text-base-content/80">{{ folder.rule_text }}</p>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between items-center mt-2">
|
||||
<div class="flex items-center space-x-2">
|
||||
<span class="text-xs">Organize:</span>
|
||||
<input
|
||||
type="checkbox"
|
||||
class="toggle toggle-sm toggle-success"
|
||||
{% if folder.organize_enabled %}checked="checked"{% endif %}
|
||||
hx-put="/api/folders/{{ folder.id }}/toggle"
|
||||
hx-target="#folder-{{ folder.id }}"
|
||||
hx-swap="outerHTML"
|
||||
hx-trigger="click"
|
||||
data-loading-disable
|
||||
aria-label="Toggle organize enabled">
|
||||
</input>
|
||||
|
||||
<span class="loading loading-spinner loading-xs hidden" data-loading-class-remove="hidden"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
35
app/templates/partials/folders_to_tidy_section.html
Normal file
35
app/templates/partials/folders_to_tidy_section.html
Normal file
@@ -0,0 +1,35 @@
|
||||
<div class="folders-to-tidy-section mb-8">
|
||||
<div class="section-header bg-base-200 p-4 rounded-t-lg border-b border-base-300">
|
||||
<div class="flex flex-col md:flex-row md:items-center md:justify-between">
|
||||
<div>
|
||||
<h2 class="text-2xl font-bold text-base-content">Folders to Tidy</h2>
|
||||
<p class="text-base-content/70 mt-1">Folders containing emails that need to be processed</p>
|
||||
</div>
|
||||
<button class="btn btn-primary mt-4 md:mt-0" hx-get="/api/folders/new" hx-target="#modal-holder" hx-swap="innerHTML" hx-trigger="click">
|
||||
<i class="fas fa-plus mr-2"></i>Add Tidy Folder
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="folders-to-tidy-list" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-6">
|
||||
{% for folder in tidy_folders %}
|
||||
{% include 'partials/folder_card_tidy.html' %}
|
||||
{% else %}
|
||||
<div class="col-span-full text-center py-12 bg-base-100 rounded-box shadow-lg border border-dashed border-base-300">
|
||||
<div class="text-5xl mb-4 text-warning">
|
||||
<i class="fas fa-inbox"></i>
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold mb-2">No folders to tidy yet</h3>
|
||||
<p class="mb-6 text-base-content/70">Add your first folder to start organizing your emails.</p>
|
||||
<div data-loading-states>
|
||||
<button class="btn btn-primary btn-lg" hx-get="/api/folders/new" hx-target="#modal-holder" hx-swap="innerHTML"
|
||||
hx-trigger="click">
|
||||
<i class="fas fa-plus mr-2" data-loading-class="!hidden"></i>
|
||||
<span data-loading-class="!hidden">Create Folder</span>
|
||||
<span class="loading loading-spinner loading-xs hidden" data-loading-class-remove="hidden"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
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>
|
||||
33
app/templates/partials/pending_emails_updated.html
Normal file
33
app/templates/partials/pending_emails_updated.html
Normal file
@@ -0,0 +1,33 @@
|
||||
<div id="pending-emails-updated" class="alert alert-success 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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
|
||||
<span>Email {{ uid }} has been marked as processed successfully!</span>
|
||||
</div>
|
||||
|
||||
<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">{{ folder.pending_count }}</div>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div class="stat-title">Processed</div>
|
||||
<div class="stat-value text-success">{{ folder.total_count - folder.pending_count }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
hx-get="/api/folders/{{ folder.id }}/pending-emails"
|
||||
hx-target="#modal-holder"
|
||||
hx-swap="innerHTML"
|
||||
>
|
||||
<i class="fas fa-list mr-2"></i>
|
||||
View All Pending Emails
|
||||
</button>
|
||||
</div>
|
||||
Reference in New Issue
Block a user