From 24d1157988bd2e9117c4894027c8371d43c3f635 Mon Sep 17 00:00:00 2001 From: Cristhian Zanforlin Lousa Date: Fri, 7 Jul 2023 19:12:18 -0300 Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix(parameterComponent):=20remov?= =?UTF-8?q?e=20extra=20whitespace=20in=20parameterComponent=20=E2=9C=A8=20?= =?UTF-8?q?feat(EditNodeModal):=20add=20support=20for=20handling=20tab=20s?= =?UTF-8?q?tate=20and=20saving=20changes=20in=20EditNodeModal=20?= =?UTF-8?q?=F0=9F=90=9B=20fix(EditNodeModal):=20fix=20disabled=20condition?= =?UTF-8?q?=20in=20EditNodeModal=20=F0=9F=90=9B=20fix(EditNodeModal):=20re?= =?UTF-8?q?move=20unused=20useEffect=20in=20EditNodeModal=20=E2=9C=A8=20fe?= =?UTF-8?q?at(EditNodeModal):=20add=20handleOnNewValue=20function=20to=20h?= =?UTF-8?q?andle=20changes=20in=20EditNodeModal?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/parameterComponent/index.tsx | 1 + .../src/modals/EditNodeModal/index.tsx | 52 +++++++++++++------ 2 files changed, 36 insertions(+), 17 deletions(-) diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx index 8e22eafac..e9ee5f8a4 100644 --- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx @@ -245,6 +245,7 @@ export default function ParameterComponent({ handleOnNewValue(t); setEnabled(t); }} + size="large" /> diff --git a/src/frontend/src/modals/EditNodeModal/index.tsx b/src/frontend/src/modals/EditNodeModal/index.tsx index b0bd8ce4d..c6cd65243 100644 --- a/src/frontend/src/modals/EditNodeModal/index.tsx +++ b/src/frontend/src/modals/EditNodeModal/index.tsx @@ -33,6 +33,7 @@ import { import { Button } from "../../components/ui/button"; import { Badge } from "../../components/ui/badge"; import { Variable } from "lucide-react"; +import { TabsContext } from "../../contexts/tabsContext"; export default function EditNodeModal({ data }: { data: NodeDataType }) { const [open, setOpen] = useState(true); @@ -55,6 +56,11 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) { const { types } = useContext(typesContext); const ref = useRef(); const [enabled, setEnabled] = useState(null); + const { setTabsState, tabId, save } = useContext(TabsContext); + const { reactFlowInstance } = useContext(typesContext); + + let disabled = + reactFlowInstance?.getEdges().some((e) => e.targetHandle === data.id) ?? false; if (nodeLength == 0) { closePopUp(); } @@ -66,8 +72,6 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) { } } - useEffect(() => {}, [closePopUp, data.node.template]); - function changeAdvanced(node): void { Object.keys(data.node.template).filter((n, i) => { if (n === node.name) { @@ -78,6 +82,20 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) { setNodeValue(!nodeValue); } + const handleOnNewValue = (newValue: any, name) => { + data.node.template[name].value = newValue; + // Set state to pending + setTabsState((prev) => { + return { + ...prev, + [tabId]: { + ...prev[tabId], + isPending: true, + }, + }; + }); + }; + return ( @@ -153,7 +171,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) { : data.node.template[n].value } onChange={(t: string[]) => { - data.node.template[n].value = t; + handleOnNewValue(t, n); }} /> ) : data.node.template[n].multiline ? ( @@ -162,7 +180,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) { editNode={true} value={data.node.template[n].value ?? ""} onChange={(t: string) => { - data.node.template[n].value = t; + handleOnNewValue(t, n); }} /> ) : ( @@ -174,7 +192,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) { } value={data.node.template[n].value ?? ""} onChange={(t) => { - data.node.template[n].value = t; + handleOnNewValue(t, n); }} /> )} @@ -183,13 +201,13 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
{" "} { - data.node.template[n].value = e; - setEnabled(e); + disabled={disabled} + enabled={enabled} + setEnabled={(t) => { + handleOnNewValue(t, n); + setEnabled(t); }} size="small" - disabled={false} />
) : data.node.template[n].type === "float" ? ( @@ -210,8 +228,8 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) { numberOfOptions={nodeLength} editNode={true} options={data.node.template[n].options} - onSelect={(newValue) => - (data.node.template[n].value = newValue) + onSelect={(t) => + (handleOnNewValue(t, n)) } value={ data.node.template[n].value ?? @@ -226,7 +244,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) { editNode={true} value={data.node.template[n].value ?? ""} onChange={(t) => { - data.node.template[n].value = t; + handleOnNewValue(t, n); }} /> @@ -237,12 +255,12 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) { disabled={false} value={data.node.template[n].value ?? ""} onChange={(t: string) => { - data.node.template[n].value = t; + handleOnNewValue(t, n); }} fileTypes={data.node.template[n].fileTypes} suffixes={data.node.template[n].suffixes} onFileChange={(t: string) => { - data.node.template[n].content = t; + handleOnNewValue(t, n); }} > @@ -254,7 +272,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) { disabled={false} value={data.node.template[n].value ?? ""} onChange={(t: string) => { - data.node.template[n].value = t; + handleOnNewValue(t, n); }} /> @@ -265,7 +283,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) { editNode={true} value={data.node.template[n].value ?? ""} onChange={(t: string) => { - data.node.template[n].value = t; + handleOnNewValue(t, n); }} />