From 08692c8968e42875df5f3158da11ea8ac1e4c1a5 Mon Sep 17 00:00:00 2001 From: arpitnath Date: Wed, 13 Sep 2023 13:04:36 +0530 Subject: [PATCH] re-order events --- .../src/Editor/Inspector/EventManager.jsx | 28 +++++++++++++++++-- frontend/src/_services/appVersion.service.js | 3 +- frontend/src/_stores/appDataStore.js | 4 +-- .../1691004706564-CreateEventHandlerTable.ts | 5 ++++ server/src/controllers/apps.controller.v2.ts | 2 +- server/src/entities/event_handler.entity.ts | 3 ++ server/src/services/events_handler.service.ts | 26 ++++++++++++++++- 7 files changed, 64 insertions(+), 7 deletions(-) diff --git a/frontend/src/Editor/Inspector/EventManager.jsx b/frontend/src/Editor/Inspector/EventManager.jsx index 1fe84f2e87..ee849ab85c 100644 --- a/frontend/src/Editor/Inspector/EventManager.jsx +++ b/frontend/src/Editor/Inspector/EventManager.jsx @@ -22,7 +22,6 @@ import { useAppDataActions, useAppInfo } from '@/_stores/appDataStore'; import { isQueryRunnable } from '@/_helpers/utils'; import { shallow } from 'zustand/shallow'; // eslint-disable-next-line import/no-unresolved -import { diff } from 'deep-object-diff'; export const EventManager = ({ sourceId, @@ -255,10 +254,10 @@ export const EventManager = ({ actionId: 'show-alert', message: 'Hello world!', alertType: 'info', - eventIndex: eventIndex, }, eventType: eventSourceType, attachedTo: sourceId, + index: eventIndex, }); } @@ -824,7 +823,32 @@ export const EventManager = ({ const result = _.cloneDeep(events); const [removed] = result.splice(startIndex, 1); result.splice(endIndex, 0, removed); + + const reorderedEvents = result.map((event, index) => { + return { + ...event, + index: index, + }; + }); + console.log('----arpit reorder events:: ', { result, events, reorderedEvents }); setEvents(result); + + // updateAppVersionEventHandlers( + // [ + // { + // event_id: updatedEvent.id, + // diff: updatedEvent, + // }, + // ], + // 'update' + // ); + updateAppVersionEventHandlers( + reorderedEvents.map((event) => ({ + event_id: event.id, + diff: event, + })), + 'reorder' + ); }; const onDragEnd = ({ source, destination }) => { diff --git a/frontend/src/_services/appVersion.service.js b/frontend/src/_services/appVersion.service.js index c599f6bb66..6a41cd96cb 100644 --- a/frontend/src/_services/appVersion.service.js +++ b/frontend/src/_services/appVersion.service.js @@ -103,9 +103,10 @@ function autoSaveApp(appId, versionId, diff, type, pageId, operation, isUserSwit return fetch(url, requestOptions).then(handleResponse); } -function saveAppVersionEventHandlers(appId, versionId, events) { +function saveAppVersionEventHandlers(appId, versionId, events, updateType = 'update') { const body = { events, + updateType, }; const requestOptions = { diff --git a/frontend/src/_stores/appDataStore.js b/frontend/src/_stores/appDataStore.js index d3eadee414..0e69c7a4ef 100644 --- a/frontend/src/_stores/appDataStore.js +++ b/frontend/src/_stores/appDataStore.js @@ -50,12 +50,12 @@ export const useAppDataStore = create( useAppDataStore.getState().actions.setIsSaving(false); }); }, - updateAppVersionEventHandlers: async (events) => { + updateAppVersionEventHandlers: async (events, updateType = 'update') => { useAppDataStore.getState().actions.setIsSaving(true); const appId = get().appId; const versionId = get().currentVersionId; - const response = await appVersionService.saveAppVersionEventHandlers(appId, versionId, events); + const response = await appVersionService.saveAppVersionEventHandlers(appId, versionId, events, updateType); useAppDataStore.getState().actions.setIsSaving(false); const updatedEvents = get().events; diff --git a/server/migrations/1691004706564-CreateEventHandlerTable.ts b/server/migrations/1691004706564-CreateEventHandlerTable.ts index 56886ab6f6..45c7d17c4b 100644 --- a/server/migrations/1691004706564-CreateEventHandlerTable.ts +++ b/server/migrations/1691004706564-CreateEventHandlerTable.ts @@ -17,6 +17,11 @@ export class CreateEventHandlerTable1691004706564 implements MigrationInterface type: 'varchar', isNullable: false, }, + { + name: 'index', + type: 'int', + isNullable: false, + }, { name: 'event', type: 'jsonb', diff --git a/server/src/controllers/apps.controller.v2.ts b/server/src/controllers/apps.controller.v2.ts index c66ce3cf34..b7b7d51ac9 100644 --- a/server/src/controllers/apps.controller.v2.ts +++ b/server/src/controllers/apps.controller.v2.ts @@ -347,7 +347,7 @@ export class AppsControllerV2 { throw new ForbiddenException('You do not have permissions to perform this action'); } - return await this.eventService.updateEvent(body?.events); + return await this.eventService.updateEvent(body?.events, body?.updateType); } @UseGuards(JwtAuthGuard) diff --git a/server/src/entities/event_handler.entity.ts b/server/src/entities/event_handler.entity.ts index b85cefb6b2..c688fe26c8 100644 --- a/server/src/entities/event_handler.entity.ts +++ b/server/src/entities/event_handler.entity.ts @@ -15,6 +15,9 @@ export class EventHandler { @Column({ name: 'name' }) name: string; + @Column() + index: number; + @Column('simple-json') event: any; diff --git a/server/src/services/events_handler.service.ts b/server/src/services/events_handler.service.ts index 35397a4c5b..41f1f22814 100644 --- a/server/src/services/events_handler.service.ts +++ b/server/src/services/events_handler.service.ts @@ -52,6 +52,7 @@ export class EventsService { target: eventObj.eventType, event: eventObj.event, appVersionId: versionId, + index: eventObj.index, }; return await dbTransactionWrap(async (manager: EntityManager) => { @@ -60,7 +61,7 @@ export class EventsService { }); } - async updateEvent(events: []) { + async updateEvent(events: [], updateType: 'update' | 'reorder') { return await dbTransactionWrap(async (manager: EntityManager) => { return await Promise.all( events.map(async (event) => { @@ -83,6 +84,28 @@ export class EventsService { }, }; + if (updateType === 'reorder') { + updatedEvent.index = diff.index; + } + + return await manager.save(EventHandler, updatedEvent); + }) + ); + }); + } + + async updateEventsOrderOnDelete(sourceId: string, deletedIndex: number) { + const allEvents = await this.findAllEventsWithSourceId(sourceId); + const eventsToUpdate = allEvents.filter((event) => event.index > deletedIndex); + + return await dbTransactionWrap(async (manager: EntityManager) => { + return await Promise.all( + eventsToUpdate.map(async (event) => { + const updatedEvent = { + ...event, + index: event.index - 1, + }; + return await manager.save(EventHandler, updatedEvent); }) ); @@ -104,6 +127,7 @@ export class EventsService { if (!deleteResponse?.affected) { throw new NotFoundException(); } + await this.updateEventsOrderOnDelete(event.sourceId, event.index); return deleteResponse; }); }