updated task
This commit is contained in:
ryanwong
@@ -0,0 +1,786 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { X, Plus, Trash } from "lucide-react";
|
||||
import { Node } from "reactflow";
|
||||
import { useFlowStore } from "../store/flowStore";
|
||||
|
||||
interface ConfigPanelProps {
|
||||
node: Node | null;
|
||||
onClose: () => void;
|
||||
onUpdateNode: (id: string, data: any) => void;
|
||||
}
|
||||
|
||||
interface Field {
|
||||
name: string;
|
||||
type: string;
|
||||
validation?: string;
|
||||
}
|
||||
|
||||
const getDefaultDataForType = (type: string) => {
|
||||
const baseData = {
|
||||
label: type.charAt(0).toUpperCase() + type.slice(1).replace("-", " ")
|
||||
};
|
||||
|
||||
switch (type) {
|
||||
case "variable":
|
||||
return {
|
||||
...baseData,
|
||||
name: "",
|
||||
type: "string",
|
||||
defaultValue: ""
|
||||
};
|
||||
|
||||
case "url":
|
||||
return {
|
||||
...baseData,
|
||||
method: "GET",
|
||||
path: "",
|
||||
fields: [],
|
||||
queryFields: []
|
||||
};
|
||||
|
||||
case "auth":
|
||||
return {
|
||||
...baseData,
|
||||
authType: "bearer",
|
||||
tokenVar: ""
|
||||
};
|
||||
|
||||
case "output":
|
||||
return {
|
||||
...baseData,
|
||||
outputType: "definition",
|
||||
statusCode: 200,
|
||||
fields: [],
|
||||
responseRaw: ""
|
||||
};
|
||||
|
||||
case "logic":
|
||||
return {
|
||||
...baseData,
|
||||
code: ""
|
||||
};
|
||||
|
||||
case "db-find":
|
||||
case "db-query":
|
||||
return {
|
||||
...baseData,
|
||||
model: "",
|
||||
operation: "findMany",
|
||||
query: "",
|
||||
resultVar: "result"
|
||||
};
|
||||
|
||||
case "db-insert":
|
||||
return {
|
||||
...baseData,
|
||||
model: "",
|
||||
variables: "",
|
||||
resultVar: "result"
|
||||
};
|
||||
|
||||
case "db-update":
|
||||
case "db-delete":
|
||||
return {
|
||||
...baseData,
|
||||
model: "",
|
||||
idField: "id",
|
||||
variables: "",
|
||||
resultVar: "result"
|
||||
};
|
||||
|
||||
default:
|
||||
return baseData;
|
||||
}
|
||||
};
|
||||
|
||||
export function ConfigPanel({ node, onClose, onUpdateNode }: ConfigPanelProps) {
|
||||
const { models, updateNode } = useFlowStore();
|
||||
const [newField, setNewField] = useState<Field>({ name: "", type: "string" });
|
||||
const [newQueryField, setNewQueryField] = useState<Field>({
|
||||
name: "",
|
||||
type: "string",
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (node) {
|
||||
// Initialize node data with defaults if not already set
|
||||
const defaultData = getDefaultDataForType(node.type);
|
||||
const newData = {
|
||||
...defaultData,
|
||||
...node.data // This will override defaults with any existing data
|
||||
};
|
||||
|
||||
// Only update if the data is different
|
||||
if (JSON.stringify(newData) !== JSON.stringify(node.data)) {
|
||||
onUpdateNode(node.id, newData);
|
||||
updateNode(node.id, newData);
|
||||
}
|
||||
}
|
||||
}, [node?.id, node?.type]);
|
||||
|
||||
useEffect(() => {
|
||||
console.log("ConfigPanel re-rendered with node:", node);
|
||||
}, [node]);
|
||||
|
||||
if (!node) return null;
|
||||
console.log("what up");
|
||||
const handleChange = (
|
||||
e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>
|
||||
) => {
|
||||
if (!node) return;
|
||||
|
||||
console.log("Handling change for:", e.target.name, "with value:", e.target.value);
|
||||
|
||||
const newData = {
|
||||
...node.data,
|
||||
[e.target.name]: e.target.value,
|
||||
};
|
||||
|
||||
console.log("New data to update:", newData);
|
||||
|
||||
onUpdateNode(node.id, newData);
|
||||
updateNode(node.id, newData);
|
||||
};
|
||||
|
||||
const handleArrayChange = (
|
||||
index: number,
|
||||
field: string,
|
||||
value: string,
|
||||
arrayName: string
|
||||
) => {
|
||||
const array = [...node.data[arrayName]];
|
||||
array[index] = { ...array[index], [field]: value };
|
||||
const newData = {
|
||||
...node.data,
|
||||
[arrayName]: array,
|
||||
};
|
||||
|
||||
onUpdateNode(node.id, newData);
|
||||
updateNode(node.id, newData);
|
||||
};
|
||||
|
||||
const addField = (arrayName: string) => {
|
||||
const fieldToAdd = arrayName === "queryFields" ? newQueryField : newField;
|
||||
if (!fieldToAdd.name.trim()) return;
|
||||
|
||||
const array = [...node.data[arrayName], { ...fieldToAdd }];
|
||||
const newData = {
|
||||
...node.data,
|
||||
[arrayName]: array,
|
||||
};
|
||||
|
||||
onUpdateNode(node.id, newData);
|
||||
updateNode(node.id, newData);
|
||||
|
||||
// Reset the appropriate state
|
||||
if (arrayName === "queryFields") {
|
||||
setNewQueryField({ name: "", type: "string" });
|
||||
} else {
|
||||
setNewField({ name: "", type: "string" });
|
||||
}
|
||||
};
|
||||
|
||||
const removeField = (index: number, arrayName: string) => {
|
||||
const array = [...node.data[arrayName]];
|
||||
array.splice(index, 1);
|
||||
const newData = {
|
||||
...node.data,
|
||||
[arrayName]: array,
|
||||
};
|
||||
|
||||
onUpdateNode(node.id, newData);
|
||||
updateNode(node.id, newData);
|
||||
};
|
||||
|
||||
const copyQueryFields = () => {
|
||||
const currentFields = node.data.fields || [];
|
||||
navigator.clipboard.writeText(JSON.stringify(currentFields, null, 2));
|
||||
};
|
||||
|
||||
const extractQueryParams = (path: string) => {
|
||||
const params = path.match(/:[a-zA-Z]+/g) || [];
|
||||
return params.map((param) => ({
|
||||
name: param.substring(1),
|
||||
type: "string",
|
||||
validation: "",
|
||||
}));
|
||||
};
|
||||
|
||||
const renderDatabaseFields = () => (
|
||||
<>
|
||||
<div className="mb-4">
|
||||
<label className="block text-sm font-medium mb-1">Model</label>
|
||||
<select
|
||||
name="model"
|
||||
value={node.data.model}
|
||||
onBlur={handleChange}
|
||||
className="w-full p-2 border rounded"
|
||||
>
|
||||
<option value="">Select Model</option>
|
||||
{models.map((model) => (
|
||||
<option key={model.id} value={model.name}>
|
||||
{model.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div className="mb-4">
|
||||
<label className="block text-sm font-medium mb-1">Operation</label>
|
||||
<select
|
||||
name="operation"
|
||||
value={node.data.operation}
|
||||
onBlur={handleChange}
|
||||
className="w-full p-2 border rounded"
|
||||
>
|
||||
<option value="findMany">Find Many</option>
|
||||
<option value="findOne">Find One</option>
|
||||
<option value="findFirst">Find First</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="mb-4">
|
||||
<label className="block text-sm font-medium mb-1">SQL Query</label>
|
||||
<textarea
|
||||
name="query"
|
||||
value={node.data.query}
|
||||
onBlur={handleChange}
|
||||
className="w-full p-2 border rounded h-32 font-mono text-sm"
|
||||
placeholder="SELECT * FROM table WHERE id = :id"
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-4">
|
||||
<label className="block text-sm font-medium mb-1">Save Result In</label>
|
||||
<input
|
||||
type="text"
|
||||
name="resultVar"
|
||||
value={node.data.resultVar}
|
||||
onBlur={handleChange}
|
||||
className="w-full p-2 border rounded"
|
||||
placeholder="result"
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
const renderFields = () => {
|
||||
switch (node.type) {
|
||||
case "auth":
|
||||
return (
|
||||
<>
|
||||
<div className="mb-4">
|
||||
<label className="block text-sm font-medium mb-1">
|
||||
Auth Type
|
||||
</label>
|
||||
<select
|
||||
name="authType"
|
||||
value={node.data.authType}
|
||||
onBlur={handleChange}
|
||||
className="w-full p-2 border rounded"
|
||||
>
|
||||
<option value="bearer">Bearer Token</option>
|
||||
<option value="basic">Basic Auth</option>
|
||||
<option value="jwt">JWT</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="mb-4">
|
||||
<label className="block text-sm font-medium mb-1">
|
||||
Token Variable
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="tokenVar"
|
||||
value={node.data.tokenVar}
|
||||
onBlur={handleChange}
|
||||
className="w-full p-2 border rounded"
|
||||
placeholder="token"
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
case "url":
|
||||
return (
|
||||
<>
|
||||
<div className="mb-4">
|
||||
<label className="block text-sm font-medium mb-1">Method</label>
|
||||
<select
|
||||
name="method"
|
||||
value={node.data.method}
|
||||
onBlur={handleChange}
|
||||
className="w-full p-2 border rounded"
|
||||
>
|
||||
{["GET", "POST", "PUT", "DELETE", "PATCH"].map((method) => (
|
||||
<option key={method} value={method}>
|
||||
{method}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div className="mb-4">
|
||||
<label className="block text-sm font-medium mb-1">
|
||||
Route Path
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="path"
|
||||
value={node.data.path}
|
||||
onChange={handleChange}
|
||||
className="w-full p-2 border rounded"
|
||||
placeholder="/api/users/:id"
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-4">
|
||||
<label className="block text-sm font-medium mb-1">
|
||||
Body Fields
|
||||
</label>
|
||||
{node.data.fields?.length > 0 && (
|
||||
<div className="mb-2 p-2 bg-gray-50 rounded text-sm">
|
||||
{node.data.fields.map((field: Field) => (
|
||||
<div key={field.name} className="text-gray-600">
|
||||
{field.name}: {field.type}
|
||||
{field.validation ? ` (${field.validation})` : ""}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{(node.data.fields || []).map((field: Field, index: number) => (
|
||||
<div key={index} className="flex gap-1 mb-2">
|
||||
<input
|
||||
type="text"
|
||||
value={field.name}
|
||||
onBlur={(e) =>
|
||||
handleArrayChange(index, "name", e.target.value, "fields")
|
||||
}
|
||||
className="flex-1 p-2 border rounded text-sm"
|
||||
placeholder="Field name"
|
||||
/>
|
||||
<select
|
||||
value={field.type}
|
||||
onBlur={(e) =>
|
||||
handleArrayChange(index, "type", e.target.value, "fields")
|
||||
}
|
||||
className="w-20 p-2 border rounded text-sm"
|
||||
>
|
||||
<option value="string">String</option>
|
||||
<option value="number">Number</option>
|
||||
<option value="boolean">Bool</option>
|
||||
<option value="date">Date</option>
|
||||
</select>
|
||||
<button
|
||||
onClick={() => removeField(index, "fields")}
|
||||
className="p-2 text-red-500 hover:bg-red-50 rounded"
|
||||
>
|
||||
<Trash className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
<div className="flex gap-1 mt-2">
|
||||
<input
|
||||
type="text"
|
||||
value={newField.name}
|
||||
onBlur={(e) =>
|
||||
setNewField({ ...newField, name: e.target.value })
|
||||
}
|
||||
className="flex-1 p-2 border rounded text-sm"
|
||||
placeholder="New field name"
|
||||
/>
|
||||
<select
|
||||
value={newField.type}
|
||||
onBlur={(e) =>
|
||||
setNewField({ ...newField, type: e.target.value })
|
||||
}
|
||||
className="w-20 p-2 border rounded text-sm"
|
||||
>
|
||||
<option value="string">String</option>
|
||||
<option value="number">Number</option>
|
||||
<option value="boolean">Bool</option>
|
||||
<option value="date">Date</option>
|
||||
</select>
|
||||
<button
|
||||
onClick={() => {
|
||||
if (newField.name.trim()) {
|
||||
addField("fields");
|
||||
}
|
||||
}}
|
||||
className="p-2 bg-blue-500 text-white rounded hover:bg-blue-600"
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mb-4">
|
||||
<label className="block text-sm font-medium mb-1">
|
||||
Query Parameters
|
||||
</label>
|
||||
{node.data.queryFields?.length > 0 && (
|
||||
<div className="mb-2 p-2 bg-gray-50 rounded text-sm">
|
||||
{node.data.queryFields.map((field: Field) => (
|
||||
<div key={field.name} className="text-gray-600">
|
||||
{field.name}: {field.type}
|
||||
{field.validation ? ` (${field.validation})` : ""}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{(node.data.queryFields || []).map(
|
||||
(field: Field, index: number) => (
|
||||
<div key={index} className="flex gap-1 mb-2">
|
||||
<input
|
||||
type="text"
|
||||
value={field.name}
|
||||
onBlur={(e) =>
|
||||
handleArrayChange(
|
||||
index,
|
||||
"name",
|
||||
e.target.value,
|
||||
"queryFields"
|
||||
)
|
||||
}
|
||||
className="flex-1 p-2 border rounded text-sm"
|
||||
placeholder="Field name"
|
||||
/>
|
||||
<select
|
||||
value={field.type}
|
||||
onBlur={(e) =>
|
||||
handleArrayChange(
|
||||
index,
|
||||
"type",
|
||||
e.target.value,
|
||||
"queryFields"
|
||||
)
|
||||
}
|
||||
className="w-20 p-2 border rounded text-sm"
|
||||
>
|
||||
<option value="string">String</option>
|
||||
<option value="number">Number</option>
|
||||
<option value="boolean">Bool</option>
|
||||
<option value="date">Date</option>
|
||||
</select>
|
||||
<button
|
||||
onClick={() => removeField(index, "queryFields")}
|
||||
className="p-2 text-red-500 hover:bg-red-50 rounded"
|
||||
>
|
||||
<Trash className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
<div className="flex gap-1 mt-2">
|
||||
<input
|
||||
type="text"
|
||||
value={newQueryField.name}
|
||||
onBlur={(e) =>
|
||||
setNewQueryField({ ...newQueryField, name: e.target.value })
|
||||
}
|
||||
className="flex-1 p-2 border rounded text-sm"
|
||||
placeholder="New query param"
|
||||
/>
|
||||
<select
|
||||
value={newQueryField.type}
|
||||
onBlur={(e) =>
|
||||
setNewQueryField({ ...newQueryField, type: e.target.value })
|
||||
}
|
||||
className="w-20 p-2 border rounded text-sm"
|
||||
>
|
||||
<option value="string">String</option>
|
||||
<option value="number">Number</option>
|
||||
<option value="boolean">Bool</option>
|
||||
<option value="date">Date</option>
|
||||
</select>
|
||||
<button
|
||||
onClick={() => {
|
||||
if (newQueryField.name.trim()) {
|
||||
const updatedQueryFields = [
|
||||
...(node.data.queryFields || []),
|
||||
{ ...newQueryField },
|
||||
];
|
||||
onUpdateNode(node.id, {
|
||||
...node.data,
|
||||
queryFields: updatedQueryFields,
|
||||
});
|
||||
setNewQueryField({ name: "", type: "string" });
|
||||
}
|
||||
}}
|
||||
className="p-2 bg-blue-500 text-white rounded hover:bg-blue-600"
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
case "output":
|
||||
return (
|
||||
<>
|
||||
<div className="mb-4">
|
||||
<label className="block text-sm font-medium mb-1">Output Type</label>
|
||||
<select
|
||||
name="outputType"
|
||||
value={node.data.outputType}
|
||||
onBlur={handleChange}
|
||||
className="w-full p-2 border rounded"
|
||||
>
|
||||
<option value="definition">Definition</option>
|
||||
<option value="mockup">Mockup</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{node.data.outputType === "mockup" ? (
|
||||
<div className="mb-4">
|
||||
<label className="block text-sm font-medium mb-1">Response Raw</label>
|
||||
<textarea
|
||||
name="responseRaw"
|
||||
value={node.data.responseRaw}
|
||||
onBlur={handleChange}
|
||||
className="w-full p-2 border rounded h-32"
|
||||
placeholder="Enter raw response here..."
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="mb-4">
|
||||
<label className="block text-sm font-medium mb-1">Fields</label>
|
||||
<div className="flex flex-wrap gap-2 mb-2">
|
||||
{(node.data.fields || []).map((field: Field, index: number) => (
|
||||
<div key={index} className="flex items-center">
|
||||
<input
|
||||
type="text"
|
||||
value={field.name}
|
||||
onBlur={(e) =>
|
||||
handleArrayChange(index, "name", e.target.value, "fields")
|
||||
}
|
||||
className="flex-1 p-2 border rounded text-sm"
|
||||
placeholder="Field name"
|
||||
/>
|
||||
<select
|
||||
value={field.type}
|
||||
onBlur={(e) =>
|
||||
handleArrayChange(index, "type", e.target.value, "fields")
|
||||
}
|
||||
className="w-24 p-2 border rounded text-sm"
|
||||
>
|
||||
<option value="string">String</option>
|
||||
<option value="number">Number</option>
|
||||
<option value="boolean">Boolean</option>
|
||||
<option value="date">Date</option>
|
||||
<option value="object">Object</option>
|
||||
<option value="array">Array</option>
|
||||
</select>
|
||||
<button
|
||||
onClick={() => removeField(index, "fields")}
|
||||
className="p-2 text-red-500 hover:bg-red-50 rounded"
|
||||
>
|
||||
<Trash className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex items-center gap-2 mt-2">
|
||||
<input
|
||||
type="text"
|
||||
value={newField.name}
|
||||
onBlur={(e) =>
|
||||
setNewField({ ...newField, name: e.target.value })
|
||||
}
|
||||
className="flex-1 p-2 border rounded text-sm"
|
||||
placeholder="New field name"
|
||||
/>
|
||||
<select
|
||||
value={newField.type}
|
||||
onBlur={(e) =>
|
||||
setNewField({ ...newField, type: e.target.value })
|
||||
}
|
||||
className="w-24 p-2 border rounded text-sm"
|
||||
>
|
||||
<option value="string">String</option>
|
||||
<option value="number">Number</option>
|
||||
<option value="boolean">Boolean</option>
|
||||
<option value="date">Date</option>
|
||||
<option value="object">Object</option>
|
||||
<option value="array">Array</option>
|
||||
</select>
|
||||
<button
|
||||
onClick={() => {
|
||||
if (newField.name.trim()) {
|
||||
const updatedFields = [
|
||||
...(node.data.fields || []),
|
||||
{ ...newField },
|
||||
];
|
||||
onUpdateNode(node.id, {
|
||||
...node.data,
|
||||
fields: updatedFields,
|
||||
});
|
||||
setNewField({ name: "", type: newField.type }); // Use the selected type here
|
||||
}
|
||||
}}
|
||||
className="px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600"
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="mb-4">
|
||||
<label className="block text-sm font-medium mb-1">Status Code</label>
|
||||
<input
|
||||
type="number"
|
||||
name="statusCode"
|
||||
value={node.data.statusCode}
|
||||
onBlur={handleChange}
|
||||
className="w-full p-2 border rounded"
|
||||
placeholder="200"
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
case "variable":
|
||||
return (
|
||||
<>
|
||||
<div className="mb-4">
|
||||
<label className="block text-sm font-medium mb-1">
|
||||
Variable Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
value={node.data.name}
|
||||
onBlur={handleChange}
|
||||
className="w-full p-2 border rounded"
|
||||
placeholder="myVariable"
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-4">
|
||||
<label className="block text-sm font-medium mb-1">Type</label>
|
||||
<select
|
||||
name="type"
|
||||
value={node.data.type}
|
||||
onBlur={handleChange}
|
||||
className="w-full p-2 border rounded"
|
||||
>
|
||||
<option value="string">String</option>
|
||||
<option value="number">Number</option>
|
||||
<option value="boolean">Boolean</option>
|
||||
<option value="object">Object</option>
|
||||
<option value="array">Array</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="mb-4">
|
||||
<label className="block text-sm font-medium mb-1">
|
||||
Default Value
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="defaultValue"
|
||||
value={node.data.defaultValue}
|
||||
onBlur={handleChange}
|
||||
className="w-full p-2 border rounded"
|
||||
placeholder="Default value"
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
case "logic":
|
||||
return (
|
||||
<div className="mb-4">
|
||||
<label className="block text-sm font-medium mb-1">
|
||||
JavaScript Code
|
||||
</label>
|
||||
<textarea
|
||||
name="code"
|
||||
value={node.data.code}
|
||||
onBlur={handleChange}
|
||||
className="w-full p-2 border rounded h-40 font-mono text-sm"
|
||||
placeholder="// Write your JavaScript code here"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
case "db-find":
|
||||
return renderDatabaseFields();
|
||||
|
||||
case "db-query":
|
||||
return (
|
||||
<>
|
||||
{renderDatabaseFields()}
|
||||
<div className="mb-4">
|
||||
<button
|
||||
onClick={copyQueryFields}
|
||||
className="px-3 py-1 text-sm bg-gray-100 hover:bg-gray-200 rounded"
|
||||
>
|
||||
Copy Fields
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
case "db-insert":
|
||||
return (
|
||||
<>
|
||||
{renderDatabaseFields()}
|
||||
<div className="mb-4">
|
||||
<label className="block text-sm font-medium mb-1">
|
||||
Variables
|
||||
</label>
|
||||
<textarea
|
||||
name="variables"
|
||||
value={node.data.variables}
|
||||
onBlur={handleChange}
|
||||
className="w-full p-2 border rounded h-20 font-mono text-sm"
|
||||
placeholder="name: string age: number"
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
case "db-update":
|
||||
case "db-delete":
|
||||
return (
|
||||
<>
|
||||
{renderDatabaseFields()}
|
||||
<div className="mb-4">
|
||||
<label className="block text-sm font-medium mb-1">ID Field</label>
|
||||
<input
|
||||
type="text"
|
||||
name="idField"
|
||||
value={node.data.idField}
|
||||
onBlur={handleChange}
|
||||
className="w-full p-2 border rounded"
|
||||
placeholder="id"
|
||||
/>
|
||||
</div>
|
||||
{node.type === "db-update" && (
|
||||
<div className="mb-4">
|
||||
<label className="block text-sm font-medium mb-1">
|
||||
Variables
|
||||
</label>
|
||||
<textarea
|
||||
name="variables"
|
||||
value={node.data.variables}
|
||||
onBlur={handleChange}
|
||||
className="w-full p-2 border rounded h-20 font-mono text-sm"
|
||||
placeholder="name: string age: number"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed right-0 top-0 h-full w-80 bg-white border-l border-gray-200 p-4 shadow-lg transform transition-transform overflow-y-auto">
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<h3 className="text-lg font-semibold">Configure Node</h3>
|
||||
<button onClick={onClose} className="p-1 hover:bg-gray-100 rounded">
|
||||
<X className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
{renderFields()}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user