Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-05-23 00:48:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

table events: column and actions events

Browse source
This commit is contained in:
arpitnath 2023-09-27 15:38:50 +05:30
parent f0cb314c20
commit 2dd0160dd4
10 changed files with 49 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
frontend/src/Editor/Components/Table/Table.jsx
View file

@ -136,6 +136,8 @@ export function Table({
const { events: allAppEvents } = useAppInfo();
const tableEvents = allAppEvents.filter((event) => event.target === 'component' && event.sourceId === id);
const tableColumnEvents = allAppEvents.filter((event) => event.target === 'table_column' && event.sourceId === id);
const tableActionEvents = allAppEvents.filter((event) => event.target === 'table_action' && event.sourceId === id);
const getItemStyle = ({ isDragging, isDropAnimating }, draggableStyle) => ({
...draggableStyle,
@ -404,6 +406,7 @@ export function Table({
tableRef,
t,
darkMode,
tableColumnEvents: tableColumnEvents,
});
columnData = useMemo(
@ -442,8 +445,9 @@ export function Table({
defaultColumn,
fireEvent,
setExposedVariables,
tableActionEvents,
}),
[JSON.stringify(actions)]
[JSON.stringify(actions), tableActionEvents]
);
const textWrapActions = (id) => {
@ -472,6 +476,8 @@ export function Table({
darkMode,
allowSelection,
highlightSelectedRow,
JSON.stringify(tableActionEvents),
JSON.stringify(tableColumnEvents),
] // Hack: need to fix
);

11
frontend/src/Editor/Components/Table/columns/actions.jsx
View file

@ -1,6 +1,13 @@
import React from 'react';
const generateActionsData = ({ actions: actionItems, columnSizes, defaultColumn, fireEvent, setExposedVariables }) => {
const generateActionsData = ({
actions: actionItems,
columnSizes,
defaultColumn,
fireEvent,
setExposedVariables,
tableActionEvents,
}) => {
const leftActions = (actions = actionItems) => actions.filter((action) => action.position === 'left');
const rightActions = (actions = actionItems) =>
actions.filter((action) => [undefined, 'right'].includes(action.position));
@ -32,6 +39,7 @@ const generateActionsData = ({ actions: actionItems, columnSizes, defaultColumn,
data: cell.row.original,
rowId: cell.row.id,
action,
tableActionEvents,
});
});
}}
@ -72,6 +80,7 @@ const generateActionsData = ({ actions: actionItems, columnSizes, defaultColumn,
data: cell.row.original,
rowId: cell.row.id,
action,
tableActionEvents,
});
});
}}

3
frontend/src/Editor/Components/Table/columns/index.jsx
View file

