From b6f0356c0905f065c1ae274c40e16ba4f72552d6 Mon Sep 17 00:00:00 2001 From: Tieptk Date: Fri, 23 Aug 2024 14:19:10 +0700 Subject: [PATCH] update --- src/main.tsx | 1 + src/nodes/NoteFlow.tsx | 380 +++++++++++++++-------------------------- 2 files changed, 137 insertions(+), 244 deletions(-) diff --git a/src/main.tsx b/src/main.tsx index 5eb2c36..8d624a4 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -4,6 +4,7 @@ import ReactDOM from 'react-dom/client'; import App from './App'; import NoteFlow from './nodes/NoteFlow'; import './index.css'; +import NoteFlowNew from './nodes/NodeFlowNew'; ReactDOM.createRoot(document.getElementById('root')!).render( diff --git a/src/nodes/NoteFlow.tsx b/src/nodes/NoteFlow.tsx index e84da50..485dd2a 100644 --- a/src/nodes/NoteFlow.tsx +++ b/src/nodes/NoteFlow.tsx @@ -1,118 +1,88 @@ -import { useState,useCallback } from 'react'; -import {ReactFlow, addEdge, Controls, Background, MarkerType } from '@xyflow/react'; +import { useState } from 'react'; +import { ReactFlow, addEdge, Controls, Background } from '@xyflow/react'; import '@xyflow/react/dist/style.css'; -import { FiUser, FiMail, FiCheckCircle,FiList } from 'react-icons/fi'; -import {FaShuffle } from "react-icons/fa6"; +import { FiUser, FiMail, FiCheckCircle, FiList } from 'react-icons/fi'; +import { FaShuffle } from 'react-icons/fa6'; - -const initialNode = { - id: '1', - type: 'input', - data: { +const initialNodes = [ + { + id: '1', + type: 'input', + data: { label: ( -
+
- Customer signs up for product updates + Customer signs up for product updates
- ) + ), }, position: { x: 250, y: 100 }, -}; + }, + { + id: '2', + data: { label: 'Add Note' }, + position: { x: 250, y: 250 }, + }, +]; const tabBarOptions = [ - { - label: 'Send email', - id: '2', - type: '', - html: ( -
- - Send email -
- ), - position: { x: 250, y: 200 }, - }, - { - label: 'Replied to conversation?', + { + label: 'Send email', id: '3', type: '', html: ( -
- - Replied to conversation? -
- ), - position: { x: 250, y: 290 }, - }, - { - label: 'Send survey', - id: '4', - type: 'output', - html: ( -
- - Send survey -
- ), - position: { x: 100, y: 400 }, - }, - { - label: 'Contact Exists', - id: '5', - type: 'output', - html: ( -
- - Contact Exits -
- ), - position: { x: 400, y: 400 }, - }, +
+ + Send email +
+ ), + position: { x: 250, y: 200 }, + }, + { + label: 'Replied to conversation?', + id: '4', + type: '', + html: ( +
+ + Replied to conversation? +
+ ), + position: { x: 250, y: 290 }, + }, + { + label: 'Send survey', + id: '5', + type: 'output', + html: ( +
+ + Send survey +
+ ), + position: { x: 100, y: 400 }, + }, + { + label: 'Contact Exists', + id: '6', + type: 'output', + html: ( +
+ + Contact Exists +
+ ), + position: { x: 400, y: 400 }, + }, ]; -// Nội dung popup cho mỗi node -const nodeContents = { - '2': ` - - - - - `, - '1': ` - - - - - `, - '3': ` - - - `, - '5': ` - - - `, - '4': ` - - - - - ` -}; - - const NoteFlow = () => { - const [nodes, setNodes] = useState([initialNode]); - const [edges, setEdges] = useState([]); + const [nodes, setNodes] = useState(initialNodes); + const [edges, setEdges] = useState([ + { id: 'e1-2', source: '1', target: '2' }, // Kết nối node "Add Note" với node mặc định ban đầu + ]); const [showTabBar, setShowTabBar] = useState(false); const [lastNodeId, setLastNodeId] = useState('1'); - const [showAdditionalOptions, setShowAdditionalOptions] = useState(false); - const [selectedNodeContent, setSelectedNodeContent] = useState(''); - const [showPopup, setShowPopup] = useState(false); - const [nodeToDelete, setNodeToDelete] = useState(null); const handleAddNoteClick = () => { setShowTabBar(true); @@ -120,121 +90,101 @@ const NoteFlow = () => { const handleTabClick = (option) => { setShowTabBar(false); + const newNode = { id: option.id, data: { label: option.html }, position: { x: option.position.x, y: option.position.y }, }; - setNodes((nds) => [...nds, newNode]); - setEdges((eds) => addEdge({ id: `e${lastNodeId}-${option.id}`, source: lastNodeId, target: option.id, animated: false }, eds)); - setLastNodeId(option.id); + const addNoteNode = nodes.find((node) => node.id === '2'); - + if (option.id === '4') { + // Xóa node "Add Note" + setNodes((nds) => nds.filter((node) => node.id !== '2')); - if (option.id === '3') { - const yesNode = { + // Thêm node "Replied to conversation?" + const repliedNode = { id: '4', - type: 'output', - data: { label: ( -
- - Send survey -
- ) }, - position: { x: 100, y: 400 }, + data: { label: option.html }, + position: { x: option.position.x, y: option.position.y }, + }; + + // Thêm các nhánh "Send survey" và "Contact Exists" + const yesNode = { + id: '5', + data: { + label: ( +
+ + Send survey +
+ ), + }, + position: { x: option.position.x - 150, y: option.position.y + 150 }, }; const noNode = { - id: '5', - type: 'output', - data: { label: ( -
- - Contact Exits -
- ) }, - position: { x: 400, y: 400 }, + id: '6', + data: { + label: ( +
+ + Contact Exists +
+ ), + }, + position: { x: option.position.x + 150, y: option.position.y + 150 }, }; - setNodes((nds) => [...nds, yesNode, noNode]); + setNodes((nds) => [...nds, repliedNode, yesNode, noNode]); setEdges((eds) => [ ...eds, - { id: 'e3-4', source: '3', target: '4', label: 'yes', animated: false,}, - { id: 'e3-5', source: '3', target: '5', label: 'no', animated: false}, + { id: 'e4-5', source: '4', target: '5', label: 'yes', animated: false }, + { id: 'e4-6', source: '4', target: '6', label: 'no', animated: false }, + { id: `e${lastNodeId}-4`, source: lastNodeId, target: '4' } // Kết nối node hiện tại với "Replied to conversation?" ]); + } else { + if (addNoteNode) { + // Di chuyển node "Add Note" xuống dưới node mới + setNodes((nds) => + nds.map((node) => + node.id === '2' + ? { ...node, position: { x: option.position.x, y: option.position.y + 150 } } + : node + ) + ); + } + + // Thêm node mới vào danh sách node + setNodes((nds) => [...nds, newNode]); + + // Kết nối node mới với node hiện tại + setEdges((eds) => addEdge({ id: `e${lastNodeId}-${option.id}`, source: lastNodeId, target: option.id }, eds)); + + // Kết nối node "Add Note" cũ với node mới + if (addNoteNode) { + setEdges((eds) => addEdge({ id: `e${option.id}-2`, source: option.id, target: '2' }, eds)); + } + + // Cập nhật lastNodeId + setLastNodeId(option.id); } }; - const handleAdditionalOptionClick = (option) => { - setShowAdditionalOptions(false); - - const surveyNode = { - id: option.id, - data: { label: 'Send survey' }, - position: { x: 100, y: 150 * (nodes.length + 1) }, - }; - - const contactExistsNode = { - id: '5', - data: { label: 'Contact Exists' }, - position: { x: 400, y: 150 * (nodes.length + 1) }, - }; - - setNodes((nds) => [...nds, surveyNode, contactExistsNode]); - - setEdges((eds) => [ - ...eds, - { id: `e${lastNodeId}-${option.id}`, source: lastNodeId, target: option.id, label: 'yes', animated: true }, - { id: `e${option.id}-5`, source: option.id, target: '5', label: 'no', animated: true }, - ]); - }; - const onNodeClick = (event, node) => { - const content = nodeContents[node.id]; - setSelectedNodeContent(content); - setShowPopup(true); - - }; - - const hideenPopup = () => { - setShowPopup(false); - } - - const onConnect = (params) => setEdges((eds) => addEdge(params, eds)); - - const onNodeContextMenu = useCallback((event, node) => { - event.preventDefault(); // Ngăn không cho menu chuột phải mặc định hiện ra - setNodeToDelete(node); - }, []); - - const handleNodeDelete = () => { - if (nodeToDelete) { - setNodes((nds) => nds.filter((node) => node.id !== nodeToDelete.id)); - setEdges((eds) => eds.filter((edge) => edge.source !== nodeToDelete.id && edge.target !== nodeToDelete.id)); - setNodeToDelete(null); + if (node.id === '2') { // Check if the clicked node is "Add Note" + setShowTabBar(true); } }; return ( -
- +
+ - + - {showTabBar && (
{ ))}
)} - {showAdditionalOptions && ( -
- {additionalOptions.map((option) => ( -
handleAdditionalOptionClick(option)} - style={{ - padding: '10px', - cursor: 'pointer', - borderBottom: '1px solid #ddd', - }} - > - {option.label} -
- ))} -
- )} - {showPopup && ( - <> -
-
-
-
-
-
- - -
-
-
- - )} - {nodeToDelete && ( -
- -
- )}
); }; -export default NoteFlow; \ No newline at end of file +export default NoteFlow;