From cd52d12f6049fdb2996f45e8a3000c0a30278d81 Mon Sep 17 00:00:00 2001 From: monilprajapati Date: Sat, 6 Jul 2024 13:42:39 +0530 Subject: [PATCH] Added Expand window button and code editor in subflow --- frontend/src/components/ParsedAction.jsx | 8 +- .../src/components/ShuffleCodeEditor1.jsx | 6 + frontend/src/views/AngularWorkflow.jsx | 302 +++++++++++------- 3 files changed, 205 insertions(+), 111 deletions(-) diff --git a/frontend/src/components/ParsedAction.jsx b/frontend/src/components/ParsedAction.jsx index 8a0ef74a..937b3111 100755 --- a/frontend/src/components/ParsedAction.jsx +++ b/frontend/src/components/ParsedAction.jsx @@ -3162,7 +3162,13 @@ const ParsedAction = (props) => { if (parsedvalue === undefined || parsedvalue === null) { parsedvalue = "" } - + console.log("Data sending to codeeditor(Action): ", { + "name": data.name, + "value": parsedvalue, + "field_number": count, + "actionlist": actionlist, + "field_id": clickedFieldId, + } ) setEditorData({ "name": data.name, "value": parsedvalue, diff --git a/frontend/src/components/ShuffleCodeEditor1.jsx b/frontend/src/components/ShuffleCodeEditor1.jsx index 05830da8..ab4fee06 100644 --- a/frontend/src/components/ShuffleCodeEditor1.jsx +++ b/frontend/src/components/ShuffleCodeEditor1.jsx @@ -1767,6 +1767,7 @@ const CodeEditor = (props) => { // This is to make it so we don't need to handle these fixes on the // backend by itself var fixedcodedata = localcodedata + console.log("Fixedcodedata: ", fixedcodedata) const valid = validateJson(localcodedata, true) if (valid.valid) { fixedcodedata = JSON.stringify(valid.result, null, 2) @@ -1779,6 +1780,11 @@ const CodeEditor = (props) => { setcodedata(fixedcodedata); setExpansionModalOpen(false) } else if (changeActionParameterCodeMirror !== undefined) { + console.log("Entering in Submit onCLick") + console.log("Data passing to chnageActionParameterCodeMirror: ", fixedcodedata) + console.log("Fieldcount: ", fieldCount) + console.log("Actionlist: ", actionlist) + console.log("Event: ", event) //changeActionParameterCodeMirror(event, fieldCount, fixedcodedata) changeActionParameterCodeMirror(event, fieldCount, fixedcodedata, actionlist) setExpansionModalOpen(false) diff --git a/frontend/src/views/AngularWorkflow.jsx b/frontend/src/views/AngularWorkflow.jsx index 86bdd1b8..1fe000b1 100755 --- a/frontend/src/views/AngularWorkflow.jsx +++ b/frontend/src/views/AngularWorkflow.jsx @@ -69,6 +69,7 @@ import { AvatarGroup, Autocomplete, Radio, + ButtonGroup, } from "@mui/material"; import { @@ -12833,6 +12834,7 @@ const releaseToConnectLabel = "Release to Connect" workflow.triggers[selectedTriggerIndex].parameters[1] = { name: "argument", value: "", + id:"subflow_field" }; workflow.triggers[selectedTriggerIndex].parameters[2] = { name: "user_apikey", @@ -13346,13 +13348,14 @@ const releaseToConnectLabel = "Release to Connect" } }} disabled={isCloud && isParent} - onClick={() => { - handleSubflowStartnodeSelection({ - target: { - value: action - } - }) - }} + onClick={() => { + handleSubflowStartnodeSelection({ + target: { + value: action + } + }) + document.activeElement.blur(); + }} style={{ backgroundColor: theme.palette.inputColor, color: isParent ? "red" : "white", @@ -13396,6 +13399,7 @@ const releaseToConnectLabel = "Release to Connect" - - { - setMenuPosition({ - top: event.pageY + 10, - left: event.pageX + 10, - }); - //setShowDropdownNumber(3) - setShowDropdown(true); - }} - /> - + + + { + event.preventDefault() + // setFieldCount(count) + setCodeEditorModalOpen(true) + setActiveDialog("codeeditor") + //setcodedata(data.value) + var parsedvalue = workflow.triggers[selectedTriggerIndex].parameters[1].value + // if (parsedvalue === undefined || parsedvalue === null) { + // parsedvalue = "" + // } + console.log("Data sending to codeeditor: ",{ + "name": workflow.triggers[selectedTriggerIndex].parameters[1].name, + "value": parsedvalue, + "field_number": 1, + "actionlist": actionlist, + "field_id": "subflow_field", + }) + setEditorData({ + "name": workflow.triggers[selectedTriggerIndex].parameters[1].name, + "value": parsedvalue, + "field_number": 1, + "actionlist": actionlist, + "field_id": "subflow_field", + }) + }} + /> + + + { + setMenuPosition({ + top: event.pageY + 10, + left: event.pageX + 10, + }); + //setShowDropdownNumber(3) + setShowDropdown(true); + }} + /> + + ), }} @@ -21767,108 +21803,154 @@ const releaseToConnectLabel = "Release to Connect" const changeActionParameterCodeMirror = (event, count, data, actionlist) => { - // Check if event.target.value is an array. If it is, split with comma - console.log("1 - SELECTED ACTION: ", selectedAction) - console.log("1 - DATA: ", data) + + if(selectedAction && selectedAction.parameters && selectedAction.parameters.length > 0){ - if (data.startsWith("${") && data.endsWith("}")) { - // PARAM FIX - Gonna use the ID field, even though it's a hack - const paramcheck = selectedAction.parameters.find(param => param.name === "body") - if (paramcheck !== undefined) { - // Escapes all double quotes - const toReplace = event.target.value.trim().replaceAll("\\\"", "\"").replaceAll("\"", "\\\""); - if (paramcheck["value_replace"] === undefined || paramcheck["value_replace"] === null) { - paramcheck["value_replace"] = [{ - "key": data.name, - "value": toReplace, - }] + // Check if event.target.value is an array. If it is, split with comma + console.log("1 - SELECTED ACTION: ", selectedAction) + console.log("1 - DATA: ", data) - } else { - const subparamindex = paramcheck["value_replace"].findIndex(param => param.key === data.name) - if (subparamindex === -1) { - paramcheck["value_replace"].push({ - "key": data.name, - "value": toReplace, - }) - } else { - paramcheck["value_replace"][subparamindex]["value"] = toReplace - } - } + if (data.startsWith("${") && data.endsWith("}")) { + // PARAM FIX - Gonna use the ID field, even though it's a hack + const paramcheck = selectedAction.parameters.find(param => param.name === "body") + if (paramcheck !== undefined) { + // Escapes all double quotes + const toReplace = event.target.value.trim().replaceAll("\\\"", "\"").replaceAll("\"", "\\\""); + if (paramcheck["value_replace"] === undefined || paramcheck["value_replace"] === null) { + paramcheck["value_replace"] = [{ + "key": data.name, + "value": toReplace, + }] - if (paramcheck["value_replace"] === undefined) { - selectedAction.parameters[count]["value_replace"] = paramcheck - } else { - //selectedActionParameters[count]["value_replace"] = paramcheck["value_replace"] - selectedAction.parameters[count]["value_replace"] = paramcheck["value_replace"] - } - setSelectedAction(selectedAction) - //setUpdate(Math.random()) - return - } - } + } else { + const subparamindex = paramcheck["value_replace"].findIndex(param => param.key === data.name) + if (subparamindex === -1) { + paramcheck["value_replace"].push({ + "key": data.name, + "value": toReplace, + }) + } else { + paramcheck["value_replace"][subparamindex]["value"] = toReplace + } + } - if (event.target.value[event.target.value.length-1] === "." && actionlist.length > 0) { - var curstring = "" - var record = false - for (let [key,keyval] in Object.entries(selectedAction.parameters[count].value)) { - const item = selectedAction.parameters[count].value[key] - if (record) { - curstring += item - } + if (paramcheck["value_replace"] === undefined) { + selectedAction.parameters[count]["value_replace"] = paramcheck + } else { + //selectedActionParameters[count]["value_replace"] = paramcheck["value_replace"] + selectedAction.parameters[count]["value_replace"] = paramcheck["value_replace"] + } + setSelectedAction(selectedAction) + //setUpdate(Math.random()) + return + } + } - if (item === "$") { - record = true - curstring = "" - } - } + if (event.target.value[event.target.value.length-1] === "." && actionlist.length > 0) { + var curstring = "" + var record = false + for (let [key,keyval] in Object.entries(selectedAction.parameters[count].value)) { + const item = selectedAction.parameters[count].value[key] + if (record) { + curstring += item + } - if (curstring.length > 0 && actionlist !== null) { - // Search back in the action list - curstring = curstring.split(" ").join("_").toLowerCase() - var actionItem = actionlist.find(data => data.autocomplete.split(" ").join("_").toLowerCase() === curstring) - if (actionItem !== undefined) { - console.log("Found item: ", actionItem) + if (item === "$") { + record = true + curstring = "" + } + } - var jsonvalid = true - try { - const tmp = String(JSON.parse(actionItem.example)) - if (!actionItem.example.includes("{") && !actionItem.example.includes("[")) { - jsonvalid = false - } - } catch (e) { - jsonvalid = false - } - } - } - } + if (curstring.length > 0 && actionlist !== null) { + // Search back in the action list + curstring = curstring.split(" ").join("_").toLowerCase() + var actionItem = actionlist.find(data => data.autocomplete.split(" ").join("_").toLowerCase() === curstring) + if (actionItem !== undefined) { + console.log("Found item: ", actionItem) - console.log("2 - SELECTED ACTION: ", selectedAction) - console.log("2 - DATA: ", data) + var jsonvalid = true + try { + const tmp = String(JSON.parse(actionItem.example)) + if (!actionItem.example.includes("{") && !actionItem.example.includes("[")) { + jsonvalid = false + } + } catch (e) { + jsonvalid = false + } + } + } + } - if (selectedAction.app_name === "Shuffle Tools" && selectedAction.name === "filter_list" && count === 0) { - const parsedvalue = data - console.log("Parsed value: ", parsedvalue) - if (parsedvalue.includes("#")) { - const splitparsed = parsedvalue.split(".#.") - //console.log("Cant contain #: ", splitparsed) - if (splitparsed.length > 1) { - console.log("IN HERE AY") - //data.value = splitparsed[0] + console.log("2 - SELECTED ACTION: ", selectedAction) + console.log("2 - DATA: ", data) - selectedAction.parameters[0].value = splitparsed[0] - selectedAction.parameters[1].value = splitparsed[1] + if (selectedAction.app_name === "Shuffle Tools" && selectedAction.name === "filter_list" && count === 0) { + const parsedvalue = data + console.log("Parsed value: ", parsedvalue) + if (parsedvalue.includes("#")) { + const splitparsed = parsedvalue.split(".#.") + //console.log("Cant contain #: ", splitparsed) + if (splitparsed.length > 1) { + console.log("IN HERE AY") + //data.value = splitparsed[0] - selectedAction.parameters[0].autocompleted = true - selectedAction.parameters[1].autocompleted = true - setUpdate(Math.random()) - } - } - } else { - selectedAction.parameters[count].autocompleted = false - selectedAction.parameters[count].value = data - } + selectedAction.parameters[0].value = splitparsed[0] + selectedAction.parameters[1].value = splitparsed[1] - setSelectedAction(selectedAction) + selectedAction.parameters[0].autocompleted = true + selectedAction.parameters[1].autocompleted = true + setUpdate(Math.random()) + } + } + } else { + selectedAction.parameters[count].autocompleted = false + selectedAction.parameters[count].value = data + } + + setSelectedAction(selectedAction) + } + + if(selectedTrigger && selectedTrigger.parameters && selectedTrigger.parameters.length > 0){ + + if (event.target.value[event.target.value.length-1] === "." && actionlist.length > 0) { + var curstring = "" + var record = false + for (let [key,keyval] in Object.entries(selectedTrigger.parameters[count].value)) { + const item = selectedTrigger.parameters[count].value[key] + if (record) { + curstring += item + } + + if (item === "$") { + record = true + curstring = "" + } + } + + if (curstring.length > 0 && actionlist !== null) { + // Search back in the action list + curstring = curstring.split(" ").join("_").toLowerCase() + var actionItem = actionlist.find(data => data.autocomplete.split(" ").join("_").toLowerCase() === curstring) + if (actionItem !== undefined) { + console.log("Found item: ", actionItem) + + var jsonvalid = true + try { + const tmp = String(JSON.parse(actionItem.example)) + if (!actionItem.example.includes("{") && !actionItem.example.includes("[")) { + jsonvalid = false + } + } catch (e) { + jsonvalid = false + } + } + } + } + + selectedTrigger.parameters[count].value = data + setSelectedTrigger(selectedTrigger); + console.log("get into trigger controller", selectedTrigger,data) + } //setUpdate(Math.random()) }