@ -9,6 +9,7 @@ import { Toggle } from '../Toggle';
import { Datepicker } from '../Datepicker';
import { Link } from '../Link';
import moment from 'moment';
export default function generateColumnsData({
columnProperties,
columnSizes,
@ -25,6 +26,7 @@ export default function generateColumnsData({
tableRef,
t,
darkMode,
tableColumnEvents,
}) {
return columnProperties.map((column) => {
const columnSize = columnSizes[column.id] || columnSizes[column.name];
@ -429,6 +431,7 @@ export default function generateColumnsData({
column: column,
rowId: cell.row.id,
row: cell.row.original,
tableColumnEvents,
});
}
);

17
frontend/src/Editor/Inspector/Components/Table/Table.jsx
View file

@ -454,25 +454,18 @@ class TableComponent extends React.Component {
/>
</div>
<EventManager
//!have to check
component={{
component: {
definition: {
events: column.events ?? [],
},
},
}}
sourceId={this.props?.component?.id}
eventSourceType="component"
eventSourceType="table_column"
hideEmptyEventsAlert={true}
eventMetaDefinition={{ events: { onChange: { displayName: 'On change' } } }}
currentState={this.props.currentState}
currentState={this.state.currentState}
dataQueries={this.props.dataQueries}
components={this.props.components}
eventsChanged={(events) => this.columnEventChanged(column, events)}
apps={this.props.apps}
popOverCallback={(showing) => {
this.setColumnPopoverRootCloseBlocker('event-manager', showing);
this.setState({ actionPopOverRootClose: !showing });
this.setState({ showPopOver: showing });
}}
pages={this.props.pages}
/>
@ -833,7 +826,7 @@ class TableComponent extends React.Component {
//!have to check
component={dummyComponentForActionButton}
sourceId={this.props?.component?.id}
eventSourceType="component"
eventSourceType="table_action"
eventMetaDefinition={{ events: { onClick: { displayName: 'On click' } } }}
currentState={this.state.currentState}
dataQueries={this.props.dataQueries}

10
frontend/src/Editor/Inspector/EventManager.jsx
View file

@ -50,7 +50,9 @@ export const EventManager = ({
const { updateAppVersionEventHandlers, createAppVersionEventHandlers, deleteAppVersionEventHandler } =
useAppDataActions();
const currentEvents = allAppEvents.filter((event) => event.sourceId === sourceId);
const currentEvents = allAppEvents.filter((event) => {
return event.sourceId === sourceId && event.target === eventSourceType;
});
const [events, setEvents] = useState([]);
const [focusedEventIndex, setFocusedEventIndex] = useState(null);
@ -301,7 +303,11 @@ export const EventManager = ({
className={`${darkMode && 'popover-dark-themed theme-dark'} shadow`}
data-cy="popover-card"
>
<Popover.Body>
<Popover.Body
onClick={(e) => {
e.stopPropagation();
}}
>
<div className="row">
<div className="col-3 p-2">
<span data-cy="event-label">{t('editor.inspector.eventManager.event', 'Event')}</span>

2
frontend/src/Editor/QueryManager/Components/QueryManagerBody.jsx
View file

@ -186,7 +186,7 @@ export const QueryManagerBody = ({
<div className="query-manager-events pb-4 flex-grow-1">
<EventManager
sourceId={selectedQuery?.id}
eventSourceType="data_query"
eventSourceType="data_query" //check
eventMetaDefinition={queryComponent.componentMeta}
currentState={currentState}
components={allComponents}

43
frontend/src/_helpers/appUtils.js
View file

@ -663,22 +663,12 @@ export async function onEvent(_ref, eventName, events, options = {}, mode = 'edi
}
if (eventName === 'onTableActionButtonClicked') {
const { component, data, action, rowId } = options;
useCurrentStateStore.getState().actions.setCurrentState({
components: {
...getCurrentState().components,
[component.name]: {
...getCurrentState().components[component.name],
selectedRow: data,
selectedRowId: rowId,
},
},
});
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 )
await executeAction(_self, { ...event, ...event.options }, mode, customVariables);
const { action, tableActionEvents } = options;
console.log('---arpit::: ', { tableActionEvents });
if (action && tableActionEvents) {
for (const event of tableActionEvents) {
if (event?.event?.actionId) {
await executeAction(_self, event.event, mode, customVariables);
}
}
} else {
@ -687,23 +677,12 @@ export async function onEvent(_ref, eventName, events, options = {}, mode = 'edi
}
if (eventName === 'OnTableToggleCellChanged') {
const { component, column, rowId, row } = options;
useCurrentStateStore.getState().actions.setCurrentState({
components: {
...getCurrentState().components,
[component.name]: {
...getCurrentState().components[component.name],
selectedRow: row,
selectedRowId: rowId,
},
},
});
const { column, tableColumnEvents } = options;
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, customVariables);
if (column && tableColumnEvents) {
for (const event of tableColumnEvents) {
if (event?.event?.actionId) {
await executeAction(_self, event.event, mode, customVariables);
}
}
} else {

2
server/migrations/1691004706564-CreateEventHandlerTable.ts
View file

@ -40,7 +40,7 @@ export class CreateEventHandlerTable1691004706564 implements MigrationInterface
{
name: 'target',
type: 'enum',
enum: ['page', 'component', 'data_query'],
enum: ['page', 'component', 'data_query', 'table_column', 'table_action'],
default: "'page'",
isNullable: false,
},

2
server/src/entities/event_handler.entity.ts
View file

@ -13,6 +13,8 @@ export enum Target {
page = 'page',
component = 'component',
dataQuery = 'data_query',
tableColumn = 'table_column',
tableAction = 'table_action',
}
@Entity({ name: 'event_handlers' })

2
server/src/services/events_handler.service.ts
View file

@ -2,7 +2,7 @@ import { BadRequestException, Injectable, NotFoundException } from '@nestjs/comm
import { InjectRepository } from '@nestjs/typeorm';
import { EntityManager, Repository } from 'typeorm';
import { Component } from 'src/entities/component.entity';
// import { Page } from 'src/entities/page.entity';
import { EventHandler } from 'src/entities/event_handler.entity';
import { dbTransactionWrap } from 'src/helpers/utils.helper';