diff --git a/frontend/src/Editor/Box.jsx b/frontend/src/Editor/Box.jsx index af7875a7f9..8bd2b82b7d 100644 --- a/frontend/src/Editor/Box.jsx +++ b/frontend/src/Editor/Box.jsx @@ -76,7 +76,7 @@ export const Box = function Box({ containerProps, darkMode, removeComponent, - mode + mode, }) { const backgroundColor = yellow ? 'yellow' : ''; @@ -99,9 +99,9 @@ export const Box = function Box({ const fireEvent = (eventName, options) => { if (mode === 'edit' && eventName === 'onClick') { onComponentClick(id, component); - }; + } onEvent(eventName, { ...options, component }); - } + }; const validate = (value) => validateWidget({ ...{ widgetValue: value }, diff --git a/frontend/src/Editor/Components/Table/Table.jsx b/frontend/src/Editor/Components/Table/Table.jsx index b40f873d0e..f147837534 100644 --- a/frontend/src/Editor/Components/Table/Table.jsx +++ b/frontend/src/Editor/Components/Table/Table.jsx @@ -38,6 +38,7 @@ export function Table({ onComponentOptionChanged, onComponentOptionsChanged, darkMode, + fireEvent, }) { const color = component.definition.styles.textColor.value; const actions = component.definition.properties.actions || { value: [] }; @@ -189,7 +190,7 @@ export function Table({ [index]: { ...obj }, }; - onComponentOptionsChanged(component, [ + return onComponentOptionsChanged(component, [ ['dataUpdates', newDataUpdates], ['changeSet', newChangeset], ]); @@ -510,7 +511,15 @@ export function Table({ readOnly={!column.isEditable} activeColor={column.activeColor} onChange={(value) => { - handleCellValueChange(cell.row.index, column.key || column.name, value, cell.row.original); + handleCellValueChange(cell.row.index, column.key || column.name, value, cell.row.original).then( + () => { + fireEvent('OnTableToggleCellChanged', { + column: column, + rowId: cell.row.id, + row: cell.row.original, + }); + } + ); }} /> @@ -1008,7 +1017,10 @@ export function Table({ />
-
diff --git a/frontend/src/Editor/Editor.jsx b/frontend/src/Editor/Editor.jsx index e4e841312a..2bd37d2c94 100644 --- a/frontend/src/Editor/Editor.jsx +++ b/frontend/src/Editor/Editor.jsx @@ -16,7 +16,6 @@ import { SaveAndPreview } from './SaveAndPreview'; import { onComponentOptionChanged, onComponentOptionsChanged, - onComponentClick, onEvent, onQueryConfirm, onQueryCancel, diff --git a/frontend/src/Editor/Inspector/Components/Table.jsx b/frontend/src/Editor/Inspector/Components/Table.jsx index dface2da73..adb1435c06 100644 --- a/frontend/src/Editor/Inspector/Components/Table.jsx +++ b/frontend/src/Editor/Inspector/Components/Table.jsx @@ -38,6 +38,7 @@ class Table extends React.Component { currentState, actionPopOverRootClose: true, showPopOver: false, + columnPopOverRootClose: true, }; } @@ -104,6 +105,21 @@ class Table extends React.Component { this.props.paramUpdated({ name: 'actions' }, 'value', newValues, 'properties'); }; + columnEventChanged = (columnForWhichEventsAreChanged, events) => { + const columns = this.props.component.component.definition.properties.columns.value; + + const newColumns = columns.map((column) => { + if (column.id === columnForWhichEventsAreChanged.id) { + const newColumn = { ...column, events }; + return newColumn; + } else { + return column; + } + }); + + this.props.paramUpdated({ name: 'columns' }, 'value', newColumns, 'properties'); + }; + columnPopover = (column, index) => { return ( @@ -241,6 +257,24 @@ class Table extends React.Component { onChange={(name, value, color) => this.onColumnItemChange(index, 'activeColor', color)} /> + this.columnEventChanged(column, events)} + apps={this.props.apps} + popOverCallback={(showing) => { + this.setState({ columnPopOverRootClose: !showing }); + }} + /> )} @@ -553,7 +587,12 @@ class Table extends React.Component { {columns.value.map((item, index) => (
- +
diff --git a/frontend/src/_helpers/appUtils.js b/frontend/src/_helpers/appUtils.js index 77d2d5f989..539fb54b87 100644 --- a/frontend/src/_helpers/appUtils.js +++ b/frontend/src/_helpers/appUtils.js @@ -282,14 +282,45 @@ export async function onEvent(_ref, eventName, options, mode = 'edit') { }, }, }, - () => { - if (action) { - action.events?.forEach((event) => { + async () => { + if (action && action.events) { + for (const event of action.events) { if (event.actionId) { // the event param uses a hacky workaround for using same format used by event manager ( multiple handlers ) - executeAction(_self, { ...event, ...event.options }, mode); + await executeAction(_self, { ...event, ...event.options }, mode); } - }); + } + } else { + console.log('No action is associated with this event'); + } + } + ); + } + + if (eventName === 'OnTableToggleCellChanged') { + const { component, column, rowId, row } = options; + _self.setState( + { + currentState: { + ..._self.state.currentState, + components: { + ..._self.state.currentState.components, + [component.name]: { + ..._self.state.currentState.components[component.name], + selectedRow: row, + selectedRowId: rowId, + }, + }, + }, + }, + async () => { + if (column && column.events) { + for (const event of column.events) { + if (event.actionId) { + // the event param uses a hacky workaround for using same format used by event manager ( multiple handlers ) + await executeAction(_self, { ...event, ...event.options }, mode); + } + } } else { console.log('No action is associated with this event'); }