118 lines
3.4 KiB
Svelte
118 lines
3.4 KiB
Svelte
<script lang="ts">
|
|
import type { FlowModule } from '$lib/gen'
|
|
import { getScriptByPath, valueToTsType } from '$lib/utils'
|
|
import {
|
|
faArrowDown,
|
|
faClose,
|
|
faCode,
|
|
faCodeBranch,
|
|
faSave,
|
|
faTrashAlt
|
|
} from '@fortawesome/free-solid-svg-icons'
|
|
import { Button } from 'flowbite-svelte'
|
|
import { createEventDispatcher } from 'svelte'
|
|
import Icon from 'svelte-awesome'
|
|
import { Highlight } from 'svelte-highlight'
|
|
import python from 'svelte-highlight/languages/python'
|
|
import typescript from 'svelte-highlight/languages/typescript'
|
|
import IconedPath from '../IconedPath.svelte'
|
|
import IconedResourceType from '../IconedResourceType.svelte'
|
|
import Modal from '../Modal.svelte'
|
|
import { isEmptyFlowModule } from './flowStateUtils'
|
|
import { stepOpened } from './stepOpenedStore'
|
|
|
|
export let indexes: number[]
|
|
export let mod: FlowModule
|
|
|
|
$: shouldPick = isEmptyFlowModule(mod)
|
|
|
|
let modalViewer: Modal
|
|
let modalViewerContent = ''
|
|
let modalViewerLanguage: 'deno' | 'python3' = 'deno'
|
|
|
|
async function viewCode() {
|
|
if (mod.value.type == 'script') {
|
|
const { content, language } = await getScriptByPath(mod.value.path!)
|
|
modalViewerContent = content
|
|
modalViewerLanguage = language
|
|
modalViewer.openModal()
|
|
} else {
|
|
throw Error('Not a script')
|
|
}
|
|
}
|
|
|
|
const dispatch = createEventDispatcher()
|
|
$: opened = $stepOpened === String(indexes.join('-'))
|
|
</script>
|
|
|
|
<div on:click|stopPropagation={() => undefined}>
|
|
<h3 class="text-sm font-bold text-gray-900 flex flex-col">
|
|
<span class="text-xs shrink">
|
|
{#if 'path' in mod.value && mod.value.path}
|
|
<IconedPath path={mod.value.path} />
|
|
{:else if 'language' in mod.value && mod.value.language}
|
|
Inline {mod.value.language}
|
|
{:else}
|
|
Select a script
|
|
{/if}
|
|
</span>
|
|
{#if ('path' in mod.value && mod.value.path) || ('language' in mod.value && mod.value.language)}
|
|
<input class="overflow-x-auto" type="text" bind:value={mod.summary} placeholder="Summary" />
|
|
{/if}
|
|
</h3>
|
|
</div>
|
|
|
|
<div class="flex flex-row space-x-2" on:click|stopPropagation={() => undefined}>
|
|
{#if mod.value.type === 'script' && !shouldPick}
|
|
<Button size="xs" color="alternative" on:click={() => dispatch('fork')}>
|
|
<Icon data={faCodeBranch} class="mr-2" />
|
|
Fork
|
|
</Button>
|
|
<Button size="xs" color="alternative" on:click={viewCode}>
|
|
<Icon data={faCode} class="mr-2" />
|
|
View code
|
|
</Button>
|
|
{/if}
|
|
|
|
{#if mod.value.type === 'rawscript' && !shouldPick}
|
|
<Button size="xs" color="alternative" on:click={() => dispatch('createScriptFromInlineScript')}>
|
|
<Icon data={faSave} class="mr-2" />
|
|
Save to workspace
|
|
</Button>
|
|
{/if}
|
|
<Button
|
|
size="xs"
|
|
color="alternative"
|
|
on:click={() => {
|
|
dispatch('delete')
|
|
}}
|
|
>
|
|
<Icon data={faTrashAlt} class="mr-2" />
|
|
Remove step
|
|
</Button>
|
|
{#if opened}
|
|
<Button size="xs" color="dark" on:click={() => stepOpened.update(() => undefined)}>
|
|
<Icon data={faClose} />
|
|
</Button>
|
|
{:else}
|
|
<Button
|
|
size="xs"
|
|
color="light"
|
|
on:click={() => stepOpened.update(() => String(indexes.join('-')))}
|
|
>
|
|
<Icon data={faArrowDown} />
|
|
</Button>
|
|
{/if}
|
|
</div>
|
|
|
|
<Modal bind:this={modalViewer}>
|
|
<div slot="title">Script {'path' in mod?.value ? mod?.value.path : ''}</div>
|
|
<div slot="content">
|
|
{#if modalViewerLanguage === 'python3'}
|
|
<Highlight language={python} code={modalViewerContent} />
|
|
{:else if modalViewerLanguage === 'deno'}
|
|
<Highlight language={typescript} code={modalViewerContent} />
|
|
{/if}
|
|
</div>
|
|
</Modal>
|