Added Expand window button and code editor in subflow

This commit is contained in:
monilprajapati
2024-07-06 13:42:39 +05:30
parent 0e16815872
commit cd52d12f60
3 changed files with 205 additions and 111 deletions
+7 -1
View File
@@ -3162,7 +3162,13 @@ const ParsedAction = (props) => {
if (parsedvalue === undefined || parsedvalue === null) { if (parsedvalue === undefined || parsedvalue === null) {
parsedvalue = "" parsedvalue = ""
} }
console.log("Data sending to codeeditor(Action): ", {
"name": data.name,
"value": parsedvalue,
"field_number": count,
"actionlist": actionlist,
"field_id": clickedFieldId,
} )
setEditorData({ setEditorData({
"name": data.name, "name": data.name,
"value": parsedvalue, "value": parsedvalue,
@@ -1767,6 +1767,7 @@ const CodeEditor = (props) => {
// This is to make it so we don't need to handle these fixes on the // This is to make it so we don't need to handle these fixes on the
// backend by itself // backend by itself
var fixedcodedata = localcodedata var fixedcodedata = localcodedata
console.log("Fixedcodedata: ", fixedcodedata)
const valid = validateJson(localcodedata, true) const valid = validateJson(localcodedata, true)
if (valid.valid) { if (valid.valid) {
fixedcodedata = JSON.stringify(valid.result, null, 2) fixedcodedata = JSON.stringify(valid.result, null, 2)
@@ -1779,6 +1780,11 @@ const CodeEditor = (props) => {
setcodedata(fixedcodedata); setcodedata(fixedcodedata);
setExpansionModalOpen(false) setExpansionModalOpen(false)
} else if (changeActionParameterCodeMirror !== undefined) { } 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)
changeActionParameterCodeMirror(event, fieldCount, fixedcodedata, actionlist) changeActionParameterCodeMirror(event, fieldCount, fixedcodedata, actionlist)
setExpansionModalOpen(false) setExpansionModalOpen(false)
+192 -110
View File
@@ -69,6 +69,7 @@ import {
AvatarGroup, AvatarGroup,
Autocomplete, Autocomplete,
Radio, Radio,
ButtonGroup,
} from "@mui/material"; } from "@mui/material";
import { import {
@@ -12833,6 +12834,7 @@ const releaseToConnectLabel = "Release to Connect"
workflow.triggers[selectedTriggerIndex].parameters[1] = { workflow.triggers[selectedTriggerIndex].parameters[1] = {
name: "argument", name: "argument",
value: "", value: "",
id:"subflow_field"
}; };
workflow.triggers[selectedTriggerIndex].parameters[2] = { workflow.triggers[selectedTriggerIndex].parameters[2] = {
name: "user_apikey", name: "user_apikey",
@@ -13346,13 +13348,14 @@ const releaseToConnectLabel = "Release to Connect"
} }
}} }}
disabled={isCloud && isParent} disabled={isCloud && isParent}
onClick={() => { onClick={() => {
handleSubflowStartnodeSelection({ handleSubflowStartnodeSelection({
target: { target: {
value: action value: action
} }
}) })
}} document.activeElement.blur();
}}
style={{ style={{
backgroundColor: theme.palette.inputColor, backgroundColor: theme.palette.inputColor,
color: isParent ? "red" : "white", color: isParent ? "red" : "white",
@@ -13396,6 +13399,7 @@ const releaseToConnectLabel = "Release to Connect"
</div> </div>
</div> </div>
<TextField <TextField
id="subflow_field"
style={{ style={{
backgroundColor: theme.palette.inputColor, backgroundColor: theme.palette.inputColor,
borderRadius: theme.palette.borderRadius, borderRadius: theme.palette.borderRadius,
@@ -13405,19 +13409,51 @@ const releaseToConnectLabel = "Release to Connect"
}, },
endAdornment: ( endAdornment: (
<InputAdornment position="end"> <InputAdornment position="end">
<Tooltip title="Autocomplete text" placement="top"> <ButtonGroup orientation="vertical">
<AddCircleOutlineIcon <Tooltip title="Expand window" placement="top">
style={{ cursor: "pointer" }} <AspectRatioIcon
onClick={(event) => { style={{ cursor: "pointer", marginBottom: 10}}
setMenuPosition({ onClick={(event) => {
top: event.pageY + 10, event.preventDefault()
left: event.pageX + 10, // setFieldCount(count)
}); setCodeEditorModalOpen(true)
//setShowDropdownNumber(3) setActiveDialog("codeeditor")
setShowDropdown(true); //setcodedata(data.value)
}} var parsedvalue = workflow.triggers[selectedTriggerIndex].parameters[1].value
/> // if (parsedvalue === undefined || parsedvalue === null) {
</Tooltip> // 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",
})
}}
/>
</Tooltip>
<Tooltip title="Autocomplete text" placement="top">
<AddCircleOutlineIcon
style={{ cursor: "pointer" }}
onClick={(event) => {
setMenuPosition({
top: event.pageY + 10,
left: event.pageX + 10,
});
//setShowDropdownNumber(3)
setShowDropdown(true);
}}
/>
</Tooltip>
</ButtonGroup>
</InputAdornment> </InputAdornment>
), ),
}} }}
@@ -21767,108 +21803,154 @@ const releaseToConnectLabel = "Release to Connect"
</div> </div>
const changeActionParameterCodeMirror = (event, count, data, actionlist) => { 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 (data.startsWith("${") && data.endsWith("}")) { if(selectedAction && selectedAction.parameters && selectedAction.parameters.length > 0){
// 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,
}]
} else { // Check if event.target.value is an array. If it is, split with comma
const subparamindex = paramcheck["value_replace"].findIndex(param => param.key === data.name) console.log("1 - SELECTED ACTION: ", selectedAction)
if (subparamindex === -1) { console.log("1 - DATA: ", data)
paramcheck["value_replace"].push({
"key": data.name,
"value": toReplace,
})
} else {
paramcheck["value_replace"][subparamindex]["value"] = toReplace
}
}
if (paramcheck["value_replace"] === undefined) { if (data.startsWith("${") && data.endsWith("}")) {
selectedAction.parameters[count]["value_replace"] = paramcheck // PARAM FIX - Gonna use the ID field, even though it's a hack
} else { const paramcheck = selectedAction.parameters.find(param => param.name === "body")
//selectedActionParameters[count]["value_replace"] = paramcheck["value_replace"] if (paramcheck !== undefined) {
selectedAction.parameters[count]["value_replace"] = paramcheck["value_replace"] // Escapes all double quotes
} const toReplace = event.target.value.trim().replaceAll("\\\"", "\"").replaceAll("\"", "\\\"");
setSelectedAction(selectedAction) if (paramcheck["value_replace"] === undefined || paramcheck["value_replace"] === null) {
//setUpdate(Math.random()) paramcheck["value_replace"] = [{
return "key": data.name,
} "value": toReplace,
} }]
if (event.target.value[event.target.value.length-1] === "." && actionlist.length > 0) { } else {
var curstring = "" const subparamindex = paramcheck["value_replace"].findIndex(param => param.key === data.name)
var record = false if (subparamindex === -1) {
for (let [key,keyval] in Object.entries(selectedAction.parameters[count].value)) { paramcheck["value_replace"].push({
const item = selectedAction.parameters[count].value[key] "key": data.name,
if (record) { "value": toReplace,
curstring += item })
} } else {
paramcheck["value_replace"][subparamindex]["value"] = toReplace
}
}
if (item === "$") { if (paramcheck["value_replace"] === undefined) {
record = true selectedAction.parameters[count]["value_replace"] = paramcheck
curstring = "" } else {
} //selectedActionParameters[count]["value_replace"] = paramcheck["value_replace"]
} selectedAction.parameters[count]["value_replace"] = paramcheck["value_replace"]
}
setSelectedAction(selectedAction)
//setUpdate(Math.random())
return
}
}
if (curstring.length > 0 && actionlist !== null) { if (event.target.value[event.target.value.length-1] === "." && actionlist.length > 0) {
// Search back in the action list var curstring = ""
curstring = curstring.split(" ").join("_").toLowerCase() var record = false
var actionItem = actionlist.find(data => data.autocomplete.split(" ").join("_").toLowerCase() === curstring) for (let [key,keyval] in Object.entries(selectedAction.parameters[count].value)) {
if (actionItem !== undefined) { const item = selectedAction.parameters[count].value[key]
console.log("Found item: ", actionItem) if (record) {
curstring += item
}
var jsonvalid = true if (item === "$") {
try { record = true
const tmp = String(JSON.parse(actionItem.example)) curstring = ""
if (!actionItem.example.includes("{") && !actionItem.example.includes("[")) { }
jsonvalid = false }
}
} catch (e) {
jsonvalid = false
}
}
}
}
console.log("2 - SELECTED ACTION: ", selectedAction) if (curstring.length > 0 && actionlist !== null) {
console.log("2 - DATA: ", data) // 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 (selectedAction.app_name === "Shuffle Tools" && selectedAction.name === "filter_list" && count === 0) { var jsonvalid = true
const parsedvalue = data try {
console.log("Parsed value: ", parsedvalue) const tmp = String(JSON.parse(actionItem.example))
if (parsedvalue.includes("#")) { if (!actionItem.example.includes("{") && !actionItem.example.includes("[")) {
const splitparsed = parsedvalue.split(".#.") jsonvalid = false
//console.log("Cant contain #: ", splitparsed) }
if (splitparsed.length > 1) { } catch (e) {
console.log("IN HERE AY") jsonvalid = false
//data.value = splitparsed[0] }
}
}
}
selectedAction.parameters[0].value = splitparsed[0] console.log("2 - SELECTED ACTION: ", selectedAction)
selectedAction.parameters[1].value = splitparsed[1] console.log("2 - DATA: ", data)
selectedAction.parameters[0].autocompleted = true if (selectedAction.app_name === "Shuffle Tools" && selectedAction.name === "filter_list" && count === 0) {
selectedAction.parameters[1].autocompleted = true const parsedvalue = data
setUpdate(Math.random()) console.log("Parsed value: ", parsedvalue)
} if (parsedvalue.includes("#")) {
} const splitparsed = parsedvalue.split(".#.")
} else { //console.log("Cant contain #: ", splitparsed)
selectedAction.parameters[count].autocompleted = false if (splitparsed.length > 1) {
selectedAction.parameters[count].value = data console.log("IN HERE AY")
} //data.value = splitparsed[0]
setSelectedAction(selectedAction) selectedAction.parameters[0].value = splitparsed[0]
selectedAction.parameters[1].value = splitparsed[1]
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()) //setUpdate(Math.random())
} }