save for demo--1

frontend/src/Editor/EditorFunc.jsx

@@ -104,7 +104,7 @@ const EditorComponent = (props) => {
 
   const dataQueries = useDataQueries();
 
-  const { isMaintenanceOn, appId, app, currentUser, currentVersionId, appDefinitionDiff, appDiffOptions } =
+  const { isMaintenanceOn, appId, app, currentUser, currentVersionId, appDefinitionDiff, appDiffOptions, events } =
     useAppInfo();
 
   const [currentPageId, setCurrentPageId] = useState(null);
@@ -255,9 +255,6 @@ const EditorComponent = (props) => {
     });
   };
 
-  // 1. When we receive an undoable action – we can always undo but cannot redo anymore.
-  // 2. Whenever you perform an undo – you can always redo and keep doing undo as long as we have a patch for it.
-  // 3. Whenever you redo – you can always undo and keep doing redo as long as we have a patch for it.
   const initComponentVersioning = () => {
     const currentVersion = {
       [currentPageId]: -1,
@@ -607,13 +604,17 @@ const EditorComponent = (props) => {
 
   //!--------
 
-  const buildComponentMetaDefinition = (components = {}) => {
+  const buildComponentMetaDefinition = (components = {}, events = []) => {
     for (const componentId in components) {
       const currentComponentData = components[componentId];
+      const componentEvents = events
+        .filter((event) => event.sourceId === componentId)
+        ?.map((event) => ({ ...event.event, id: event.id }));
       const componentMeta = componentTypes.find((comp) => currentComponentData.component.component === comp.component);
 
       const mergedDefinition = {
         ...componentMeta.definition,
+        events: componentEvents,
         properties: {
           ...componentMeta.definition.properties,
           ...currentComponentData?.component.definition.properties,
@@ -644,6 +645,7 @@ const EditorComponent = (props) => {
 
       components[componentId] = mergedComponent;
     }
+
     return components;
   };
 
@@ -653,8 +655,10 @@ const EditorComponent = (props) => {
     editingVersion['currentVersionId'] = editingVersion.id;
     _.unset(editingVersion, 'id');
 
+    const eventsData = data?.events;
+
     const pages = data.pages.reduce((acc, page) => {
-      const currentComponents = buildComponentMetaDefinition(_.cloneDeep(page?.components));
+      const currentComponents = buildComponentMetaDefinition(_.cloneDeep(page?.components), eventsData);
 
       page.components = currentComponents;
 
@@ -670,8 +674,6 @@ const EditorComponent = (props) => {
       pages: pages,
     };
 
-    // const componentMeta = componentTypes.find((comp) => component.component === comp.component);
-
     return appJSON;
   };
 
@@ -857,18 +859,44 @@ const EditorComponent = (props) => {
       const updateDiff = computeAppDiff(appDefinitionDiff, currentPageId, appDiffOptions);
 
       updateAppVersion(appId, props.editingVersion?.id, currentPageId, updateDiff, isUserSwitchedVersion)
-        .then(() => {
+        .then((data) => {
           const _editingVersion = {
             ...props.editingVersion,
             ...{ definition: appDefinition },
           };
           useAppVersionStore.getState().actions.updateEditingVersion(_editingVersion);
+
+          if (updateDiff?.type === 'components' && updateDiff?.operation === 'delete') {
+            const appEvents = JSON.parse(JSON.stringify(events));
+
+            const updatedEvents = appEvents.filter((event) => {
+              return !updateDiff?.updateDiff.includes(event.sourceId);
+            });
+
+            updateState({
+              events: updatedEvents,
+            });
+          }
+
+          if (updateDiff?.type === 'events') {
+            const appEvents = JSON.parse(JSON.stringify(events));
+
+            if (updateDiff?.operation === 'create') {
+              appEvents.push(data);
+            }
+
+            updateState({
+              events: appEvents,
+            });
+          }
+
           updateEditorState({
             saveError: false,
             isSaving: false,
           });
         })
-        .catch(() => {
+        .catch((e) => {
+          console.log('--piku error', e);
           updateEditorState({
             saveError: true,
             isSaving: false,

frontend/src/Editor/Inspector/EventManager.jsx

@@ -210,14 +210,16 @@ export const EventManager = ({
 
   function addHandler() {
     let newEvents = component.component.definition.events;
+    const eventIndex = newEvents.length;
     newEvents.push({
       eventId: Object.keys(componentMeta.events)[0],
       actionId: 'show-alert',
       message: 'Hello world!',
       alertType: 'info',
+      eventIndex: eventIndex,
     });
     setEvents(newEvents);
-    eventsChanged(newEvents, false, true);
+    eventsChanged(newEvents, null, false, true);
   }
 
   //following two are functions responsible for on change and value for the control specific actions
@@ -771,7 +773,7 @@ export const EventManager = ({
     const [removed] = result.splice(startIndex, 1);
     result.splice(endIndex, 0, removed);
     setEvents(result);
-    eventsChanged(result, true);
+    eventsChanged(result, null, true);
   };
 
   const onDragEnd = ({ source, destination }) => {

frontend/src/_stores/utils.js

@@ -53,7 +53,7 @@ const eventHandlerType = Object.freeze({
 export const computeAppDiff = (appDiff, currentPageId, opts) => {
   const { updateDiff, type, operation } = updateFor(appDiff, currentPageId, opts);
 
-  console.log('----arpit [updateFor]', { updateDiff, type, operation });
+  // console.log('----arpit [updateFor]', { updateDiff, type, operation });
   return { updateDiff, type, operation };
 };
 

server/src/controllers/apps.controller.v2.ts

@@ -345,6 +345,8 @@ export class AppsControllerV2 {
       throw new ForbiddenException('You do not have permissions to perform this action');
     }
 
-    return await this.eventService.updateEvent(body, versionId);
+    console.log('-----arpit update events', { body });
+
+    // return await this.eventService.updateEvent(body, versionId);
   }
 }

server/src/services/components.service.ts

@@ -6,9 +6,13 @@ import { Layout } from 'src/entities/layout.entity';
 import { Page } from 'src/entities/page.entity';
 import { dbTransactionWrap } from 'src/helpers/utils.helper';
 
+import { EventsService } from './events_handler.service';
+
 @Injectable()
 export class ComponentsService {
   constructor(
+    private eventHandlerService: EventsService,
+
     @InjectRepository(Component)
     private componentsRepository: Repository<Component>
   ) {}
@@ -109,6 +113,10 @@ export class ComponentsService {
         };
       }
 
+      components.forEach((component) => {
+        this.eventHandlerService.cascadeDeleteEvents(component.id);
+      });
+
       await manager.delete(Component, componentIds);
     });
   }

server/src/services/events_handler.service.ts

@@ -22,6 +22,26 @@ export class EventsService {
     });
   }
 
+  async findAllEventsWithSourceId(sourceId: string): Promise<EventHandler[]> {
+    return dbTransactionWrap(async (manager: EntityManager) => {
+      const allEvents = await manager.find(EventHandler, {
+        where: { sourceId },
+      });
+      return allEvents;
+    });
+  }
+
+  async cascadeDeleteEvents(sourceId: string) {
+    return dbTransactionWrap(async (manager: EntityManager) => {
+      const allEvents = await manager.find(EventHandler, {
+        where: { sourceId },
+      });
+
+      await manager.remove(allEvents);
+      return allEvents;
+    });
+  }
+
   async createEvent(options, versionId) {
     if (Object.keys(options).length === 0) {
       return new BadRequestException('No event found');