Files
windmill/frontend/src/lib/components/apps/editor/AppInputs.svelte
2023-03-16 16:50:01 +01:00

64 lines
2.1 KiB
Svelte

<script lang="ts">
import { Alert } from '$lib/components/common'
import Toggle from '$lib/components/Toggle.svelte'
import { getContext } from 'svelte'
import type { AppViewerContext } from '../types'
import { allItems } from '../utils'
import AppComponentInput from './AppComponentInput.svelte'
import InputsSpecsEditor from './settingsPanel/InputsSpecsEditor.svelte'
const { app } = getContext<AppViewerContext>('AppViewerContext')
let resourceOnly: boolean = true
</script>
<Alert type="info" title="Configurations">
In order to properly configure the app, you need to fill in the inputs below.
</Alert>
<div class="mt-2 flex flex-row-reverse">
<Toggle bind:checked={resourceOnly} options={{ right: 'Resource only' }} />
</div>
<div class="gap-4 flex flex-col pt-4">
{#each allItems($app.grid, $app.subgrids) as gridItem (gridItem.data.id)}
{#if gridItem?.data?.type === 'tablecomponent'}
<div>
<AppComponentInput bind:component={gridItem.data} {resourceOnly} />
<div class="ml-4 mt-4">
{#each gridItem.data.actionButtons as actionButton (actionButton.id)}
<AppComponentInput bind:component={actionButton.data} {resourceOnly} />
{/each}
</div>
</div>
{:else}
<AppComponentInput bind:component={gridItem.data} {resourceOnly} />
{/if}
{/each}
</div>
{#if $app?.hiddenInlineScripts?.length > 0}
<div class="font-bold text-lg">Background script inputs</div>
<div class="gap-4 flex flex-col pt-4">
{#each $app?.hiddenInlineScripts ?? [] as script, index (script.name)}
<div class="border p-2">
<div class="text-sm font-bold">{script.name}</div>
{#if resourceOnly && Object.keys(script.fields).filter((fieldKey) => {
const fields = script.fields
const field = fields[fieldKey]
return field.fieldType === 'object' && field.format?.startsWith('resource-')
}).length === 0}
<span class="text-sm text-gray-600">No resource input</span>
{:else}
<InputsSpecsEditor
id={`bg_${index}`}
shouldCapitalize={false}
bind:inputSpecs={script.fields}
userInputEnabled={false}
{resourceOnly}
/>
{/if}
</div>
{/each}
</div>
{/if}