2021-01-09 06:25:06 +13:00
|
|
|
<script>
|
2023-06-29 02:59:04 +12:00
|
|
|
import { Select, Label, Input, Checkbox, Icon, Body } from "@budibase/bbui"
|
2021-01-09 06:25:06 +13:00
|
|
|
import { automationStore } from "builderStore"
|
2023-06-29 02:05:46 +12:00
|
|
|
import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
|
2023-05-25 01:56:37 +12:00
|
|
|
import { TriggerStepID, ActionStepID } from "constants/backend/automations"
|
2021-01-09 06:25:06 +13:00
|
|
|
|
2021-08-04 20:48:23 +12:00
|
|
|
export let parameters = {}
|
|
|
|
export let bindings = []
|
|
|
|
|
2021-01-16 02:11:51 +13:00
|
|
|
const AUTOMATION_STATUS = {
|
|
|
|
NEW: "new",
|
2021-01-16 02:42:55 +13:00
|
|
|
EXISTING: "existing",
|
2021-01-16 02:11:51 +13:00
|
|
|
}
|
2021-01-16 02:42:55 +13:00
|
|
|
let automationStatus = parameters.automationId
|
|
|
|
? AUTOMATION_STATUS.EXISTING
|
|
|
|
: AUTOMATION_STATUS.NEW
|
2023-05-09 23:10:20 +12:00
|
|
|
$: {
|
|
|
|
if (automationStatus === AUTOMATION_STATUS.NEW) {
|
2023-05-27 00:18:08 +12:00
|
|
|
parameters.synchronous = false
|
2023-05-13 02:56:24 +12:00
|
|
|
}
|
2023-05-27 00:18:08 +12:00
|
|
|
parameters.synchronous = automations.find(
|
|
|
|
automation => automation._id === parameters.automationId
|
|
|
|
)?.synchronous
|
2023-06-29 02:05:46 +12:00
|
|
|
parameters
|
2023-05-09 23:10:20 +12:00
|
|
|
}
|
2021-01-09 06:25:06 +13:00
|
|
|
$: automations = $automationStore.automations
|
2022-07-16 04:13:45 +12:00
|
|
|
.filter(a => a.definition.trigger?.stepId === TriggerStepID.APP)
|
2021-05-04 22:32:22 +12:00
|
|
|
.map(automation => {
|
2021-01-13 04:21:27 +13:00
|
|
|
const schema = Object.entries(
|
2022-04-08 03:02:08 +12:00
|
|
|
automation.definition.trigger.inputs.fields || {}
|
2021-01-13 04:21:27 +13:00
|
|
|
).map(([name, type]) => ({ name, type }))
|
|
|
|
|
2023-05-09 23:10:20 +12:00
|
|
|
let hasCollectBlock = automation.definition.steps.some(
|
2023-05-25 01:56:37 +12:00
|
|
|
step => step.stepId === ActionStepID.COLLECT
|
2023-05-09 23:10:20 +12:00
|
|
|
)
|
|
|
|
|
2021-01-13 04:21:27 +13:00
|
|
|
return {
|
|
|
|
name: automation.name,
|
|
|
|
_id: automation._id,
|
|
|
|
schema,
|
2023-05-09 23:10:20 +12:00
|
|
|
synchronous: hasCollectBlock,
|
2021-01-13 04:21:27 +13:00
|
|
|
}
|
|
|
|
})
|
2023-06-29 02:05:46 +12:00
|
|
|
|
2021-02-19 06:44:56 +13:00
|
|
|
$: selectedAutomation = automations?.find(
|
2021-05-04 22:32:22 +12:00
|
|
|
a => a._id === parameters?.automationId
|
2021-02-19 06:44:56 +13:00
|
|
|
)
|
|
|
|
$: selectedSchema = selectedAutomation?.schema
|
2023-05-16 01:49:05 +12:00
|
|
|
$: error = parameters.timeout > 120 ? "Timeout must be less than 120s" : null
|
|
|
|
|
2023-06-29 02:05:46 +12:00
|
|
|
const onFieldsChanged = field => {
|
|
|
|
parameters.fields = { ...parameters.fields, ...field }
|
2021-01-13 04:21:27 +13:00
|
|
|
}
|
2023-05-09 23:10:20 +12:00
|
|
|
|
|
|
|
const onChange = value => {
|
|
|
|
let automationId = value.detail
|
2023-05-27 00:18:08 +12:00
|
|
|
parameters.synchronous = automations.find(
|
2023-05-09 23:10:20 +12:00
|
|
|
automation => automation._id === automationId
|
2023-05-27 00:18:08 +12:00
|
|
|
)?.synchronous
|
2023-05-09 23:10:20 +12:00
|
|
|
parameters.automationId = automationId
|
|
|
|
}
|
2021-01-09 06:25:06 +13:00
|
|
|
</script>
|
|
|
|
|
|
|
|
<div class="root">
|
2023-06-29 03:35:40 +12:00
|
|
|
<div class="fields">
|
|
|
|
<div class:title-padding={parameters.synchronous}>
|
|
|
|
<Label small>Automation</Label>
|
|
|
|
</div>
|
2023-06-29 02:05:46 +12:00
|
|
|
<div style="width: 100%">
|
2021-02-19 06:44:56 +13:00
|
|
|
<Select
|
2023-05-09 23:10:20 +12:00
|
|
|
on:change={onChange}
|
2021-02-19 06:44:56 +13:00
|
|
|
bind:value={parameters.automationId}
|
2021-04-20 01:40:51 +12:00
|
|
|
placeholder="Choose automation"
|
|
|
|
options={automations}
|
2021-05-04 22:32:22 +12:00
|
|
|
getOptionLabel={x => x.name}
|
|
|
|
getOptionValue={x => x._id}
|
2021-05-04 22:04:42 +12:00
|
|
|
/>
|
2023-06-29 03:35:40 +12:00
|
|
|
{#if parameters.synchronous}
|
|
|
|
<div class="synchronous-info">
|
|
|
|
<Icon size="XS" name="Info" />
|
|
|
|
<Body size="XS">This automation will run synchronously</Body>
|
|
|
|
</div>
|
|
|
|
{/if}
|
2023-06-29 02:05:46 +12:00
|
|
|
</div>
|
|
|
|
</div>
|
2023-06-29 03:35:40 +12:00
|
|
|
{#if parameters.synchronous}
|
|
|
|
<div class="fields">
|
2023-06-29 02:05:46 +12:00
|
|
|
<Label small>Timeout</Label>
|
2023-05-13 02:56:24 +12:00
|
|
|
<div class="timeout-width">
|
2023-06-29 02:05:46 +12:00
|
|
|
<Input type="number" {error} bind:value={parameters.timeout} />
|
2023-05-13 02:56:24 +12:00
|
|
|
</div>
|
2023-06-29 03:35:40 +12:00
|
|
|
</div>
|
|
|
|
{/if}
|
2023-06-29 02:05:46 +12:00
|
|
|
<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}
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="param-margin">
|
2021-06-21 20:58:24 +12:00
|
|
|
<Label small />
|
2022-11-14 06:25:48 +13:00
|
|
|
<Checkbox
|
|
|
|
text="Do not display default notification"
|
|
|
|
bind:value={parameters.notificationOverride}
|
|
|
|
/>
|
2021-06-21 20:58:24 +12:00
|
|
|
<Checkbox text="Require confirmation" bind:value={parameters.confirm} />
|
|
|
|
|
|
|
|
{#if parameters.confirm}
|
|
|
|
<Label small>Confirm text</Label>
|
|
|
|
<Input
|
|
|
|
placeholder="Are you sure you want to trigger this automation?"
|
|
|
|
bind:value={parameters.confirmText}
|
|
|
|
/>
|
|
|
|
{/if}
|
|
|
|
</div>
|
2021-01-09 06:25:06 +13:00
|
|
|
</div>
|
|
|
|
|
|
|
|
<style>
|
2021-03-20 03:26:37 +13:00
|
|
|
.root {
|
|
|
|
max-width: 800px;
|
|
|
|
margin: 0 auto;
|
|
|
|
}
|
2023-05-13 02:56:24 +12:00
|
|
|
.timeout-width {
|
|
|
|
width: 30%;
|
|
|
|
}
|
2021-03-20 03:26:37 +13:00
|
|
|
|
2023-06-29 02:05:46 +12:00
|
|
|
.param-margin {
|
|
|
|
margin-top: var(--spacing-l);
|
|
|
|
}
|
|
|
|
|
2023-06-29 03:35:40 +12:00
|
|
|
.title-padding {
|
|
|
|
padding-bottom: 20px;
|
|
|
|
}
|
|
|
|
|
2023-05-09 23:10:20 +12:00
|
|
|
.synchronous-info {
|
|
|
|
display: flex;
|
|
|
|
gap: var(--spacing-s);
|
2023-06-29 03:35:40 +12:00
|
|
|
margin-top: var(--spacing-s);
|
2023-05-09 23:10:20 +12:00
|
|
|
}
|
|
|
|
|
2021-06-21 20:58:24 +12:00
|
|
|
.fields {
|
|
|
|
margin-top: var(--spacing-l);
|
|
|
|
display: grid;
|
|
|
|
column-gap: var(--spacing-l);
|
|
|
|
row-gap: var(--spacing-s);
|
2023-06-29 03:35:40 +12:00
|
|
|
grid-template-columns: 15% auto auto;
|
2021-06-21 20:58:24 +12:00
|
|
|
align-items: center;
|
2021-01-13 04:21:27 +13:00
|
|
|
}
|
2021-01-09 06:25:06 +13:00
|
|
|
</style>
|