Feature/event handlers for table toggle (#1377)

* Fixing lint issues

* Add support for events for table toggle

* Await cell value change before firing table togle event

* Make execution of actions for column events and table button events serial

* Await execution of each table column/button event before executing the next

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 },

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,
+                        });
+                      }
+                    );
                   }}
                 />
               </div>
@@ -1008,7 +1017,10 @@ export function Table({
                   />
                 </div>
                 <div className="col-auto">
-                  <button onClick={() => removeFilter(index)} className={`btn ${darkMode ? "btn-dark" : "btn-light"} btn-sm p-2 text-danger font-weight-bold`}>
+                  <button
+                    onClick={() => removeFilter(index)}
+                    className={`btn ${darkMode ? 'btn-dark' : 'btn-light'} btn-sm p-2 text-danger font-weight-bold`}
+                  >
                     x
                   </button>
                 </div>

frontend/src/Editor/Editor.jsx

@@ -16,7 +16,6 @@ import { SaveAndPreview } from './SaveAndPreview';
 import {
   onComponentOptionChanged,
   onComponentOptionsChanged,
-  onComponentClick,
   onEvent,
   onQueryConfirm,
   onQueryCancel,

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 (
       <Popover id="popover-basic-2" className="shadow">
@@ -241,6 +257,24 @@ class Table extends React.Component {
                   onChange={(name, value, color) => this.onColumnItemChange(index, 'activeColor', color)}
                 />
               </div>
+              <EventManager
+                component={{
+                  component: {
+                    definition: {
+                      events: column.events ?? [],
+                    },
+                  },
+                }}
+                componentMeta={{ events: { onChange: { displayName: 'On change' } } }}
+                currentState={this.props.currentState}
+                dataQueries={this.props.dataQueries}
+                components={this.props.components}
+                eventsChanged={(events) => this.columnEventChanged(column, events)}
+                apps={this.props.apps}
+                popOverCallback={(showing) => {
+                  this.setState({ columnPopOverRootClose: !showing });
+                }}
+              />
             </div>
           )}
 
@@ -553,7 +587,12 @@ class Table extends React.Component {
             <SortableList onSortEnd={this.onSortEnd} className="w-100" draggedItemClassName="dragged">
               {columns.value.map((item, index) => (
                 <div className={`card p-2 column-sort-row ${this.props.darkMode ? '' : 'bg-light'}`} key={index}>
-                  <OverlayTrigger trigger="click" placement="left" rootClose overlay={this.columnPopover(item, index)}>
+                  <OverlayTrigger
+                    trigger="click"
+                    placement="left"
+                    rootClose={this.state.columnPopOverRootClose}
+                    overlay={this.columnPopover(item, index)}
+                  >
                     <div className={`row ${this.props.darkMode ? '' : 'bg-light'}`} role="button">
                       <div className="col-auto">
                         <SortableItem key={item.name}>

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