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;