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');
}