required fields validation added

This commit is contained in:
Lucas Oliveira 2023-02-16 14:56:54 -03:00
commit ba61a9533a
4 changed files with 29 additions and 12 deletions

View file

@ -4,15 +4,17 @@ import {
PaperAirplaneIcon, PaperAirplaneIcon,
XMarkIcon, XMarkIcon,
} from "@heroicons/react/24/outline"; } from "@heroicons/react/24/outline";
import { useState } from "react"; import { useContext, useState } from "react";
import { sendAll } from "../../controllers/NodesServices"; import { sendAll } from "../../controllers/NodesServices";
import { alertContext } from "../../contexts/alertContext";
const _ = require("lodash"); const _ = require("lodash");
export default function Chat({ nodes, edges }) { export default function Chat({ reactFlowInstance }) {
const [open, setOpen] = useState(true); const [open, setOpen] = useState(true);
const [chatValue, setChatValue] = useState(""); const [chatValue, setChatValue] = useState("");
const [chatHistory, setChatHistory] = useState([]); const [chatHistory, setChatHistory] = useState([]);
const {setErrorData} = useContext(alertContext);
const addChatHistory = (message, isSend) => { const addChatHistory = (message, isSend) => {
setChatHistory((old) => { setChatHistory((old) => {
let newChat = _.cloneDeep(old); let newChat = _.cloneDeep(old);
@ -20,6 +22,12 @@ export default function Chat({ nodes, edges }) {
return newChat; return newChat;
}); });
}; };
function validateNodes(){
if(reactFlowInstance.getNodes().some((n) => (n.data.node && Object.keys(n.data.node.template).some((t: any) => (n.data.node.template[t].required && !reactFlowInstance.getEdges().some((e) => (e.sourceHandle.split('|')[1] === t && e.sourceHandle.split('|')[2] === n.id))))))){
return false;
}
return true;
}
return ( return (
<> <>
<Transition <Transition
@ -80,14 +88,19 @@ export default function Chat({ nodes, edges }) {
<div className="absolute inset-y-0 right-0 flex items-center pr-3"> <div className="absolute inset-y-0 right-0 flex items-center pr-3">
<button <button
onClick={() => { onClick={() => {
let message = chatValue; if(validateNodes()){
setChatValue(""); let message = chatValue;
addChatHistory(message, true); setChatValue("");
sendAll({ addChatHistory(message, true);
message, sendAll({
nodes, message,
edges, nodes: reactFlowInstance.getNodes(),
}).then((r) => {addChatHistory(r, false)}); edges: reactFlowInstance.getEdges(),
}).then((r) => {addChatHistory(r, false)});
} else {
setErrorData({title: 'Error sending message', list:['There are required fields not filled yet.']})
}
}} }}
> >
<PaperAirplaneIcon <PaperAirplaneIcon

View file

@ -6,5 +6,5 @@ export async function getAll() {
export async function sendAll(data) { export async function sendAll(data) {
console.log(data); console.log(data);
return await axios.post("http://localhost:5003/send", JSON.stringify(data)); return await axios.post("http://localhost:5003/load", data);
} }

View file

@ -71,6 +71,7 @@ export default function ExtraSidebar() {
onDragStart(event, { onDragStart(event, {
type: 'elements', type: 'elements',
name: 'str', name: 'str',
types,
}) })
} }
> >
@ -89,6 +90,7 @@ export default function ExtraSidebar() {
onDragStart(event, { onDragStart(event, {
type: 'elements', type: 'elements',
name: 'chatInput', name: 'chatInput',
types,
}) })
} }
> >
@ -107,6 +109,7 @@ export default function ExtraSidebar() {
onDragStart(event, { onDragStart(event, {
type: 'elements', type: 'elements',
name: 'chatOutput', name: 'chatOutput',
types,
}) })
} }
> >
@ -125,6 +128,7 @@ export default function ExtraSidebar() {
onDragStart(event, { onDragStart(event, {
type: 'elements', type: 'elements',
name: 'bool', name: 'bool',
types,
}) })
} }
> >

View file

@ -99,7 +99,7 @@ export default function FlowPage() {
<Background /> <Background />
<Controls></Controls> <Controls></Controls>
</ReactFlow> </ReactFlow>
<Chat nodes={nodes} edges={edges}/> <Chat reactFlowInstance={reactFlowInstance}/>
</div> </div>
); );
} }