26/9

src/assets/css/style.css

@@ -432,6 +432,15 @@ foreignObject {
   cursor: pointer;
 }
 
+.custom-node .btn-show:hover {
+  background: #007c89;
+  border-radius: 50%;
+  padding-top: 3px;
+}
+.custom-node .btn-show:hover img {
+  filter: brightness(0) invert(1);
+}
+
 .custom-node .actions {
   position: absolute;
   width: 100px;
@@ -453,7 +462,8 @@ foreignObject {
 }
 
 .custom-node .actions .btn-remove {
-  background: #007c89;
+  background: #f0f0f0;
+  color: #000;
   display: block;
   width: 100%;
   height: 35px;
@@ -462,8 +472,12 @@ foreignObject {
   text-align: left;
   padding: 0 10px;
 }
-
-.btn-save {
+.custom-node .actions .btn-edit:hover,
+.custom-node .actions .btn-remove:hover {
+  background: #007c89;
+  color: #fff;
+}
+.btn-save.all {
   position: absolute;
   right: 20px;
   top: 20px;

src/index.css

@@ -27,7 +27,7 @@ body,
   position: fixed;
   top: 50%;
   left: 50%;
-  width: 1334px;
+  width: 1000px;
   background: #fff;
   z-index: 1000;
   transform: translate(-50%, -50%);
@@ -42,7 +42,7 @@ body,
   padding: 40px;
   border-radius: 5px;
   overflow-y: auto;
-  max-height: 600px;
+  max-height: 500px;
 }
 
 .popup-close {

src/nodes/NodeFlow.tsx

@@ -7,7 +7,6 @@ import {
   BackgroundVariant,
   MarkerType,
   useReactFlow,
-  ReactFlowProvider,
   useNodesState,
   useEdgesState,
   useStoreApi,
@@ -29,6 +28,18 @@ const nodeContents = {
     <label for="email-body">Body:</label>
     <textarea id="email-body" name="email-body" rows="4" placeholder="Enter email body"></textarea>
   `,
+  'send-sms': `
+    <label for="email-subject">Subject:</label>
+    <input type="text" id="email-subject" name="email-subject" placeholder="Enter subject">
+    <label for="email-body">Body:</label>
+    <textarea id="email-body" name="email-body" rows="4" placeholder="Enter email body"></textarea>
+  `,
+  'send-slack': `
+    <label for="email-subject">Subject:</label>
+    <input type="text" id="email-subject" name="email-subject" placeholder="Enter subject">
+    <label for="email-body">Body:</label>
+    <textarea id="email-body" name="email-body" rows="4" placeholder="Enter email body"></textarea>
+  `,
   'customer-sign': `
     <label for="customer-name">Customer Name:</label>
     <input type="text" id="customer-name" name="customer-name" placeholder="Enter customer name">
@@ -60,7 +71,7 @@ const NodeFlow = ({ initialNodes, initialEdges }) => {
   const [showTabBar, setShowTabBar] = useState(false);
   const [lastNodeId, setLastNodeId] = useState(nodes[0].id);
   const [showPopup, setShowPopup] = useState(false);
-  const [selectedNodeContent, setSelectedNodeContent] = useState('');
+  const [selectedNodeContent, setSelectedNodeContent] = useState<string>('');
   const [addNodeCallback, setAddNodeCallback] = useState(() => () => {});
   const [isTabbarVisible, setIsTabbarVisible] = useState(false);
   const { screenToFlowPosition } = useReactFlow();
@@ -290,12 +301,14 @@ const NodeFlow = ({ initialNodes, initialEdges }) => {
 
     const newNodeId = nanoid(8);
     const addNodeId = '2';
+    const addNodeKey = 'add-node';
     const addNode = nodes.find((node) => node.id === addNodeId);
     const targetEdge = edges.find(
       (edge) => edge?.source === '2' || edge?.target === '2'
     );
     const targetNodeId =
       targetEdge?.source === '2' ? targetEdge?.target : targetEdge?.source;
+
     const targetNode = nodes.find((node) => node.id === targetNodeId);
 
     const newNodePosition = targetNode
@@ -336,7 +349,7 @@ const NodeFlow = ({ initialNodes, initialEdges }) => {
 
           <div className={`actions actions-${newNodeId}`}>
             <button
-              onClick={() => handleEditNode(newNodeId)}
+              onClick={() => handleEditNode(newNodeId, type.key)}
               className="btn-edit"
             >
               Sửa
@@ -379,8 +392,27 @@ const NodeFlow = ({ initialNodes, initialEdges }) => {
       const yesNode = createBranchNode(yesNodeId, -200);
       const noNode = createBranchNode(noNodeId, 200);
 
+      let target = '2';
+      if (edges.length > 1) {
+        const lastItem = edges[edges.length - 1];
+
+        const targetElse = edges.find(
+          (n) => !edges.some((e) => e.source === n.id)
+        );
+        target = targetElse?.source;
+        console.log('edges', edges);
+        console.log('lastItem', lastItem);
+        console.log('eges > 1', targetElse);
+      } else {
+        const targetElse = edges.find(
+          (n) => !edges.some((e) => e.source === n.id)
+        );
+        target = targetElse?.source;
+        console.log('eges = 1', targetElse);
+      }
+
       const ifelseEdges = [
-        { id: nanoid(8), source: targetNodeId, target: newNodeId },
+        { id: nanoid(8), source: target, target: newNodeId },
         {
           id: nanoid(8),
           source: newNodeId,
@@ -398,7 +430,7 @@ const NodeFlow = ({ initialNodes, initialEdges }) => {
       ];
 
       setNodes((nds) => [
-        ...nds.filter((node) => node.id !== addNodeId),
+        ...nds.filter((node) => node.key !== addNodeKey),
         newNode,
         yesNode,
         noNode,
@@ -574,8 +606,6 @@ const NodeFlow = ({ initialNodes, initialEdges }) => {
           (edge) => edge.source === nodeId || edge.target === nodeId
         );
 
-        console.log('connectedEdges', connectedEdges);
-
         const sourceNode = connectedEdges.find(
           (edge) => edge.target === nodeId
         )?.source;
@@ -701,8 +731,8 @@ const NodeFlow = ({ initialNodes, initialEdges }) => {
         ),
         {
           id: `edge-${NodeRemaining.id}-${TargetIfelse[0].source}`,
-          source: NodeRemaining.id,
-          target: TargetIfelse[0].source,
+          source: TargetIfelse[0].source,
+          target: NodeRemaining.id,
         },
       ];
       return updatedEdges;
@@ -724,9 +754,14 @@ const NodeFlow = ({ initialNodes, initialEdges }) => {
   };
 
   // Hàm sửa node
-  const handleEditNode = (nodeId: string) => {
-    // Logic chỉnh sửa node
-    alert(`Sửa node: ${nodeId}`);
+  const handleEditNode = (nodeId, NodeKey) => {
+    setShowPopup(true);
+    const content = nodeContents[NodeKey]; // Lấy nội dung từ nodeContents dựa trên key node
+    setSelectedNodeContent(content);
+
+    document
+      .querySelector('.actions-' + nodeId)
+      ?.classList.remove('staticNode');
   };
 
   const handleSave = () => {
@@ -758,7 +793,7 @@ const NodeFlow = ({ initialNodes, initialEdges }) => {
             <Controls position="right-bottom" />
             <Background variant={BackgroundVariant.Lines} color="#ccccc" />
           </ReactFlow>
-          <button className="btn-save" onClick={() => handleSave()}>
+          <button className="btn-save all" onClick={() => handleSave()}>
             Save
           </button>
         </div>