From f04d088a90fcd736c83b36bf0ed3c4a238af4a33 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Fri, 24 Feb 2023 13:11:06 +0100
Subject: [PATCH] fix subgrids final2

---
 .../apps/components/layout/AppTabs.svelte       |  1 +
 .../apps/editor/SettingsPanelRec.svelte         |  4 ++--
 .../components/apps/editor/TablePanel.svelte    |  1 +
 .../editor/settingsPanel/ComponentPanel.svelte  | 17 +++--------------
 4 files changed, 7 insertions(+), 16 deletions(-)

diff --git a/frontend/src/lib/components/apps/components/layout/AppTabs.svelte b/frontend/src/lib/components/apps/components/layout/AppTabs.svelte
index c2a1a12bf4..8700c4bfad 100644
--- a/frontend/src/lib/components/apps/components/layout/AppTabs.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppTabs.svelte
@@ -46,6 +46,7 @@
 	}
 
 	$: $selectedComponent === id && selectedIndex >= 0 && onFocus()
+	$: console.log(subGrids)
 </script>
 
 <InputValue {id} input={configuration.tabs} bind:value={tabs} />
diff --git a/frontend/src/lib/components/apps/editor/SettingsPanelRec.svelte b/frontend/src/lib/components/apps/editor/SettingsPanelRec.svelte
index 6e3587847d..fae08bb136 100644
--- a/frontend/src/lib/components/apps/editor/SettingsPanelRec.svelte
+++ b/frontend/src/lib/components/apps/editor/SettingsPanelRec.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createEventDispatcher, getContext } from 'svelte'
+	import { getContext } from 'svelte'
 	import type { AppEditorContext, GridItem } from '../types'
 
 	import ComponentPanel from './settingsPanel/ComponentPanel.svelte'
@@ -13,7 +13,7 @@
 {#if gridItems}
 	{#each gridItems as gridItem (gridItem.data.id)}
 		{#if gridItem.data.id === $selectedComponent}
-			<ComponentPanel bind:gridItems bind:component={gridItem.data} />
+			<ComponentPanel {gridItems} bind:component={gridItem.data} />
 		{:else if gridItem.data.type === 'tablecomponent'}
 			<TablePanel bind:component={gridItem.data} />
 		{:else if gridItem.data.subGrids}
diff --git a/frontend/src/lib/components/apps/editor/TablePanel.svelte b/frontend/src/lib/components/apps/editor/TablePanel.svelte
index 7663f55fc3..b5a12bb72f 100644
--- a/frontend/src/lib/components/apps/editor/TablePanel.svelte
+++ b/frontend/src/lib/components/apps/editor/TablePanel.svelte
@@ -11,6 +11,7 @@
 {#each component.actionButtons as actionButton (actionButton.id)}
 	{#if actionButton.id === $selectedComponent}
 		<ComponentPanel
+			gridItems={undefined}
 			rowColumns
 			bind:component={actionButton}
 			onDelete={() => {
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
index 5ecae773e3..3d0341d052 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
@@ -32,7 +32,7 @@
 
 	export let component: AppComponent | undefined
 	export let rowColumns = false
-	export let gridItems: GridItem[] | undefined = undefined
+	export let gridItems: GridItem[] | undefined
 	export let onDelete: (() => void) | undefined = undefined
 
 	const { app, staticOutputs, runnableComponents, selectedComponent, worldStore, focusedGrid } =
@@ -65,10 +65,10 @@
 
 	function removeGridElement() {
 		$selectedComponent = undefined
+		$focusedGrid = undefined
 		if (component) {
 			deleteComponent(gridItems, component, $app, $staticOutputs, $runnableComponents)
 		}
-		gridItems = gridItems
 		$staticOutputs = $staticOutputs
 		$runnableComponents = $runnableComponents
 
@@ -111,18 +111,7 @@
 
 				<div class="flex flex-col w-full gap-2 my-2">
 					{#if component.componentInput.type === 'static'}
-						<StaticInputEditor
-							bind:componentInput={component.componentInput}
-							on:deleteArrayItem={(e) => {
-								if (component?.type === 'tabscomponent') {
-									const deletedIndex = e.detail.index
-
-									if (component.subGrids) {
-										component.subGrids.splice(deletedIndex, 1)
-									}
-								}
-							}}
-						/>
+						<StaticInputEditor bind:componentInput={component.componentInput} />
 					{:else if component.componentInput.type === 'template' && component.componentInput !== undefined}
 						<div class="py-1 min-h-[28px]  rounded border border-1 border-gray-500">
 							<TemplateEditor fontSize={12} bind:code={component.componentInput.eval} {extraLib} />