From b8e3470c8ef64592222ef8903dd60a8843da1c0e Mon Sep 17 00:00:00 2001 From: frikky Date: Fri, 17 Mar 2023 00:47:04 +0100 Subject: [PATCH] Added more autocomplete helpers and labels for actions --- frontend/src/components/ParsedAction.jsx | 99 ++++++++++++++---------- 1 file changed, 56 insertions(+), 43 deletions(-) diff --git a/frontend/src/components/ParsedAction.jsx b/frontend/src/components/ParsedAction.jsx index 75e21cbf..c123e631 100644 --- a/frontend/src/components/ParsedAction.jsx +++ b/frontend/src/components/ParsedAction.jsx @@ -45,6 +45,10 @@ import { Fade, } from "@material-ui/core"; +import { + Autocomplete +} from "@material-ui/lab"; + import { HelpOutline as HelpOutlineIcon, Description as DescriptionIcon, @@ -72,7 +76,6 @@ import { Pause as PauseIcon, Delete as DeleteIcon, AddCircleOutline as AddCircleOutlineIcon, - Circle as CircleIcon, Save as SaveIcon, KeyboardArrowLeft as KeyboardArrowLeftIcon, KeyboardArrowRight as KeyboardArrowRightIcon, @@ -82,11 +85,11 @@ import { ExpandMore as ExpandMoreIcon, VpnKey as VpnKeyIcon, AutoFixHigh as AutoFixHighIcon, + Circle as CircleIcon, SquareFoot as SquareFootIcon, } from '@mui/icons-material'; //} from "@material-ui/icons"; -import Autocomplete from "@material-ui/lab/Autocomplete"; //import CodeMirror from "@uiw/react-codemirror"; //import "codemirror/keymap/sublime"; @@ -620,7 +623,7 @@ const ParsedAction = (props) => { return helperText } - const changeActionParameter = (event, count, data) => { + const changeActionParameter = (event, count, data, viewForceUpdate) => { //console.log("Action change: ", selectedAction, data) if (data.name.startsWith("${") && data.name.endsWith("}")) { // PARAM FIX - Gonna use the ID field, even though it's a hack @@ -812,8 +815,8 @@ const ParsedAction = (props) => { } setSelectedAction(selectedAction); - if (forceUpdate) { - setUpdate(Math.random()) + if (forceUpdate || viewForceUpdate === true) { + setUpdate(Math.random()) } //setUpdate(event.target.value) }; @@ -1601,6 +1604,9 @@ const ParsedAction = (props) => { style={{ cursor: "pointer", margin: multiline ? 5 : 0, }} onClick={(event) => { event.preventDefault() + + // Get cursor position + // This makes it so we can put it in the right location? setMenuPosition({ top: event.pageY + 10, left: event.pageX + 10, @@ -1619,6 +1625,7 @@ const ParsedAction = (props) => { helperText={returnHelperText(data.name, data.value)} onClick={() => { console.log("Clicked field: ", clickedFieldId, data.name) + if (data.name === "file_id") { console.log("show file video?") if (setShowVideo !== undefined) { @@ -1934,7 +1941,7 @@ const ParsedAction = (props) => { }, endAdornment: hideExtraTypes ? null : ( - + { @@ -2073,11 +2080,8 @@ const ParsedAction = (props) => { }; const handleItemClick = (values) => { - if ( - values === undefined || - values === null || - values.length === 0 - ) { + console.log("In normal itemclick") + if (values === undefined ||values === null ||values.length === 0) { return; } @@ -2143,7 +2147,7 @@ const ParsedAction = (props) => { console.log("In nestedclick!!") var newValue = selectedActionParameters[count].value + toComplete - changeActionParameter({target: {value: newValue}}, count, data) + changeActionParameter({target: {value: newValue}}, count, data, true) //selectedActionParameters[count].value += toComplete; //selectedAction.parameters[count].value = selectedActionParameters[count].value; //setSelectedAction(selectedAction); @@ -3466,6 +3470,21 @@ const ParsedAction = (props) => { autoHighlight value={selectedAction} classes={{ inputRoot: classes.inputRoot }} + groupBy={(option) => { + // Most popular + // Is categorized + // Uncategorized + return option.category_label !== undefined && option.category_label !== null && option.category_label.length > 0 ? "Most used" : "All Actions"; + }} + renderGroup={(params) => { + return ( +
  • + {params.group} + {params.children} +
    • + ) + }} + options={selectedApp.actions.filter((a) => a.category_label !== undefined && a.category_label !== null && a.category_label.length > 0).concat(sortByKey(selectedApp.actions, "label"))} ListboxProps={{ style: { backgroundColor: theme.palette.inputColor, @@ -3480,12 +3499,7 @@ const ParsedAction = (props) => { return options }} getOptionLabel={(option) => { - if ( - option === undefined || - option === null || - option.name === undefined || - option.name === null - ) { + if (option === undefined || option === null || option.name === undefined || option.name === null ) { return null; } @@ -3495,7 +3509,6 @@ const ParsedAction = (props) => { return newname; }} - options={sortByKey(selectedApp.actions, "label")} fullWidth style={{ backgroundColor: theme.palette.inputColor, @@ -3514,19 +3527,13 @@ const ParsedAction = (props) => { }} renderOption={(data) => { var newActionname = data.name; - if ( - data.label !== undefined && - data.label !== null && - data.label.length > 0 - ) { + if (data.label !== undefined && data.label !== null && data.label.length > 0) { newActionname = data.label; } var newActiondescription = data.description; //console.log("DESC: ", newActiondescription) - if ( - data.description === undefined || data.description === null - ) { + if (data.description === undefined || data.description === null) { newActiondescription = "Description: No description defined for this action" } else { newActiondescription = "Description: "+newActiondescription @@ -3562,21 +3569,26 @@ const ParsedAction = (props) => { if (method.length > 0 && data.description !== undefined && data.description !== null && data.description.includes("http")) { var extraUrl = "" const descSplit = data.description.split("\n") - for (let [line,lineval] in Object.entries(descSplit)) { - if (descSplit[line].includes("http") && descSplit[line].includes("://")) { - const urlsplit = descSplit[line].split("/") - try { - extraUrl = "/"+urlsplit.slice(3, urlsplit.length).join("/") - } catch (e) { - console.log("Failed - running with -1") - extraUrl = "/"+urlsplit.slice(3, urlsplit.length-1).join("/") - } + // Last line of descSplit + if (descSplit.length > 0) { + extraUrl = descSplit[descSplit.length-1] + } + + //for (let [line,lineval] in Object.entries(descSplit)) { + // if (descSplit[line].includes("http") && descSplit[line].includes("://")) { + // const urlsplit = descSplit[line].split("/") + // try { + // extraUrl = "/"+urlsplit.slice(3, urlsplit.length).join("/") + // } catch (e) { + // //console.log("Failed - running with -1") + // extraUrl = "/"+urlsplit.slice(3, urlsplit.length-1).join("/") + // } - //console.log("NO BASEURL TOO!! Why missing last one in certain scenarios (sevco)?", extraUrl, urlsplit, descSplit[line]) - break - } - } + // //console.log("NO BASEURL TOO!! Why missing last one in certain scenarios (sevco)?", extraUrl, urlsplit, descSplit[line]) + // //break + // } + //} if (extraUrl.length > 0) { if (extraUrl.includes(" ")) { @@ -3586,9 +3598,10 @@ const ParsedAction = (props) => { if (extraUrl.includes("#")) { extraUrl = extraUrl.split("#")[0] } + extraDescription = `${method} ${extraUrl}` } else { - console.log("No url found. Check again :)") + //console.log("No url found. Check again :)") } } @@ -3609,10 +3622,10 @@ const ParsedAction = (props) => { > {useIcon} - {newActionname} + {newActionname} {extraDescription.length > 0 ? - + {extraDescription} : null}