diff --git a/frontend/src/Editor/Inspector/Components/Table.jsx b/frontend/src/Editor/Inspector/Components/Table.jsx index 9501633a76..015281084b 100644 --- a/frontend/src/Editor/Inspector/Components/Table.jsx +++ b/frontend/src/Editor/Inspector/Components/Table.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import { renderElement, renderEvent } from '../Utils'; +import { renderElement, renderEvent, renderQuerySelector } from '../Utils'; import { computeActionName } from '@/_helpers/utils'; import SortableList, { SortableItem } from 'react-easy-sort'; import arrayMove from 'array-move'; @@ -384,6 +384,8 @@ class Table extends React.Component { {renderEvent(component, eventUpdated, dataQueries, eventOptionUpdated, 'onRowClicked', componentMeta.events.onRowClicked)} {renderEvent(component, eventUpdated, dataQueries, eventOptionUpdated, 'onPageChanged', componentMeta.events.onPageChanged)} + {renderQuerySelector(component, dataQueries, eventOptionUpdated, 'onBulkUpdate', componentMeta.events.onBulkUpdate)} +
diff --git a/frontend/src/Editor/Inspector/QuerySelector.jsx b/frontend/src/Editor/Inspector/QuerySelector.jsx new file mode 100644 index 0000000000..ea6c0f0a40 --- /dev/null +++ b/frontend/src/Editor/Inspector/QuerySelector.jsx @@ -0,0 +1,44 @@ +import React from 'react'; +import SelectSearch, { fuzzySearch } from 'react-select-search'; + +export const QuerySelector = ({ + param, + definition, + eventOptionUpdated, + dataQueries, + extraData, + eventMeta +}) => { + + function onChange(value) { + const query = dataQueries.find((dataquery) => dataquery.id === value); + eventOptionUpdated(param, 'queryId', query.id, extraData); + eventOptionUpdated(param, 'queryName', query.name, extraData); + } + + if (definition === undefined) { + definition = {}; + } + + if (definition.options === undefined) { + definition.options = {}; + } + + return ( +
+ + { + return { name: query.name, value: query.id }; + })} + value={definition.options.queryId} + search={true} + onChange={(value) => { + onChange(value); + }} + filterOptions={fuzzySearch} + placeholder="Select.." + /> +
+ ); +}; diff --git a/frontend/src/Editor/Inspector/Utils.js b/frontend/src/Editor/Inspector/Utils.js index d5787cb7ee..e517bd90d6 100644 --- a/frontend/src/Editor/Inspector/Utils.js +++ b/frontend/src/Editor/Inspector/Utils.js @@ -6,6 +6,7 @@ import { Code } from './Elements/Code'; import { Toggle } from './Elements/Toggle'; import { TypeMapping } from './TypeMapping'; import { EventSelector } from './EventSelector'; +import { QuerySelector } from './QuerySelector'; const AllElements = { Color, @@ -15,6 +16,19 @@ const AllElements = { Toggle }; +export function renderQuerySelector(component, dataQueries, eventOptionUpdated, eventName, eventMeta) { + let definition = component.component.definition.events[eventName]; + definition = definition || { }; + + return () +} + export function renderElement(component, componentMeta, paramUpdated, dataQueries, param, paramType, currentState, components = {}) { const definition = component.component.definition[paramType][param]; const meta = componentMeta[paramType][param];