suport delete

This commit is contained in:
Bryce
2025-08-03 11:17:13 -07:00
parent b0952aee58
commit 4c2333a110
11 changed files with 148 additions and 102 deletions

View File

@@ -2,6 +2,7 @@ from flask import Blueprint, render_template, request
from app import db
from app.models import Folder, User
import uuid
import logging
main = Blueprint('main', __name__)
@@ -52,6 +53,37 @@ def add_folder():
return render_template('partials/folders_list.html', folders=folders)
except Exception as e:
# Print unhandled exceptions to the console as required
logging.exception("Error adding folder: %s", e)
db.session.rollback()
# Return the folders list unchanged
folders = Folder.query.filter_by(user_id=MOCK_USER_ID).all()
return render_template('partials/folders_list.html', folders=folders)
@main.route('/api/folders/<folder_id>', methods=['DELETE'])
def delete_folder(folder_id):
try:
# Find the folder by ID
folder = Folder.query.filter_by(id=folder_id, user_id=MOCK_USER_ID).first()
if not folder:
# Folder not found
folders = Folder.query.filter_by(user_id=MOCK_USER_ID).all()
return render_template('partials/folders_list.html', folders=folders)
# Delete the folder
db.session.delete(folder)
db.session.commit()
# Get updated list of folders
folders = Folder.query.filter_by(user_id=MOCK_USER_ID).all()
# Return the updated folders list HTML
return render_template('partials/folders_list.html', folders=folders)
except Exception as e:
# Print unhandled exceptions to the console as required
logging.exception("Error deleting folder: %s", e)
db.session.rollback()
# Return the folders list unchanged
folders = Folder.query.filter_by(user_id=MOCK_USER_ID).all()

View File

