From 5060c37feddcfd57bd2a1eccf03ea340f281f395 Mon Sep 17 00:00:00 2001 From: Faton Ramadani Date: Fri, 24 Feb 2023 18:44:16 +0100 Subject: [PATCH] fix(frontend): gridtab --- .../apps/components/layout/AppTabs.svelte | 1 - .../lib/components/apps/editor/appUtils.ts | 19 +++++----------- .../apps/editor/component/components.ts | 8 +++---- .../settingsPanel/ComponentPanel.svelte | 18 ++++++--------- .../apps/editor/settingsPanel/GridTab.svelte | 22 +++++++++++++------ 5 files changed, 32 insertions(+), 36 deletions(-) diff --git a/frontend/src/lib/components/apps/components/layout/AppTabs.svelte b/frontend/src/lib/components/apps/components/layout/AppTabs.svelte index 2e2e9eff88..8824e89469 100644 --- a/frontend/src/lib/components/apps/components/layout/AppTabs.svelte +++ b/frontend/src/lib/components/apps/components/layout/AppTabs.svelte @@ -46,7 +46,6 @@ } $: $selectedComponent === id && selectedIndex >= 0 && onFocus() - $: console.log(subGrids) diff --git a/frontend/src/lib/components/apps/editor/appUtils.ts b/frontend/src/lib/components/apps/editor/appUtils.ts index de65b3449f..f5ba678c81 100644 --- a/frontend/src/lib/components/apps/editor/appUtils.ts +++ b/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) diff --git a/frontend/src/lib/components/apps/editor/component/components.ts b/frontend/src/lib/components/apps/editor/component/components.ts index a87cc2f03a..39fc5c1934 100644 --- a/frontend/src/lib/components/apps/editor/component/components.ts +++ b/frontend/src/lib/components/apps/editor/component/components.ts @@ -152,7 +152,7 @@ export const components: Record = { configuration: {}, customCss: { header: { class: '', style: '' }, - container: { class: '', style: '' }, + container: { class: '', style: '' } } as const, card: false } @@ -175,7 +175,7 @@ export const components: Record = { }, 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 } } -} \ No newline at end of file +} diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte index 8bb4b45eff..2a5b381ade 100644 --- a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte +++ b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte @@ -31,7 +31,9 @@ getContext('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)} - - {/if} - - */ {#if component} @@ -147,6 +139,10 @@ {/if} + {#if component.type === 'tabscomponent'} + + {/if} + {#if component.type === 'tablecomponent' && Array.isArray(component.actionButtons)} {/if} diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/GridTab.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/GridTab.svelte index 1ad97c98e2..5c9728d679 100644 --- a/frontend/src/lib/components/apps/editor/settingsPanel/GridTab.svelte +++ b/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') + const { app } = getContext('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 + */ }