handle adding widgets to sub containers

frontend/src/Editor/Container.jsx

@@ -47,6 +47,10 @@ export const Container = ({
   sideBarDebugger,
   currentPageId,
 }) => {
+  // Dont update first time to skip
+  // redundant save on app definition load
+  const firstUpdate = useRef(true);
+
   const gridWidth = canvasWidth / NO_OF_GRIDS;
   const styles = {
     width: currentLayout === 'mobile' ? deviceWindowWidth : '100%',
@@ -138,11 +142,6 @@ export const Container = ({
     return () => document.removeEventListener('click', handleClick);
   }, [isContainerFocused, canvasRef]);
 
-  useEffect(() => {
-    setBoxes(components);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [JSON.stringify(components)]);
-
   //listening to no of component change to handle addition/deletion of widgets
   const noOfBoxs = Object.values(boxes || []).length;
   useEffect(() => {
@@ -163,9 +162,6 @@ export const Container = ({
     [boxes]
   );
 
-  // Dont update first time to skip
-  // redundant save on app definition load
-  const firstUpdate = useRef(true);
   useEffect(() => {
     if (firstUpdate.current) {
       firstUpdate.current = false;
@@ -570,7 +566,8 @@ export const Container = ({
         const canShowInCurrentLayout =
           box.component.definition.others[currentLayout === 'mobile' ? 'showOnMobile' : 'showOnDesktop'].value;
         const addDefaultChildren = box.withDefaultChildren;
-        if (!box.parent && resolveReferences(canShowInCurrentLayout, currentState)) {
+
+        if (!box.component.parent && resolveReferences(canShowInCurrentLayout, currentState)) {
           return (
             <DraggableBox
               className={showComments && 'pointer-events-none'}

frontend/src/Editor/SubContainer.jsx

@@ -92,17 +92,19 @@ export const SubContainer = ({
     false;
 
   const getChildWidgets = (components) => {
-    let childWidgets = [];
+    let childWidgets = {};
     Object.keys(components).forEach((key) => {
-      if (components[key].parent === parent) {
+      const componentParent = components[key].component.parent;
+      if (componentParent === parent) {
         childWidgets[key] = { ...components[key], component: { ...components[key]['component'], parent } };
       }
     });
+
     return childWidgets;
   };
 
   const [boxes, setBoxes] = useState(allComponents);
-  const [childWidgets, setChildWidgets] = useState(() => getChildWidgets(allComponents));
+  const [childWidgets, setChildWidgets] = useState([]);
   const [isDragging, setIsDragging] = useState(false);
   const [isResizing, setIsResizing] = useState(false);
   // const [subContainerHeight, setSubContainerHeight] = useState('100%'); //used to determine the height of the sub container for modal
@@ -111,6 +113,7 @@ export const SubContainer = ({
   useEffect(() => {
     setBoxes(allComponents);
     setChildWidgets(() => getChildWidgets(allComponents));
+
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [allComponents, parent]);
 
@@ -233,7 +236,19 @@ export const SubContainer = ({
           },
         },
       };
-      appDefinitionChanged(newDefinition);
+
+      const oldComponents = appDefinition.pages[currentPageId]?.components ?? {};
+      const newComponents = boxes;
+
+      const componendAdded = Object.keys(newComponents).length > Object.keys(oldComponents).length;
+
+      const opts = { containerChanges: true };
+
+      if (componendAdded) {
+        opts.componentAdded = true;
+      }
+
+      appDefinitionChanged(newDefinition, opts);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [boxes]);
@@ -306,8 +321,10 @@ export const SubContainer = ({
           setBoxes({
             ...boxes,
             [newComponent.id]: {
-              component: newComponent.component,
-              parent: parentRef.current.id,
+              component: {
+                ...newComponent.component,
+                parent: parentRef.current.id,
+              },
               layouts: {
                 ...newComponent.layout,
               },
@@ -518,11 +535,12 @@ export const SubContainer = ({
       {checkParentVisibility() &&
         Object.keys(childWidgets).map((key) => {
           const addDefaultChildren = childWidgets[key]['withDefaultChildren'] || false;
-
           const box = childWidgets[key];
+
           const canShowInCurrentLayout =
             box.component.definition.others[currentLayout === 'mobile' ? 'showOnMobile' : 'showOnDesktop'].value;
-          if (box.parent && resolveReferences(canShowInCurrentLayout, currentState)) {
+
+          if (box.component.parent && resolveReferences(canShowInCurrentLayout, currentState)) {
             return (
               <DraggableBox
                 onComponentClick={onComponentClick}

frontend/src/Editor/Viewer.jsx

@@ -80,7 +80,6 @@ class ViewerComponent extends React.Component {
   setStateForApp = (data) => {
     const appDefData = buildAppDefinition(data);
 
-    // console.log('-----mohaan appDefData', { appDefData });
     this.setState({
       app: data,
       isLoading: false,
@@ -90,7 +89,6 @@ class ViewerComponent extends React.Component {
   };
 
   setStateForContainer = async (data, appVersionId) => {
-    console.log('-----mohaan viewer2.0', { data });
     const appDefData = buildAppDefinition(data);
     const currentUser = this.state.currentUser;
     let userVars = {};

frontend/src/_stores/utils.js

@@ -142,8 +142,6 @@ const updateFor = (appDiff, currentPageId, opts) => {
     }
   }
 
-  // Handle case when no matching update type is found
-
   return null;
 };
 
@@ -214,6 +212,7 @@ const computeComponentDiff = (appDiff, currentPageId, opts) => {
       result[id] = _.defaultsDeep(metaDiff, defaultComponent);
 
       result[id].type = componentMeta.component;
+      result[id].parent = component.component.parent ?? null;
       result[id].layouts = appDiff.pages[currentPageId].components[id].layouts;
       operation = 'create';
 

server/migrations/1691006952074-CreateComponentTable.ts

@@ -27,6 +27,11 @@ export class CreateComponentTable1691006952074 implements MigrationInterface {
             type: 'uuid',
             isNullable: false,
           },
+          {
+            name: 'parent',
+            type: 'uuid',
+            isNullable: true,
+          },
           {
             name: 'properties',
             type: 'json',

server/src/entities/component.entity.ts

@@ -17,6 +17,9 @@ export class Component {
   @Column({ name: 'page_id' })
   pageId: string;
 
+  @Column({ name: 'parent', nullable: true })
+  parent: string;
+
   @Column('simple-json')
   properties: any;
 

server/src/services/components.service.ts

@@ -191,6 +191,7 @@ export class ComponentsService {
       transformedComponent.id = componentId;
       transformedComponent.name = componentData.name;
       transformedComponent.type = componentData.type;
+      transformedComponent.parent = componentData.parent || null;
       transformedComponent.properties = componentData.properties || {};
       transformedComponent.styles = componentData.styles || {};
       transformedComponent.validations = componentData.validation || {};
@@ -202,7 +203,7 @@ export class ComponentsService {
   }
 
   createComponentWithLayout(componentData, layoutData) {
-    const { id, name, properties, styles, validations } = componentData;
+    const { id, name, properties, styles, validations, parent } = componentData;
     const { type, top, left, width, height } = layoutData;
 
     const componentWithLayout = {
@@ -215,6 +216,7 @@ export class ComponentsService {
             styles,
             validations,
           },
+          parent,
         },
         layouts: {
           [type]: {