diff --git a/src/frontend/src/components/AccordionComponent/index.tsx b/src/frontend/src/components/AccordionComponent/index.tsx index 19a811f87..c1174269a 100644 --- a/src/frontend/src/components/AccordionComponent/index.tsx +++ b/src/frontend/src/components/AccordionComponent/index.tsx @@ -1,5 +1,8 @@ import { ReactElement, useContext, useEffect, useRef, useState } from "react"; -import { AccordionComponentType, ProgressBarType } from "../../types/components"; +import { + AccordionComponentType, + ProgressBarType, +} from "../../types/components"; import { Progress } from "../../components/ui/progress"; import { setInterval } from "timers/promises"; import { @@ -7,22 +10,33 @@ import { AccordionContent, AccordionItem, AccordionTrigger, -} from "../../components/ui/accordion" +} from "../../components/ui/accordion"; export default function AccordionComponent({ trigger, children, + open = false, }: AccordionComponentType) { + const [value, setValue] = useState(!open ? "" : trigger); + function handleClick() { + value == "" ? setValue(trigger) : setValue(""); + } - - return <> - - - {trigger} - - {children} - - - - + return ( + <> + + + { + handleClick(); + }} + className="ml-3" + > + {trigger} + + {children} + + + + ); } diff --git a/src/frontend/src/contexts/popUpContext.tsx b/src/frontend/src/contexts/popUpContext.tsx index 371aeefce..a59eb0f9f 100644 --- a/src/frontend/src/contexts/popUpContext.tsx +++ b/src/frontend/src/contexts/popUpContext.tsx @@ -5,12 +5,15 @@ import React, { useState } from "react"; export const PopUpContext = createContext({ openPopUp: (popUpElement: JSX.Element) => {}, closePopUp: () => {}, + setCloseEdit: (value: string) => {}, + closeEdit: "", }); interface PopUpProviderProps { children: React.ReactNode; } + const PopUpProvider = ({ children }: PopUpProviderProps) => { const [popUpElements, setPopUpElements] = useState([]); @@ -22,8 +25,11 @@ const PopUpProvider = ({ children }: PopUpProviderProps) => { setPopUpElements((prevPopUps) => prevPopUps.slice(1)); }; + const [closeEdit, setCloseEdit] = useState(""); + + return ( - + {children} {popUpElements[0]} diff --git a/src/frontend/src/modals/ApiModal/index.tsx b/src/frontend/src/modals/ApiModal/index.tsx index 27522ece8..a41b361e8 100644 --- a/src/frontend/src/modals/ApiModal/index.tsx +++ b/src/frontend/src/modals/ApiModal/index.tsx @@ -54,10 +54,11 @@ import { TabsContext } from "../../contexts/tabsContext"; export default function ApiModal({ flow }: { flow: FlowType }) { const [open, setOpen] = useState(true); const { dark } = useContext(darkContext); - const { closePopUp } = useContext(PopUpContext); + const { closePopUp, closeEdit, setCloseEdit } = useContext(PopUpContext); const [activeTab, setActiveTab] = useState("0"); const [isCopied, setIsCopied] = useState(false); const [enabled, setEnabled] = useState(null); + const [openAccordion, setOpenAccordion] = useState(false); const tweak = useRef([]); const { setTweak, getTweak } = useContext(TabsContext); const copyToClipboard = () => { @@ -76,10 +77,19 @@ export default function ApiModal({ flow }: { flow: FlowType }) { function setModalOpen(x: boolean) { setOpen(x); if (x === false) { + setCloseEdit(""); + setTweak([]); closePopUp(); } } - + + useEffect(() => { + if (closeEdit !== "") { + setActiveTab("3"); + setOpenAccordion(true); + } + }, [closeEdit]); + const pythonApiCode = getPythonApiCode(flow, tweak.current); const curl_code = getCurlCode(flow, tweak.current); const pythonCode = getPythonCode(flow, tweak.current); @@ -172,46 +182,42 @@ export default function ApiModal({ flow }: { flow: FlowType }) { tabs[0].code = curl_code; tabs[1].code = pythonApiCode; tabs[2].code = pythonCode; - + setTweak(tweak.current); } function buildContent(value) { const htmlContent = (
- {value != null && value != '' ? value : 'None'} + {value != null && value != "" ? value : "None"}
); return htmlContent; } - function getValue(value, node, template){ - + function getValue(value, node, template) { let returnValue = value ?? ""; - if(getTweak.length > 0){ + if (getTweak.length > 0) { for (const obj of getTweak) { // Obtém a chave do objeto interno - const key = Object.keys(obj)[0]; - // Obtém o valor do objeto interno - const value = obj[key]; - if(key == node['id']){ - Object.keys(value).forEach((key) => { - if(key == template['name']){ - returnValue = value[key]; - } - }) - } + const key = Object.keys(obj)[0]; + // Obtém o valor do objeto interno + const value = obj[key]; + if (key == node["id"]) { + Object.keys(value).forEach((key) => { + if (key == template["name"]) { + returnValue = value[key]; + } + }); } - } - else{ + } + } else { return value ?? ""; } return returnValue; } - - return ( @@ -228,9 +234,15 @@ export default function ApiModal({ flow }: { flow: FlowType }) { setActiveTab(value)} + onValueChange={(value) => { + setActiveTab(value) + + if(tweak.current.length > 0){ + setOpenAccordion(true); + } + }} >
@@ -280,7 +292,10 @@ export default function ApiModal({ flow }: { flow: FlowType }) { > {flow["data"]["nodes"].map((t: any, index) => (
- +
@@ -309,7 +324,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) { "code" || t.data.node.template[n].type === "prompt" || - t.data.node.template[n].type === + t.data.node.template[n].type === "file" || t.data.node.template[n].type === "int") @@ -346,9 +361,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) { : t.data.node .template[n].value } - onChange={(k) => { - - }} + onChange={(k) => {}} onAddInput={(k) => { buildTweakObject( t["data"]["id"], @@ -371,14 +384,23 @@ export default function ApiModal({ flow }: { flow: FlowType }) { )} > { + buildTweakObject( + t["data"]["id"], + k, + t.data.node + .template[n] + ); }} /> @@ -391,12 +413,12 @@ export default function ApiModal({ flow }: { flow: FlowType }) { t.data.node.template[n] .password ?? false } - value={ - - getValue(t.data.node.template[n] - .value, t.data, t.data.node.template[n]) - - } + value={getValue( + t.data.node.template[n] + .value, + t.data, + t.data.node.template[n] + )} onChange={(k) => { buildTweakObject( t["data"]["id"], @@ -433,52 +455,54 @@ export default function ApiModal({ flow }: { flow: FlowType }) { disabled={false} /> - ) - : - t.data.node.template[n] + ) : t.data.node.template[n] .type === "file" ? ( - + .value, + t.data, + t.data.node.template[n] + ) + )} + >
- { - }} - fileTypes={ - t.data.node.template[n] - .fileTypes - } - suffixes={ - t.data.node.template[n] - .suffixes - } - onFileChange={(k: any) => { - }} - > -
- - - ) - : t.data.node.template[n] + {}} + fileTypes={ + t.data.node.template[n] + .fileTypes + } + suffixes={ + t.data.node.template[n] + .suffixes + } + onFileChange={( + k: any + ) => {}} + > + + + ) : t.data.node.template[n] .type === "float" ? (
{ buildTweakObject( t["data"]["id"], @@ -500,22 +524,19 @@ export default function ApiModal({ flow }: { flow: FlowType }) { t.data.node.template[n] .options } - onSelect={(k) =>{ - - - + onSelect={(k) => { buildTweakObject( t["data"]["id"], k, t.data.node.template[n] - ) - } - - } - value={ - getValue(t.data.node.template[n] - .value, t.data, t.data.node.template[n]) - } + ); + }} + value={getValue( + t.data.node.template[n] + .value, + t.data, + t.data.node.template[n] + )} >
) : t.data.node.template[n] @@ -524,10 +545,12 @@ export default function ApiModal({ flow }: { flow: FlowType }) { { buildTweakObject( t["data"]["id"], @@ -542,19 +565,32 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
{ + buildTweakObject( + t["data"]["id"], + k, + t.data.node.template[ + n + ] + ); }} />
@@ -564,19 +600,32 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
{ + buildTweakObject( + t["data"]["id"], + k, + t.data.node.template[ + n + ] + ); }} />
diff --git a/src/frontend/src/modals/codeAreaModal/index.tsx b/src/frontend/src/modals/codeAreaModal/index.tsx index f6e4b8e1c..0f9a26f33 100644 --- a/src/frontend/src/modals/codeAreaModal/index.tsx +++ b/src/frontend/src/modals/codeAreaModal/index.tsx @@ -34,13 +34,15 @@ export default function CodeAreaModal({ const [code, setCode] = useState(value); const { dark } = useContext(darkContext); const { setErrorData, setSuccessData } = useContext(alertContext); - const { closePopUp } = useContext(PopUpContext); + const { closePopUp,setCloseEdit } = useContext(PopUpContext); const ref = useRef(); function setModalOpen(x: boolean) { setOpen(x); if (x === false) { setTimeout(() => { closePopUp(); + setCloseEdit("editcode"); + }, 300); } } diff --git a/src/frontend/src/modals/promptModal/index.tsx b/src/frontend/src/modals/promptModal/index.tsx index 8a3ce4185..f051de427 100644 --- a/src/frontend/src/modals/promptModal/index.tsx +++ b/src/frontend/src/modals/promptModal/index.tsx @@ -16,12 +16,13 @@ export default function PromptAreaModal({ const [myValue, setMyValue] = useState(value); const { dark } = useContext(darkContext); const { setErrorData, setSuccessData } = useContext(alertContext); - const { closePopUp } = useContext(PopUpContext); + const { closePopUp, setCloseEdit } = useContext(PopUpContext); const ref = useRef(); function setModalOpen(x: boolean) { setOpen(x); if (x === false) { setTimeout(() => { + setCloseEdit("prompt"); closePopUp(); }, 300); } diff --git a/src/frontend/src/modals/textAreaModal/index.tsx b/src/frontend/src/modals/textAreaModal/index.tsx index a72f74643..4dee61385 100644 --- a/src/frontend/src/modals/textAreaModal/index.tsx +++ b/src/frontend/src/modals/textAreaModal/index.tsx @@ -15,12 +15,13 @@ export default function TextAreaModal({ }) { const [open, setOpen] = useState(true); const [myValue, setMyValue] = useState(value); - const { closePopUp } = useContext(PopUpContext); + const { closePopUp, setCloseEdit } = useContext(PopUpContext); const ref = useRef(); function setModalOpen(x: boolean) { setOpen(x); if (x === false) { setTimeout(() => { + setCloseEdit("textarea"); closePopUp(); }, 300); } diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts index 0adbdc1d3..4c936cabe 100644 --- a/src/frontend/src/types/components/index.ts +++ b/src/frontend/src/types/components/index.ts @@ -121,6 +121,6 @@ export type RadialProgressType = { export type AccordionComponentType = { children?: ReactElement; - value?: string; + open?: boolean; trigger?: string; }; \ No newline at end of file