From b5d6c75de13c0c3df414cef83341eb7567aef094 Mon Sep 17 00:00:00 2001 From: ryanwong Date: Fri, 15 Nov 2024 05:42:21 -0500 Subject: [PATCH] set default tables --- src/components/DefaultTablesModal.tsx | 156 ++++++++++++++++++++++++++ src/components/ModelPanel.tsx | 20 +++- src/store/flowStore.ts | 4 + 3 files changed, 178 insertions(+), 2 deletions(-) create mode 100644 src/components/DefaultTablesModal.tsx diff --git a/src/components/DefaultTablesModal.tsx b/src/components/DefaultTablesModal.tsx new file mode 100644 index 0000000..0058f9c --- /dev/null +++ b/src/components/DefaultTablesModal.tsx @@ -0,0 +1,156 @@ +import React, { useState } from "react"; +import { X, Plus } from "lucide-react"; +import { useFlowStore } from "../store/flowStore"; + +interface DefaultTable { + id: string; + name: string; + description: string; + fields: { + name: string; + type: string; + defaultValue?: string; + mapping?: string; + validation?: string; + }[]; +} + +const defaultTables: DefaultTable[] = [ + { + id: "cms", + name: "CMS", + description: "Content Management System table for storing dynamic content", + fields: [ + { name: "id", type: "primary key" }, + { name: "key", type: "string", validation: "required" }, + { + name: "type", + type: "mapping", + mapping: "0:Text,1:Number,2:Image,3:Raw", + validation: "0", + }, + { name: "value", type: "long text" }, + ], + }, + { + id: "user", + name: "User", + description: "User management table with authentication details", + fields: [ + { name: "id", type: "primary key" }, + { name: "email", type: "string", validation: "required,email" }, + { + name: "login_type", + type: "mapping", + mapping: "0:Regular,1:Google,2:Microsoft,3:Apple", + defaultValue: "0", + }, + { name: "role_id", type: "string" }, + { name: "data", type: "json" }, + { + name: "status", + type: "mapping", + mapping: "0:Active,1:Inactive,2:Suspend", + defaultValue: "0", + }, + ], + }, +]; + +interface DefaultTablesModalProps { + isOpen: boolean; + onClose: () => void; +} + +export function DefaultTablesModal({ + isOpen, + onClose, +}: DefaultTablesModalProps) { + const [selectedTables, setSelectedTables] = useState([]); + const { addModel } = useFlowStore(); + + const handleToggleTable = (tableId: string) => { + setSelectedTables((prev) => + prev.includes(tableId) + ? prev.filter((id) => id !== tableId) + : [...prev, tableId] + ); + }; + + const handleAddTables = () => { + selectedTables.forEach((tableId) => { + const table = defaultTables.find((t) => t.id === tableId); + if (table) { + addModel({ + id: `model_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`, + name: table.name, + fields: table.fields, + }); + } + }); + onClose(); + }; + + if (!isOpen) return null; + + return ( +
+
+
+

Add Default Tables

+ +
+ +
+

+ Select the default tables you would like to add to your project: +

+ +
+ {defaultTables.map((table) => ( +
+ +
+ ))} +
+
+ +
+ + +
+
+
+ ); +} diff --git a/src/components/ModelPanel.tsx b/src/components/ModelPanel.tsx index ad2b5a4..3be41f4 100644 --- a/src/components/ModelPanel.tsx +++ b/src/components/ModelPanel.tsx @@ -1,12 +1,23 @@ -import React, { useState } from "react"; +import React, { useState, useEffect } from "react"; import { Plus, Edit2 } from "lucide-react"; import { useFlowStore } from "../store/flowStore"; import { ModelModal } from "./ModelModal"; +import { DefaultTablesModal } from "./DefaultTablesModal"; export function ModelPanel() { const [isModalOpen, setIsModalOpen] = useState(false); + const [isDefaultTablesModalOpen, setIsDefaultTablesModalOpen] = + useState(false); const [selectedModel, setSelectedModel] = useState(null); - const { models } = useFlowStore(); + const { models, defaultTablesShown, setDefaultTablesShown } = useFlowStore(); + + useEffect(() => { + // Show default tables modal only if there are no models and it hasn't been shown before + if (models.length === 0 && !defaultTablesShown) { + setIsDefaultTablesModalOpen(true); + setDefaultTablesShown(true); // Mark as shown + } + }, []); // Empty dependency array means this runs once on mount const handleEditModel = (model: any) => { setSelectedModel(model); @@ -62,6 +73,11 @@ export function ModelPanel() { }} model={selectedModel} /> + + setIsDefaultTablesModalOpen(false)} + /> ); } diff --git a/src/store/flowStore.ts b/src/store/flowStore.ts index b7cbb4b..bed0cb4 100644 --- a/src/store/flowStore.ts +++ b/src/store/flowStore.ts @@ -58,6 +58,7 @@ interface FlowState { roles: Role[]; routes: Route[]; settings: Settings; + defaultTablesShown: boolean; setNodes: (nodes: Node[] | ((prev: Node[]) => Node[])) => void; setEdges: (edges: Edge[] | ((prev: Edge[]) => Edge[])) => void; setSelectedNode: (node: Node | null) => void; @@ -71,6 +72,7 @@ interface FlowState { updateRoute: (route: Route) => void; deleteRoute: (routeId: string) => void; updateSettings: (settings: Settings) => void; + setDefaultTablesShown: (shown: boolean) => void; } export const useFlowStore = create((set) => ({ @@ -91,6 +93,7 @@ export const useFlowStore = create((set) => ({ dbPassword: "root", dbName: `database_${new Date().toISOString().split("T")[0]}`, // today's date }, + defaultTablesShown: false, setNodes: (nodes) => set((state) => ({ nodes: typeof nodes === "function" ? nodes(state.nodes) : nodes, @@ -141,4 +144,5 @@ export const useFlowStore = create((set) => ({ routes: state.routes.filter((r) => r.id !== routeId), })), updateSettings: (settings) => set({ settings }), + setDefaultTablesShown: (shown) => set({ defaultTablesShown: shown }), }));