fcarra/EmailManager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add files via upload

Browse Source
This commit is contained in:
fcarraUniSa
2025-12-10 12:10:20 +01:00
committed by GitHub
parent 09e9174e4b
commit 8e7afde9e3
16 changed files with 1453 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

158
components/TemplateList.tsx Normal file
View File

@@ -0,0 +1,158 @@
import React from 'react';
import { EmailTemplate } from '../types';
import { Plus, Edit, Trash2, FileCode, Search, Database, ArrowRightCircle, Code } from 'lucide-react';
import { generateSelectSQL, generateN8nCode } from '../services/storage';
interface Props {
templates: EmailTemplate[];
onCreate: () => void;
onEdit: (t: EmailTemplate) => void;
onDelete: (id: string) => void;
}
const TemplateList: React.FC<Props> = ({ templates, onCreate, onEdit, onDelete }) => {
const [search, setSearch] = React.useState('');
const filtered = templates.filter(t =>
t.name.toLowerCase().includes(search.toLowerCase()) ||
t.subject.toLowerCase().includes(search.toLowerCase())
);
const copySelectSQL = (t: EmailTemplate, e: React.MouseEvent) => {
e.stopPropagation();
const sql = generateSelectSQL(t);
navigator.clipboard.writeText(sql);
alert('SELECT query copied! Use this in your n8n SQL node.');
};
const copyN8nCode = (t: EmailTemplate, e: React.MouseEvent) => {
e.stopPropagation();
const code = generateN8nCode(t);
navigator.clipboard.writeText(code);
alert('JS Code copied! Paste this into your n8n Code node.');
};
return (
<div className="p-8 max-w-7xl mx-auto h-screen flex flex-col">
<div className="flex justify-between items-center mb-8">
<div>
<h1 className="text-3xl font-bold text-slate-900 tracking-tight">Email Templates</h1>
<p className="text-slate-500 mt-1">Manage HTML templates for your n8n workflows</p>
</div>
<button
onClick={onCreate}
className="bg-brand-600 hover:bg-brand-700 text-white px-5 py-2.5 rounded-lg font-medium flex items-center gap-2 shadow-sm transition-all active:scale-95"
>
<Plus size={20} />
New Template
</button>
</div>
<div className="relative mb-6">
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<Search className="h-5 w-5 text-slate-400" />
</div>
<input
type="text"
placeholder="Search templates..."
value={search}
onChange={(e) => setSearch(e.target.value)}
className="pl-10 w-full md:w-96 px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-brand-500 focus:border-brand-500 outline-none text-slate-700 bg-white shadow-sm"
/>
</div>
{filtered.length === 0 ? (
<div className="flex-1 flex flex-col items-center justify-center border-2 border-dashed border-slate-200 rounded-2xl bg-slate-50">
<div className="bg-white p-4 rounded-full shadow-sm mb-4">
<FileCode className="h-8 w-8 text-slate-400" />
</div>
<h3 className="text-lg font-medium text-slate-900">No templates found</h3>
<p className="text-slate-500 mt-1 max-w-sm text-center">Get started by creating your first HTML email template for automation.</p>
<button
onClick={onCreate}
className="mt-6 text-brand-600 font-medium hover:text-brand-800"
>
Create one now &rarr;
</button>
</div>
) : (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 overflow-y-auto pb-8 custom-scrollbar">
{filtered.map(t => (
<div
key={t.id}
onClick={() => onEdit(t)}
className="bg-white rounded-xl border border-slate-200 shadow-sm hover:shadow-md transition-shadow cursor-pointer group flex flex-col h-60"
>
<div className="p-5 flex-1">
<div className="flex justify-between items-start mb-2">
<h3 className="font-bold text-lg text-slate-800 group-hover:text-brand-600 transition-colors line-clamp-1" title={t.name}>
{t.name}
</h3>
<span className="text-xs bg-slate-100 text-slate-500 px-2 py-1 rounded">
{new Date(t.updatedAt).toLocaleDateString()}
</span>
</div>
<p className="text-sm text-slate-500 line-clamp-2 mb-3 h-10">
{t.description || 'No description provided.'}
</p>
<div className="text-xs text-slate-400 mb-1">Subject:</div>
<div className="text-sm text-slate-700 font-medium bg-slate-50 p-2 rounded truncate border border-slate-100">
{t.subject}
</div>
<div className="mt-3 flex flex-wrap gap-1">
{t.variables.slice(0, 3).map(v => (
<span key={v} className="text-[10px] bg-brand-50 text-brand-600 px-1.5 py-0.5 rounded border border-brand-100">
{/* Explicitly building the string to avoid rendering issues */}
{'{{' + v + '}}'}
</span>
))}
{t.variables.length > 3 && (
<span className="text-[10px] text-slate-400 px-1 py-0.5">+ {t.variables.length - 3} more</span>
)}
</div>
</div>
<div className="border-t border-slate-100 p-3 flex justify-between bg-slate-50/50 rounded-b-xl gap-2">
<div className="flex gap-1">
<button
onClick={(e) => copySelectSQL(t, e)}
className="flex items-center gap-1 text-xs font-medium text-slate-600 hover:text-brand-600 px-2 py-1 rounded hover:bg-white border border-transparent hover:border-slate-200 transition-all shadow-sm"
title="Copy SELECT query"
>
<ArrowRightCircle size={14} />
SQL
</button>
<button
onClick={(e) => copyN8nCode(t, e)}
className="flex items-center gap-1 text-xs font-medium text-slate-600 hover:text-purple-600 px-2 py-1 rounded hover:bg-white border border-transparent hover:border-slate-200 transition-all shadow-sm"
title="Copy n8n Code Node JS"
>
<Code size={14} />
JS
</button>
</div>
<div className="flex gap-1">
<button
onClick={(e) => { e.stopPropagation(); onEdit(t); }}
className="p-1.5 text-slate-500 hover:text-brand-600 hover:bg-white rounded shadow-sm transition-all"
title="Edit"
>
<Edit size={16} />
</button>
<button
onClick={(e) => { e.stopPropagation(); onDelete(t.id); }}
className="p-1.5 text-slate-500 hover:text-red-600 hover:bg-white rounded shadow-sm transition-all"
title="Delete"
>
<Trash2 size={16} />
</button>
</div>
</div>
</div>
))}
</div>
)}
</div>
);
};
export default TemplateList;