fix(frontend): Fix deeply nested move (#1245)

* fix(frontend): Fix deeply nested move

* fix(frontend): update comment

frontend/src/lib/components/apps/editor/appUtils.ts

@@ -93,8 +93,11 @@ export function insertNewGridItem(
 		subGrid.push(createNewGridItem(subGrid, id, data))
 		app.subgrids[key] = subGrid
 	}
-	for (let i = 0; i < (data.numberOfSubgrids ?? 0); i++) {
-		app.subgrids[`${id}-${i}`] = []
+	// We only want to set subgrids when we are not moving
+	if (!keepId) {
+		for (let i = 0; i < (data.numberOfSubgrids ?? 0); i++) {
+			app.subgrids[`${id}-${i}`] = []
+		}
 	}
 
 	return id
@@ -126,10 +129,11 @@ export function getAllSubgridsAndComponentIds(
 export function deleteGridItem(
 	app: App,
 	component: AppComponent,
-	parent: string | undefined
+	parent: string | undefined,
+	shouldKeepSubGrid: boolean
 ): string[] {
 	let [subgrids, components] = getAllSubgridsAndComponentIds(app, component)
-	if (app.subgrids) {
+	if (app.subgrids && !shouldKeepSubGrid) {
 		subgrids.forEach((id) => {
 			delete app.subgrids![id]
 		})

frontend/src/lib/components/apps/editor/settingsPanel/MoveToOtherGrid.svelte

@@ -15,6 +15,7 @@
 
 	export let component: AppComponent | undefined
 	export let parent: string | undefined
+
 	let selectedOption: string
 
 	const { app } = getContext<AppEditorContext>('AppEditorContext')
@@ -31,9 +32,12 @@
 		}
 
 		const data: AppComponent = JSON.parse(JSON.stringify(node.data))
+		const shouldKeepSubGrid = data.numberOfSubgrids ? data.numberOfSubgrids >= 1 : false
+
 		$dirtyStore = true
 
-		deleteGridItem($app, data, parent)
+		deleteGridItem($app, data, parent, shouldKeepSubGrid)
+
 		return data
 	}
 
@@ -42,15 +46,13 @@
 		targetId: string,
 		targetSubGridIndex: number
 	) {
-		insertNewGridItem(
-			$app,
-			data,
-			{
-				parentComponentId: targetId,
-				subGridIndex: targetSubGridIndex
-			},
-			true
-		)
+		const focusedGrid = {
+			parentComponentId: targetId,
+			subGridIndex: targetSubGridIndex
+		}
+
+		insertNewGridItem($app, data, focusedGrid, true)
+
 		$app.grid = [...$app.grid]
 	}