addition and creation of node

theprogrammedwords · Apr 7, 2024 · 00d6a79 · 00d6a79
1 parent ca4d1a6
commit 00d6a79
Show file tree

Hide file tree

Showing 2 changed files with 86 additions and 21 deletions.
diff --git a/src/components/Flow.js b/src/components/Flow.js
@@ -36,7 +36,7 @@ const nodeTypes = { node: Node };
 
 const ActionBarWrapper = styled.div`
   display: flex;
-  flex-direction: row-reverse;
+  flex-direction: row;
   width: 100%;
   background-color: #b8a6b4;
   padding: 4px;
@@ -45,6 +45,8 @@ const ActionBarWrapper = styled.div`
     background-color: #83727f;
     border: 1px solid #83727f;
     margin: 4px;
+    padding: 8px;
+    border-radius: 8px;
     color: white;
   }
 `;
@@ -143,17 +145,16 @@ const OverviewFlow = () => {
   return (
     <>
       <ActionBarWrapper>
+        <button className="download" onClick={() => createNode()}>
+          Create a Node
+        </button>
         <button className="download" onClick={saveHandler}>
           Download as JSON
         </button>
 
         <button className="download" onClick={saveHandler}>
           Download as PNG
         </button>
-
-        <button className="download" onClick={() => createNode()}>
-          Create a Node
-        </button>
       </ActionBarWrapper>
       <div className="dndflow">
         <ReactFlowProvider>
@@ -197,7 +198,7 @@ const OverviewFlow = () => {
             setNodeName={setNodeName}
           />
 
-          {showTaskCreator && <CreateTask />}
+          {showTaskCreator && <CreateTask setNodes={setNodes} />}
         </ReactFlowProvider>
       </div>
     </>

diff --git a/src/components/SideBar/NodeCreator/index.js b/src/components/SideBar/NodeCreator/index.js
@@ -5,40 +5,57 @@ import { nodes } from "../../../initial-elements";
 const EditMessageWrapper = styled.div`
   background-color: #51424e;
   padding: 12px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
   border-radius: 8px;
   position: absolute;
   top: 60px;
   left: 46%;
   width: fit-content;
   textarea {
-    border-radius: 8px;
+    width: 120%;
   }
 
   label,
   span {
     color: white;
     margin: 4px 0 4px 0;
   }
+
+  button {
+    padding: 4px;
+    margin-top: 8px;
+  }
 `;
-export default function CreateTask({ textRef, nodeName, setNodeName }) {
+export default function CreateTask({
+  textRef,
+  nodeName,
+  setNodeName,
+  setNodes,
+}) {
   const initialData = {
     id: "0",
     type: "node",
     data: {
       heading: "",
       name: "",
+      label: "",
       parameterArray: [
         {
           type: "textarea",
-          value: "",
+          label: "",
+          value: null,
         },
         {
           type: "checkbox",
-          value: "",
+          label: "",
+          value: false,
         },
         {
           type: "select",
-          value: "",
+          label: "",
+          value: null,
         },
       ],
     },
@@ -47,45 +64,84 @@ export default function CreateTask({ textRef, nodeName, setNodeName }) {
   const [nodesData, setNodesData] = useState(initialData);
 
   const handleOnNodeDataChange = (e, type) => {
+    let updatedData = { ...nodesData };
+
     if (type === "name") {
-      let data = nodeName;
-      data[type] = e.target.value;
-      setNodeName(data);
+      updatedData[type] = e.target.value;
+    } else {
+      const dataItemIndex = updatedData.data.parameterArray.findIndex(
+        (param) => param.type === type
+      );
+
+      if (dataItemIndex !== -1) {
+        const updatedDataItem = {
+          ...updatedData.data.parameterArray[dataItemIndex],
+        };
+
+        if (type === "checkbox") {
+          updatedDataItem.value = e.target.checked;
+        } else {
+          updatedDataItem.value = e.target.value;
+        }
+
+        updatedData.data.parameterArray[dataItemIndex] = updatedDataItem;
+      }
     }
+
+    setNodesData(updatedData);
+  };
+
+  const createTask = () => {
+    let data = [];
+    data.push(nodesData);
+    setNodes(data);
   };
+
   return (
     <EditMessageWrapper className="updatenode__controls">
       <label>
-        <strong>Task Editor : {nodesData?.heading}</strong>
+        Task Editor :<input value={nodesData?.heading}></input>
       </label>
       <br />
       <div style={{ display: "flex", marginBottom: "4px" }}>
-        <span style={{ marginRight: "8px" }}>Task name</span>
+        <span style={{ marginRight: "6px" }}>Task name:</span>
         <input
           ref={textRef}
           value={nodesData?.name}
           onChange={(evt) => handleOnNodeDataChange(evt, "name")}
         />
       </div>
 
-      {nodesData?.parameterArray?.map((item, index) => {
+      {nodesData?.data?.parameterArray?.map((item, index) => {
         return (
           <OptionWrapper>
             {item.type === "textarea" && (
               <div>
                 <div style={{ color: "white" }}>Task Description : </div>
-                <textarea className="textarea" value={item?.value} />
+                <textarea
+                  className="textarea"
+                  value={item?.value}
+                  onChange={(evt) => handleOnNodeDataChange(evt, item.type)}
+                />
               </div>
             )}
             {item.type === "checkbox" && (
-              <div style={{ display: "flex" }} className="checkbox">
+              <div
+                style={{
+                  display: "flex",
+                  justifyContent: "space-between",
+                  width: "100%",
+                }}
+                className="checkbox"
+              >
                 <label for="task-checkbox">The task is completed ? </label>
                 <input
                   type="checkbox"
                   id="task-checkbox"
                   name="task-checkbox"
-                  value="TaskCompleted"
+                  value={true}
                   checked={item?.value}
+                  onChange={(evt) => handleOnNodeDataChange(evt, item.type)}
                 />
               </div>
             )}
@@ -96,6 +152,7 @@ export default function CreateTask({ textRef, nodeName, setNodeName }) {
                     lineHeight: "2.5",
                     marginRight: "4px",
                     color: "white",
+                    width: "100%",
                   }}
                   for="task-checkbox"
                 >
@@ -105,7 +162,8 @@ export default function CreateTask({ textRef, nodeName, setNodeName }) {
                   className="select"
                   name="cars"
                   id="cars"
-                  value={item.value}
+                  value={!item.value}
+                  onChange={(evt) => handleOnNodeDataChange(evt, item.type)}
                 >
                   <option value="start">Started</option>
                   <option value="in-progress">In-progress</option>
@@ -117,6 +175,12 @@ export default function CreateTask({ textRef, nodeName, setNodeName }) {
           </OptionWrapper>
         );
       })}
+      <button
+        style={{ background: "#b8a6b4", border: "0px" }}
+        onClick={() => createTask()}
+      >
+        Add node
+      </button>
     </EditMessageWrapper>
   );
 }