From 15c2bdcdae0630504a77c4f12a817787f056b873 Mon Sep 17 00:00:00 2001 From: Ruben Fiszel Date: Fri, 24 Feb 2023 18:42:42 +0100 Subject: [PATCH] pushed --- .../apps/editor/SettingsPanel.svelte | 6 +- .../components/apps/editor/TablePanel.svelte | 2 + .../lib/components/apps/editor/appUtils.ts | 58 ++++++++++++------- .../apps/editor/component/components.ts | 4 +- .../settingsPanel/ComponentPanel.svelte | 19 ++++-- frontend/src/lib/components/apps/utils.ts | 8 +++ 6 files changed, 66 insertions(+), 31 deletions(-) diff --git a/frontend/src/lib/components/apps/editor/SettingsPanel.svelte b/frontend/src/lib/components/apps/editor/SettingsPanel.svelte index 8fb5de5450..5d85421028 100644 --- a/frontend/src/lib/components/apps/editor/SettingsPanel.svelte +++ b/frontend/src/lib/components/apps/editor/SettingsPanel.svelte @@ -1,7 +1,7 @@ -{#each allItems($app.grid, $app.subgrids) as gridItem (gridItem.data.id)} +{#each allItemsWithParent($app.grid, $app.subgrids) as [gridItem, parent] (gridItem.data.id)} {#if gridItem.data.id === $selectedComponent} - + {:else if gridItem.data.type === 'tablecomponent'} {/if} diff --git a/frontend/src/lib/components/apps/editor/TablePanel.svelte b/frontend/src/lib/components/apps/editor/TablePanel.svelte index 7663f55fc3..6ef87d7760 100644 --- a/frontend/src/lib/components/apps/editor/TablePanel.svelte +++ b/frontend/src/lib/components/apps/editor/TablePanel.svelte @@ -11,6 +11,8 @@ {#each component.actionButtons as actionButton (actionButton.id)} {#if actionButton.id === $selectedComponent} { diff --git a/frontend/src/lib/components/apps/editor/appUtils.ts b/frontend/src/lib/components/apps/editor/appUtils.ts index de65b3449f..e6a2bf39f4 100644 --- a/frontend/src/lib/components/apps/editor/appUtils.ts +++ b/frontend/src/lib/components/apps/editor/appUtils.ts @@ -1,6 +1,6 @@ import { getNextId } from '$lib/components/flows/flowStateUtils' import type { App, FocusedGrid, GridItem } from '../types' -import { getRecommendedDimensionsByComponent, type AppComponent } from './component' +import { Component, getRecommendedDimensionsByComponent, type AppComponent } from './component' import gridHelp from '@windmill-labs/svelte-grid/src/utils/helper' import { gridColumns } from '../gridUtils' @@ -124,32 +124,48 @@ export function insertNewGridItem( return id } -export function deleteGridItem(app: App, id: string) { - const index = app.grid.findIndex((item) => item.id === id) - if (index !== -1) { - app.grid.splice(index, 1) - return - } - const gridItem = findGridItem(app, id) - const keys = Object.keys(app.subgrids ?? {}) - if (app.subgrids) { - if (keys.includes(id)) { - for (let i = 0; i < gridItem?.data.numberOfSubgrids; i++) { - delete app.subgrids[`${id}-${i}`] - } - } else { - for (const key of keys) { - const subgrid = app.subgrids[key] - const index = subgrid.findIndex((item) => item.id === id) - if (index !== -1) { - subgrid.splice(index, 1) - return +export function getAllSubgridsAndComponentIds(app: App, component: AppComponent): [string[], string[]] { + const subgrids: string[] = [] + let components: string[] = [component.id] + if (app.subgrids && component.numberOfSubgrids) { + for (let i = 0; i < component.numberOfSubgrids; i++) { + const subgrid = app.subgrids[`${component.id}-${i}`] + if (subgrid) { + for (const item of subgrid) { + let [recSubgrids, recComponents] = getAllSubgridsAndComponentIds(app, item.data) + subgrids.push(...recSubgrids) + components.push(...recComponents) } } } } + return [subgrids, components] +} + +export function deleteGridItem(app: App, component: AppComponent, parent: string | undefined): string[] { + let [subgrids, components] = getAllSubgridsAndComponentIds(app, component) + if (app.subgrids) { + subgrids.forEach((id) => { + delete app.subgrids![id] + }) + } + if (!parent) { + let index = app.grid.findIndex((x) => x.id == component.id) + if (index > -1) { + app.grid.splice(index, 1) + } + } else { + let grid = app.subgrids![parent] + let index = grid.findIndex((x) => x.id == component.id) + if (index > -1) { + grid.splice(index, 1) + } + } + + return components + } export function duplicateGridItem( diff --git a/frontend/src/lib/components/apps/editor/component/components.ts b/frontend/src/lib/components/apps/editor/component/components.ts index a87cc2f03a..6f295b2b37 100644 --- a/frontend/src/lib/components/apps/editor/component/components.ts +++ b/frontend/src/lib/components/apps/editor/component/components.ts @@ -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'] } }, diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte index 8bb4b45eff..d6b958000c 100644 --- a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte +++ b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte @@ -22,10 +22,13 @@ import { dirtyStore } from '$lib/components/common/confirmationModal/dirtyStore' import GridTab from './GridTab.svelte' import { duplicateGridItem } from '../appUtils' + import { deleteGridItem } from '../appUtils' - export let component: AppComponent | undefined + export let component: AppComponent export let rowColumns = false export let onDelete: (() => void) | undefined = undefined + export let parent: string | undefined + export let noGrid = false const { app, staticOutputs, runnableComponents, selectedComponent, worldStore, focusedGrid } = getContext('AppEditorContext') @@ -35,17 +38,23 @@ } function removeGridElement() { - /* $selectedComponent = undefined $focusedGrid = undefined - if (component) { - deleteComponent(gridItems, component, $app, $staticOutputs, $runnableComponents) + if (component && !noGrid) { + let ids = deleteGridItem($app, component, parent) + for (const key in ids) { + delete $staticOutputs[key] + delete $runnableComponents[key] + } } + + delete $staticOutputs[component.id] + delete $runnableComponents[component.id] + $app = $app $staticOutputs = $staticOutputs $runnableComponents = $runnableComponents onDelete?.() - */ } $: extraLib = diff --git a/frontend/src/lib/components/apps/utils.ts b/frontend/src/lib/components/apps/utils.ts index 1a47caf88d..55238c81eb 100644 --- a/frontend/src/lib/components/apps/utils.ts +++ b/frontend/src/lib/components/apps/utils.ts @@ -54,6 +54,14 @@ export function allItems(grid: GridItem[], subgrids: Record return [...grid, ...Object.values(subgrids).flat()] } +export function allItemsWithParent(grid: GridItem[], subgrids: Record | undefined): [GridItem, string | undefined][] { + const items: [GridItem, string | undefined][] = grid.map((item) => [item, undefined]) + if (subgrids == undefined) { + return items + } + return [...items, ...Object.entries(subgrids).flatMap(([k, v]) => v.map((g) => [g, k] as [GridItem, string]))] +} + export async function loadSchema( workspace: string, path: string,