From 6caaa06576cd58fb5b855414a9b4b7d4f3e5ab7b Mon Sep 17 00:00:00 2001 From: fcarraUniSa Date: Thu, 11 Dec 2025 14:09:18 +0100 Subject: [PATCH] Update TemplateList.tsx --- components/TemplateList.tsx | 183 ++++++++++++++++++++++++++++++------ 1 file changed, 152 insertions(+), 31 deletions(-) diff --git a/components/TemplateList.tsx b/components/TemplateList.tsx index 5f879e8..fa83114 100644 --- a/components/TemplateList.tsx +++ b/components/TemplateList.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { EmailTemplate } from '../types'; -import { Plus, Edit, Trash2, FileCode, Search, Database, ArrowRightCircle, Code, CopyPlus, Key } from 'lucide-react'; +import { Plus, Edit, Trash2, FileCode, Search, Database, ArrowRightCircle, Code, CopyPlus, Key, HelpCircle, X, Globe, Server, Braces } from 'lucide-react'; import { generateSelectSQL, generateN8nCode, generateTemplateKey } from '../services/storage'; interface Props { @@ -13,6 +13,7 @@ interface Props { const TemplateList: React.FC = ({ templates, onCreate, onEdit, onClone, onDelete }) => { const [search, setSearch] = React.useState(''); + const [showHelp, setShowHelp] = React.useState(false); const filtered = templates.filter(t => t.name.toLowerCase().includes(search.toLowerCase()) || @@ -23,50 +24,60 @@ const TemplateList: React.FC = ({ templates, onCreate, onEdit, onClone, o e.stopPropagation(); const sql = generateSelectSQL(t); navigator.clipboard.writeText(sql); - alert('SELECT query copied! Use this in your n8n SQL node.'); + alert('Query SELECT copiata! Usala nel tuo nodo SQL su n8n.'); }; 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.'); + alert('Codice JS copiato! Incollalo nel tuo nodo Code su n8n.'); }; 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!`); + alert(`Chiave Template '${key}' copiata negli appunti!`); }; return (
-

Email Templates

-

Manage HTML templates for your n8n workflows

+

Template Email

+

Gestisci i template HTML per i tuoi flussi di lavoro n8n

-
-
- +
+
+
+ +
+ setSearch(e.target.value)} + className="pl-10 w-full 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" + />
- 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" - /> + +
{filtered.length === 0 ? ( @@ -74,13 +85,13 @@ const TemplateList: React.FC = ({ templates, onCreate, onEdit, onClone, o
-

No templates found

-

Get started by creating your first HTML email template for automation.

+

Nessun template trovato

+

Inizia creando il tuo primo template email HTML per l'automazione.

) : ( @@ -97,25 +108,24 @@ const TemplateList: React.FC = ({ templates, onCreate, onEdit, onClone, o {t.name} - {new Date(t.updatedAt).toLocaleDateString()} + {new Date(t.updatedAt).toLocaleDateString('it-IT')}

- {t.description || 'No description provided.'} + {t.description || 'Nessuna descrizione fornita.'}

-
Subject:
+
Oggetto:
{t.subject}
{t.variables.slice(0, 3).map(v => ( - {/* Explicitly building the string to avoid rendering issues */} {'{{' + v + '}}'} ))} {t.variables.length > 3 && ( - + {t.variables.length - 3} more + + {t.variables.length - 3} altri )}
@@ -124,7 +134,7 @@ const TemplateList: React.FC = ({ templates, onCreate, onEdit, onClone, o @@ -174,6 +184,117 @@ const TemplateList: React.FC = ({ templates, onCreate, onEdit, onClone, o ))} )} + + {/* API Documentation Modal */} + {showHelp && ( +
+
+ + {/* Modal Header */} +
+
+

+ + Guida Integrazione API +

+

Come inviare email esternamente

+
+ +
+ + {/* Modal Content */} +
+ +
+

+ Dopo aver definito il template, la mail può essere inviata tramite l'endpoint API 'https://ap.site.unisa.it/api/v1/webhooks/NxUftpB17tWeJIZmzN4wl' +

+

PARAMETRI DA PASSARE:

+
+ + {/* Endpoint */} +
+ +
+ https://ap.site.unisa.it/api/v1/webhooks/NxUftpB17tWeJIZmzN4wl +
+
+ + {/* Headers */} +
+ +
+ + + + + + + + + + + + + + + + + +
Chiave HeaderValore / Descrizione
template + <template_key> + Recuperabile tramite l'icona Chiave nella card del template. Serve al sistema per recuperare il template corretto. +
destinatario + email@esempio.it + L'indirizzo email del destinatario. +
+
+
+ + {/* Body */} +
+ +

Passa qui i valori delle variabili dinamiche.

+
+ {'{'} +
+ "nome": "Mario", +
+
+ "cognome": "Rossi", +
+
+ "email": "mrossi@unisa.it" +
+ {'}'} +
+
+ +
+ + {/* Modal Footer */} +
+ +
+
+
+ )} ); };