Files
windmill/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte
2023-01-04 05:07:18 +01:00

48 lines
1.7 KiB
Svelte

<script lang="ts">
import { getContext } from 'svelte'
import type { AppEditorContext } from '../../types'
import SplitPanesWrapper from '$lib/components/splitPanes/SplitPanesWrapper.svelte'
import { Pane } from 'svelte-splitpanes'
import InlineScriptsPanelList from './InlineScriptsPanelList.svelte'
import InlineScriptEditorPanel from './InlineScriptEditorPanel.svelte'
import InlineScriptEditor from './InlineScriptEditor.svelte'
const { lazyGrid, app } = getContext<AppEditorContext>('AppEditorContext')
let selectedScriptComponentId: string | undefined = undefined
</script>
<SplitPanesWrapper panesClass="!overflow-visible">
<Pane size={25}>
<InlineScriptsPanelList bind:selectedScriptComponentId />
</Pane>
<Pane size={75}>
{#each $lazyGrid as gridComponent, index (index)}
{#if gridComponent.data.id === selectedScriptComponentId}
<InlineScriptEditorPanel bind:componentInput={gridComponent.data.componentInput} />
{/if}
{#if gridComponent.data.type === 'tablecomponent'}
{#each gridComponent.data.actionButtons as actionButton, index (index)}
{#if actionButton.id === selectedScriptComponentId}
<InlineScriptEditorPanel bind:componentInput={actionButton.componentInput} />
{/if}
{/each}
{/if}
{/each}
{#each $app.unusedInlineScripts as unusedInlineScript, index (index)}
{#if `unused-${index}` === selectedScriptComponentId}
<InlineScriptEditor
bind:name={unusedInlineScript.name}
bind:inlineScript={unusedInlineScript.inlineScript}
on:delete={() => {
// remove the script from the array at the index
$app.unusedInlineScripts.splice(index, 1)
$app.unusedInlineScripts = [...$app.unusedInlineScripts]
}}
/>
{/if}
{/each}
</Pane>
</SplitPanesWrapper>