Update App.tsx

This commit is contained in:
fcarraUniSa
2025-12-23 12:23:45 +01:00
committed by GitHub
parent f38ad1b6e7
commit 8d12a2558d

21
App.tsx
View File

@@ -1,8 +1,9 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import TemplateList from './components/TemplateList'; import TemplateList from './components/TemplateList';
import TemplateEditor from './components/TemplateEditor'; import TemplateEditor from './components/TemplateEditor';
import { ViewState, EmailTemplate, SQL_SCHEMA } from './types'; import { ViewState, EmailTemplate, SQL_SCHEMA } from './types';
import { getTemplates, deleteTemplate } from './services/storage'; import { getTemplates, deleteTemplate, generateUUID } from './services/storage';
import { Database } from 'lucide-react'; import { Database } from 'lucide-react';
const App: React.FC = () => { const App: React.FC = () => {
@@ -18,9 +19,14 @@ const App: React.FC = () => {
const refreshTemplates = async () => { const refreshTemplates = async () => {
setIsLoading(true); setIsLoading(true);
try {
const data = await getTemplates(); const data = await getTemplates();
setTemplates(data); setTemplates(data);
} catch (err) {
console.error("Refresh Error:", err);
} finally {
setIsLoading(false); setIsLoading(false);
}
}; };
const handleCreate = () => { const handleCreate = () => {
@@ -34,10 +40,9 @@ const App: React.FC = () => {
}; };
const handleClone = (t: EmailTemplate) => { const handleClone = (t: EmailTemplate) => {
// Create a copy of the template with a new ID and updated name
const clonedTemplate: EmailTemplate = { const clonedTemplate: EmailTemplate = {
...t, ...t,
id: crypto.randomUUID(), // Generate new ID so it's treated as a new insert id: generateUUID(),
name: `${t.name} (Copia)`, name: `${t.name} (Copia)`,
updatedAt: new Date().toISOString() updatedAt: new Date().toISOString()
}; };
@@ -64,7 +69,7 @@ const App: React.FC = () => {
<> <>
{isLoading ? ( {isLoading ? (
<div className="flex h-screen items-center justify-center text-slate-500"> <div className="flex h-screen items-center justify-center text-slate-500">
Caricamento template... Caricamento...
</div> </div>
) : ( ) : (
<TemplateList <TemplateList
@@ -95,17 +100,13 @@ const App: React.FC = () => {
/> />
)} )}
{/* Database Schema Modal (Global Help) */}
{showSchema && ( {showSchema && (
<div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50 p-4"> <div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50 p-4">
<div className="bg-white rounded-xl shadow-2xl max-w-2xl w-full p-6"> <div className="bg-white rounded-xl shadow-2xl max-w-2xl w-full p-6">
<h2 className="text-xl font-bold mb-4 flex items-center gap-2"> <h2 className="text-xl font-bold mb-4 flex items-center gap-2">
<Database className="text-brand-600"/> <Database className="text-brand-600"/>
Configurazione Database per n8n Configurazione DB
</h2> </h2>
<p className="text-slate-600 text-sm mb-4">
Per far funzionare questa app con il tuo software interno, crea questa tabella nel tuo database MySQL o PostgreSQL.
</p>
<div className="bg-slate-900 text-slate-100 p-4 rounded-lg overflow-x-auto custom-scrollbar mb-4"> <div className="bg-slate-900 text-slate-100 p-4 rounded-lg overflow-x-auto custom-scrollbar mb-4">
<pre className="text-xs font-mono leading-relaxed">{SQL_SCHEMA}</pre> <pre className="text-xs font-mono leading-relaxed">{SQL_SCHEMA}</pre>
</div> </div>
@@ -113,7 +114,7 @@ const App: React.FC = () => {
<button <button
onClick={() => { onClick={() => {
navigator.clipboard.writeText(SQL_SCHEMA); navigator.clipboard.writeText(SQL_SCHEMA);
alert("Schema copiato!"); alert("Copiato!");
}} }}
className="px-4 py-2 bg-slate-100 text-slate-700 font-medium rounded hover:bg-slate-200" className="px-4 py-2 bg-slate-100 text-slate-700 font-medium rounded hover:bg-slate-200"
> >