From d95ca968faa7ea22cda099ec57f1127ef64f3faf Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Mon, 22 Jan 2024 22:26:03 +0100
Subject: [PATCH] remove extra id on components position

---
 .../apps/editor/RecomputeAllComponents.svelte |  5 +-
 .../lib/components/apps/editor/appUtils.ts    |  1 -
 .../components/apps/svelte-grid/Grid.svelte   |  9 +--
 .../components/apps/svelte-grid/utils/item.ts | 70 ++++++++++---------
 .../components/details/createAppFromScript.ts | 36 ++++------
 5 files changed, 52 insertions(+), 69 deletions(-)

diff --git a/frontend/src/lib/components/apps/editor/RecomputeAllComponents.svelte b/frontend/src/lib/components/apps/editor/RecomputeAllComponents.svelte
index 3b26396542..1b2124afe9 100644
--- a/frontend/src/lib/components/apps/editor/RecomputeAllComponents.svelte
+++ b/frontend/src/lib/components/apps/editor/RecomputeAllComponents.svelte
@@ -110,9 +110,8 @@
 
 <!-- {$initialized.initializedComponents?.join(', ')}
 {allItems($app.grid, $app.subgrids).length + $app.hiddenInlineScripts.length} -->
-<!-- {allItems($app.grid, $app.subgrids).length + $app.hiddenInlineScripts.length}
-{$initialized.initializedComponents}
-{allItems($app.grid, $app.subgrids)
+<!-- {$initialized.initializedComponents} -->
+<!-- {allItems($app.grid, $app.subgrids)
 	.map((x) => x.id)
 	.filter((x) => !$initialized.initializedComponents?.includes(x))
 	.sort()
diff --git a/frontend/src/lib/components/apps/editor/appUtils.ts b/frontend/src/lib/components/apps/editor/appUtils.ts
index a6b97aa6b8..7c3708e867 100644
--- a/frontend/src/lib/components/apps/editor/appUtils.ts
+++ b/frontend/src/lib/components/apps/editor/appUtils.ts
@@ -376,7 +376,6 @@ export function insertNewGridItem(
 
 	const newItem = createNewGridItem(grid, id, data, columns)
 	grid.push(newItem)
-
 	return id
 }
 
diff --git a/frontend/src/lib/components/apps/svelte-grid/Grid.svelte b/frontend/src/lib/components/apps/svelte-grid/Grid.svelte
index eae6c8430d..a74b6f9ad1 100644
--- a/frontend/src/lib/components/apps/svelte-grid/Grid.svelte
+++ b/frontend/src/lib/components/apps/svelte-grid/Grid.svelte
@@ -116,12 +116,7 @@
 					}
 				}
 
-				sortedItems = moveItem(
-					activeItem,
-					sortedItems,
-					getComputedCols,
-					getItemById(id, sortedItems)
-				)
+				sortedItems = moveItem(activeItem, sortedItems, getComputedCols)
 			}
 		}
 
@@ -198,7 +193,7 @@
 				nativeContainer={container}
 			>
 				{#if item[getComputedCols]}
-					<slot dataItem={item} item={item[getComputedCols]} />
+					<slot dataItem={item} />
 				{/if}
 			</MoveResize>
 		{/if}
diff --git a/frontend/src/lib/components/apps/svelte-grid/utils/item.ts b/frontend/src/lib/components/apps/svelte-grid/utils/item.ts
index 0571aa7454..9e303a75c9 100644
--- a/frontend/src/lib/components/apps/svelte-grid/utils/item.ts
+++ b/frontend/src/lib/components/apps/svelte-grid/utils/item.ts
@@ -65,7 +65,7 @@ export function findFreeSpaceForItem<T>(matrix: FilledItem<T>[][], item: ItemLay
 }
 
 const getItem = (item, col) => {
-	return { ...item[col], id: item.id }
+	return { ...item[col] }
 }
 
 const updateItem = (elements, active, position, col) => {
@@ -77,49 +77,51 @@ const updateItem = (elements, active, position, col) => {
 	})
 }
 
