From 34a20c3948fed49ab091882c37f76c4033d760da Mon Sep 17 00:00:00 2001 From: Ruben Fiszel Date: Sun, 2 Oct 2022 23:17:40 +0200 Subject: [PATCH] feat(frontend): add prop picker to iterator --- .../src/lib/components/FlowBuilder.svelte | 6 +-- .../lib/components/InputTransformForm.svelte | 2 +- .../flows/content/FlowEditorPanel.svelte | 4 +- .../components/flows/content/FlowLoop.svelte | 37 +++++++++++++++---- .../flows/content/FlowModule.svelte | 7 ++-- .../lib/components/flows/flowStateUtils.ts | 1 + .../flows/propPicker/PropPickerWrapper.svelte | 4 +- frontend/src/lib/components/flows/types.ts | 2 +- 8 files changed, 43 insertions(+), 20 deletions(-) diff --git a/frontend/src/lib/components/FlowBuilder.svelte b/frontend/src/lib/components/FlowBuilder.svelte index 9b9560a4c9..c3d5ac49eb 100644 --- a/frontend/src/lib/components/FlowBuilder.svelte +++ b/frontend/src/lib/components/FlowBuilder.svelte @@ -139,8 +139,6 @@ const selectedIdStore = writable('settings') const scheduleStore = writable({ args: {}, cron: '', enabled: false }) const previewArgsStore = writable>({}) - const variablesStore = writable>({}) - const resourcesStore = writable>({}) function select(selectedId: string) { selectedIdStore.set(selectedId) @@ -150,9 +148,7 @@ selectedId: selectedIdStore, schedule: scheduleStore, select, - previewArgs: previewArgsStore, - variables: variablesStore, - resources: resourcesStore + previewArgs: previewArgsStore }) async function loadSchedule() { diff --git a/frontend/src/lib/components/InputTransformForm.svelte b/frontend/src/lib/components/InputTransformForm.svelte index 705987951b..2f2e850d7e 100644 --- a/frontend/src/lib/components/InputTransformForm.svelte +++ b/frontend/src/lib/components/InputTransformForm.svelte @@ -11,7 +11,7 @@ import { codeToStaticTemplate, getDefaultExpr, isCodeInjection } from './flows/utils' import SimpleEditor from './SimpleEditor.svelte' import Toggle from './Toggle.svelte' - import { Button, Tooltip } from 'flowbite-svelte' + import { Button } from 'flowbite-svelte' import Icon from 'svelte-awesome' import { faChain } from '@fortawesome/free-solid-svg-icons' diff --git a/frontend/src/lib/components/flows/content/FlowEditorPanel.svelte b/frontend/src/lib/components/flows/content/FlowEditorPanel.svelte index ca51e50dee..5b240c3757 100644 --- a/frontend/src/lib/components/flows/content/FlowEditorPanel.svelte +++ b/frontend/src/lib/components/flows/content/FlowEditorPanel.svelte @@ -8,6 +8,8 @@ import FlowLoop from './FlowLoop.svelte' import FlowFailureModule from './FlowFailureModule.svelte' + export let previewArgs: Record = {} + export let initialPath: string const { selectedId } = getContext('FlowEditorContext') @@ -21,7 +23,7 @@ {:else if $selectedId === 'settings-retries'} {:else if $selectedId.includes('loop')} - + {:else if $selectedId === 'inputs'} {:else if $selectedId === 'failure'} diff --git a/frontend/src/lib/components/flows/content/FlowLoop.svelte b/frontend/src/lib/components/flows/content/FlowLoop.svelte index 35415139ce..5c288c9ff6 100644 --- a/frontend/src/lib/components/flows/content/FlowLoop.svelte +++ b/frontend/src/lib/components/flows/content/FlowLoop.svelte @@ -6,10 +6,22 @@ import SimpleEditor from '$lib/components/SimpleEditor.svelte' import Tooltip from '$lib/components/Tooltip.svelte' import { flowStore } from '../flowStore' + import { getStepPropPicker } from '../flowStateUtils' + import { flowStateStore } from '../flowState' + import PropPickerWrapper from '../propPicker/PropPickerWrapper.svelte' - const { selectedId } = getContext('FlowEditorContext') + const { selectedId, previewArgs } = getContext('FlowEditorContext') - const [prefix, index] = $selectedId.split('-') + let editor: SimpleEditor | undefined = undefined + + $: index = $selectedId.split('-')[1] + + $: pickableProperties = getStepPropPicker( + [Number(index)], + $flowStore.schema, + $flowStateStore, + $previewArgs + ).pickableProperties @@ -23,11 +35,22 @@ docs. - + + { + console.log(detail) + console.log('test') + editor?.insertAtCursor(detail) + }} + > + + Skip failures ('FlowEditorContext') + const { selectedId, select, previewArgs } = getContext('FlowEditorContext') export let flowModule: FlowModule - export let previewArgs: Record = {} export let flowModuleState: FlowModuleState export let failureModule: boolean @@ -61,7 +60,7 @@ $selectedId.split('-').map(Number), $flowStore.schema, $flowStateStore, - previewArgs + $previewArgs ) function onKeyDown(event: KeyboardEvent) { @@ -194,7 +193,7 @@
- + import PropPicker from '$lib/components/propertyPicker/PropPicker.svelte' - import { setContext, getContext } from 'svelte' + import { createEventDispatcher, setContext } from 'svelte' import { HSplitPane } from 'svelte-split-pane' import { writable, type Writable } from 'svelte/store' export let pickableProperties: Object = {} const propPickerConfig = writable(undefined) + const dispatch = createEventDispatcher() setContext('PropPickerWrapper', { propPickerConfig, @@ -52,6 +53,7 @@ { + dispatch('select', detail) $propPickerConfig?.onSelect(detail) propPickerConfig.set(undefined) }} diff --git a/frontend/src/lib/components/flows/types.ts b/frontend/src/lib/components/flows/types.ts index cbf06f3496..c479e7a6f2 100644 --- a/frontend/src/lib/components/flows/types.ts +++ b/frontend/src/lib/components/flows/types.ts @@ -4,6 +4,6 @@ import type { Schedule } from './scheduleUtils' export type FlowEditorContext = { selectedId: Writable select: (id: string) => void - schedule: Writable + schedule: Writable, previewArgs: Writable>, }