feat: Added functionality to database node, so it generated create an…

…d insert sql statements for the given data + database value type

src/components/editor/pages/canvas/edges/EdgeGradientStyles.css

@@ -70,3 +70,11 @@
     stroke-width: 2;
     stroke-opacity: 0.75;
 }
+
+/* DatabaseHighlight Edge */
+/*noinspection ALL,CssUnusedSymbol*/
+.react-flow__edge.database .react-flow__edge-path {
+    stroke: url(#database-edge-gradient);
+    stroke-width: 2;
+    stroke-opacity: 0.75;
+}

src/components/editor/pages/canvas/edges/Edges.ts

@@ -15,7 +15,8 @@ export const highlightEdges: HighlightEdgeInfoTypes = {
     [OutputValueType.NONE]: createEdge(defaultEdgeColor, defaultEdgeColor, OutputValueType.NONE),
     [OutputValueType.TEXT]: createEdge("#7CFC00", "#7CFC00", OutputValueType.TEXT),
     [OutputValueType.JSON]: createEdge("#87CEEB", "#87CEEB", OutputValueType.JSON),
-    [OutputValueType.HTML]: createEdge("#FF00FF", "#FF00FF", OutputValueType.HTML)
+    [OutputValueType.HTML]: createEdge("#FF00FF", "#FF00FF", OutputValueType.HTML),
+    [OutputValueType.DATABASE]: createEdge("#FFFF00", "#FFFF00", OutputValueType.DATABASE)
 }
 
 type HighlightEdgeInfoTypes = {

src/components/editor/pages/canvas/nodes/DatabaseTableNode.tsx

@@ -20,7 +20,7 @@ import MultiSelectOption from "@/components/form/MultiSelectOption";
 import useReactFlowStore from "@/stores/editor/ReactFlowStore";
 
 export interface DatabaseTableNodeData extends DynamicNodeData {
-
+    tableName: string
 }
 
 // --- Style ---
@@ -69,11 +69,18 @@ export const DatabaseTableOptions = createOptionsComponent<DatabaseTableNodeData
         onDataUpdated("connectionRule", {
             ...data.connectionRule,
             inputRules: inputs,
-            outputValueType: OutputValueType.NONE
+            outputValueType: OutputValueType.DATABASE
         })
     }, [inputs]);
 
     return <>
+        <TextInputOption
+            label="Name"
+            value={data.tableName}
+            onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+                onDataUpdated("tableName", event.target.value)
+            }}
+        />
         {
             inputs.map((input: InputRule, index: number) => {
                 return <RowOptionsContainer>
@@ -124,6 +131,6 @@ export const DatabaseTableNodeMetadata = {
     style: DatabaseTableShapeStyle(true),
     icon: <StorageIcon />,
     getEngineNode: (id: string, data: NodeData) => {
-        return new EngineDatabaseTableNode(id, data as DynamicNodeData)
+        return new EngineDatabaseTableNode(id, data as DatabaseTableNodeData)
     }
 } as NodeMetadata

src/config/ConnectionRules.ts

@@ -29,7 +29,8 @@ export const connectionRules = new Map<NodeType, ConnectionRule | DynamicConnect
                 allowedValueTypes: [
                     OutputValueType.HTML,
                     OutputValueType.TEXT,
-                    OutputValueType.JSON
+                    OutputValueType.JSON,
+                    OutputValueType.DATABASE
                 ],
                 maxConnections: 999
             }

src/config/OutputValueType.ts

@@ -2,7 +2,8 @@ export enum OutputValueType {
     NONE = "none",
     HTML = "html",
     JSON = "json",
-    TEXT = "text"
+    TEXT = "text",
+    DATABASE = "database"
 }
 
 export interface Output {
@@ -25,3 +26,10 @@ export interface JsonOutput extends Output {
 export interface TextOutput extends Output {
     value: string
 }
+
+export interface DatabaseOutput extends Output {
+    value: {
+        schema: string
+        content: string
+    }
+}

src/engine/nodes/EngineDatabaseTableNode.ts

@@ -2,6 +2,7 @@ import {BasicNode} from "@/engine/nodes/BasicNode";
 import {NodeType} from "@/config/NodeType";
 import {usePlayStore} from "@/stores/editor/PlayStore";
 import {DatabaseTableNodeData} from "@/components/editor/pages/canvas/nodes/DatabaseTableNode";
+import {DatabaseOutput, Output} from "@/config/OutputValueType";
 
 export class EngineDatabaseTableNode implements BasicNode {
     id: string;
@@ -18,10 +19,42 @@ export class EngineDatabaseTableNode implements BasicNode {
 
         const inputs = usePlayStore.getState().getInputForAllHandles(this.id)
 
-        console.log("Inputs", inputs)
+        if (inputs) {
 
-        setTimeout(() => {
-            usePlayStore.getState().nextNode()
-        }, 2000);
+            const createTableStatement = generateSQLCreateTable(inputs, this.data.tableName)
+            const insertStatement = generateSQLInsert(inputs, this.data.tableName)
+
+            usePlayStore.getState().addOutgoingPipelines(this.id, {
+                value: {
+                    schema: createTableStatement,
+                    content: insertStatement
+                }
+            } as DatabaseOutput)
+
+            setTimeout(() => {
+                usePlayStore.getState().nextNode()
+            }, 200);
+        }
+    }
+}
+
+const generateSQLCreateTable = (data: Record<string, Output[] | Output[][]>, tableName: string): string => {
+    return `CREATE TABLE ${tableName} (${Object.keys(data).map(key => `${key} TEXT`).join(", ")});`
+}
+
+const generateSQLInsert = (data: Record<string, Output[] | Output[][]>, tableName: string): string => {
+    const keys = Object.keys(data);
+    const length = data[keys[0]].length;
+    const valuesWithBrackets: string[] = [];
+
+    for (let i = 0; i < length; i++) {
+        const values = keys.map(key => {
+            return `'${(data[key][i] as Output).value.replace("'", "")}'`;
+        }).join(", ");
+
+        const valueWithBrackets = `(${values})`;
+        valuesWithBrackets.push(valueWithBrackets);
     }
-}
+
+    return `INSERT INTO ${tableName} (${keys.join(", ")}) VALUES ${valuesWithBrackets.join(", ")};`
+};