Feature: Multiple handlers for events (ToolJet#571)

* Multiple handlers for each events * Fixes * Migration * ormconfig to use entities in migrations * use connection object to build queries * fixes for bulk update * Fix for table action button * use query runner to wrap migration in same transaction Co-authored-by: Akshay Sasidharan <[email protected]>
mousheng · Aug 24, 2021 · eec59e5 · eec59e5
1 parent c09f3d7
commit eec59e5
Show file tree

Hide file tree

Showing 7 changed files with 476 additions and 171 deletions.
diff --git a/frontend/src/Editor/Components/components.js b/frontend/src/Editor/Components/components.js
@@ -24,10 +24,10 @@ export const componentTypes = [
       height: 300
     },
     events: {
-      onRowClicked: { displayName: 'On row clicked'},
-      onBulkUpdate: { displayName: 'Bulk update query'},
-      onPageChanged: { displayName: 'On page changed'},
-      onSearch: { displayName: 'On search'}
+      onRowClicked: { displayName: 'Row clicked'},
+      onBulkUpdate: { displayName: 'Bulk update'},
+      onPageChanged: { displayName: 'Page changed'},
+      onSearch: { displayName: 'Search'}
     },
     styles: {
       textColor: { type: 'color', displayName: 'Text Color' }
@@ -59,28 +59,7 @@ export const componentTypes = [
           ]
         }
       },
-      events: {
-        onRowClicked: {
-          options: {
-
-          }
-        },
-        onBulkUpdate: {
-            options: {
-
-            }
-        },
-        onPageChanged: {
-            options: {
-
-            }
-        },
-        onSearch: {
-          options: {
-
-          }
-        }
-      },
+      events: [],
       styles: {
         textColor: { value: '' }
       }
@@ -121,13 +100,7 @@ export const componentTypes = [
         visible: { value: true },
         loadingState: { value: `{{false}}` }
       },
-      events: {
-        onClick: {
-          options: {
-
-          }
-        }
-      },
+      events: [],
       styles: {
         backgroundColor: { value: '#3c92dc' },
         textColor: { value: '#fff' }
@@ -183,9 +156,7 @@ export const componentTypes = [
   { "x": 40, "y": "Mar"}
 ]`}
       },
-      events: {
-
-      },
+      events: [],
       styles: {
 
       }
@@ -228,9 +199,7 @@ export const componentTypes = [
         title: { value: 'This title can be changed' },
         size: { value: 'md' },
       },
-      events: {
-
-      },
+      events: [],
       styles: {
 
       }
@@ -267,9 +236,7 @@ export const componentTypes = [
       properties: {
         placeholder: { value: 'Placeholder text' }
       },
-      events: {
-
-      },
+      events: [],
       styles: {
 
       }
@@ -310,9 +277,7 @@ export const componentTypes = [
         enableTime: { value: '{{false}}' },
         enableDate: { value: '{{true}}' }
       },
-      events: {
-
-      },
+      events: [],
       styles: {
 
       }
@@ -350,18 +315,7 @@ export const componentTypes = [
       properties: {
         label: { value: 'Checkbox label' }
       },
-      events: {
-        onCheck: {
-          options: {
-
-          }
-        },
-        onUnCheck: {
-          options: {
-
-          }
-        }
-      },
+      events: [],
       styles: {
         textColor: { value: '#000' }
       }
@@ -405,13 +359,7 @@ export const componentTypes = [
         display_values: { value: '{{["yes", "no"]}}' },
         visible: { value: true }
       },
-      events: {
-        onSelectionChange: { 
-          options: {
-
-          }
-        },
-      },
+      events: [],
       styles: {
         textColor: { value: '#000' }
       }
@@ -448,18 +396,7 @@ export const componentTypes = [
       properties: {
         label: { value: 'Toggle label' }
       },
-      events: {
-        onToggle: {
-          options: {
-
-          }
-        },
-        onUnToggle: {
-          options: {
-
-          }
-        }
-      },
+      events: [],
       styles: {
         textColor: { value: '#000' }
       }
@@ -498,9 +435,7 @@ export const componentTypes = [
         value: { value: '' },
         placeholder: { value: 'Placeholder text' }
       },
-      events: {
-
-      },
+      events: [],
       styles: {
 
       }
@@ -538,9 +473,7 @@ export const componentTypes = [
       properties: {
         format: { value: 'DD/MM/YYYY' }
       },
-      events: {
-
-      },
+      events: [],
       styles: {
 
       }
@@ -580,9 +513,7 @@ export const componentTypes = [
         visible: { value: true },
         loadingState: { value: false }
       },
-      events: {
-        onClick: { }
-      },
+      events: [],
       styles: {
         textColor: { value: '#000' }
       }
@@ -620,9 +551,7 @@ export const componentTypes = [
         source: { value: 'https://www.svgrepo.com/show/34217/image.svg' },
         visible: { value: true }
       },
-      events: {
-        onClick: { }
-      },
+      events: [],
       styles: {
 
       }
@@ -656,7 +585,7 @@ export const componentTypes = [
       properties: {
         visible: { value: true }
       },
-      events: { },
+      events: [],
       styles: {
         backgroundColor: { value: '#fff' }
       }
@@ -702,9 +631,7 @@ export const componentTypes = [
         display_values: { value: '{{["one", "two", "three"]}}' },
         visible: { value: true }
       },
-      events: {
-        onSelect: { }
-      },
+      events: [],
       styles: {
 
       }
@@ -750,9 +677,7 @@ export const componentTypes = [
         display_values: { value: '["one", "two", "three"]' },
         visible: { value: true }
       },
-      events: {
-        onSelect: { }
-      },
+      events: [],
       styles: {
 
       }
@@ -789,9 +714,7 @@ export const componentTypes = [
       properties: {
         placeholder: { value: 'Placeholder text' }
       },
-      events: {
-
-      },
+      events: [],
       styles: {
 
       }
@@ -851,9 +774,7 @@ defaultMarkers: { value: `[{
 }]`}
       },
       addNewMarkers: { value: '{{false}}'},
-      events: {
-
-      },
+      events: [],
       styles: {
 
       }
@@ -888,12 +809,10 @@ defaultMarkers: { value: `[{
         showOnMobile: { value : true },
       },
       properties: {},
-      events: {
-        onDetect: {
-        }
-      },
+      events: [],
       styles: {
       }
     }
   }
 ];
+
diff --git a/frontend/src/Editor/Inspector/Components/Table.jsx b/frontend/src/Editor/Inspector/Components/Table.jsx
@@ -9,6 +9,7 @@ import { EventSelector } from '../EventSelector';
 import { Color } from '../Elements/Color';
 import SelectSearch, { fuzzySearch } from 'react-select-search';
 import { v4 as uuidv4 } from 'uuid'; 
+import { EventManager } from '../EventManager';
 
 class Table extends React.Component {
   constructor(props) {
@@ -414,11 +415,14 @@ class Table extends React.Component {
 
           <div className="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)}
-          {renderEvent(component, eventUpdated, dataQueries, eventOptionUpdated, 'onSearch', componentMeta.events.onSearch, currentState, components)}
-
-          {renderQuerySelector(component, dataQueries, eventOptionUpdated, 'onBulkUpdate', componentMeta.events.onBulkUpdate)}
+          <EventManager
+            component={component}
+            componentMeta={componentMeta}
+            currentState={currentState}
+            dataQueries={dataQueries}
+            components={components}
+            eventsChanged={this.props.eventsChanged}
+          />
 
           <div className="hr-text">Style</div>
         </div>