From bc3fd01237f888139ecf1835cb711b1f272064a4 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Fri, 24 Feb 2023 14:48:28 +0100
Subject: [PATCH] subgrids editor panel iter 1

---
 .../apps/editor/SettingsPanelList.svelte      | 16 ++++++++
 .../apps/editor/SettingsPanelRec.svelte       |  5 +--
 .../InlineScriptEditorList.svelte             | 16 ++++++++
 .../InlineScriptEditorRec.svelte              | 40 +++++++++++++++++++
 .../InlineScriptsPanel.svelte                 | 23 ++---------
 frontend/src/lib/components/apps/utils.ts     |  3 +-
 6 files changed, 79 insertions(+), 24 deletions(-)
 create mode 100644 frontend/src/lib/components/apps/editor/SettingsPanelList.svelte
 create mode 100644 frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorList.svelte
 create mode 100644 frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorRec.svelte

diff --git a/frontend/src/lib/components/apps/editor/SettingsPanelList.svelte b/frontend/src/lib/components/apps/editor/SettingsPanelList.svelte
new file mode 100644
index 0000000000..1c008db020
--- /dev/null
+++ b/frontend/src/lib/components/apps/editor/SettingsPanelList.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { GridItem } from '../types'
+
+	import SettingsPanelRec from './SettingsPanelRec.svelte'
+
+	export let subgrids: GridItem[][]
+
+	let elems = subgrids
+	$: subgrids = elems
+</script>
+
+{#if subgrids}
+	{#each elems as subGrid, i (i)}
+		<SettingsPanelRec bind:gridItems={subGrid} />
+	{/each}
+{/if}
diff --git a/frontend/src/lib/components/apps/editor/SettingsPanelRec.svelte b/frontend/src/lib/components/apps/editor/SettingsPanelRec.svelte
index fae08bb136..29dcff7b06 100644
--- a/frontend/src/lib/components/apps/editor/SettingsPanelRec.svelte
+++ b/frontend/src/lib/components/apps/editor/SettingsPanelRec.svelte
@@ -3,6 +3,7 @@
 	import type { AppEditorContext, GridItem } from '../types'
 
 	import ComponentPanel from './settingsPanel/ComponentPanel.svelte'
+	import SettingsPanelList from './SettingsPanelList.svelte'
 	import TablePanel from './TablePanel.svelte'
 
 	const { selectedComponent } = getContext<AppEditorContext>('AppEditorContext')
@@ -17,9 +18,7 @@
 		{:else if gridItem.data.type === 'tablecomponent'}
 			<TablePanel bind:component={gridItem.data} />
 		{:else if gridItem.data.subGrids}
-			{#each gridItem.data.subGrids as subGrid}
-				<svelte:self bind:gridItems={subGrid} />
-			{/each}
+			<SettingsPanelList bind:subgrids={gridItem.data.subGrids} />
 		{/if}
 	{/each}
 {/if}
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorList.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorList.svelte
new file mode 100644
index 0000000000..612e3af4ce
--- /dev/null
+++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorList.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { GridItem } from '../../types'
+	import InlineScriptEditorRec from './InlineScriptEditorRec.svelte'
+
+	export let subgrids: GridItem[][]
+	export let selectedScriptComponentId: string | undefined = undefined
+
+	let elems = subgrids
+	$: subgrids = elems
+</script>
+
+{#if subgrids}
+	{#each elems as subGrid, i (i)}
+		<InlineScriptEditorRec {selectedScriptComponentId} bind:gridItems={subGrid} />
+	{/each}
+{/if}
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorRec.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorRec.svelte
new file mode 100644
index 0000000000..e51316d901
--- /dev/null
+++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorRec.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+	import type { GridItem } from '../../types'
+	import InlineScriptEditorList from './InlineScriptEditorList.svelte'
+
+	import InlineScriptEditorPanel from './InlineScriptEditorPanel.svelte'
+
+	export let gridItems: GridItem[]
+
+	export let selectedScriptComponentId: string | undefined = undefined
+</script>
+
+{gridItems}
+{#if gridItems}
+	{#each gridItems as gridComponent, index (index)}
+		{#if gridComponent.data}
+			{#if gridComponent.data.id === selectedScriptComponentId}
+				<InlineScriptEditorPanel
+					id={gridComponent.data.id}
+					bind:componentInput={gridComponent.data.componentInput}
+				/>
+			{:else if gridComponent.data.subGrids}
+				<!-- <InlineScriptEditorList
+					{selectedScriptComponentId}
+					bind:subgrids={gridComponent.data.subGrids}
+				/> -->
+			{/if}
+
+			{#if gridComponent.data.type === 'tablecomponent'}
+				{#each gridComponent.data.actionButtons as actionButton, index (index)}
+					{#if actionButton.id === selectedScriptComponentId}
+						<InlineScriptEditorPanel
+							id={actionButton.id}
+							bind:componentInput={actionButton.componentInput}
+						/>
+					{/if}
+				{/each}
+			{/if}
+		{/if}
+	{/each}
+{/if}
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte
index e2bfc11973..bdde083bbe 100644
--- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte
@@ -4,11 +4,11 @@
 	import SplitPanesWrapper from '$lib/components/splitPanes/SplitPanesWrapper.svelte'
 	import { Pane, Splitpanes } from 'svelte-splitpanes'
 	import InlineScriptsPanelList from './InlineScriptsPanelList.svelte'
-	import InlineScriptEditorPanel from './InlineScriptEditorPanel.svelte'
 	import InlineScriptEditor from './InlineScriptEditor.svelte'
 	import EmptyInlineScript from './EmptyInlineScript.svelte'
+	import InlineScriptEditorRec from './InlineScriptEditorRec.svelte'
 
-	const { lazyGrid, app, staticOutputs, runnableComponents } =
+	const { app, staticOutputs, runnableComponents } =
 		getContext<AppEditorContext>('AppEditorContext')
 
 	let selectedScriptComponentId: string | undefined = undefined
@@ -23,25 +23,8 @@
 			{#if !selectedScriptComponentId}
 				<span class="p-2 text-sm text-gray-600">Select a script on the left panel</span>
 			{/if}
-			{#each $lazyGrid as gridComponent, index (index)}
-				{#if gridComponent.data.id === selectedScriptComponentId}
-					<InlineScriptEditorPanel
-						id={gridComponent.data.id}
-						bind:componentInput={gridComponent.data.componentInput}
-					/>
-				{/if}
 
-				{#if gridComponent.data.type === 'tablecomponent'}
-					{#each gridComponent.data.actionButtons as actionButton, index (index)}
-						{#if actionButton.id === selectedScriptComponentId}
-							<InlineScriptEditorPanel
-								id={actionButton.id}
-								bind:componentInput={actionButton.componentInput}
-							/>
-						{/if}
-					{/each}
-				{/if}
-			{/each}
+			<InlineScriptEditorRec {selectedScriptComponentId} bind:gridItems={$app.grid} />
 			{#each $app.unusedInlineScripts as unusedInlineScript, index (index)}
 				{#if `unused-${index}` === selectedScriptComponentId}
 					<InlineScriptEditor
diff --git a/frontend/src/lib/components/apps/utils.ts b/frontend/src/lib/components/apps/utils.ts
index 129dfac196..126e592387 100644
--- a/frontend/src/lib/components/apps/utils.ts
+++ b/frontend/src/lib/components/apps/utils.ts
@@ -21,7 +21,6 @@ export function deleteComponent(parentItems: GridItem[] | undefined, component:
 		if (subgrid) {
 			subgrid.forEach((item) => {
 				if (item.data) {
-					console.log(item.data)
 					deleteComponent(undefined, item.data, app, staticOutputs, runnableComponents)
 				}
 			})
@@ -276,6 +275,8 @@ export function findParent(root: GridItem[], id: string): GridItem | undefined {
 				}
 			}
 		}
+
+
 	}
 
 	return undefined