Add data binding to workflow block setup
This commit is contained in:
Andrew Kingston
parent
be67eaf9c8
commit
a5a7ba68e3
|
|
@ -0,0 +1,51 @@
|
|||
<script>
|
||||
import GenericBindingPopover from "./GenericBindingPopover.svelte"
|
||||
import { Input, Icon } from "@budibase/bbui"
|
||||
|
||||
export let bindings = []
|
||||
export let value
|
||||
let anchor
|
||||
let popover
|
||||
let enrichedValue
|
||||
</script>
|
||||
|
||||
<div class="container" bind:this={anchor}>
|
||||
<Input {...$$props} bind:value />
|
||||
<button on:click={popover.show}>
|
||||
<Icon name="edit" />
|
||||
</button>
|
||||
</div>
|
||||
<GenericBindingPopover
|
||||
{anchor}
|
||||
{bindings}
|
||||
bind:value
|
||||
bind:popover
|
||||
align="right" />
|
||||
|
||||
<style>
|
||||
.container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
button {
|
||||
position: absolute;
|
||||
background: none;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
background: var(--grey-4);
|
||||
right: 7px;
|
||||
bottom: 7px;
|
||||
}
|
||||
button:hover {
|
||||
background: var(--grey-5);
|
||||
cursor: pointer;
|
||||
}
|
||||
button :global(svg) {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(-50%) !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,129 @@
|
|||
<script>
|
||||
import groupBy from "lodash/fp/groupBy"
|
||||
import { TextArea, Label, Body, Button, Popover } from "@budibase/bbui"
|
||||
import { createEventDispatcher } from "svelte"
|
||||
const dispatch = createEventDispatcher()
|
||||
|
||||
export let value
|
||||
export let bindings = []
|
||||
export let anchor
|
||||
export let align
|
||||
export let popover
|
||||
|
||||
$: categories = Object.entries(groupBy("category", bindings))
|
||||
|
||||
function onClickBinding(binding) {
|
||||
value += `{{ ${binding.path} }}`
|
||||
}
|
||||
</script>
|
||||
|
||||
<Popover {anchor} {align} bind:this={popover}>
|
||||
<div class="container">
|
||||
<div class="bindings">
|
||||
<Label large>Available bindings</Label>
|
||||
<div class="bindings__wrapper">
|
||||
<div class="bindings__list">
|
||||
{#each categories as [categoryName, bindings]}
|
||||
<Label small>{categoryName}</Label>
|
||||
{#each bindings as binding}
|
||||
<div class="binding" on:click={() => onClickBinding(binding)}>
|
||||
<span class="binding__label">{binding.label}</span>
|
||||
<span class="binding__type">{binding.type}</span>
|
||||
<br />
|
||||
<div class="binding__description">{binding.description}</div>
|
||||
</div>
|
||||
{/each}
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="editor">
|
||||
<Label large>Data binding</Label>
|
||||
<Body small>
|
||||
Binding connects one piece of data to another and makes it dynamic.
|
||||
Click the objects on the left to add them to the textbox.
|
||||
</Body>
|
||||
<TextArea thin bind:value placeholder="..." />
|
||||
<div class="controls">
|
||||
<a href="#">
|
||||
<Body small color="light">Learn more about binding</Body>
|
||||
</a>
|
||||
<Button on:click={popover.hide} primary>Done</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Popover>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
display: grid;
|
||||
grid-template-columns: 280px 1fr;
|
||||
width: 800px;
|
||||
}
|
||||
|
||||
.bindings {
|
||||
border-right: 1px solid var(--grey-4);
|
||||
flex: 0 0 240px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: stretch;
|
||||
padding-right: var(--spacing-l);
|
||||
}
|
||||
.bindings :global(label) {
|
||||
margin: var(--spacing-m) 0;
|
||||
}
|
||||
.bindings :global(label:first-child) {
|
||||
margin-top: 0;
|
||||
}
|
||||
.bindings__wrapper {
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
.bindings__list {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.binding {
|
||||
font-size: 12px;
|
||||
padding: var(--spacing-s);
|
||||
border-radius: var(--border-radius-m);
|
||||
}
|
||||
.binding:hover {
|
||||
background-color: var(--grey-2);
|
||||
cursor: pointer;
|
||||
}
|
||||
.binding__label {
|
||||
font-weight: 500;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
.binding__description {
|
||||
color: var(--grey-8);
|
||||
margin-top: 2px;
|
||||
}
|
||||
.binding__type {
|
||||
font-family: monospace;
|
||||
background-color: var(--grey-2);
|
||||
border-radius: var(--border-radius-m);
|
||||
padding: 2px;
|
||||
margin-left: 2px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.editor {
|
||||
padding-left: var(--spacing-l);
|
||||
}
|
||||
.editor :global(textarea) {
|
||||
min-height: 60px;
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
grid-gap: var(--spacing-l);
|
||||
align-items: center;
|
||||
margin-top: var(--spacing-m);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -2,9 +2,37 @@
|
|||
import ModelSelector from "./ParamInputs/ModelSelector.svelte"
|
||||
import RecordSelector from "./ParamInputs/RecordSelector.svelte"
|
||||
import { Input, TextArea, Select, Label } from "@budibase/bbui"
|
||||
import { workflowStore } from "builderStore"
|
||||
import BindableInput from "../../userInterface/BindableInput.svelte"
|
||||
|
||||
export let block
|
||||
$: inputs = Object.entries(block.schema?.inputs?.properties || {})
|
||||
$: availableBindings = getAvailableBindings(
|
||||
block,
|
||||
$workflowStore.selectedWorkflow?.workflow?.definition
|
||||
)
|
||||
|
||||
function getAvailableBindings(block, workflow) {
|
||||
if (!block || !workflow) {
|
||||
return []
|
||||
}
|
||||
const allSteps = [workflow.trigger, ...workflow.steps]
|
||||
const blockIdx = allSteps.findIndex(step => step.id === block.id)
|
||||
let bindings = []
|
||||
for (let idx = 0; idx < blockIdx; idx++) {
|
||||
const outputs = Object.entries(allSteps[idx].schema?.outputs?.properties)
|
||||
bindings = bindings.concat(
|
||||
outputs.map(([name, value]) => ({
|
||||
label: name,
|
||||
type: value.type,
|
||||
description: value.description,
|
||||
category: idx === 0 ? "Trigger outputs" : `Step ${idx} outputs`,
|
||||
path: idx === 0 ? `trigger.${name}` : `blocks.${idx}.${name}`,
|
||||
}))
|
||||
)
|
||||
}
|
||||
return bindings
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="container">
|
||||
|
|
@ -12,7 +40,7 @@
|
|||
{#each inputs as [key, value]}
|
||||
<div class="bb-margin-xl block-field">
|
||||
<div class="field-label">{value.title}</div>
|
||||
{#if value.type === 'string' && value.enum?.length}
|
||||
{#if value.type === 'string' && value.enum}
|
||||
<Select bind:value={block.inputs[key]} thin secondary>
|
||||
<option value="">Choose an option</option>
|
||||
{#each value.enum as option}
|
||||
|
|
@ -30,7 +58,11 @@
|
|||
{:else if value.customType === 'record'}
|
||||
<RecordSelector bind:value={block.inputs[key]} />
|
||||
{:else if value.type === 'string'}
|
||||
<Input type="text" thin bind:value={block.inputs[key]} />
|
||||
<BindableInput
|
||||
type="text"
|
||||
thin
|
||||
bind:value={block.inputs[key]}
|
||||
bindings={availableBindings} />
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
|
|
|
|||
Loading…
Reference in New Issue