diff options
author | Erlend <erlendniko@hotmail.com> | 2022-06-29 10:51:31 +0200 |
---|---|---|
committer | Erlend <erlendniko@hotmail.com> | 2022-06-29 10:51:31 +0200 |
commit | 97329e35fed9fff68a571738b053af9d1fbbd694 (patch) | |
tree | c98d4fe6b1f08da1239a61f6361eac0aba74e61d /client/js/app/src | |
parent | f606b213814ff259d0be67370ca79d603b8845a5 (diff) |
Child rows can now be removed
Diffstat (limited to 'client/js/app/src')
-rw-r--r-- | client/js/app/src/app/pages/querybuilder/Components/Text/QueryInputChild.jsx | 53 |
1 files changed, 51 insertions, 2 deletions
diff --git a/client/js/app/src/app/pages/querybuilder/Components/Text/QueryInputChild.jsx b/client/js/app/src/app/pages/querybuilder/Components/Text/QueryInputChild.jsx index c4e5e2bd5ec..bd5044d1f68 100644 --- a/client/js/app/src/app/pages/querybuilder/Components/Text/QueryInputChild.jsx +++ b/client/js/app/src/app/pages/querybuilder/Components/Text/QueryInputChild.jsx @@ -1,8 +1,10 @@ -import React, { useContext, useEffect } from 'react'; +import React, { useContext } from 'react'; import AddPropertyButton from '../Buttons/AddPropertyButton'; import { QueryInputContext } from '../Contexts/QueryInputContext'; import QueryDropdownForm from './QueryDropDownForm'; import SimpleForm from './SimpleForm'; +import { OverlayTrigger, Tooltip } from 'react-bootstrap'; +import SimpleButton from '../Buttons/SimpleButton'; export default function QueryInputChild({ id }) { const { inputs, setInputs, childMap } = useContext(QueryInputContext); @@ -57,6 +59,21 @@ export default function QueryInputChild({ id }) { } }; + const removeRow = (id) => { + let newInputs = inputs.slice(); + let currentId = id.substring(0, 1); + let index = newInputs.findIndex((element) => element.id === currentId); + let children = newInputs[index].children; + for (let i = 3; i < id.length; i += 2) { + currentId = id.substring(0, i); + index = children.findIndex((element) => element.id === currentId); + children = children[index].children; + } + index = children.findIndex((element) => element === id); + children.splice(index, 1); + setInputs(newInputs); + }; + const inputList = childArray.map((child) => { return ( <div key={child.id} id={child.id}> @@ -77,11 +94,27 @@ export default function QueryInputChild({ id }) { placeholder={setPlaceHolder(child.id)} /> )} + <OverlayTrigger + placement="right" + delay={{ show: 250, hide: 400 }} + overlay={<Tooltip id="button-tooltip">Remove row</Tooltip>} + > + <span> + <SimpleButton + id={`b${child.id}`} + className="removeRow" + onClick={() => removeRow(child.id)} + children="-" + ></SimpleButton> + </span> + </OverlayTrigger> + <br /> <Child type={currentType + '_' + child.type} child={child} onChange={updateInput} placeholder={setPlaceHolder} + removeRow={removeRow} /> </div> ); @@ -90,7 +123,7 @@ export default function QueryInputChild({ id }) { return <>{inputList}</>; } -function Child({ child, type, onChange, placeholder }) { +function Child({ child, type, onChange, placeholder, removeRow }) { const { childMap } = useContext(QueryInputContext); const nestedChildren = (child.children || []).map((child) => { @@ -113,12 +146,28 @@ function Child({ child, type, onChange, placeholder }) { placeholder={placeholder(child.id)} /> )} + <OverlayTrigger + placement="right" + delay={{ show: 250, hide: 400 }} + overlay={<Tooltip id="button-tooltip">Remove row</Tooltip>} + > + <span> + <SimpleButton + id={`b${child.id}`} + className="removeRow" + onClick={() => removeRow(child.id)} + children="-" + ></SimpleButton> + </span> + </OverlayTrigger> + <br /> <Child child={child} id={child.id} type={type + '_' + child.type} onChange={onChange} placeholder={placeholder} + removeRow={removeRow} /> </div> ); |