Update App.tsx
This commit is contained in:
21
App.tsx
21
App.tsx
@@ -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"
|
||||||
>
|
>
|
||||||
|
|||||||
Reference in New Issue
Block a user