From 21f3f09dcd089a993a4b0d5aa7d73df11e72e312 Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Thu, 23 Feb 2023 16:02:15 +0100
Subject: [PATCH] feat(frontend): Properly delete tab content (#1227)

---
 .../settingsPanel/ArrayStaticInputEditor.svelte     |  5 +++++
 .../apps/editor/settingsPanel/ComponentPanel.svelte | 13 ++++++++++++-
 .../inputEditor/StaticInputEditor.svelte            |  2 +-
 3 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/ArrayStaticInputEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/ArrayStaticInputEditor.svelte
index de2af2d141..83841b6403 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/ArrayStaticInputEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/ArrayStaticInputEditor.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { Button } from '$lib/components/common'
 	import { faPlus, faTrashAlt } from '@fortawesome/free-solid-svg-icons'
+	import { createEventDispatcher } from 'svelte'
 	import type { StaticAppInput } from '../../inputType'
 	import { staticValues } from '../componentsPanel/componentStaticValues'
 	import SubTypeEditor from './SubTypeEditor.svelte'
@@ -8,6 +9,7 @@
 	type ArrayComponentInput = Extract<StaticAppInput, { fieldType: 'array' }>
 
 	export let componentInput: ArrayComponentInput
+	const dispatch = createEventDispatcher()
 
 	function addElementByType() {
 		if (componentInput.subFieldType && componentInput.value) {
@@ -36,6 +38,9 @@
 	function deleteElementByType(index: number) {
 		if (componentInput.value) {
 			componentInput.value.splice(index, 1)
+
+			dispatch('deleteArrayItem', { index })
+
 			componentInput = componentInput
 		}
 	}
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
index 3729cbbb84..b793fded2f 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
@@ -107,7 +107,18 @@
 
 				<div class="flex flex-col w-full gap-2 my-2">
 					{#if component.componentInput.type === 'static'}
-						<StaticInputEditor bind:componentInput={component.componentInput} />
+						<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)
+									}
+								}
+							}}
+						/>
 					{: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} />
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/StaticInputEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/StaticInputEditor.svelte
index 9ee9129132..321ef0c28d 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/StaticInputEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/StaticInputEditor.svelte
@@ -59,7 +59,7 @@
 			</div>
 		{/if}
 	{:else if componentInput.fieldType === 'array'}
-		<ArrayStaticInputEditor bind:componentInput />
+		<ArrayStaticInputEditor bind:componentInput on:deleteArrayItem />
 	{:else}
 		<input type="text" placeholder="Static value" bind:value={componentInput.value} />
 	{/if}