MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #11056 from Budibase/features/app-action-automation-ui 

Updated Button Action UI for trigger automation
This commit is contained in:
Peter Clement 2023-06-29 09:22:33 +01:00 committed by GitHub
parent 59ae9f4f98 61853e447f
commit 1bb626b726
1 changed files with 54 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

170
packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/TriggerAutomation.svelte
View File

@ -1,7 +1,7 @@
<script> <script>
import { Select, Label, Input, Checkbox, Icon } from "@budibase/bbui" import { Select, Label, Input, Checkbox, Icon, Body } from "@budibase/bbui"
import { automationStore } from "builderStore" import { automationStore } from "builderStore"
import SaveFields from "./SaveFields.svelte" import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
import { TriggerStepID, ActionStepID } from "constants/backend/automations" import { TriggerStepID, ActionStepID } from "constants/backend/automations"
export let parameters = {} export let parameters = {}
@ -11,11 +11,9 @@
NEW: "new", NEW: "new",
EXISTING: "existing", EXISTING: "existing",
} }
let automationStatus = parameters.automationId let automationStatus = parameters.automationId
? AUTOMATION_STATUS.EXISTING ? AUTOMATION_STATUS.EXISTING
: AUTOMATION_STATUS.NEW : AUTOMATION_STATUS.NEW
$: { $: {
if (automationStatus === AUTOMATION_STATUS.NEW) { if (automationStatus === AUTOMATION_STATUS.NEW) {
parameters.synchronous = false parameters.synchronous = false
@ -23,6 +21,7 @@
parameters.synchronous = automations.find( parameters.synchronous = automations.find(
automation => automation._id === parameters.automationId automation => automation._id === parameters.automationId
)?.synchronous )?.synchronous
parameters
} }
$: automations = $automationStore.automations $: automations = $automationStore.automations
.filter(a => a.definition.trigger?.stepId === TriggerStepID.APP) .filter(a => a.definition.trigger?.stepId === TriggerStepID.APP)
@ -42,35 +41,16 @@
synchronous: hasCollectBlock, synchronous: hasCollectBlock,
} }
}) })
$: hasAutomations = automations && automations.length > 0 $: hasAutomations = automations && automations.length > 0
$: selectedAutomation = automations?.find( $: selectedAutomation = automations?.find(
a => a._id === parameters?.automationId a => a._id === parameters?.automationId
) )
$: selectedSchema = selectedAutomation?.schema $: selectedSchema = selectedAutomation?.schema
$: error = parameters.timeout > 120 ? "Timeout must be less than 120s" : null $: error = parameters.timeout > 120 ? "Timeout must be less than 120s" : null
const onFieldsChanged = e => { const onFieldsChanged = field => {
parameters.fields = Object.entries(e.detail || {}).reduce( parameters.fields = { ...parameters.fields, ...field }
(acc, [key, value]) => {
acc[key.trim()] = value
return acc
},
{}
)
}
const setNew = () => {
automationStatus = AUTOMATION_STATUS.NEW
parameters.automationId = undefined
parameters.fields = {}
}
const setExisting = () => {
automationStatus = AUTOMATION_STATUS.EXISTING
parameters.newAutomationName = ""
parameters.fields = {}
parameters.automationId = automations[0]?._id
} }
const onChange = value => { const onChange = value => {
@ -83,30 +63,11 @@
</script> </script>
<div class="root"> <div class="root">
<div class="radios"> <div class="fields">
<div class="radio-container" on:click={setNew}> <div class:title-padding={parameters.synchronous}>
<input <Label small>Automation</Label>
type="radio"
value={AUTOMATION_STATUS.NEW}
bind:group={automationStatus}
/>
<Label small>Create a new automation</Label>
</div> </div>
<div class="radio-container" on:click={hasAutomations ? setExisting : null}> <div style="width: 100%">
<input
type="radio"
value={AUTOMATION_STATUS.EXISTING}
bind:group={automationStatus}
disabled={!hasAutomations}
/>
<Label small grey={!hasAutomations}>Use an existing automation</Label>
</div>
</div>
<div class="params">
<Label small>Automation</Label>
{#if automationStatus === AUTOMATION_STATUS.EXISTING}
<Select <Select
on:change={onChange} on:change={onChange}
bind:value={parameters.automationId} bind:value={parameters.automationId}
@ -115,42 +76,46 @@
getOptionLabel={x => x.name} getOptionLabel={x => x.name}
getOptionValue={x => x._id} getOptionValue={x => x._id}
/> />
{:else} {#if parameters.synchronous}
<Input <div class="synchronous-info">
bind:value={parameters.newAutomationName} <Icon size="XS" name="Info" />
placeholder="Enter automation name" <Body size="XS">This automation will run synchronously</Body>
/>
{/if}
{#if parameters.synchronous}
<Label small />
<div class="synchronous-info">
<Icon name="Info" />
<div>
<i
>This automation will run synchronously as it contains a Collect
step</i
>
</div> </div>
</div> {/if}
<Label small /> </div>
</div>
{#if parameters.synchronous}
<div class="fields">
<Label small>Timeout</Label>
<div class="timeout-width"> <div class="timeout-width">
<Input <Input type="number" {error} bind:value={parameters.timeout} />
label="Timeout in seconds (120 max)"
type="number"
{error}
bind:value={parameters.timeout}
/>
</div> </div>
</div>
{/if}
<div class="fields">
{#if selectedSchema && selectedSchema.length}
{#each selectedSchema as field, idx}
{#if idx === 0}
<Label small>Fields</Label>
{:else}
<Label small />
{/if}
<Input disabled value={field.name} />
<DrawerBindableInput
value={parameters.fields && parameters.fields[field.name]}
{bindings}
on:change={event => onFieldsChanged({ [field.name]: event.detail })}
/>
{/each}
{/if} {/if}
</div>
<div class="param-margin">
<Label small /> <Label small />
<Checkbox <Checkbox
text="Do not display default notification" text="Do not display default notification"
bind:value={parameters.notificationOverride} bind:value={parameters.notificationOverride}
/> />
<br />
<Checkbox text="Require confirmation" bind:value={parameters.confirm} /> <Checkbox text="Require confirmation" bind:value={parameters.confirm} />
{#if parameters.confirm} {#if parameters.confirm}
@ -161,18 +126,6 @@
/> />
{/if} {/if}
</div> </div>
<div class="fields">
{#key parameters.automationId}
<SaveFields
schemaFields={selectedSchema}
parameterFields={parameters.fields}
fieldLabel="Field"
on:change={onFieldsChanged}
{bindings}
/>
{/key}
</div>
</div> </div>
<style> <style>
@ -184,17 +137,24 @@
width: 30%; width: 30%;
} }
.param-margin {
margin-top: var(--spacing-l);
}
.title-padding {
padding-bottom: 20px;
}
.params { .params {
display: grid; display: flex;
column-gap: var(--spacing-l); flex-wrap: nowrap;
row-gap: var(--spacing-s); gap: 25px;
grid-template-columns: 60px 1fr;
align-items: center;
} }
.synchronous-info { .synchronous-info {
display: flex; display: flex;
gap: var(--spacing-s); gap: var(--spacing-s);
margin-top: var(--spacing-s);
} }
.fields { .fields {
@ -202,29 +162,7 @@
display: grid; display: grid;
column-gap: var(--spacing-l); column-gap: var(--spacing-l);
row-gap: var(--spacing-s); row-gap: var(--spacing-s);
grid-template-columns: 60px 1fr auto 1fr auto; grid-template-columns: 15% auto auto;
align-items: center; align-items: center;
} }
.radios,
.radio-container {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
.radios {
gap: var(--spacing-m);
margin-bottom: var(--spacing-l);
}
.radio-container {
gap: var(--spacing-m);
}
.radio-container :global(label) {
margin: 0;
}
input[type="radio"]:checked {
background: var(--blue);
}
</style> </style>