From edd295cfc2568699aea9d72e5794cbdfd4fed161 Mon Sep 17 00:00:00 2001 From: frikky Date: Wed, 15 Sep 2021 00:45:24 +0200 Subject: [PATCH] #127: Added a category filter system to creator. Will extend to others as well --- frontend/src/views/AppCreator.jsx | 94 ++++++++++++++++++++++++++++--- frontend/src/views/LoginPage.jsx | 28 ++++++--- 2 files changed, 106 insertions(+), 16 deletions(-) diff --git a/frontend/src/views/AppCreator.jsx b/frontend/src/views/AppCreator.jsx index 6619f95f..3b0a90ad 100644 --- a/frontend/src/views/AppCreator.jsx +++ b/frontend/src/views/AppCreator.jsx @@ -66,6 +66,7 @@ const appIconStyle = { marginLeft: "5px", } + const useStyles = makeStyles({ notchedOutline: { borderColor: "#f85a3e !important" @@ -222,6 +223,8 @@ const AppCreator = (props) => { const [parameterLocation, setParameterLocation] = useState(apikeySelection.length > 0 ? apikeySelection[0] : ""); const [refreshUrl, setRefreshUrl] = useState(""); const [oauth2Scopes, setOauth2Scopes] = useState(["google.com"]); + const [projectCategories, setProjectCategories] = useState([]); + const [selectedCategory, setSelectedCategory] = useState(""); const [urlPath, setUrlPath] = useState(""); //const [urlPathQueries, setUrlPathQueries] = useState([{"name": "test", "required": false}]); @@ -231,6 +234,7 @@ const AppCreator = (props) => { const [firstrequest, setFirstrequest] = React.useState(true) const [basedata, setBasedata] = React.useState({}) const [actions, setActions] = useState([]) + const [filteredActions, setFilteredActions] = useState([]) const [errorCode, setErrorCode] = useState("") const [appBuilding, setAppBuilding] = useState(false) const [extraBodyFields, setExtraBodyFields] = useState([]) @@ -288,6 +292,7 @@ const AppCreator = (props) => { "method": actionNonBodyRequest[0], }); + const isCloud = window.location.host === "localhost:3002" || window.location.host === "shuffler.io" useEffect(() => { @@ -391,7 +396,7 @@ const AppCreator = (props) => { const handleGetRef = (parameter, data) => { try { if (parameter === null || parameter["$ref"] === undefined) { - console.log("$ref not found in getref: ") + //console.log("$ref not found in getref: ") return parameter } } catch (e) { @@ -527,6 +532,7 @@ const AppCreator = (props) => { var newActions = [] var wordlist = {} + var all_categories = [] if (data.paths !== null && data.paths !== undefined) { for (let [path, pathvalue] of Object.entries(data.paths)) { for (let [method, methodvalue] of Object.entries(pathvalue)) { @@ -560,6 +566,24 @@ const AppCreator = (props) => { "example_response": "", } + // Finding category + if (path.includes("/")) { + const pathsplit = path.split("/") + var categoryindex = -1 + // Stupid way of finding a category/grouping + for (var key in pathsplit) { + if (pathsplit[key].length > 0 && pathsplit[key] !== "v1" && pathsplit[key] !== "v2" && pathsplit[key] !== "api" && pathsplit[key] !== "1.0" && pathsplit[key] !== "apis") { + newaction["category"] = pathsplit[key] + if (!all_categories.includes(pathsplit[key])) { + all_categories.push(pathsplit[key]) + } + break + } + } + } + + //console.log("Category: + //console.log("Schema is application/json: ", methodvalue) //console.log("DATA", data) if (methodvalue["requestBody"] !== undefined) { @@ -964,12 +988,15 @@ const AppCreator = (props) => { setActionAmount(newActions.length) } - if (newActions.length > 1000) { + //const isCloud = window.location.host === "localhost:3002" || window.location.host === "shuffler.io" + if (newActions.length > 1000 && isCloud) { alert.error("Cut down actions from "+newActions.length+" to 999 because of limit") newActions = newActions.slice(0,999) } + setProjectCategories(all_categories) setActions(newActions) + setFilteredActions(newActions) setIsAppLoaded(true) } @@ -1515,6 +1542,7 @@ const AppCreator = (props) => { } setActions(actions) + setFilteredActions(actions) setUpdate(Math.random()) } @@ -1534,6 +1562,7 @@ const AppCreator = (props) => { }) setActions(actions) + setFilteredActions(actions) setActionAmount(actionAmount-1) setUpdate(Math.random()) } @@ -1827,7 +1856,7 @@ const AppCreator = (props) => { null :
- {actions.slice(0,actionAmount).map((data, index) => { + {filteredActions.slice(0,actionAmount).map((data, index) => { var error = data.errors.length > 0 ? @@ -2015,6 +2044,7 @@ const AppCreator = (props) => { } setActions(actions) + setFilteredActions(actions) } const getActionErrors = () => { @@ -2943,12 +2973,12 @@ const AppCreator = (props) => { const actionView =
- {actionAmount > 0 && actionAmount < actions.length ? + {actionAmount > 0 && actionAmount < filteredActions.length ? : null}
-

Actions {actionAmount > 0 ? ({actionAmount} / {actions.length}) : null}

+

Actions {actionAmount > 0 ? ({actionAmount} / {filteredActions.length}) : null}

+ + {projectCategories !== undefined && projectCategories !== null && projectCategories.length > 1 ? +
+ {projectCategories.map((tag, index) => { + const newname = tag.charAt(0).toUpperCase() + tag.slice(1) + return ( + { + if (selectedCategory === tag) { + setFilteredActions(actions) + setSelectedCategory("") + setActionAmount(50) + return + } + + const foundActions = actions.filter(data => data.category === tag) + setFilteredActions(foundActions) + setSelectedCategory(tag) + if (actionAmount > foundActions.length) { + setActionAmount(foundActions.length) + } + + //{filteredActions.slice(0,actionAmount).map((data, index) => { + + //console.log("Found: ", foundActions) + //{filteredActions.slice(0,actionAmount).map((data, index) => { + //{actions.slice(0,actionAmount).map((data, index) => { + }} + variant={selectedCategory === tag ? "contained " : "outlined"} + color={selectedCategory === tag ? "primary" : "secondary"} + /> + ) + })} +
+ : null} Actions are the tasks performed by an app - usually single URL paths for REST API's.
{loopActions} diff --git a/frontend/src/views/LoginPage.jsx b/frontend/src/views/LoginPage.jsx index 628073ba..542e331d 100644 --- a/frontend/src/views/LoginPage.jsx +++ b/frontend/src/views/LoginPage.jsx @@ -59,15 +59,19 @@ const LoginDialog = props => { }) .then(response => response.json().then(responseJson => { - if (loginViewLoading) { - setLoginViewLoading(false) - checkLogin() - stop() - } - if (responseJson["success"] === false) { setLoginInfo(responseJson["reason"]) } else { + if (loginViewLoading) { + setLoginViewLoading(false) + checkLogin() + stop() + + if (responseJson.reason !== undefined && responseJson.reason !== null) { + setLoginInfo(responseJson.reason) + } + } + if (responseJson.reason === "stay") { window.location.pathname = "/adminsetup" } @@ -199,8 +203,16 @@ const LoginDialog = props => { {loginViewLoading ?
- Waiting for Shuffle the database to become available. This may take up to a minute. + Waiting for the Shuffle database to become available. This may take up to a minute. + + {loginInfo === undefined || loginInfo === null || loginInfo.length === 0 ? + null + : +
+ Response: {loginInfo} +
+ } @@ -215,7 +227,7 @@ const LoginDialog = props => { marginTop: 15, }}> - Are you sure Shuffle is installed correctly + Are you sure Shuffle is installed correctly? 1. Make sure shuffle-database folder has correct access: