diff --git a/frontend/src/lib/components/apps/editor/SettingsPanel.svelte b/frontend/src/lib/components/apps/editor/SettingsPanel.svelte index dc466986a4..895445a84b 100644 --- a/frontend/src/lib/components/apps/editor/SettingsPanel.svelte +++ b/frontend/src/lib/components/apps/editor/SettingsPanel.svelte @@ -4,6 +4,7 @@ import { getContext } from 'svelte' import type { App, AppViewerContext } from '../types' import { allItems } from '../utils' + import { findGridItem } from './appUtils' import PanelSection from './settingsPanel/common/PanelSection.svelte' import ComponentPanel from './settingsPanel/ComponentPanel.svelte' import InputsSpecsEditor from './settingsPanel/InputsSpecsEditor.svelte' @@ -26,7 +27,7 @@ if (x?.data?.actionButtons) { const tableAction = x.data.actionButtons.find((x) => x.id === id) if (tableAction) { - return { item: tableAction, parent: x.data } + return { item: { data: tableAction, id: tableAction.id }, parent: x.data.id } } } } @@ -57,33 +58,31 @@ {#if componentSettings} - {#key componentSettings.item.id} - + {#key componentSettings?.item?.id} + {/key} {:else if tableActionSettings} - {#key tableActionSettings.item.id} + {#key tableActionSettings?.item?.data?.id} { if (tableActionSettings) { - tableActionSettings.parent.actionButtons = - tableActionSettings?.parent.actionButtons.filter( - (c) => c.id !== tableActionSettings?.item.id + const parent = findGridItem($app, tableActionSettings.parent) + if (!parent) return + + if (parent.data.type === 'tablecomponent') { + parent.data.actionButtons = parent.data.actionButtons.filter( + (x) => x.id !== tableActionSettings?.item.id ) + } } }} /> {/key} -{/if} - -{#if hiddenInlineScript} +{:else if hiddenInlineScript}
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorPanel.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorPanel.svelte index 2304daa092..1c7007d91d 100644 --- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorPanel.svelte +++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorPanel.svelte @@ -13,12 +13,16 @@ import InlineScriptEditor from './InlineScriptEditor.svelte' import { computeFields } from './utils' import { deepEqual } from 'fast-equals' + import { getContext } from 'svelte' + import type { AppViewerContext } from '../../types' export let componentInput: AppInput | undefined export let defaultUserInput = false export let id: string export let transformer: boolean + const { app } = getContext('AppViewerContext') + async function fork(path: string) { let { content, language, schema } = await getScriptByPath(path) if (componentInput && componentInput.type == 'runnable') { @@ -121,6 +125,7 @@ componentInput?.runnable?.type === 'runnableByName' ) { componentInput.runnable.inlineScript = e.detail + $app = $app } }} /> @@ -139,6 +144,7 @@ componentInput.runnable?.type === 'runnableByPath' ) { fork(componentInput.runnable.path) + $app = $app } }} > @@ -157,8 +163,10 @@ on:click={() => { flowPath = componentInput?.['runnable']?.path drawerFlowViewer.openDrawer() - }}>Expand + Expand + + Details page +
{:else} diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte index cec9d08357..02f595849f 100644 --- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte +++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte @@ -20,9 +20,10 @@ delete $runnableComponents[`bg_${index}`] } - $: gridItem = $selectedComponentInEditor - ? findGridItem($app, $selectedComponentInEditor?.split('_transformer')?.[0]) - : undefined + $: gridItem = + $selectedComponentInEditor && !$selectedComponentInEditor.startsWith('bg_') + ? findGridItem($app, $selectedComponentInEditor?.split('_')?.[0]) + : undefined $: hiddenInlineScript = $app?.hiddenInlineScripts?.findIndex( (k_, index) => `bg_${index}` === $selectedComponentInEditor diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte index 0735752cd4..1b050626f7 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 { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons' import { getContext } from 'svelte' - import type { AppEditorContext, AppViewerContext, RichConfiguration } from '../../types' + import type { AppEditorContext, AppViewerContext, GridItem, RichConfiguration } from '../../types' import PanelSection from './common/PanelSection.svelte' import InputsSpecsEditor from './InputsSpecsEditor.svelte' import TableActions from './TableActions.svelte' @@ -26,10 +26,10 @@ import { push } from '$lib/history' import Kbd from '$lib/components/common/kbd/Kbd.svelte' - export let component: AppComponent + export let componentSettings: { item: GridItem; parent: string | undefined } | undefined = + undefined export let rowColumns = false export let onDelete: (() => void) | undefined = undefined - export let parent: string | undefined export let noGrid = false export let duplicateMoveAllowed = true @@ -46,14 +46,16 @@ push(history, $app) $selectedComponent = undefined $focusedGrid = undefined - if (component && !noGrid) { - let ids = deleteGridItem($app, component, parent, false) + if (componentSettings?.item && !noGrid) { + let ids = deleteGridItem($app, componentSettings?.item.data, componentSettings?.parent, false) for (const key of ids) { delete $runnableComponents[key] } } - delete $runnableComponents[component.id] + if (componentSettings?.item?.data?.id) { + delete $runnableComponents[componentSettings?.item?.data?.id] + } $app = $app $runnableComponents = $runnableComponents @@ -63,8 +65,14 @@ let viewCssOptions = false $: extraLib = - component?.componentInput?.type === 'template' && $worldStore - ? buildExtraLib($worldStore?.outputsById ?? {}, component?.id, false, $state, false) + componentSettings?.item?.data?.componentInput?.type === 'template' && $worldStore + ? buildExtraLib( + $worldStore?.outputsById ?? {}, + componentSettings?.item?.data?.id, + false, + $state, + false + ) : undefined function keydown(event: KeyboardEvent) { @@ -77,16 +85,21 @@ } } - const initialConfiguration = ccomponents[component.type].initialData.configuration - const componentInput: RichConfiguration | undefined = - ccomponents[component.type].initialData.componentInput + const initialConfiguration = componentSettings?.item?.data?.type + ? ccomponents[componentSettings.item.data.type].initialData.configuration + : {} - $: component && ($app = $app) + const componentInput: RichConfiguration | undefined = componentSettings?.item?.data?.type + ? ccomponents[componentSettings?.item?.data?.type].initialData.componentInput + : undefined + + $: componentSettings?.item?.data && ($app = $app) -{#if component} +{#if componentSettings?.item?.data} + {@const component = componentSettings.item.data}
{#if component.componentInput} @@ -109,44 +122,50 @@ {/if} - + {#if componentSettings.item.data.componentInput} + -
- {#if component.componentInput.type === 'static'} - - {:else if component.componentInput.type === 'template' && component.componentInput !== undefined} -
- + {#if componentSettings.item.data.componentInput.type === 'static'} + -
- {:else if component.componentInput.type === 'connected' && component.componentInput !== undefined} - - {:else if component.componentInput?.type === 'runnable' && component.componentInput !== undefined} - - {/if} -
+ {:else if componentSettings.item.data.componentInput.type === 'template' && componentSettings.item.data.componentInput !== undefined} +
+ +
+ {:else if componentSettings.item.data.componentInput.type === 'connected' && component.componentInput !== undefined} + + {:else if componentSettings.item.data.componentInput?.type === 'runnable' && component.componentInput !== undefined} + + {/if} +
+ {/if} {#key $stateId} - {#if component.componentInput?.type === 'runnable'} - {#if Object.keys(component.componentInput.fields ?? {}).length > 0} + {#if componentSettings.item.data.componentInput?.type === 'runnable'} + {#if Object.keys(componentSettings.item.data.componentInput.fields ?? {}).length > 0}
@@ -159,7 +178,7 @@ {/if} - {#if component.type === 'tabscomponent'} - - {:else if component.type === 'verticalsplitpanescomponent' || component.type === 'horizontalsplitpanescomponent'} - - {:else if component.type === 'tablecomponent' && Array.isArray(component.actionButtons)} - + {#if componentSettings.item.data.type === 'tabscomponent'} + + {:else if componentSettings.item.data.type === 'verticalsplitpanescomponent' || componentSettings.item.data.type === 'horizontalsplitpanescomponent'} + + {:else if componentSettings.item.data.type === 'tablecomponent' && Array.isArray(componentSettings.item.data.actionButtons)} + {/if} - - {#if component.type === 'buttoncomponent' || component.type === 'formcomponent' || component.type === 'formbuttoncomponent'} - + + {#if componentSettings.item.data.type === 'buttoncomponent' || componentSettings.item.data.type === 'formcomponent' || componentSettings.item.data.type === 'formbuttoncomponent'} + {/if}
@@ -213,13 +235,13 @@ {#if viewCssOptions}
{#each Object.keys(ccomponents[component.type].customCss ?? {}) as name} - {#if component?.customCss != undefined} + {#if componentSettings.item.data?.customCss != undefined}
{/if} diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/RunnableInputEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/RunnableInputEditor.svelte index 6ac8fd5a2a..d0b6649591 100644 --- a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/RunnableInputEditor.svelte +++ b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/RunnableInputEditor.svelte @@ -8,12 +8,10 @@ export let appInput: ResultAppInput export let defaultUserInput = false export let appComponent: AppComponent - - $: isRunnableSelected = isScriptByPathDefined(appInput) || isScriptByNameDefined(appInput) -{#if isRunnableSelected} +{#if isScriptByPathDefined(appInput) || isScriptByNameDefined(appInput)} -{:else} +{:else if appInput !== undefined} {/if}