re-order events

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 }) => {

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 = {

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;

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

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)

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;
 

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