From 701121a62bba9ef23ce02193946aa6aa3c2ba0b8 Mon Sep 17 00:00:00 2001 From: arpitnath Date: Wed, 13 Sep 2023 18:25:30 +0530 Subject: [PATCH] handle adding widgets to sub containers --- frontend/src/Editor/Container.jsx | 15 ++++---- frontend/src/Editor/SubContainer.jsx | 34 ++++++++++++++----- frontend/src/Editor/Viewer.jsx | 2 -- frontend/src/_stores/utils.js | 3 +- .../1691006952074-CreateComponentTable.ts | 5 +++ server/src/entities/component.entity.ts | 3 ++ server/src/services/components.service.ts | 4 ++- 7 files changed, 44 insertions(+), 22 deletions(-) diff --git a/frontend/src/Editor/Container.jsx b/frontend/src/Editor/Container.jsx index 6731c4611a..6dd8846dab 100644 --- a/frontend/src/Editor/Container.jsx +++ b/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 ( { - 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 ( { 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 = {}; diff --git a/frontend/src/_stores/utils.js b/frontend/src/_stores/utils.js index d155269795..ea2932a5a0 100644 --- a/frontend/src/_stores/utils.js +++ b/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'; diff --git a/server/migrations/1691006952074-CreateComponentTable.ts b/server/migrations/1691006952074-CreateComponentTable.ts index 2e23406680..f0cba1e7a9 100644 --- a/server/migrations/1691006952074-CreateComponentTable.ts +++ b/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', diff --git a/server/src/entities/component.entity.ts b/server/src/entities/component.entity.ts index 2c5127cd72..6c69f5f12b 100644 --- a/server/src/entities/component.entity.ts +++ b/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; diff --git a/server/src/services/components.service.ts b/server/src/services/components.service.ts index 377a3ba342..035bade102 100644 --- a/server/src/services/components.service.ts +++ b/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]: {