- {param.displayName}
+
+ {param?.displayName}
{param.type === 'select' ? (
@@ -758,7 +788,7 @@ export const EventManager = ({
enablePreview={true}
type={param?.type}
fieldMeta={{ options: param?.options }}
- cyLabel={param.displayName}
+ cyLabel={param?.displayName}
/>
)}
@@ -784,7 +814,7 @@ export const EventManager = ({
}
const reorderEvents = (startIndex, endIndex) => {
- const result = [...component.component.definition.events];
+ const result = _.cloneDeep(events);
const [removed] = result.splice(startIndex, 1);
result.splice(endIndex, 0, removed);
setEvents(result);
@@ -812,7 +842,8 @@ export const EventManager = ({
{({ innerRef, droppableProps, placeholder }) => (
{events.map((event, index) => {
- const actionMeta = ActionTypes.find((action) => action.id === event.actionId);
+ const actionMeta = ActionTypes.find((action) => action.id === event.event.actionId);
+
const rowClassName = `card-body p-0 ${focusedEventIndex === index ? ' bg-azure-lt' : ''}`;
return (
@@ -826,7 +857,7 @@ export const EventManager = ({
trigger="click"
placement={popoverPlacement || 'left'}
rootClose={true}
- overlay={eventPopover(event, index)}
+ overlay={eventPopover(event.event, index)}
onHide={() => setFocusedEventIndex(null)}
onToggle={(showing) => {
if (showing) {
@@ -888,7 +919,7 @@ export const EventManager = ({
- {componentMeta.events[event.eventId]['displayName']}
+ {eventMetaDefinition?.events[event.event.eventId]?.displayName}
@@ -956,7 +987,7 @@ export const EventManager = ({
);
};
- const componentName = componentMeta.name ? componentMeta.name : 'query';
+ const componentName = eventMetaDefinition?.name ? eventMetaDefinition.name : 'query';
if (events.length === 0) {
return (
diff --git a/frontend/src/Editor/Inspector/Inspector.jsx b/frontend/src/Editor/Inspector/Inspector.jsx
index 765f6fdd35..40de8505d0 100644
--- a/frontend/src/Editor/Inspector/Inspector.jsx
+++ b/frontend/src/Editor/Inspector/Inspector.jsx
@@ -196,49 +196,49 @@ export const Inspector = ({
}
}
- function eventUpdated(event, actionId) {
- let newDefinition = JSON.parse(JSON.stringify(component.component.definition));
- newDefinition.events[event.name] = { actionId };
+ // function eventUpdated(event, actionId) {
+ // let newDefinition = JSON.parse(JSON.stringify(component.component.definition));
+ // newDefinition.events[event.name] = { actionId };
- let newComponent = {
- ...component,
- };
+ // let newComponent = {
+ // ...component,
+ // };
- componentDefinitionChanged(newComponent, { eventUpdated: true });
- }
+ // // componentDefinitionChanged(newComponent, { eventUpdated: true });
+ // }
- function eventsChanged(newEvents, isReordered = false, isNew = false) {
- let newComponent = JSON.parse(JSON.stringify(component));
- let newDefinition = JSON.parse(JSON.stringify(newComponent.component.definition));
+ // function eventsChanged(newEvents, isReordered = false, isNew = false) {
+ // let newComponent = JSON.parse(JSON.stringify(component));
+ // let newDefinition = JSON.parse(JSON.stringify(newComponent.component.definition));
- newDefinition.events = newEvents;
+ // newDefinition.events = newEvents;
- newComponent.component.definition = newDefinition;
+ // newComponent.component.definition = newDefinition;
- const opts = {
- componentsEventsChanged: true,
- };
+ // // const opts = {
+ // // componentsEventsChanged: true,
+ // // };
- if (isReordered) opts.eventsReOrdered = true;
- if (isNew) opts.newEvent = true;
+ // // if (isReordered) opts.eventsReOrdered = true;
+ // // if (isNew) opts.newEvent = true;
- componentDefinitionChanged(newComponent, opts);
- }
+ // // componentDefinitionChanged(newComponent, opts);
+ // }
- function eventOptionUpdated(event, option, value) {
- console.log('eventOptionUpdated', event, option, value);
+ // function eventOptionUpdated(event, option, value) {
+ // console.log('eventOptionUpdated--moh', event, option, value);
- let newDefinition = JSON.parse(JSON.stringify(component.component.definition));
- let eventDefinition = newDefinition.events[event.name] || { options: {} };
+ // let newDefinition = JSON.parse(JSON.stringify(component.component.definition));
+ // let eventDefinition = newDefinition.events[event.name] || { options: {} };
- newDefinition.events[event.name] = { ...eventDefinition, options: { ...eventDefinition.options, [option]: value } };
+ // newDefinition.events[event.name] = { ...eventDefinition, options: { ...eventDefinition.options, [option]: value } };
- let newComponent = {
- ...component,
- };
+ // let newComponent = {
+ // ...component,
+ // };
- componentDefinitionChanged(newComponent, { eventOptionUpdated: true });
- }
+ // componentDefinitionChanged(newComponent, { eventOptionUpdated: true });
+ // }
const buildGeneralStyle = () => {
const items = [];
@@ -273,12 +273,12 @@ export const Inspector = ({
paramUpdated={paramUpdated}
dataQueries={dataQueries}
componentMeta={componentMeta}
- eventUpdated={eventUpdated}
- eventOptionUpdated={eventOptionUpdated}
+ // eventUpdated={eventUpdated}
+ // eventOptionUpdated={eventOptionUpdated}
components={allComponents}
currentState={currentState}
darkMode={darkMode}
- eventsChanged={eventsChanged}
+ // eventsChanged={eventsChanged}
pages={pages}
allComponents={allComponents}
/>
diff --git a/frontend/src/Editor/LeftSidebar/SidebarPageSelector/SettingsModal.jsx b/frontend/src/Editor/LeftSidebar/SidebarPageSelector/SettingsModal.jsx
index b0edf606ab..214a4d12c9 100644
--- a/frontend/src/Editor/LeftSidebar/SidebarPageSelector/SettingsModal.jsx
+++ b/frontend/src/Editor/LeftSidebar/SidebarPageSelector/SettingsModal.jsx
@@ -55,6 +55,7 @@ export const SettingsModal = ({
pinPagesPopover(true)}>
Events
{t('editor.queryManager.eventsHandler', 'Events')}
event.eventId === eventId);
+export async function executeActionsForEventId(_ref, eventId, events = [], mode, customVariables) {
+ const filteredEvents = events.filter((event) => event?.event.eventId === eventId);
for (const event of filteredEvents) {
- await executeAction(_ref, event, mode, customVariables); // skipcq: JS-0032
+ await executeAction(_ref, event.event, mode, customVariables); // skipcq: JS-0032
}
}
@@ -584,12 +583,12 @@ function executeActionWithDebounce(_ref, event, mode, customVariables) {
}
}
-export async function onEvent(_ref, eventName, options, mode = 'edit') {
+export async function onEvent(_ref, eventName, events, options = {}, mode = 'edit') {
let _self = _ref;
const { customVariables } = options;
if (eventName === 'onPageLoad') {
- await executeActionsForEventId(_ref, 'onPageLoad', { definition: { events: [options] } }, mode, customVariables);
+ await executeActionsForEventId(_ref, 'onPageLoad', events, mode, customVariables);
}
if (eventName === 'onTrigger') {
@@ -616,7 +615,7 @@ export async function onEvent(_ref, eventName, options, mode = 'edit') {
},
},
});
- executeActionsForEventId(_ref, 'onCalendarEventSelect', component, mode, customVariables);
+ executeActionsForEventId(_ref, 'onCalendarEventSelect', events, mode, customVariables);
}
if (eventName === 'onCalendarSlotSelect') {
@@ -630,7 +629,7 @@ export async function onEvent(_ref, eventName, options, mode = 'edit') {
},
},
});
- executeActionsForEventId(_ref, 'onCalendarSlotSelect', component, mode, customVariables);
+ executeActionsForEventId(_ref, 'onCalendarSlotSelect', events, mode, customVariables);
}
if (eventName === 'onTableActionButtonClicked') {
@@ -734,18 +733,15 @@ export async function onEvent(_ref, eventName, options, mode = 'edit') {
'onNewRowsAdded',
].includes(eventName)
) {
- const { component } = options;
- executeActionsForEventId(_ref, eventName, component, mode, customVariables);
+ executeActionsForEventId(_ref, eventName, events, mode, customVariables);
}
if (eventName === 'onBulkUpdate') {
- onComponentOptionChanged(options.component, 'isSavingChanges', true);
- await executeActionsForEventId(_self, eventName, options.component, mode, customVariables);
- onComponentOptionChanged(options.component, 'isSavingChanges', false);
+ await executeActionsForEventId(_self, eventName, events, mode, customVariables);
}
if (['onDataQuerySuccess', 'onDataQueryFailure'].includes(eventName)) {
- await executeActionsForEventId(_self, eventName, options, mode, customVariables);
+ await executeActionsForEventId(_self, eventName, events, mode, customVariables);
}
}
@@ -1007,9 +1003,7 @@ export function runQuery(_ref, queryId, queryName, confirmed = undefined, mode =
},
});
resolve(data);
- onEvent(_self, 'onDataQueryFailure', {
- definition: { events: dataQuery.options.events },
- });
+ onEvent(_self, 'onDataQueryFailure', dataQuery.options.events);
if (mode !== 'view') {
const err = query.kind == 'tooljetdb' ? data?.error || data : _.isEmpty(data.data) ? data : data.data;
toast.error(err?.message);
@@ -1047,9 +1041,7 @@ export function runQuery(_ref, queryId, queryName, confirmed = undefined, mode =
},
});
resolve(finalData);
- onEvent(_self, 'onDataQueryFailure', {
- definition: { events: dataQuery.options.events },
- });
+ onEvent(_self, 'onDataQueryFailure', dataQuery.options.events);
return;
}
}
@@ -1088,7 +1080,7 @@ export function runQuery(_ref, queryId, queryName, confirmed = undefined, mode =
},
});
resolve({ status: 'ok', data: finalData });
- onEvent(_self, 'onDataQuerySuccess', { definition: { events: dataQuery.options.events } }, mode);
+ onEvent(_self, 'onDataQuerySuccess', dataQuery.options.events, mode);
}
})
.catch(({ error }) => {
diff --git a/frontend/src/_services/appVersion.service.js b/frontend/src/_services/appVersion.service.js
index d9e97f0ac0..c599f6bb66 100644
--- a/frontend/src/_services/appVersion.service.js
+++ b/frontend/src/_services/appVersion.service.js
@@ -8,6 +8,9 @@ export const appVersionService = {
del,
save,
autoSaveApp,
+ saveAppVersionEventHandlers,
+ createAppVersionEventHandler,
+ deleteAppVersionEventHandler,
};
function getAll(appId) {
@@ -99,3 +102,42 @@ function autoSaveApp(appId, versionId, diff, type, pageId, operation, isUserSwit
return fetch(url, requestOptions).then(handleResponse);
}
+
+function saveAppVersionEventHandlers(appId, versionId, events) {
+ const body = {
+ events,
+ };
+
+ const requestOptions = {
+ method: 'PUT',
+ headers: authHeader(),
+ credentials: 'include',
+ body: JSON.stringify(body),
+ };
+ return fetch(`${config.apiUrl}/v2/apps/${appId}/versions/${versionId}/events`, requestOptions).then(handleResponse);
+}
+
+function createAppVersionEventHandler(appId, versionId, event) {
+ const body = {
+ event,
+ };
+
+ const requestOptions = {
+ method: 'POST',
+ headers: authHeader(),
+ credentials: 'include',
+ body: JSON.stringify(body),
+ };
+ return fetch(`${config.apiUrl}/v2/apps/${appId}/versions/${versionId}/events`, requestOptions).then(handleResponse);
+}
+
+function deleteAppVersionEventHandler(appId, versionId, eventId) {
+ const requestOptions = {
+ method: 'DELETE',
+ headers: authHeader(),
+ credentials: 'include',
+ };
+ return fetch(`${config.apiUrl}/v2/apps/${appId}/versions/${versionId}/events/${eventId}`, requestOptions).then(
+ handleResponse
+ );
+}
diff --git a/frontend/src/_stores/appDataStore.js b/frontend/src/_stores/appDataStore.js
index dfae050fb1..b7fb02ab80 100644
--- a/frontend/src/_stores/appDataStore.js
+++ b/frontend/src/_stores/appDataStore.js
@@ -26,7 +26,7 @@ const initialState = {
export const useAppDataStore = create(
zustandDevTools(
- (set) => ({
+ (set, get) => ({
...initialState,
actions: {
updateEditingVersion: (version) => set(() => ({ editingVersion: version })),
@@ -44,6 +44,54 @@ export const useAppDataStore = create(
isUserSwitchedVersion
);
},
+ updateAppVersionEventHandlers: async (events) => {
+ const appId = get().appId;
+ const versionId = get().currentVersionId;
+
+ const response = await appVersionService.saveAppVersionEventHandlers(appId, versionId, events);
+
+ const updatedEvents = get().events;
+
+ updatedEvents.forEach((e, index) => {
+ if (e.id === response[index].id) {
+ updatedEvents[index] = response[index];
+ }
+ });
+
+ console.log('----arpit should update events store', { updatedEvents, response });
+
+ set(() => ({ events: updatedEvents }));
+ },
+
+ createAppVersionEventHandlers: async (event) => {
+ const appId = get().appId;
+ const versionId = get().currentVersionId;
+
+ const updatedEvents = get().events;
+ const response = await appVersionService.createAppVersionEventHandler(appId, versionId, event);
+ updatedEvents.push(response);
+
+ set(() => ({ events: updatedEvents }));
+ },
+
+ deleteAppVersionEventHandler: async (eventId) => {
+ const appId = get().appId;
+ const versionId = get().currentVersionId;
+
+ const updatedEvents = get().events;
+
+ const response = await appVersionService.deleteAppVersionEventHandler(appId, versionId, eventId);
+
+ if (response?.affected === 1) {
+ updatedEvents.splice(
+ updatedEvents.findIndex((e) => e.id === eventId),
+ 1
+ );
+
+ set(() => ({ events: updatedEvents }));
+ }
+ },
+
setIsSaving: (isSaving) => set(() => ({ isSaving })),
setAppId: (appId) => set(() => ({ appId })),
},
@@ -58,3 +106,9 @@ export const useUpdateEditingVersion = () => useAppDataStore((state) => state.ac
export const useCurrentUser = () => useAppDataStore((state) => state.currentUser);
export const useAppInfo = () => useAppDataStore((state) => state);
export const useAppDataActions = () => useAppDataStore((state) => state.actions);
+
+// if (operation === 'delete') {
+// const response = await appVersionService.deleteAppVersionEventHandler(appId, versionId, eventId);
+// const updatedEvents = get().events.filter((e) => e.id !== response.id);
+// set(() => ({ events: updatedEvents }));
+// }
diff --git a/server/src/controllers/apps.controller.v2.ts b/server/src/controllers/apps.controller.v2.ts
index a7c187e0a0..8562e17990 100644
--- a/server/src/controllers/apps.controller.v2.ts
+++ b/server/src/controllers/apps.controller.v2.ts
@@ -327,7 +327,9 @@ export class AppsControllerV2 {
throw new ForbiddenException('You do not have permissions to perform this action');
}
- return this.eventService.createEvent(body, versionId);
+ const { event } = body;
+
+ return this.eventService.createEvent(event, versionId);
}
@UseGuards(JwtAuthGuard)
@UseInterceptors(ValidAppInterceptor)
@@ -345,8 +347,25 @@ export class AppsControllerV2 {
throw new ForbiddenException('You do not have permissions to perform this action');
}
- console.log('-----arpit update events', { body });
+ return await this.eventService.updateEvent(body?.events);
+ }
- // return await this.eventService.updateEvent(body, versionId);
+ @UseGuards(JwtAuthGuard)
+ @UseInterceptors(ValidAppInterceptor)
+ @Delete(':id/versions/:versionId/events/:eventId')
+ async deleteEvents(@User() user, @Param('id') id, @Param('versionId') versionId, @Param('eventId') eventId) {
+ const version = await this.appsService.findVersion(versionId);
+ const app = version.app;
+
+ if (app.id !== id) {
+ throw new BadRequestException();
+ }
+ const ability = await this.appsAbilityFactory.appsActions(user, id);
+
+ if (!ability.can('updateVersions', app)) {
+ throw new ForbiddenException('You do not have permissions to perform this action');
+ }
+
+ return await this.eventService.deleteEvent(eventId);
}
}
diff --git a/server/src/services/events_handler.service.ts b/server/src/services/events_handler.service.ts
index 49bb26ee6b..c780e63c86 100644
--- a/server/src/services/events_handler.service.ts
+++ b/server/src/services/events_handler.service.ts
@@ -1,4 +1,4 @@
-import { BadRequestException, Injectable } from '@nestjs/common';
+import { BadRequestException, Injectable, NotFoundException } from '@nestjs/common';
import { InjectRepository } from '@nestjs/typeorm';
import { EntityManager, Repository } from 'typeorm';
import { Component } from 'src/entities/component.entity';
@@ -42,46 +42,70 @@ export class EventsService {
});
}
- async createEvent(options, versionId) {
- if (Object.keys(options).length === 0) {
+ async createEvent(eventObj, versionId) {
+ if (Object.keys(eventObj).length === 0) {
return new BadRequestException('No event found');
}
const newEvent = {
- name: options.event.eventId,
- sourceId: options.attachedTo,
- target: options.eventType,
- event: options.event,
+ name: eventObj.event.eventId,
+ sourceId: eventObj.attachedTo,
+ target: eventObj.eventType,
+ event: eventObj.event,
appVersionId: versionId,
};
- console.log('---arpit || create events', { newEvent });
-
return await dbTransactionWrap(async (manager: EntityManager) => {
const event = await manager.save(EventHandler, newEvent);
return event;
});
}
- async updateEvent(options = [], versionId: string) {
- const eventHandlers = [];
+ async updateEvent(events: []) {
+ return await dbTransactionWrap(async (manager: EntityManager) => {
+ return await Promise.all(
+ events.map(async (event) => {
+ const { event_id, diff } = event as any;
- options.forEach((option) => {
- eventHandlers.push({
- event: option.event,
- name: option.event.eventId,
- sourceId: option.attachedTo,
- target: option.eventType,
- });
+ const eventDiff = diff?.event;
+ const eventToUpdate = await manager.findOne(EventHandler, {
+ where: { id: event_id },
+ });
+
+ if (!eventToUpdate) {
+ return new BadRequestException('No event found');
+ }
+
+ const updatedEvent = {
+ ...eventToUpdate,
+ event: {
+ ...eventToUpdate.event,
+ ...eventDiff,
+ },
+ };
+
+ return await manager.save(EventHandler, updatedEvent);
+ })
+ );
});
-
- console.log('---arpit || createOrUpdateEvent', { eventHandlers });
-
- return {
- status: 'success',
- data: eventHandlers,
- };
}
- // utitlity functions
+ async deleteEvent(eventId: string) {
+ return await dbTransactionWrap(async (manager: EntityManager) => {
+ const event = await manager.findOne(EventHandler, {
+ where: { id: eventId },
+ });
+
+ if (!event) {
+ return new BadRequestException('No event found');
+ }
+
+ const deleteResponse = await manager.delete(EventHandler, event.id);
+
+ if (!deleteResponse?.affected) {
+ throw new NotFoundException();
+ }
+ return deleteResponse;
+ });
+ }
}