diff options
Diffstat (limited to 'client')
4 files changed, 82 insertions, 13 deletions
diff --git a/client/js/app/src/app/pages/querybuilder/Components/Buttons/PasteJSONButton.jsx b/client/js/app/src/app/pages/querybuilder/Components/Buttons/PasteJSONButton.jsx new file mode 100644 index 00000000000..73dce637500 --- /dev/null +++ b/client/js/app/src/app/pages/querybuilder/Components/Buttons/PasteJSONButton.jsx @@ -0,0 +1,75 @@ +import React, { useContext, useState } from 'react'; +import ImageButton from './ImageButton'; +import pasteImage from '../../assets/img/paste.svg'; +import { QueryInputContext } from '../Contexts/QueryInputContext'; + +export default function PasteJSONButton() { + const { inputs, setInputs, id, setId, levelZeroParameters, childMap } = + useContext(QueryInputContext); + const [paste, setPaste] = useState(false); + + const handleClick = (e) => { + alert('Button is non-functional'); + // setPaste(true); + // window.addEventListener('paste', handlePaste) + }; + + const handlePaste = (e) => { + setPaste(false); + const pastedData = e.clipboardData.getData('text'); + alert('Converting JSON: \n\n ' + pastedData); + window.removeEventListener('paste', handlePaste); + convertPastedJSON(pastedData); + }; + + const convertPastedJSON = (pastedData) => { + try { + var json = JSON.parse(pastedData); + setId(1); + const newInputs = buildFromJSON(json, id); + setInputs(newInputs); + } catch (error) { + alert('Could not parse JSON, with error-message: \n\n' + error.message); + } + }; + + const buildFromJSON = (json, id) => { + let newInputs = []; + let keys = Object.keys(json); + for (let i = 0; i < keys.length; i++) { + let childId = 1; + let newInput = { id: id, type: keys[i] }; + if (json[keys[i]] === Object) { + newInput['typeof'] = 'Parent'; + newInput['input'] = ''; + newInput['hasChildren'] = true; + let tempId = id + '.' + childId; + childId += 1; + newInput['children'] = buildFromJSON(json[keys[i]], tempId); + } else { + newInput['typeof'] = levelZeroParameters[keys[i]].type; + newInput['input'] = json[keys[i]]; + newInput['hasChildren'] = false; + newInput['children'] = []; + } + setId(id + 1); + console.log(newInput); + newInputs.push(newInput); + } + return newInputs; + }; + + return ( + <> + <ImageButton + id="pasteJSON" + className="pasteJSON" + image={pasteImage} + style={{ marginTop: '-2px', marginRight: '3px' }} + onClick={handleClick} + > + {paste ? 'Press CMD + V' : 'Paste JSON'} + </ImageButton> + </> + ); +} diff --git a/client/js/app/src/app/pages/querybuilder/Components/Buttons/ShowQueryButton.jsx b/client/js/app/src/app/pages/querybuilder/Components/Buttons/ShowQueryButton.jsx index db8c3f0bd27..789fc387b38 100644 --- a/client/js/app/src/app/pages/querybuilder/Components/Buttons/ShowQueryButton.jsx +++ b/client/js/app/src/app/pages/querybuilder/Components/Buttons/ShowQueryButton.jsx @@ -4,7 +4,6 @@ import SimpleButton from './SimpleButton'; export default function ShowQueryButton() { const { query, showQuery, setShowQuery } = useContext(QueryContext); - //console.log(showQuery); const handleClick = () => { setShowQuery(!showQuery); diff --git a/client/js/app/src/app/pages/querybuilder/Components/Text/QueryInput.jsx b/client/js/app/src/app/pages/querybuilder/Components/Text/QueryInput.jsx index b285d27926e..c5410ae7c4a 100644 --- a/client/js/app/src/app/pages/querybuilder/Components/Text/QueryInput.jsx +++ b/client/js/app/src/app/pages/querybuilder/Components/Text/QueryInput.jsx @@ -28,8 +28,7 @@ export default function QueryInput() { const setPlaceholder = (id) => { try { const index = inputs.findIndex((element) => element.id === id); - const key = inputs[index].type; - return levelZeroParameters[key].type; + return inputs[index].typeof; } catch (error) { console.log(error); } diff --git a/client/js/app/src/app/pages/querybuilder/query-builder.jsx b/client/js/app/src/app/pages/querybuilder/query-builder.jsx index 9032fb81faa..472ec1efe49 100644 --- a/client/js/app/src/app/pages/querybuilder/query-builder.jsx +++ b/client/js/app/src/app/pages/querybuilder/query-builder.jsx @@ -13,13 +13,13 @@ import { } from './Components/Contexts/ResponseContext'; import ResponseBox from './Components/Text/ResponseBox'; -import pasteImage from './assets/img/paste.svg'; import copyImage from './assets/img/copy.svg'; import '../../styles/agency.css'; import '../../styles/vespa.css'; import ShowQueryButton from './Components/Buttons/ShowQueryButton'; import { QueryProvider } from './Components/Contexts/QueryContext'; +import PasteJSONButton from './Components/Buttons/PasteJSONButton'; //import 'bootstrap/dist/css/bootstrap.min.css'; //TODO: Find out how to get this css @@ -42,16 +42,9 @@ export function QueryBuilder() { </div> <br /> <AddQueryInput /> + <br /> + <PasteJSONButton /> </QueryInputProvider> - <br /> - <ImageButton - id="pasteJSON" - className="pasteJSON" - image={pasteImage} - style={{ marginTop: '-2px', marginRight: '3px' }} - > - Paste JSON - </ImageButton> <ShowQueryButton /> </QueryProvider> <TextBox className="response">Response</TextBox> @@ -63,6 +56,9 @@ export function QueryBuilder() { height="30" width="30" tooltip="Copy" + onClick={() => { + alert('Button is non-functional'); + }} > Copy </OverlayImageButton> |