fix(frontend): gridtab

frontend/src/lib/components/apps/components/layout/AppTabs.svelte

@@ -46,7 +46,6 @@
 	}
 
 	$: $selectedComponent === id && selectedIndex >= 0 && onFocus()
-	$: console.log(subGrids)
 </script>
 
 <InputValue {id} input={configuration.tabs} bind:value={tabs} />

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

@@ -21,6 +21,7 @@ function findGridItemById(
 				for (let i = 0; i < numberOfSubgrids; i++) {
 					const subgrid = subgrids[`${gridItem.id}-${i}`]
 					const found = findGridItemById([subgrid], subGrids, id)
+
 					if (found) {
 						return found
 					}
@@ -37,19 +38,11 @@ export function findGridItem(app: App, id: string): GridItem | undefined {
 }
 
 export function getNextGridItemId(app: App): string {
-	const subgridsKeys = app.subgrids ? Object.keys(app.subgrids) : []
+	const all: string[] = []
 
-	const newArr = subgridsKeys.map((element) => {
-		const matches = element.match(/^([a-z]+)-\d+$/i)
-		if (matches) {
-			return matches[1]
-		}
-		return element
-	})
-
-	const uniqueArr = [...new Set(newArr)]
-	const mainGridItemsIds = app.grid.map((item) => item.id)
-	const id = getNextId([...mainGridItemsIds, ...uniqueArr])
+	const newArr = all.map((element) => element.split('-')[0])
+	const k: string[] = [...new Set(newArr)]
+	const id = getNextId(k)
 
 	return id
 }
@@ -154,7 +147,7 @@ export function deleteGridItem(app: App, id: string) {
 
 export function duplicateGridItem(
 	app: App,
-	focusedGrid: FocusedGrid,
+	focusedGrid: FocusedGrid | undefined,
 	id: string
 ): string | undefined {
 	const gridItem = findGridItem(app, id)

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

@@ -152,7 +152,7 @@ export const components: Record<AppComponent['type'], AppComponentConfig> = {
 			configuration: {},
 			customCss: {
 				header: { class: '', style: '' },
-				container: { class: '', style: '' },
+				container: { class: '', style: '' }
 			} as const,
 			card: false
 		}
@@ -175,7 +175,7 @@ export const components: Record<AppComponent['type'], AppComponentConfig> = {
 			},
 			componentInput: undefined,
 			card: false,
-			subgrids: 1
+			numberOfSubgrids: 1
 		}
 	},
 	textcomponent: {
@@ -1027,7 +1027,7 @@ Hello \${ctx.username}
 			},
 			componentInput: undefined,
 			card: false,
-			subgrids: 2,
+			numberOfSubgrids: 2,
 			tabs: ['First tab', 'Second tab']
 		}
 	},
@@ -1200,4 +1200,4 @@ Hello \${ctx.username}
 			card: false
 		}
 	}
-}
+}

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

@@ -31,7 +31,9 @@
 		getContext<AppEditorContext>('AppEditorContext')
 
 	function duplicateElement(id: string) {
-		$selectedComponent = duplicateGridItem($app, $focusedGrid, id)
+		$dirtyStore = true
+		const newId = duplicateGridItem($app, $focusedGrid, id)
+		$selectedComponent = newId
 	}
 
 	function removeGridElement() {
@@ -52,16 +54,6 @@
 		component?.componentInput?.type === 'template' && $worldStore
 			? buildExtraLib($worldStore?.outputsById ?? {}, component?.id, false)
 			: undefined
-
-	/*
-			
-			
-			
-					{#if component.type === 'tabscomponent' && Array.isArray(component.subGrids)}
-			<GridTab bind:tabs={component.tabs} bind:subGrids={component.subGrids} />
-		{/if}
-
-			*/
 </script>
 
 {#if component}
@@ -147,6 +139,10 @@
 			</PanelSection>
 		{/if}
 
+		{#if component.type === 'tabscomponent'}
+			<GridTab bind:tabs={component.tabs} {component} />
+		{/if}
+
 		{#if component.type === 'tablecomponent' && Array.isArray(component.actionButtons)}
 			<TableActions id={component.id} bind:components={component.actionButtons} />
 		{/if}

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

@@ -2,22 +2,29 @@
 	import Button from '$lib/components/common/button/Button.svelte'
 	import { faPlus, faTrashAlt } from '@fortawesome/free-solid-svg-icons'
 	import { getContext } from 'svelte'
-	import type { AppEditorContext, GridItem } from '../../types'
-	//import { deleteComponent } from '../../utils'
+	import type { AppEditorContext } from '../../types'
+	import type { AppComponent } from '../component'
 	import PanelSection from './common/PanelSection.svelte'
 
 	export let tabs: string[]
-	export let subGrids: GridItem[][]
+	export let component: AppComponent
 
-	const { runnableComponents, staticOutputs, app, focusedGrid } =
-		getContext<AppEditorContext>('AppEditorContext')
+	const { app } = getContext<AppEditorContext>('AppEditorContext')
 
 	function addTab() {
-		tabs = [...tabs, `Tab ${tabs.length + 1}`]
-		subGrids = [...subGrids, []]
+		const numberOfTabs = tabs.length
+		tabs = [...tabs, `Tab ${numberOfTabs + 1}`]
+
+		if (!$app.subgrids) {
+			$app.subgrids = {}
+		}
+
+		$app.subgrids[`${component.id}-${numberOfTabs}`] = []
+		component.numberOfSubgrids = tabs.length
 	}
 
 	function deleteSubgrid(index: number) {
+		/*
 		$focusedGrid = undefined
 		subGrids[index].forEach((x) => {
 			//deleteComponent(undefined, x.data, $app, $staticOutputs, $runnableComponents)
@@ -29,6 +36,7 @@
 		$app.grid = $app.grid
 		$staticOutputs = $staticOutputs
 		$runnableComponents = $runnableComponents
+		*/
 	}
 </script>