@@ -6,9 +6,9 @@
<title>Email Organizer - Prototype</title>
<script src="https://unpkg.com/htmx.org@1.9.12"></script>
<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link href="https://cdn.jsdelivr.net/npm/daisyui@5/themes.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script>
tailwind.config = {
theme: {
@@ -39,58 +39,7 @@
background-color: #1E293B; /* surface */
border: 1px solid #334155; /* slate 700 */
}
.btn {
padding: 0.5rem 1rem;
border-radius: 0.375rem;
font-weight: 500;
transition: all 0.2s ease;
}
.btn-primary {
background-color: #8B5CF6; /* primary */
color: white;
}
.btn-primary:hover {
background-color: #7C3AED; /* primary darker */
}
.btn-outline {
background-color: transparent;
border: 1px solid #334155; /* slate 700 */
color: #F1F5F9; /* text */
}
.btn-outline:hover {
background-color: #334155; /* slate 700 */
}
.btn-error {
color: #F87171; /* red 400 */
}
.btn-error:hover {
background-color: #7F1D1D; /* red 900 */
}
.input, .textarea {
background-color: #0F172A; /* background */
border: 1px solid #334155; /* slate 700 */
border-radius: 0.375rem;
color: #F1F5F9; /* text */
padding: 0.5rem;
}
.input:focus, .textarea:focus {
border-color: #8B5CF6; /* primary */
box-shadow: 0 0 0 1px #8B5CF6; /* primary */
outline: none;
}
.nav-item {
padding: 0.75rem 1rem;
border-radius: 0.375rem;
margin-bottom: 0.25rem;
transition: all 0.2s ease;
}
.nav-item:hover {
background-color: #334155; /* slate 700 */
}
.nav-item.active {
background-color: #8B5CF6; /* primary */
color: white;
}
/* Using DaisyUI classes instead of custom CSS */
.user-dropdown {
background-color: #1E293B; /* surface */
border: 1px solid #334155; /* slate 700 */
@@ -107,7 +56,7 @@
}
</style>
</head>
<body class="min-h-screen flex">
<body class="min-h-screen flex" x-data @open-add-folder-modal.window="document.getElementById('add-folder-modal').showModal()">
<!-- Sidebar -->
<div class="sidebar w-64 min-h-screen p-4 flex flex-col">
<div class="mb-8">
@@ -118,33 +67,45 @@
<p class="text-secondary text-sm mt-1">AI-powered email organization</p>
</div>
<nav class="flex-grow">
<div class="nav-item active">
<i class="fas fa-folder mr-3"></i>
Folders
<nav class="flex-grow menu bg-transparent">
<div class="active">
<a class="btn btn-ghost justify-start">
<i class="fas fa-folder mr-3"></i>
Folders
</a>
</div>
<div class="nav-item">
<i class="fas fa-inbox mr-3"></i>
Inbox
<div>
<a class="btn btn-ghost justify-start">
<i class="fas fa-inbox mr-3"></i>
Inbox
</a>
</div>
<div class="nav-item">
<i class="fas fa-cog mr-3"></i>
Settings
<div>
<a class="btn btn-ghost justify-start">
<i class="fas fa-cog mr-3"></i>
Settings
</a>
</div>
<div class="nav-item">
<i class="fas fa-chart-bar mr-3"></i>
Analytics
<div>
<a class="btn btn-ghost justify-start">
<i class="fas fa-chart-bar mr-3"></i>
Analytics
</a>
</div>
<div class="nav-item">
<i class="fas fa-question-circle mr-3"></i>
Help
<div>
<a class="btn btn-ghost justify-start">
<i class="fas fa-question-circle mr-3"></i>
Help
</a>
</div>
</nav>
<div class="mt-auto pt-4 border-t border-slate-700">
<div class="nav-item">
<i class="fas fa-sign-out-alt mr-3"></i>
Logout
<div>
<a class="btn btn-ghost justify-start">
<i class="fas fa-sign-out-alt mr-3"></i>
Logout
</a>
</div>
</div>
</div>
@@ -164,8 +125,8 @@
<span class="notification-badge absolute top-0 right-0">3</span>
</button>
<div class="relative">
<button id="user-menu-button" class="flex items-center space-x-2 p-2 rounded-lg hover:bg-slate-700">
<div class="relative" x-data="{ open: false }" @click.outside="open = false">
<button id="user-menu-button" class="flex items-center space-x-2 p-2 rounded-lg hover:bg-slate-700" @click="open = !open">
<div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center">
<span class="font-semibold">U</span>
</div>
@@ -174,7 +135,7 @@
</button>
<!-- User Dropdown -->
<div id="user-dropdown" class="user-dropdown absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 hidden">
<div id="user-dropdown" class="user-dropdown absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1" x-show="open">
<a href="#" class="block px-4 py-2 text-sm hover:bg-slate-700">Profile</a>
<a href="#" class="block px-4 py-2 text-sm hover:bg-slate-700">Settings</a>
<a href="#" class="block px-4 py-2 text-sm hover:bg-slate-700">Logout</a>
@@ -190,7 +151,7 @@
<h2 class="text-2xl font-semibold">Email Folders</h2>
<p class="text-secondary">Create and manage your email organization rules</p>
</div>
<button class="btn btn-primary flex items-center" onclick="document.getElementById('add-folder-modal').showModal()">
<button class="btn btn-primary" onclick="document.getElementById('add-folder-modal').showModal()">
<i class="fas fa-plus mr-2"></i>
Add Folder
</button>
@@ -204,20 +165,20 @@
<!-- Add Folder Modal -->
<dialog id="add-folder-modal" class="modal">
<div class="modal-box card">
<div class="modal-box">
<h3 class="font-bold text-lg mb-4">Add New Folder</h3>
<form id="add-folder-form" hx-post="/api/folders" hx-target="#folders-list" hx-swap="innerHTML" hx-on:htmx:after-request="document.getElementById('add-folder-modal').close(); document.getElementById('add-folder-form').reset();">
<div class="mb-4">
<label for="folder-name" class="block text-sm font-medium mb-1">Name</label>
<input type="text" id="folder-name" name="name" class="input w-full" placeholder="e.g., Work, Personal, Newsletters" required>
<input type="text" id="folder-name" name="name" class="input input-bordered w-full" placeholder="e.g., Work, Personal, Newsletters" required>
</div>
<div class="mb-4">
<label for="folder-rule" class="block text-sm font-medium mb-1">Rule (Natural Language)</label>
<textarea id="folder-rule" name="rule_text" class="textarea w-full h-24" placeholder="e.g., Move emails from 'newsletter@company.com' to this folder" required></textarea>
<textarea id="folder-rule" name="rule_text" class="textarea textarea-bordered w-full h-24" placeholder="e.g., Move emails from 'newsletter@company.com' to this folder" required></textarea>
</div>
<div class="mb-4">
<label for="folder-priority" class="block text-sm font-medium mb-1">Priority</label>
<select id="folder-priority" name="priority" class="input w-full">
<select id="folder-priority" name="priority" class="select select-bordered w-full">
<option value="1">High</option>
<option value="0" selected>Normal</option>
<option value="-1">Low</option>
@@ -231,21 +192,5 @@
</div>
</dialog>
<script>
// User dropdown toggle
document.getElementById('user-menu-button').addEventListener('click', function() {
const dropdown = document.getElementById('user-dropdown');
dropdown.classList.toggle('hidden');
});
// Close dropdown when clicking outside
document.addEventListener('click', function(event) {
const dropdown = document.getElementById('user-dropdown');
const button = document.getElementById('user-menu-button');
if (!button.contains(event.target) && !dropdown.contains(event.target)) {
dropdown.classList.add('hidden');
}
});
</script>
</body>
</html>
</html>

View File

@@ -7,7 +7,11 @@
<button class="p-2 rounded-full hover:bg-slate-700">
<i class="fas fa-edit"></i>
</button>
<button class="p-2 rounded-full hover:bg-slate-700 text-red-400">
<button class="p-2 rounded-full hover:bg-slate-700 text-red-400"
hx-delete="/api/folders/{{ folder.id }}"
hx-target="#folders-list"
hx-swap="innerHTML"
hx-confirm="Are you sure you want to delete this folder?">
<i class="fas fa-trash"></i>
</button>
</div>
@@ -25,7 +29,7 @@
</div>
<h3 class="text-xl font-semibold mb-2">No folders yet</h3>
<p class="text-secondary mb-4">Add your first folder to get started organizing your emails.</p>
<button class="btn btn-primary" onclick="document.getElementById('add-folder-modal').showModal()">
<button class="btn btn-primary" @click="$dispatch('open-add-folder-modal')">
<i class="fas fa-plus mr-2"></i>
Create Folder
</button>