-export function moveItemsAroundItem(active, items, cols, original) {
-	// Get current item from the breakpoint
-	const activeItem = getItem(active, cols)
-	const ids = items.map((value) => value.id).filter((value) => value !== activeItem.id)
+// export function moveItemsAroundItem(active, items, cols, original) {
+// 	// Get current item from the breakpoint
+// 	const activeItem = getItem(active, cols)
+// 	const ids = items.map((value) => value.id).filter((value) => value !== activeItem.id)
 
-	const els = items.filter((value) => value.id !== activeItem.id)
+// 	const els = items.filter((value) => value.id !== activeItem.id)
+// 	console.log(1, cols)
+// 	// Update items
+// 	let newItems = updateItem(items, active, activeItem, cols)
 
-	// Update items
-	let newItems = updateItem(items, active, activeItem, cols)
+// 	let matrix = makeMatrixFromItemsIgnore(newItems, ids, getRowsCount(newItems, cols), cols)
+// 	let tempItems = newItems
 
-	let matrix = makeMatrixFromItemsIgnore(newItems, ids, getRowsCount(newItems, cols), cols)
-	let tempItems = newItems
+// 	// Exclude resolved elements ids in array
+// 	let exclude: string[] = []
 
-	// Exclude resolved elements ids in array
-	let exclude: string[] = []
+// 	els.forEach((item) => {
+// 		// Find position for element
+// 		let position = findFreeSpaceForItem(matrix, item[cols])
+// 		// Exclude item
+// 		exclude.push(item.id)
+// 		console.log(2, cols)
 
-	els.forEach((item) => {
-		// Find position for element
-		let position = findFreeSpaceForItem(matrix, item[cols])
-		// Exclude item
-		exclude.push(item.id)
+// 		tempItems = updateItem(tempItems, item, position, cols)
 
-		tempItems = updateItem(tempItems, item, position, cols)
+// 		// Recreate ids of elements
+// 		let getIgnoreItems = ids.filter((value) => exclude.indexOf(value) === -1)
 
-		// Recreate ids of elements
-		let getIgnoreItems = ids.filter((value) => exclude.indexOf(value) === -1)
+// 		// Update matrix for next iteration
+// 		matrix = makeMatrixFromItemsIgnore(
+// 			tempItems,
+// 			getIgnoreItems,
+// 			getRowsCount(tempItems, cols),
+// 			cols
+// 		)
+// 	})
 
-		// Update matrix for next iteration
-		matrix = makeMatrixFromItemsIgnore(
-			tempItems,
-			getIgnoreItems,
-			getRowsCount(tempItems, cols),
-			cols
-		)
-	})
+// 	// Return result
+// 	return tempItems
+// }
 
-	// Return result
-	return tempItems
-}
-
-export function moveItem(active, items, cols, original) {
+export function moveItem(active, items, cols) {
 	// Get current item from the breakpoint
 	const item = getItem(active, cols)
+	// console.log(JSON.stringify(item), JSON.stringify(active), JSON.stringify(cols), 3, cols)
 
 	// Create matrix from the items expect the active
 	let matrix = makeMatrixFromItemsIgnore(items, [item.id], getRowsCount(items, cols), cols)
@@ -179,7 +181,7 @@ export function normalize(items, col) {
 	result.forEach((value) => {
 		const getItem = value[col]
 		if (!getItem.static) {
-			result = moveItem(getItem, result, col, { ...getItem })
+			result = moveItem(getItem, result, col)
 		}
 	})
 
diff --git a/frontend/src/lib/components/details/createAppFromScript.ts b/frontend/src/lib/components/details/createAppFromScript.ts
index 369ab8b16d..2c5b52889f 100644
--- a/frontend/src/lib/components/details/createAppFromScript.ts
+++ b/frontend/src/lib/components/details/createAppFromScript.ts
@@ -14,8 +14,7 @@ export function createAppFromScript(path: string, schema: Record<string, any> |
 					x: 0,
 					y: 0,
 					w: 12,
-					h: 21,
-					id: 'a'
+					h: 21
 				},
 				data: {
 					type: 'verticalsplitpanescomponent',
@@ -48,8 +47,7 @@ export function createAppFromScript(path: string, schema: Record<string, any> |
 						x: 0,
 						y: 0,
 						w: 12,
-						h: 19,
-						id: 'c'
+						h: 19
 					},
 					data: {
 						type: 'schemaformcomponent',
@@ -86,8 +84,7 @@ export function createAppFromScript(path: string, schema: Record<string, any> |
 						x: 0,
 						y: 19,
 						w: 12,
-						h: 1,
-						id: 'd'
+						h: 1
 					},
 					data: {
 						type: 'buttoncomponent',
@@ -272,8 +269,7 @@ export function createAppFromScript(path: string, schema: Record<string, any> |
 						x: 0,
 						y: 0,
 						w: 12,
-						h: 20,
-						id: 'b'
+						h: 20
 					},
 					data: {
 						type: 'tabscomponent',
@@ -317,8 +313,7 @@ export function createAppFromScript(path: string, schema: Record<string, any> |
 						x: 0,
 						y: 0,
 						w: 12,
-						h: 18,
-						id: 'e'
+						h: 18
 					},
 					data: {
 						type: 'displaycomponent',
@@ -351,8 +346,7 @@ export function createAppFromScript(path: string, schema: Record<string, any> |
 						x: 0,
 						y: 0,
 						w: 12,
-						h: 18,
-						id: 'f'
+						h: 18
 					},
 					data: {
 						type: 'jobidlogcomponent',
@@ -423,8 +417,7 @@ export function createAppFromFlow(path: string, schema: Record<string, any> | un
 					x: 0,
 					y: 0,
 					w: 12,
-					h: 21,
-					id: 'a'
+					h: 21
 				},
 				data: {
 					type: 'verticalsplitpanescomponent',
@@ -457,8 +450,7 @@ export function createAppFromFlow(path: string, schema: Record<string, any> | un
 						x: 0,
 						y: 0,
 						w: 12,
-						h: 19,
-						id: 'c'
+						h: 19
 					},
 					data: {
 						type: 'schemaformcomponent',
@@ -495,8 +487,7 @@ export function createAppFromFlow(path: string, schema: Record<string, any> | un
 						x: 0,
 						y: 19,
 						w: 12,
-						h: 1,
-						id: 'd'
+						h: 1
 					},
 					data: {
 						type: 'buttoncomponent',
@@ -681,8 +672,7 @@ export function createAppFromFlow(path: string, schema: Record<string, any> | un
 						x: 0,
 						y: 0,
 						w: 12,
-						h: 20,
-						id: 'b'
+						h: 20
 					},
 					data: {
 						type: 'tabscomponent',
@@ -726,8 +716,7 @@ export function createAppFromFlow(path: string, schema: Record<string, any> | un
 						x: 0,
 						y: 0,
 						w: 12,
-						h: 18,
-						id: 'e'
+						h: 18
 					},
 					data: {
 						type: 'jobidflowstatuscomponent',
@@ -761,8 +750,7 @@ export function createAppFromFlow(path: string, schema: Record<string, any> | un
 						x: 0,
 						y: 0,
 						w: 12,
-						h: 18,
-						id: 'f'
+						h: 18
 					},
 					data: {
 						type: 'jobidlogcomponent',