Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-05-23 08:58:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

Query selector should be collapsible

Browse source
This commit is contained in:
navaneeth 2021-05-26 17:37:43 +05:30
parent 103a03e6dd
commit 2822ce28bb
2 changed files with 40 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
frontend/src/Editor/Inspector/Components/Table.jsx
View file

@ -401,14 +401,14 @@ class Table extends React.Component {
{renderElement(component, componentMeta, paramUpdated, dataQueries, 'serverSidePagination', 'properties', currentState)}
<hr></hr>
<div class="hr-text">Events</div>
{renderEvent(component, eventUpdated, dataQueries, eventOptionUpdated, 'onRowClicked', componentMeta.events.onRowClicked, currentState, components)}
{renderEvent(component, eventUpdated, dataQueries, eventOptionUpdated, 'onPageChanged', componentMeta.events.onPageChanged, currentState, components)}
{renderQuerySelector(component, dataQueries, eventOptionUpdated, 'onBulkUpdate', componentMeta.events.onBulkUpdate)}
<hr></hr>
<div class="hr-text">Style</div>
</div>
{renderElement(component, componentMeta, paramUpdated, dataQueries, 'visible', 'properties', currentState)}

55
frontend/src/Editor/Inspector/QuerySelector.jsx
View file

@ -1,15 +1,21 @@
import React from 'react';
import React, { useState } from 'react';
import SelectSearch, { fuzzySearch } from 'react-select-search';
import Collapse from 'react-bootstrap/Collapse'
export const QuerySelector = ({
param,
definition,
eventUpdated,
eventOptionUpdated,
dataQueries,
extraData,
eventMeta
eventMeta,
currentState,
components
}) => {
const [open, setOpen] = useState(false);
function onChange(value) {
const query = dataQueries.find((dataquery) => dataquery.id === value);
eventOptionUpdated(param, 'queryId', query.id, extraData);
@ -25,20 +31,35 @@ export const QuerySelector = ({
}
return (
<div className="field mb-2 mt-1">
<label className="form-label mt-2">{eventMeta.displayName}</label>
<SelectSearch
options={dataQueries.map((query) => {
return { name: query.name, value: query.id };
})}
value={definition.options.queryId}
search={true}
onChange={(value) => {
onChange(value);
}}
filterOptions={fuzzySearch}
placeholder="Select.."
/>
<div className="field mb-3 mt-1 px-2">
<label className="form-label" role="button" onClick={() => setOpen(!open)}>
<div className="row">
<div className="col">
{eventMeta.displayName}
</div>
<div className={`col-auto events-toggle ${open ? 'events-toggle-active' : ''}`}>
<span class="toggle-icon"></span>
</div>
</div>
</label>
<Collapse in={open}>
<div id="collapse">
<div className="field mb-2 mt-1">
<SelectSearch
options={dataQueries.map((query) => {
return { name: query.name, value: query.id };
})}
value={definition.options.queryId}
search={true}
onChange={(value) => {
onChange(value);
}}
filterOptions={fuzzySearch}
placeholder="Select.."
/>
</div>
</div>
</Collapse>
</div>
);
};