fixes: toggling, resizing, dropping widgets in both display preferences (#7760)

frontend/src/Editor/Container.jsx

@@ -51,6 +51,15 @@ export const Container = ({
   // redundant save on app definition load
   const firstUpdate = useRef(true);
 
+  const { showComments, currentLayout, selectedComponents } = useEditorStore(
+    (state) => ({
+      showComments: state?.showComments,
+      currentLayout: state?.currentLayout,
+      selectedComponents: state?.selectedComponents,
+    }),
+    shallow
+  );
+
   const gridWidth = canvasWidth / NO_OF_GRIDS;
   const styles = {
     width: currentLayout === 'mobile' ? deviceWindowWidth : '100%',
@@ -73,14 +82,6 @@ export const Container = ({
     }),
     shallow
   );
-  const { showComments, currentLayout, selectedComponents } = useEditorStore(
-    (state) => ({
-      showComments: state?.showComments,
-      currentLayout: state?.currentLayout,
-      selectedComponents: state?.selectedComponents,
-    }),
-    shallow
-  );
 
   const [boxes, setBoxes] = useState([]);
   const [isDragging, setIsDragging] = useState(false);

frontend/src/Editor/EditorFunc.jsx

@@ -247,6 +247,14 @@ const EditorComponent = (props) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editorMarginLeft]);
 
+  useEffect(() => {
+    if (mounted) {
+      useCurrentStateStore.getState().actions.setCurrentState({
+        layout: currentLayout,
+      });
+    }
+  }, [currentLayout, mounted]);
+
   const handleMessage = (event) => {
     const { data } = event;
 

frontend/src/Editor/LeftSidebar/SidebarInspector.jsx

@@ -62,6 +62,7 @@ export const LeftSidebarInspector = ({
     delete jsontreeData.server;
     delete jsontreeData.actions;
     delete jsontreeData.succededQuery;
+    delete jsontreeData.layout;
 
     //*Sorted components and queries alphabetically
     const sortedComponents = Object.keys(jsontreeData['components'])

frontend/src/_helpers/appUtils.js

@@ -341,8 +341,6 @@ export function onQueryConfirmOrCancel(_ref, queryConfirmationData, isConfirm =
     (query) => query.queryId !== queryConfirmationData.queryId
   );
 
-  // console.log('---arpit:: dq', { filtertedQueryConfirmation });
-
   _ref.updateQueryConfirmationList(filtertedQueryConfirmation, 'check');
   isConfirm && runQuery(_ref, queryConfirmationData.queryId, queryConfirmationData.queryName, true, mode);
 }
@@ -1595,6 +1593,7 @@ export const addNewWidgetToTheEditor = (
 
   const widgetsWithDefaultComponents = ['Listview', 'Tabs', 'Form', 'Kanban'];
 
+  const nonActiveLayout = currentLayout === 'desktop' ? 'mobile' : 'desktop';
   const newComponent = {
     id: uuidv4(),
     component: componentData,
@@ -1605,6 +1604,12 @@ export const addNewWidgetToTheEditor = (
         width: defaultWidth,
         height: defaultHeight,
       },
+      [nonActiveLayout]: {
+        top: top,
+        left: left,
+        width: defaultWidth,
+        height: defaultHeight,
+      },
     },
 
     withDefaultChildren: widgetsWithDefaultComponents.includes(componentData.component),

frontend/src/_stores/currentStateStore.js

@@ -51,6 +51,7 @@ export const useCurrentState = () =>
       page: state.page,
       succededQuery: state.succededQuery,
       constants: state.constants,
+      layout: state.layout,
     };
   }, shallow);
 

server/src/services/components.service.ts

@@ -174,7 +174,7 @@ export class ComponentsService {
           return components.reduce((acc, component) => {
             const componentId = component.id;
             const componentData = component;
-            const componentLayout = component.layouts[0];
+            const componentLayout = component.layouts;
 
             const transformedData = this.createComponentWithLayout(componentData, componentLayout);
 
@@ -208,10 +208,23 @@ export class ComponentsService {
     return transformedComponents;
   }
 
-  createComponentWithLayout(componentData: Component, layoutData) {
+  createComponentWithLayout(componentData: Component, layoutData = []) {
     const { id, name, properties, styles, generalStyles, validations, parent, displayPreferences, general } =
       componentData;
-    const { type, top, left, width, height } = layoutData;
+
+    const layouts = {};
+
+    layoutData.forEach((layout) => {
+      const { type, top, left, width, height } = layout;
+
+      layouts[type] = {
+        top,
+        left,
+        width,
+        height,
+      };
+    });
+
     const componentWithLayout = {
       [id]: {
         component: {
@@ -228,12 +241,7 @@ export class ComponentsService {
           parent,
         },
         layouts: {
-          [type]: {
-            top,
-            left,
-            width,
-            height,
-          },
+          ...layouts,
         },
       },
     };