diff options
author | Leandro Alves <leandroalves@yahooinc.com> | 2022-08-11 15:24:54 +0200 |
---|---|---|
committer | Valerij Fredriksen <valerijf@yahooinc.com> | 2022-08-12 15:02:05 +0200 |
commit | 263f061408dbe75b882ebe32b160fdce925119ed (patch) | |
tree | 8d913e2c1cc5c8e5581a2e7360247d849589ef24 /client | |
parent | 9a256f7e4dbec4a367d2afbb19d6e14cff651d57 (diff) |
WIP
Diffstat (limited to 'client')
4 files changed, 76 insertions, 75 deletions
diff --git a/client/js/app/src/app/components/icon/icon.jsx b/client/js/app/src/app/components/icon/icon.jsx index e860d293cce..12e5489eb2c 100644 --- a/client/js/app/src/app/components/icon/icon.jsx +++ b/client/js/app/src/app/components/icon/icon.jsx @@ -1,13 +1,28 @@ import React from 'react'; import { library } from '@fortawesome/fontawesome-svg-core'; +import { Box } from '@mantine/core'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faArrowsToDot, faChartGantt } from '@fortawesome/free-solid-svg-icons'; +import { + faArrowsToDot, + faChartGantt, + faCircleMinus, + faPlus, +} from '@fortawesome/free-solid-svg-icons'; // TODO: use dynamic import -library.add(faArrowsToDot, faChartGantt); +library.add(faArrowsToDot, faChartGantt, faCircleMinus, faPlus); -export function Icon({ name, type = 'solid', ...rest }) { +export function Icon({ name, type = 'solid', color, ...rest }) { const icon = `fa-${type} fa-${name}`; - return <FontAwesomeIcon icon={icon} {...rest} />; + return ( + <Box + sx={(theme) => ({ + ...(color && { color: theme.cr.getSolidBackground(color) }), + })} + component={FontAwesomeIcon} + icon={icon} + {...rest} + /> + ); } diff --git a/client/js/app/src/app/pages/querybuilder/query-filters/QueryInput.jsx b/client/js/app/src/app/pages/querybuilder/query-filters/QueryInput.jsx index 7c8ee61409f..42798fe6227 100644 --- a/client/js/app/src/app/pages/querybuilder/query-filters/QueryInput.jsx +++ b/client/js/app/src/app/pages/querybuilder/query-filters/QueryInput.jsx @@ -1,11 +1,11 @@ import React from 'react'; -import { OverlayTrigger, Tooltip } from 'react-bootstrap'; -import SimpleDropDownForm from 'app/pages/querybuilder/query-filters/SimpleDropDownForm'; +import { Select, TextInput, ActionIcon, Button } from '@mantine/core'; import { ACTION, dispatch, useQueryBuilderContext, } from 'app/pages/querybuilder/context/query-builder-provider'; +import { Container, Icon } from 'app/components'; export default function QueryInput() { const { children, type } = useQueryBuilderContext('query'); @@ -19,7 +19,7 @@ function Inputs({ id, type, inputs }) { ); const firstRemaining = Object.keys(remainingTypes)[0]; return ( - <> + <Container sx={{ backgroundColor: 'gold', rowGap: '5px' }}> {inputs.map(({ id, input, type, children }) => ( <Input key={id} @@ -27,65 +27,69 @@ function Inputs({ id, type, inputs }) { {...{ id, input, type, children }} /> ))} - {firstRemaining && <AddPropertyButton id={id} type={firstRemaining} />} - </> + {firstRemaining && ( + <Button + leftIcon={<Icon name="plus" />} + onClick={() => + dispatch(ACTION.INPUT_ADD, { id, type: firstRemaining }) + } + > + Add property + </Button> + )} + </Container> ); } function Input({ id, input, types, type, children }) { + const options = { [type.name]: type, ...types }; return ( - <div className="queryinput"> - <SimpleDropDownForm - onChange={({ target }) => - dispatch(ACTION.INPUT_UPDATE, { - id, - type: types[target.value], - }) - } - options={{ [type.name]: type, ...types }} - value={type.name} - /> - {children ? ( - <Inputs id={id} type={type.children} inputs={children} /> - ) : ( - <input - size="30" - onChange={({ target }) => + <Container + sx={{ + display: 'flex', + // gridTemplateColumns: children + // ? 'minmax(0, 1fr) max-content' + // : 'minmax(0, 1fr) minmax(0, 1fr) max-content', + alignItems: 'center', + gap: '5px', + backgroundColor: 'aqua', + }} + > + <Container sx={{ display: 'flex' }}> + <Select + sx={{ flex: 1.4 }} + data={Object.values(options).map(({ name }) => name)} + onChange={(value) => dispatch(ACTION.INPUT_UPDATE, { id, - input: target.value, + type: types[value], }) } - placeholder={type.type} - value={input} + value={type.name} + searchable /> + {!children && ( + <TextInput + sx={{ flex: 1.4 }} + onChange={(event) => + dispatch(ACTION.INPUT_UPDATE, { + id, + input: event.currentTarget.value, + }) + } + placeholder={type.type} + value={input} + /> + )} + <ActionIcon onClick={() => dispatch(ACTION.INPUT_REMOVE, id)}> + <Icon name="circle-minus" /> + </ActionIcon> + </Container> + {children && ( + <Container sx={{ backgroundColor: 'green' }}> + <Inputs id={id} type={type.children} inputs={children} /> + </Container> )} - <OverlayTrigger - placement="right" - delay={{ show: 250, hide: 400 }} - overlay={<Tooltip id="button-tooltip">Remove row</Tooltip>} - > - <span> - <button - className="removeRow" - onClick={() => dispatch(ACTION.INPUT_REMOVE, id)} - > - - - </button> - </span> - </OverlayTrigger> - <br /> - </div> - ); -} - -function AddPropertyButton({ id, type }) { - return ( - <button - className="addpropsbutton" - onClick={() => dispatch(ACTION.INPUT_ADD, { id, type })} - > - + Add property - </button> + </Container> ); } diff --git a/client/js/app/src/app/pages/querybuilder/query-filters/SimpleDropDownForm.jsx b/client/js/app/src/app/pages/querybuilder/query-filters/SimpleDropDownForm.jsx deleted file mode 100644 index 99342a5ae81..00000000000 --- a/client/js/app/src/app/pages/querybuilder/query-filters/SimpleDropDownForm.jsx +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; - -export default function SimpleDropDownForm({ - options, - value, - className = 'input', - ...props -}) { - return ( - <select className={className} {...props} value={value}> - {Object.values(options).map(({ name }) => ( - <option className="options" key={name} value={name}> - {name} - </option> - ))} - </select> - ); -} diff --git a/client/js/app/src/app/pages/querybuilder/query-filters/query-filters.jsx b/client/js/app/src/app/pages/querybuilder/query-filters/query-filters.jsx index 2b2ac7a3497..0ad1eba7a16 100644 --- a/client/js/app/src/app/pages/querybuilder/query-filters/query-filters.jsx +++ b/client/js/app/src/app/pages/querybuilder/query-filters/query-filters.jsx @@ -5,7 +5,7 @@ import { Container } from 'app/components'; export function QueryFilters() { return ( - <Container> + <Container sx={{ alignContent: 'start' }}> <QueryInput /> <PasteJSONButton /> </Container> |