Update TemplateEditor.tsx
This commit is contained in:
fcarraUniSa
@@ -1,3 +1,4 @@
|
||||
|
||||
import React, { useState, useEffect, useCallback } from 'react';
|
||||
import { EmailTemplate } from '../types';
|
||||
import { saveTemplate, generateSQL, generateSelectSQL, getTemplates, generateTemplateKey, generateN8nCode } from '../services/storage';
|
||||
@@ -14,6 +15,18 @@ interface Props {
|
||||
onSave: () => void;
|
||||
}
|
||||
|
||||
// Fallback for crypto.randomUUID in non-secure (HTTP) contexts
|
||||
const generateUUID = () => {
|
||||
if (typeof crypto !== 'undefined' && crypto.randomUUID) {
|
||||
return crypto.randomUUID();
|
||||
}
|
||||
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
|
||||
const r = Math.random() * 16 | 0;
|
||||
const v = c === 'x' ? r : (r & 0x3 | 0x8);
|
||||
return v.toString(16);
|
||||
});
|
||||
};
|
||||
|
||||
const DEFAULT_HEADER = `<div style="background-color: #f8fafc; padding: 20px; text-align: center;">
|
||||
<h1 style="color: #334155; margin: 0;">La Mia Azienda</h1>
|
||||
</div>`;
|
||||
@@ -45,7 +58,6 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
|
||||
const [showAiModal, setShowAiModal] = useState(false);
|
||||
const [nameError, setNameError] = useState('');
|
||||
|
||||
// Variable detection logic
|
||||
const detectVariables = useCallback(() => {
|
||||
const regex = /\{\{([\w\d_-]+)\}\}/g;
|
||||
const allText = `${subject} ${header} ${body} ${footer}`;
|
||||
@@ -58,7 +70,6 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
|
||||
detectVariables();
|
||||
}, [detectVariables]);
|
||||
|
||||
// Clear name error when typing
|
||||
useEffect(() => {
|
||||
if (nameError) setNameError('');
|
||||
}, [name]);
|
||||
@@ -68,29 +79,35 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
|
||||
|
||||
if (!newKey) {
|
||||
setNameError('Il nome del template non può essere vuoto o contenere solo simboli.');
|
||||
alert('Il nome del template non può essere vuoto.');
|
||||
return;
|
||||
}
|
||||
|
||||
setIsSaving(true);
|
||||
try {
|
||||
console.log("Inizio processo di salvataggio per:", name);
|
||||
|
||||
// Check for duplicates
|
||||
const allTemplates = await getTemplates();
|
||||
let allTemplates: EmailTemplate[] = [];
|
||||
try {
|
||||
allTemplates = await getTemplates();
|
||||
} catch (err) {
|
||||
console.error("Errore durante il recupero dei template esistenti:", err);
|
||||
// Non blocchiamo necessariamente, ma avvisiamo
|
||||
}
|
||||
|
||||
const isDuplicate = allTemplates.some(t => {
|
||||
// Exclude current template if we are editing
|
||||
if (initialTemplate && t.id === initialTemplate.id) return false;
|
||||
return generateTemplateKey(t.name) === newKey;
|
||||
});
|
||||
|
||||
if (isDuplicate) {
|
||||
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;
|
||||
}
|
||||
|
||||
const newTemplate: EmailTemplate = {
|
||||
id: initialTemplate?.id || crypto.randomUUID(),
|
||||
id: initialTemplate?.id || generateUUID(),
|
||||
name,
|
||||
description,
|
||||
subject,
|
||||
@@ -100,10 +117,14 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
|
||||
variables: detectedVars,
|
||||
updatedAt: new Date().toISOString()
|
||||
};
|
||||
|
||||
console.log("Invio dati al server...", newTemplate);
|
||||
await saveTemplate(newTemplate);
|
||||
console.log("Salvataggio completato con successo");
|
||||
onSave();
|
||||
} catch (e) {
|
||||
alert("Impossibile salvare il template. Controlla i log del server.");
|
||||
} catch (e: any) {
|
||||
console.error("ERRORE SALVATAGGIO:", e);
|
||||
alert(`Errore: ${e.message || 'Impossibile salvare il template'}`);
|
||||
} finally {
|
||||
setIsSaving(false);
|
||||
}
|
||||
@@ -158,7 +179,6 @@ 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',
|
||||
@@ -167,7 +187,6 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-screen bg-slate-50">
|
||||
{/* Top Bar */}
|
||||
<header className="bg-white border-b border-slate-200 px-6 py-4 flex items-center justify-between sticky top-0 z-20 shrink-0">
|
||||
<div className="flex items-center gap-4">
|
||||
<button onClick={onBack} className="p-2 hover:bg-slate-100 rounded-full text-slate-500">
|
||||
@@ -199,11 +218,8 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
|
||||
</header>
|
||||
|
||||
<div className="flex flex-1 overflow-hidden">
|
||||
{/* Left: Inputs */}
|
||||
<div className="w-1/2 flex flex-col border-r border-slate-200 bg-white overflow-y-auto custom-scrollbar">
|
||||
|
||||
<div className="p-6 space-y-6">
|
||||
{/* Metadata */}
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-semibold text-slate-700 mb-1">Nome Template</label>
|
||||
@@ -241,7 +257,6 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 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">Variabili Attive</span>
|
||||
@@ -257,7 +272,6 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tabs */}
|
||||
<div className="flex border-b border-slate-200">
|
||||
{(['header', 'body', 'footer'] as const).map((tab) => (
|
||||
<button
|
||||
@@ -274,7 +288,6 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Editor Area */}
|
||||
<div className="relative">
|
||||
<div className="flex justify-between items-center mb-2">
|
||||
<label className="text-sm font-semibold text-slate-700">Editor Contenuti</label>
|
||||
@@ -291,7 +304,7 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
|
||||
|
||||
<div className="h-[400px]">
|
||||
<RichTextEditor
|
||||
key={activeTab} // Force remount on tab change to sync contentEditable
|
||||
key={activeTab}
|
||||
value={getActiveContent()}
|
||||
onChange={setActiveContent}
|
||||
placeholder={`Crea qui la sezione ${tabNames[activeTab]}...`}
|
||||
@@ -306,7 +319,6 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right: Live Preview */}
|
||||
<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">
|
||||
@@ -316,17 +328,13 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
|
||||
Renderizzato come HTML standard
|
||||
</div>
|
||||
</div>
|
||||
{/* Scrollable container: flex-1 ensures it takes available space, overflow-y-auto enables scrolling */}
|
||||
<div className="flex-1 p-8 overflow-y-auto custom-scrollbar">
|
||||
{/* mx-auto centers the card without using flexbox on the parent which can cause scroll issues */}
|
||||
<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">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>
|
||||
|
||||
{/* Email Content */}
|
||||
<div dangerouslySetInnerHTML={{ __html: header }} />
|
||||
<div dangerouslySetInnerHTML={{ __html: body }} className="flex-1" />
|
||||
<div dangerouslySetInnerHTML={{ __html: footer }} />
|
||||
@@ -335,7 +343,6 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* SQL Modal */}
|
||||
{showSqlModal && (
|
||||
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
|
||||
<div className="bg-white rounded-xl shadow-2xl w-full max-w-4xl p-6 flex flex-col max-h-[90vh]">
|
||||
@@ -350,7 +357,6 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
|
||||
</div>
|
||||
|
||||
<div className="space-y-8 overflow-y-auto px-1 pb-4">
|
||||
{/* 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 (Esegui una volta nel DB)</label>
|
||||
@@ -385,7 +391,6 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* n8n Code Section */}
|
||||
<div>
|
||||
<label className="text-xs font-bold text-purple-600 uppercase tracking-wider mb-2 flex items-center gap-2">
|
||||
<Code size={16} />
|
||||
@@ -412,7 +417,6 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* AI Modal */}
|
||||
{showAiModal && (
|
||||
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
|
||||
<div className="bg-white rounded-xl shadow-2xl w-full max-w-lg p-6">
|
||||
@@ -446,11 +450,6 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
|
||||
{!isGenerating && <Wand2 size={16} />}
|
||||
</button>
|
||||
</div>
|
||||
{!process.env.API_KEY && (
|
||||
<p className="mt-3 text-xs text-red-500">
|
||||
Nota: API_KEY non rilevata nell'ambiente. Questa funzione richiede una chiave API Gemini.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user