From 08e2e6dbb2136b2ec4d37198654c884aa05f4ecc Mon Sep 17 00:00:00 2001 From: Ruben Fiszel Date: Thu, 23 Feb 2023 19:59:23 +0100 Subject: [PATCH] fix(frontend): containers and tab fixes v1 --- .../components/layout/AppContainer.svelte | 30 ++++++------ .../apps/components/layout/AppTabs.svelte | 25 +++++----- .../apps/editor/SettingsPanel.svelte | 25 +--------- .../apps/editor/SettingsPanelRec.svelte | 25 ++++++++++ .../apps/editor/SubGridEditor.svelte | 4 +- .../apps/editor/component/components.ts | 37 ++++++++------ .../settingsPanel/ComponentPanel.svelte | 49 +++++++------------ frontend/src/lib/components/apps/utils.ts | 2 +- 8 files changed, 100 insertions(+), 97 deletions(-) create mode 100644 frontend/src/lib/components/apps/editor/SettingsPanelRec.svelte diff --git a/frontend/src/lib/components/apps/components/layout/AppContainer.svelte b/frontend/src/lib/components/apps/components/layout/AppContainer.svelte index 5455334953..134b3a9149 100644 --- a/frontend/src/lib/components/apps/components/layout/AppContainer.svelte +++ b/frontend/src/lib/components/apps/components/layout/AppContainer.svelte @@ -4,19 +4,16 @@ import type { AppInput } from '../../inputType' import type { AppEditorContext, GridItem } from '../../types' import InputValue from '../helpers/InputValue.svelte' - import RunnableWrapper from '../helpers/RunnableWrapper.svelte' export let id: string - export let componentInput: AppInput | undefined - export let initializing: boolean | undefined = undefined export let configuration: Record export let subGrids: GridItem[][] | undefined = undefined export let componentContainerHeight: number + let noPadding: boolean | undefined = undefined - export const staticOutputs: string[] = ['loading', 'result'] + export const staticOutputs: string[] = [] const { focusedGrid, selectedComponent } = getContext('AppEditorContext') - let result: string[] | undefined = undefined let gridContent: string[] | undefined = undefined function onFocus() { @@ -29,15 +26,16 @@ $: $selectedComponent === id && onFocus() + + - - {#if subGrids && subGrids[0]} - { - $selectedComponent = id - }} - /> - {/if} - +{#if subGrids && subGrids[0]} + { + $selectedComponent = id + }} + /> +{/if} diff --git a/frontend/src/lib/components/apps/components/layout/AppTabs.svelte b/frontend/src/lib/components/apps/components/layout/AppTabs.svelte index 731655db16..65dbc76f8d 100644 --- a/frontend/src/lib/components/apps/components/layout/AppTabs.svelte +++ b/frontend/src/lib/components/apps/components/layout/AppTabs.svelte @@ -6,27 +6,26 @@ import type { Output } from '../../rx' import type { AppEditorContext, GridItem } from '../../types' import InputValue from '../helpers/InputValue.svelte' - import RunnableWrapper from '../helpers/RunnableWrapper.svelte' export let id: string - export let componentInput: AppInput | undefined - export let initializing: boolean | undefined = undefined + export let configuration: Record export let subGrids: GridItem[][] | undefined = undefined export let componentContainerHeight: number - export const staticOutputs: string[] = ['loading', 'result', 'selectedTabIndex'] + export const staticOutputs: string[] = ['selectedTabIndex'] const { worldStore, focusedGrid, selectedComponent } = getContext('AppEditorContext') - let result: string[] | undefined = undefined + let tabs: string[] let gridContent: string[] | undefined = undefined let selected: string = '' + let noPadding: boolean | undefined = undefined - $: selectedIndex = result?.indexOf(selected) ?? -1 + $: selectedIndex = tabs?.indexOf(selected) ?? -1 - $: if (result && selected === '') { - selected = result[0] + $: if (tabs && selected === '') { + selected = tabs[0] } $: outputs = $worldStore?.outputsById[id] as { @@ -51,10 +50,13 @@ - + + + +
- {#each result ?? [] as res} + {#each tabs ?? [] as res} {res} @@ -63,6 +65,7 @@
{#if subGrids && subGrids[selectedIndex]} { @@ -70,4 +73,4 @@ }} /> {/if} - +
diff --git a/frontend/src/lib/components/apps/editor/SettingsPanel.svelte b/frontend/src/lib/components/apps/editor/SettingsPanel.svelte index ac2481ce6c..d2a0fcda6c 100644 --- a/frontend/src/lib/components/apps/editor/SettingsPanel.svelte +++ b/frontend/src/lib/components/apps/editor/SettingsPanel.svelte @@ -2,34 +2,13 @@ import { getContext } from 'svelte' import type { AppEditorContext } from '../types' import PanelSection from './settingsPanel/common/PanelSection.svelte' - import ComponentPanel from './settingsPanel/ComponentPanel.svelte' import InputsSpecsEditor from './settingsPanel/InputsSpecsEditor.svelte' - import TablePanel from './TablePanel.svelte' + import SettingsPanelRec from './SettingsPanelRec.svelte' const { selectedComponent, lazyGrid, app } = getContext('AppEditorContext') -{#each $lazyGrid as gridItem (gridItem.data.id)} - {#if gridItem.data.id === $selectedComponent} - - {:else if gridItem.data.type === 'tablecomponent'} - - {:else if gridItem.data.subGrids} - {#each gridItem.data.subGrids as subGrid} - {#each subGrid as subGridItem, index (subGridItem.data.id)} - {#if subGridItem.data.id === $selectedComponent} - { - subGrid.splice(index, 1) - subGrid = subGrid - }} - /> - {/if} - {/each} - {/each} - {/if} -{/each} + {#each $app?.hiddenInlineScripts ?? [] as script, index (script.name)} {#if $selectedComponent === `bg_${index}`} diff --git a/frontend/src/lib/components/apps/editor/SettingsPanelRec.svelte b/frontend/src/lib/components/apps/editor/SettingsPanelRec.svelte new file mode 100644 index 0000000000..602e1d11cd --- /dev/null +++ b/frontend/src/lib/components/apps/editor/SettingsPanelRec.svelte @@ -0,0 +1,25 @@ + + +{#each gridItems as gridItem (gridItem.data.id)} + {#if gridItem.data.id === $selectedComponent} + + {:else if gridItem.data.type === 'tablecomponent'} + + {:else if gridItem.data.subGrids} + {#each gridItem.data.subGrids as subGrid} + {#each subGrid as subGridItem (subGridItem.data.id)} + + {/each} + {/each} + {/if} +{/each} diff --git a/frontend/src/lib/components/apps/editor/SubGridEditor.svelte b/frontend/src/lib/components/apps/editor/SubGridEditor.svelte index 0fb269169e..7d4fcbb905 100644 --- a/frontend/src/lib/components/apps/editor/SubGridEditor.svelte +++ b/frontend/src/lib/components/apps/editor/SubGridEditor.svelte @@ -8,6 +8,7 @@ export let subGrid: GridItem[] export let containerHeight: number + export let noPadding = false const dispatch = createEventDispatcher() @@ -73,7 +74,8 @@
= { dims: '2:8-6:8', data: { softWrap: true, - verticalAlignment: 'center', id: '', type: 'containercomponent', - configuration: {}, - componentInput: { - type: 'static', - fieldType: 'array', - subFieldType: 'text', - value: ['First Tab', 'Second Tab'] + configuration: { + noPadding: { + type: 'static', + fieldType: 'boolean', + value: false, + onlyStatic: true + } }, + componentInput: undefined, card: false, subGrids: [[]] } @@ -1012,16 +1013,24 @@ Hello \${ctx.username} dims: '2:8-6:8', data: { softWrap: true, - verticalAlignment: 'center', id: '', type: 'tabscomponent', - configuration: {}, - componentInput: { - type: 'static', - fieldType: 'array', - subFieldType: 'text', - value: ['First Tab', 'Second Tab'] + configuration: { + noPadding: { + type: 'static', + fieldType: 'boolean', + value: false, + onlyStatic: true + }, + tabs: { + type: 'static', + fieldType: 'array', + subFieldType: 'text', + value: ['First Tab', 'Second Tab'], + onlyStatic: true + } }, + componentInput: undefined, card: false, subGrids: [[], []] } diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte index 0b76979f75..c35e139407 100644 --- a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte +++ b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte @@ -2,7 +2,7 @@ import Button from '$lib/components/common/button/Button.svelte' import { faCopy, faTrashAlt } from '@fortawesome/free-solid-svg-icons' import { getContext } from 'svelte' - import type { AppEditorContext } from '../../types' + import type { AppEditorContext, GridItem } from '../../types' import PanelSection from './common/PanelSection.svelte' import InputsSpecsEditor from './InputsSpecsEditor.svelte' import TableActions from './TableActions.svelte' @@ -29,8 +29,8 @@ import { dirtyStore } from '$lib/components/common/confirmationModal/dirtyStore' export let component: AppComponent | undefined - export let onDelete: (() => void) | undefined = undefined export let rowColumns = false + export let gridItems: GridItem[] const { app, staticOutputs, runnableComponents, selectedComponent, worldStore, focusedGrid } = getContext('AppEditorContext') @@ -62,44 +62,31 @@ function removeGridElement() { $selectedComponent = undefined - if (onDelete && component) { + if (component) { + gridItems = gridItems.filter((gridComponent) => gridComponent.data.id !== component?.id) + delete $staticOutputs[component.id] $staticOutputs = $staticOutputs delete $runnableComponents[component.id] $runnableComponents = $runnableComponents - onDelete() - // Delete static inputs - } else { - if (component) { - $app.grid = $app.grid.filter((gridComponent) => gridComponent.data.id !== component?.id) + if ( + component.componentInput?.type === 'runnable' && + component.componentInput?.runnable?.type === 'runnableByName' + ) { + const { name, inlineScript } = component.componentInput.runnable - // Delete static inputs - delete $staticOutputs[component.id] - $staticOutputs = $staticOutputs + if (inlineScript) { + if (!$app.unusedInlineScripts) { + $app.unusedInlineScripts = [] + } - delete $runnableComponents[component.id] - $runnableComponents = $runnableComponents - } - } - - if ( - component && - component.componentInput?.type === 'runnable' && - component.componentInput?.runnable?.type === 'runnableByName' - ) { - const { name, inlineScript } = component.componentInput.runnable - - if (inlineScript) { - if (!$app.unusedInlineScripts) { - $app.unusedInlineScripts = [] + $app.unusedInlineScripts.push({ + name, + inlineScript + }) } - - $app.unusedInlineScripts.push({ - name, - inlineScript - }) } } } diff --git a/frontend/src/lib/components/apps/utils.ts b/frontend/src/lib/components/apps/utils.ts index 59706d4422..74fd33a75a 100644 --- a/frontend/src/lib/components/apps/utils.ts +++ b/frontend/src/lib/components/apps/utils.ts @@ -303,7 +303,7 @@ export function createNewGridItem(grid: GridItem[], id: string, data: AppCompone return newItem } -function recursiveGetIds(gridItem: GridItem): string[] { +export function recursiveGetIds(gridItem: GridItem): string[] { const subGrids = gridItem.data.subGrids ?? [] const subGridIds = subGrids .map((subGrid: GridItem[]) => subGrid.map(recursiveGetIds))