Update TemplateEditor.tsx
This commit is contained in:
fcarraUniSa
@@ -15,22 +15,22 @@ interface Props {
|
||||
}
|
||||
|
||||
const DEFAULT_HEADER = `<div style="background-color: #f8fafc; padding: 20px; text-align: center;">
|
||||
<h1 style="color: #334155; margin: 0;">My Company</h1>
|
||||
<h1 style="color: #334155; margin: 0;">La Mia Azienda</h1>
|
||||
</div>`;
|
||||
|
||||
const DEFAULT_BODY = `<div style="padding: 20px; color: #334155; font-family: sans-serif;">
|
||||
<p>Gentile {{first_name}},</p>
|
||||
<p>This is a default message body.</p>
|
||||
<p>Questo è un messaggio di default.</p>
|
||||
</div>`;
|
||||
|
||||
const DEFAULT_FOOTER = `<div style="background-color: #f1f5f9; padding: 15px; text-align: center; font-size: 12px; color: #64748b;">
|
||||
<p>© 2024 My Company. All rights reserved.</p>
|
||||
<p>© 2024 La Mia Azienda. Tutti i diritti riservati.</p>
|
||||
</div>`;
|
||||
|
||||
const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
|
||||
const [name, setName] = useState(initialTemplate?.name || 'New Template');
|
||||
const [name, setName] = useState(initialTemplate?.name || 'Nuovo Template');
|
||||
const [description, setDescription] = useState(initialTemplate?.description || '');
|
||||
const [subject, setSubject] = useState(initialTemplate?.subject || 'Welcome to our service');
|
||||
const [subject, setSubject] = useState(initialTemplate?.subject || 'Benvenuti nel nostro servizio');
|
||||
|
||||
const [header, setHeader] = useState(initialTemplate?.header || DEFAULT_HEADER);
|
||||
const [body, setBody] = useState(initialTemplate?.body || DEFAULT_BODY);
|
||||
@@ -67,8 +67,8 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
|
||||
const newKey = generateTemplateKey(name);
|
||||
|
||||
if (!newKey) {
|
||||
setNameError('Template name cannot be empty or symbols only.');
|
||||
alert('Template name cannot be empty.');
|
||||
setNameError('Il nome del template non può essere vuoto o contenere solo simboli.');
|
||||
alert('Il nome del template non può essere vuoto.');
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -83,8 +83,8 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
|
||||
});
|
||||
|
||||
if (isDuplicate) {
|
||||
setNameError('A template with this name already exists.');
|
||||
alert('A template with this name (or resulting ID) already exists. Please choose a unique name.');
|
||||
setNameError('Esiste già un template con questo nome.');
|
||||
alert('Un template con questo nome (o ID risultante) esiste già. Per favore scegli un nome univoco.');
|
||||
setIsSaving(false);
|
||||
return;
|
||||
}
|
||||
@@ -103,7 +103,7 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
|
||||
await saveTemplate(newTemplate);
|
||||
onSave();
|
||||
} catch (e) {
|
||||
alert("Failed to save template. Check server logs.");
|
||||
alert("Impossibile salvare il template. Controlla i log del server.");
|
||||
} finally {
|
||||
setIsSaving(false);
|
||||
}
|
||||
@@ -120,14 +120,14 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
|
||||
setShowAiModal(false);
|
||||
setAiPrompt('');
|
||||
} catch (e) {
|
||||
alert("Error generating content. Please check API Key configuration.");
|
||||
alert("Errore nella generazione del contenuto. Controlla la configurazione della API Key.");
|
||||
} finally {
|
||||
setIsGenerating(false);
|
||||
}
|
||||
};
|
||||
|
||||
const tempTemplateObj = {
|
||||
id: initialTemplate?.id || 'PREVIEW',
|
||||
id: initialTemplate?.id || 'ANTEPRIMA',
|
||||
name,
|
||||
description,
|
||||
subject,
|
||||
@@ -158,6 +158,13 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
|
||||
}
|
||||
};
|
||||
|
||||
// Maps internal tab keys to Italian display names
|
||||
const tabNames: Record<string, string> = {
|
||||
header: 'Testata',
|
||||
body: 'Corpo',
|
||||
footer: 'Piè di pagina'
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-screen bg-slate-50">
|
||||
{/* Top Bar */}
|
||||
@@ -168,7 +175,7 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
|
||||
</button>
|
||||
<div>
|
||||
<h1 className="text-xl font-bold text-slate-800">
|
||||
{initialTemplate ? 'Edit Template' : 'Create Template'}
|
||||
{initialTemplate ? 'Modifica Template' : 'Crea Template'}
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
@@ -178,7 +185,7 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
|
||||
className="flex items-center gap-2 px-4 py-2 text-slate-600 bg-white border border-slate-300 rounded-lg hover:bg-slate-50 font-medium transition-colors"
|
||||
>
|
||||
<Database size={18} />
|
||||
Integration
|
||||
Integrazione
|
||||
</button>
|
||||
<button
|
||||
onClick={handleSave}
|
||||
@@ -186,7 +193,7 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
|
||||
className={`flex items-center gap-2 px-4 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 font-medium transition-colors shadow-sm ${isSaving ? 'opacity-70 cursor-wait' : ''}`}
|
||||
>
|
||||
<Save size={18} />
|
||||
{isSaving ? 'Saving...' : 'Save Template'}
|
||||
{isSaving ? 'Salvataggio...' : 'Salva Template'}
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
@@ -199,25 +206,25 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
|
||||
{/* Metadata */}
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-semibold text-slate-700 mb-1">Template Name</label>
|
||||
<label className="block text-sm font-semibold text-slate-700 mb-1">Nome Template</label>
|
||||
<input
|
||||
type="text"
|
||||
value={name}
|
||||
onChange={e => setName(e.target.value)}
|
||||
className={`w-full px-3 py-2 border rounded-md focus:ring-2 focus:ring-brand-500 outline-none bg-white ${nameError ? 'border-red-500 focus:border-red-500' : 'border-slate-300 focus:border-brand-500'}`}
|
||||
placeholder="e.g., Welcome Email"
|
||||
placeholder="es. Email di Benvenuto"
|
||||
/>
|
||||
{nameError && <p className="text-red-500 text-xs mt-1">{nameError}</p>}
|
||||
<p className="text-xs text-slate-400 mt-1">Must be unique. Used to generate the database key: <span className="font-mono bg-slate-100 px-1">{generateTemplateKey(name) || '...'}</span></p>
|
||||
<p className="text-xs text-slate-400 mt-1">Deve essere univoco. Usato per generare la chiave DB: <span className="font-mono bg-slate-100 px-1">{generateTemplateKey(name) || '...'}</span></p>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-semibold text-slate-700 mb-1">Email Subject</label>
|
||||
<label className="block text-sm font-semibold text-slate-700 mb-1">Oggetto Email</label>
|
||||
<input
|
||||
type="text"
|
||||
value={subject}
|
||||
onChange={e => setSubject(e.target.value)}
|
||||
className="w-full px-3 py-2 border border-slate-300 rounded-md focus:ring-2 focus:ring-brand-500 focus:border-brand-500 outline-none bg-white"
|
||||
placeholder="Subject line... (supports {{placeholders}})"
|
||||
placeholder="Oggetto... (supporta {{placeholder}})"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -225,11 +232,11 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
|
||||
{/* Variable Manager */}
|
||||
<div className="bg-slate-50 p-4 rounded-lg border border-slate-200">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-xs font-bold text-slate-500 uppercase tracking-wider">Active Variables</span>
|
||||
<span className="text-xs text-slate-400">Auto-detected from text</span>
|
||||
<span className="text-xs font-bold text-slate-500 uppercase tracking-wider">Variabili Attive</span>
|
||||
<span className="text-xs text-slate-400">Rilevate automaticamente dal testo</span>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{detectedVars.length === 0 && <span className="text-sm text-slate-400 italic">No variables detected yet. Type {'{{name}}'} to add one.</span>}
|
||||
{detectedVars.length === 0 && <span className="text-sm text-slate-400 italic">Nessuna variabile rilevata. Scrivi {'{{nome}}'} per aggiungerne una.</span>}
|
||||
{detectedVars.map(v => (
|
||||
<span key={v} className="px-2 py-1 bg-brand-100 text-brand-700 text-sm rounded border border-brand-200 font-mono">
|
||||
{`{{${v}}}`}
|
||||
@@ -250,7 +257,7 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
|
||||
: 'text-slate-500 hover:text-slate-700'
|
||||
}`}
|
||||
>
|
||||
{tab}
|
||||
{tabNames[tab]}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
@@ -258,14 +265,14 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
|
||||
{/* Editor Area */}
|
||||
<div className="relative">
|
||||
<div className="flex justify-between items-center mb-2">
|
||||
<label className="text-sm font-semibold text-slate-700">Content Editor</label>
|
||||
<label className="text-sm font-semibold text-slate-700">Editor Contenuti</label>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={() => setShowAiModal(true)}
|
||||
className="text-xs flex items-center gap-1 text-purple-600 hover:text-purple-700 font-medium bg-purple-50 px-2 py-1 rounded"
|
||||
>
|
||||
<Wand2 size={14} />
|
||||
Generate with AI
|
||||
Genera con IA
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -275,13 +282,13 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
|
||||
key={activeTab} // Force remount on tab change to sync contentEditable
|
||||
value={getActiveContent()}
|
||||
onChange={setActiveContent}
|
||||
placeholder={`Design your ${activeTab} here...`}
|
||||
placeholder={`Crea qui la sezione ${tabNames[activeTab]}...`}
|
||||
className="h-full shadow-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<p className="mt-2 text-xs text-slate-500">
|
||||
Use the "Variable" button in the toolbar to insert placeholders like {'{{name}}'}.
|
||||
Usa il pulsante "Variabile" nella toolbar per inserire placeholder come {'{{nome}}'}.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -291,10 +298,10 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
|
||||
<div className="w-1/2 bg-slate-100 flex flex-col overflow-hidden">
|
||||
<div className="p-3 bg-white border-b border-slate-200 flex justify-between items-center shadow-sm z-10 shrink-0">
|
||||
<span className="font-semibold text-slate-600 flex items-center gap-2">
|
||||
<Eye size={18} /> Live Preview
|
||||
<Eye size={18} /> Anteprima Live
|
||||
</span>
|
||||
<div className="text-xs text-slate-400">
|
||||
Renders as standard HTML
|
||||
Renderizzato come HTML standard
|
||||
</div>
|
||||
</div>
|
||||
{/* Scrollable container: flex-1 ensures it takes available space, overflow-y-auto enables scrolling */}
|
||||
@@ -303,7 +310,7 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
|
||||
<div className="w-full max-w-2xl bg-white shadow-xl rounded-lg overflow-hidden min-h-[600px] flex flex-col mx-auto">
|
||||
{/* Simulate Subject Line in Preview */}
|
||||
<div className="bg-slate-50 border-b border-slate-100 p-4">
|
||||
<span className="text-xs font-bold text-slate-400 uppercase">Subject:</span>
|
||||
<span className="text-xs font-bold text-slate-400 uppercase">Oggetto:</span>
|
||||
<p className="text-sm font-medium text-slate-800">{subject.replace(/\{\{([\w\d_-]+)\}\}/g, (match, p1) => `<span class="bg-yellow-100 text-yellow-800 px-1 rounded">${match}</span>`)}</p>
|
||||
</div>
|
||||
|
||||
@@ -323,7 +330,7 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<h3 className="text-lg font-bold text-slate-800 flex items-center gap-2">
|
||||
<Database size={20} className="text-brand-600"/>
|
||||
Integration Details
|
||||
Dettagli Integrazione
|
||||
</h3>
|
||||
<button onClick={() => setShowSqlModal(false)} className="text-slate-400 hover:text-slate-600">
|
||||
<span className="text-2xl">×</span>
|
||||
@@ -334,7 +341,7 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
|
||||
{/* INSERT Section */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label className="text-xs font-bold text-slate-500 uppercase tracking-wider mb-2 block">1. Setup (Run once in DB)</label>
|
||||
<label className="text-xs font-bold text-slate-500 uppercase tracking-wider mb-2 block">1. Setup (Esegui una volta nel DB)</label>
|
||||
<div className="relative">
|
||||
<pre className="bg-slate-900 text-slate-100 p-4 rounded-lg overflow-x-auto text-sm font-mono custom-scrollbar h-40">
|
||||
{currentInsertSql}
|
||||
@@ -342,7 +349,7 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
|
||||
<button
|
||||
onClick={() => navigator.clipboard.writeText(currentInsertSql)}
|
||||
className="absolute top-2 right-2 p-2 bg-slate-700 text-white rounded hover:bg-slate-600"
|
||||
title="Copy INSERT SQL"
|
||||
title="Copia SQL INSERT"
|
||||
>
|
||||
<Copy size={16} />
|
||||
</button>
|
||||
@@ -350,7 +357,7 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="text-xs font-bold text-slate-500 uppercase tracking-wider mb-2 block">2. Fetch (n8n SQL Node)</label>
|
||||
<label className="text-xs font-bold text-slate-500 uppercase tracking-wider mb-2 block">2. Recupero (Nodo SQL n8n)</label>
|
||||
<div className="relative">
|
||||
<pre className="bg-slate-800 text-slate-50 p-4 rounded-lg overflow-x-auto text-sm font-mono custom-scrollbar h-40">
|
||||
{currentSelectSql}
|
||||
@@ -358,7 +365,7 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
|
||||
<button
|
||||
onClick={() => navigator.clipboard.writeText(currentSelectSql)}
|
||||
className="absolute top-2 right-2 p-2 bg-slate-600 text-white rounded hover:bg-slate-500"
|
||||
title="Copy SELECT SQL"
|
||||
title="Copia SQL SELECT"
|
||||
>
|
||||
<Copy size={16} />
|
||||
</button>
|
||||
@@ -370,7 +377,7 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
|
||||
<div>
|
||||
<label className="text-xs font-bold text-purple-600 uppercase tracking-wider mb-2 flex items-center gap-2">
|
||||
<Code size={16} />
|
||||
3. Populate (n8n Code Node)
|
||||
3. Popolamento (Nodo Codice n8n)
|
||||
</label>
|
||||
<div className="relative">
|
||||
<pre className="bg-slate-50 border border-slate-200 text-slate-700 p-4 rounded-lg overflow-x-auto text-sm font-mono custom-scrollbar max-h-60">
|
||||
@@ -379,13 +386,13 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
|
||||
<button
|
||||
onClick={() => navigator.clipboard.writeText(currentN8nCode)}
|
||||
className="absolute top-2 right-2 p-2 bg-white border border-slate-200 text-slate-600 rounded hover:bg-slate-50 shadow-sm"
|
||||
title="Copy JS Code"
|
||||
title="Copia Codice JS"
|
||||
>
|
||||
<Copy size={16} />
|
||||
</button>
|
||||
</div>
|
||||
<p className="text-xs text-slate-500 mt-2">
|
||||
Paste this into a <strong>Code Node</strong> connected after your SQL node. Replace <code>REPLACE_WITH_VALUE</code> with your actual data variables (e.g. <code>$('NodeName').item.json.name</code>).
|
||||
Incolla questo codice in un <strong>Nodo Code</strong> collegato dopo il tuo nodo SQL. Sostituisci <code>REPLACE_WITH_VALUE</code> con le variabili reali (es. <code>$('NodeName').item.json.name</code>).
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -399,15 +406,15 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
|
||||
<div className="bg-white rounded-xl shadow-2xl w-full max-w-lg p-6">
|
||||
<h3 className="text-lg font-bold text-slate-800 mb-2 flex items-center gap-2">
|
||||
<Wand2 className="text-purple-600"/>
|
||||
AI Content Generator
|
||||
Generatore Contenuti IA
|
||||
</h3>
|
||||
<p className="text-sm text-slate-600 mb-4">
|
||||
Describe what you want for the <strong>{activeTab}</strong> section.
|
||||
The AI will generate HTML code with placeholders.
|
||||
Descrivi cosa vuoi per la sezione <strong>{tabNames[activeTab]}</strong>.
|
||||
L'IA genererà il codice HTML con i placeholder necessari.
|
||||
</p>
|
||||
<textarea
|
||||
className="w-full h-32 border border-slate-300 rounded p-3 text-sm focus:ring-2 focus:ring-purple-500 outline-none mb-4"
|
||||
placeholder="e.g., Write a polite notification that the user's password has been changed successfully. Include a placeholder for the user's name."
|
||||
placeholder="es. Scrivi una notifica gentile che avvisi l'utente del cambio password avvenuto con successo. Includi un placeholder per il nome utente."
|
||||
value={aiPrompt}
|
||||
onChange={(e) => setAiPrompt(e.target.value)}
|
||||
/>
|
||||
@@ -416,20 +423,20 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
|
||||
onClick={() => setShowAiModal(false)}
|
||||
className="px-4 py-2 text-slate-600 hover:bg-slate-100 rounded"
|
||||
>
|
||||
Cancel
|
||||
Annulla
|
||||
</button>
|
||||
<button
|
||||
onClick={handleAiGenerate}
|
||||
disabled={isGenerating || !aiPrompt}
|
||||
className={`px-4 py-2 bg-purple-600 text-white rounded hover:bg-purple-700 flex items-center gap-2 ${isGenerating ? 'opacity-70' : ''}`}
|
||||
>
|
||||
{isGenerating ? 'Generating...' : 'Generate HTML'}
|
||||
{isGenerating ? 'Generazione...' : 'Genera HTML'}
|
||||
{!isGenerating && <Wand2 size={16} />}
|
||||
</button>
|
||||
</div>
|
||||
{!process.env.API_KEY && (
|
||||
<p className="mt-3 text-xs text-red-500">
|
||||
Note: API_KEY not detected in environment. This feature requires a Gemini API key.
|
||||
Nota: API_KEY non rilevata nell'ambiente. Questa funzione richiede una chiave API Gemini.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user