From 1e772c04f7b35607be6a03ce91849c9ec4454f27 Mon Sep 17 00:00:00 2001 From: Arpit Date: Wed, 11 Oct 2023 13:37:00 +0530 Subject: [PATCH] fixes: toggling, resizing, dropping widgets in both display preferences (#7760) --- frontend/src/Editor/Container.jsx | 17 ++++++------ frontend/src/Editor/EditorFunc.jsx | 8 ++++++ .../Editor/LeftSidebar/SidebarInspector.jsx | 1 + frontend/src/_helpers/appUtils.js | 9 +++++-- frontend/src/_stores/currentStateStore.js | 1 + server/src/services/components.service.ts | 26 ++++++++++++------- 6 files changed, 43 insertions(+), 19 deletions(-) diff --git a/frontend/src/Editor/Container.jsx b/frontend/src/Editor/Container.jsx index 4e440bf4d0..bc8e3607d7 100644 --- a/frontend/src/Editor/Container.jsx +++ b/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); diff --git a/frontend/src/Editor/EditorFunc.jsx b/frontend/src/Editor/EditorFunc.jsx index 74b6807d77..d91c45ef25 100644 --- a/frontend/src/Editor/EditorFunc.jsx +++ b/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; diff --git a/frontend/src/Editor/LeftSidebar/SidebarInspector.jsx b/frontend/src/Editor/LeftSidebar/SidebarInspector.jsx index 3fc7c63f95..1510463c74 100644 --- a/frontend/src/Editor/LeftSidebar/SidebarInspector.jsx +++ b/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']) diff --git a/frontend/src/_helpers/appUtils.js b/frontend/src/_helpers/appUtils.js index a998307897..a0fa760004 100644 --- a/frontend/src/_helpers/appUtils.js +++ b/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), diff --git a/frontend/src/_stores/currentStateStore.js b/frontend/src/_stores/currentStateStore.js index 4a805a8467..2e6c6f3eec 100644 --- a/frontend/src/_stores/currentStateStore.js +++ b/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); diff --git a/server/src/services/components.service.ts b/server/src/services/components.service.ts index cb02761391..1fdff1c739 100644 --- a/server/src/services/components.service.ts +++ b/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, }, }, };