diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx index aaaade2fa..4be3ff402 100644 --- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx @@ -12,6 +12,8 @@ import FloatComponent from "../../../../components/floatComponent"; import Dropdown from "../../../../components/dropdownComponent"; import CodeAreaComponent from "../../../../components/codeAreaComponent"; import InputFileComponent from "../../../../components/inputFileComponent"; +import { TabsContext } from "../../../../contexts/tabsContext"; +import IntComponent from "../../../../components/intComponent"; export default function ParameterComponent({ left, @@ -44,6 +46,7 @@ export default function ParameterComponent({ const { reactFlowInstance } = useContext(typesContext); let disabled = reactFlowInstance?.getEdges().some((e) => e.targetHandle === id) ?? false; + const { save } = useContext(TabsContext); return (
{ data.node.template[name].value = t; + save(); }} /> ) : data.node.template[name].multiline ? ( @@ -106,6 +110,7 @@ export default function ParameterComponent({ value={data.node.template[name].value ?? ""} onChange={(t: string) => { data.node.template[name].value = t; + save(); }} /> ) : ( @@ -115,6 +120,7 @@ export default function ParameterComponent({ value={data.node.template[name].value ?? ""} onChange={(t) => { data.node.template[name].value = t; + save(); }} /> )} @@ -127,6 +133,7 @@ export default function ParameterComponent({ setEnabled={(t) => { data.node.template[name].value = t; setEnabled(t); + save(); }} />
@@ -136,6 +143,7 @@ export default function ParameterComponent({ value={data.node.template[name].value ?? ""} onChange={(t) => { data.node.template[name].value = t; + save(); }} /> ) : left === true && @@ -152,18 +160,32 @@ export default function ParameterComponent({ value={data.node.template[name].value ?? ""} onChange={(t: string) => { data.node.template[name].value = t; + save(); }} /> - ) : (left === true && type === "file")||data.type==="JsonSpec" ? ( + ) : left === true && type === "file" ? ( { - if(data.node.template[name]?.value){ - data.node.template[name].value = t; - } + data.node.template[name].value = t; + }} + fileTypes={data.node.template[name].fileTypes} + suffixes={data.node.template[name].suffixes} + onFileChange={(t: string) => { + data.node.template[name].content = t; + save(); }} > + ) : left === true && type === "int" ? ( + { + data.node.template[name].value = t; + save(); + }} + /> ) : ( <> )} diff --git a/src/frontend/src/components/inputFileComponent/index.tsx b/src/frontend/src/components/inputFileComponent/index.tsx index b7a8a0bf0..36d13e918 100644 --- a/src/frontend/src/components/inputFileComponent/index.tsx +++ b/src/frontend/src/components/inputFileComponent/index.tsx @@ -1,39 +1,52 @@ import { DocumentMagnifyingGlassIcon } from "@heroicons/react/24/outline"; import { useContext, useEffect, useState } from "react"; import { alertContext } from "../../contexts/alertContext"; -import { TextAreaComponentType } from "../../types/components"; +import { FileComponentType } from "../../types/components"; export default function InputFileComponent({ value, onChange, disabled, -}: TextAreaComponentType) { + suffixes, + fileTypes, + onFileChange +}: FileComponentType) { const [myValue, setMyValue] = useState(value); const { setErrorData } = useContext(alertContext); useEffect(() => { if (disabled) { setMyValue(""); onChange(""); + onFileChange("") } }, [disabled, onChange]); function attachFile(fileReadEvent: ProgressEvent) { fileReadEvent.preventDefault(); const file = fileReadEvent.target.result; - console.log(file); + onFileChange(file as string) + } + + function checkFileType(fileName:string):boolean{ + for (let index = 0; index < suffixes.length; index++) { + if(fileName.endsWith(suffixes[index])){ + return true + } + } + return false } const handleButtonClick = () => { const input = document.createElement("input"); input.type = "file"; - input.accept = ".json"; + input.accept = suffixes.join(","); input.style.display = "none"; input.multiple = false; input.onchange = (e: Event) => { const file = (e.target as HTMLInputElement).files?.[0]; const fileData = new FileReader(); fileData.onload = attachFile; - if (file && file.name.endsWith(".json")) { + if (file && checkFileType(file.name)) { fileData.readAsDataURL(file); setMyValue(file.name); onChange(file.name); @@ -41,7 +54,7 @@ export default function InputFileComponent({ setErrorData({ title: "Please select a valid file. Only files this files are allowed:", - list: ["*.json"], + list: fileTypes, }); } }; diff --git a/src/frontend/src/contexts/tabsContext.tsx b/src/frontend/src/contexts/tabsContext.tsx index 6626ff0cc..a11f0339d 100644 --- a/src/frontend/src/contexts/tabsContext.tsx +++ b/src/frontend/src/contexts/tabsContext.tsx @@ -5,6 +5,7 @@ import { normalCaseToSnakeCase } from "../utils"; import { alertContext } from "./alertContext"; const TabsContextInitialValue: TabsContextType = { + save:()=>{}, tabIndex: 0, setTabIndex: (index: number) => {}, flows: [], @@ -35,15 +36,20 @@ export function TabsProvider({ children }: { children: ReactNode }) { newNodeId.current = newNodeId.current + 1; return newNodeId.current; } + function save(){ + if (flows.length !== 0) + window.localStorage.setItem( + "tabsData", + JSON.stringify({ tabIndex, flows, id, nodeId: newNodeId.current }) + ); + } useEffect(() => { //save tabs locally - if (flows.length !== 0) - window.localStorage.setItem( - "tabsData", - JSON.stringify({ tabIndex, flows, id, nodeId: newNodeId.current }) - ); + save() }, [flows, id, tabIndex, newNodeId]); + + useEffect(() => { //get tabs locally saved let cookie = window.localStorage.getItem("tabsData"); @@ -177,6 +183,7 @@ export function TabsProvider({ children }: { children: ReactNode }) { return ( void; + value: string; + suffixes:Array; + fileTypes:Array; + onFileChange:(value: string) => void; +}; + export type DisclosureComponentType = { children: ReactNode; button: { diff --git a/src/frontend/src/types/tabs/index.ts b/src/frontend/src/types/tabs/index.ts index e872a3f58..625073fb3 100644 --- a/src/frontend/src/types/tabs/index.ts +++ b/src/frontend/src/types/tabs/index.ts @@ -1,6 +1,7 @@ import { FlowType } from "../flow"; export type TabsContextType = { + save:()=>void; tabIndex: number; setTabIndex: (index: number) => void; flows: Array;