182 lines
8.1 KiB
TypeScript
182 lines
8.1 KiB
TypeScript
import React from 'react';
|
|
import { EmailTemplate } from '../types';
|
|
import { Plus, Edit, Trash2, FileCode, Search, Database, ArrowRightCircle, Code, CopyPlus, Key } from 'lucide-react';
|
|
import { generateSelectSQL, generateN8nCode, generateTemplateKey } from '../services/storage';
|
|
|
|
interface Props {
|
|
templates: EmailTemplate[];
|
|
onCreate: () => void;
|
|
onEdit: (t: EmailTemplate) => void;
|
|
onClone: (t: EmailTemplate) => void;
|
|
onDelete: (id: string) => void;
|
|
}
|
|
|
|
const TemplateList: React.FC<Props> = ({ templates, onCreate, onEdit, onClone, 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.');
|
|
};
|
|
|
|
const copyTemplateKey = (t: EmailTemplate, e: React.MouseEvent) => {
|
|
e.stopPropagation();
|
|
const key = generateTemplateKey(t.name);
|
|
navigator.clipboard.writeText(key);
|
|
alert(`Template Key '${key}' copied to clipboard!`);
|
|
};
|
|
|
|
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 →
|
|
</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>
|
|
<button
|
|
onClick={(e) => copyTemplateKey(t, e)}
|
|
className="flex items-center gap-1 text-xs font-medium text-slate-600 hover:text-orange-600 px-2 py-1 rounded hover:bg-white border border-transparent hover:border-slate-200 transition-all shadow-sm"
|
|
title="Copy Template Key"
|
|
>
|
|
<Key size={14} />
|
|
Key
|
|
</button>
|
|
</div>
|
|
<div className="flex gap-1">
|
|
<button
|
|
onClick={(e) => { e.stopPropagation(); onClone(t); }}
|
|
className="p-1.5 text-slate-500 hover:text-blue-600 hover:bg-white rounded shadow-sm transition-all"
|
|
title="Clone Template"
|
|
>
|
|
<CopyPlus size={16} />
|
|
</button>
|
|
<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;
|