diff --git a/src/components/InfiniteCanvas.jsx b/src/components/InfiniteCanvas.jsx index 7244cfc..64280f1 100644 --- a/src/components/InfiniteCanvas.jsx +++ b/src/components/InfiniteCanvas.jsx @@ -19,11 +19,1237 @@ import ReactFlow, { import 'reactflow/dist/style.css'; // Import icons from react-icons -import { FaDatabase, FaTable, FaFlask, FaArrowRight } from 'react-icons/fa'; +import { FaDatabase, FaTable, FaFlask, FaArrowRight, FaPlus, FaTimes } from 'react-icons/fa'; import { BiSolidData } from 'react-icons/bi'; import { AiFillFolder } from 'react-icons/ai'; import { BsFileEarmarkSpreadsheet } from 'react-icons/bs'; +// Import mock data from DataflowCanvas +import mockApiData from './mockData'; + +// Modal component for creating entities +const Modal = ({ isOpen, title, onClose, children }) => { + if (!isOpen) return null; + + return ( +
+
+
+

{title}

+ +
+
+ {children} +
+
+
+ ); +}; + +// Database Creation Form with nested schema and table creation +const DatabaseForm = ({ onSave, onCancel }) => { + const [formData, setFormData] = useState({ + name: '', + description: '', + url: '', + key: '', + type: 'PostgreSQL', + schemas: [] // Array to hold schemas + }); + + const [showSchemaForm, setShowSchemaForm] = useState(false); + const [currentSchemaIndex, setCurrentSchemaIndex] = useState(null); + const [showTableForm, setShowTableForm] = useState(false); + const [currentSchemaForTable, setCurrentSchemaForTable] = useState(null); + + const handleChange = (e) => { + const { name, value } = e.target; + setFormData(prev => ({ ...prev, [name]: value })); + }; + + const handleSubmit = (e) => { + e.preventDefault(); + onSave(formData); + }; + + const fetchId = () => { + // In a real app, this would make an API call + alert('Fetching ID from URL: ' + formData.url); + }; + + // Add a new schema to the database + const addSchema = (schemaData) => { + if (currentSchemaIndex !== null) { + // Edit existing schema + const updatedSchemas = [...formData.schemas]; + updatedSchemas[currentSchemaIndex] = { + ...updatedSchemas[currentSchemaIndex], + ...schemaData, + }; + setFormData(prev => ({ ...prev, schemas: updatedSchemas })); + } else { + // Add new schema + const newSchema = { + id: `schema-${Date.now()}`, + name: schemaData.name, + description: schemaData.description, + tables: [] // Initialize with empty tables array + }; + setFormData(prev => ({ + ...prev, + schemas: [...prev.schemas, newSchema] + })); + } + setShowSchemaForm(false); + setCurrentSchemaIndex(null); + }; + + // Add a new table to a schema + const addTable = (tableData) => { + const schemaIndex = formData.schemas.findIndex(s => s.id === currentSchemaForTable); + if (schemaIndex !== -1) { + const newTable = { + id: `table-${Date.now()}`, + name: tableData.name, + description: tableData.description, + type: tableData.type + }; + + const updatedSchemas = [...formData.schemas]; + updatedSchemas[schemaIndex] = { + ...updatedSchemas[schemaIndex], + tables: [...updatedSchemas[schemaIndex].tables, newTable] + }; + + setFormData(prev => ({ ...prev, schemas: updatedSchemas })); + } + setShowTableForm(false); + setCurrentSchemaForTable(null); + }; + + // Remove a schema + const removeSchema = (index) => { + const updatedSchemas = [...formData.schemas]; + updatedSchemas.splice(index, 1); + setFormData(prev => ({ ...prev, schemas: updatedSchemas })); + }; + + // Remove a table + const removeTable = (schemaIndex, tableIndex) => { + const updatedSchemas = [...formData.schemas]; + updatedSchemas[schemaIndex].tables.splice(tableIndex, 1); + setFormData(prev => ({ ...prev, schemas: updatedSchemas })); + }; + + return ( +
+ {showSchemaForm ? ( +
+
+

+ {currentSchemaIndex !== null ? 'Edit Schema' : 'Add Schema'} +

+ +
+ + { + setShowSchemaForm(false); + setCurrentSchemaIndex(null); + }} + initialData={currentSchemaIndex !== null ? formData.schemas[currentSchemaIndex] : null} + /> +
+ ) : showTableForm ? ( +
+
+

Add Table

+ +
+ + { + setShowTableForm(false); + setCurrentSchemaForTable(null); + }} + /> +
+ ) : ( +
+
+ + +
+ +
+ +