|
|
|
@ -3,12 +3,14 @@ |
|
|
|
import { database } from "stores/backend" |
|
|
|
import { automationStore } from "builderStore" |
|
|
|
import { notifications } from "@budibase/bbui" |
|
|
|
import { Icon, Input, ModalContent } from "@budibase/bbui" |
|
|
|
import { Input, ModalContent, Layout, Body } from "@budibase/bbui" |
|
|
|
import analytics from "analytics" |
|
|
|
|
|
|
|
let name |
|
|
|
let selectedTrigger |
|
|
|
let triggerVal |
|
|
|
export let webhookModal |
|
|
|
|
|
|
|
$: valid = !!name |
|
|
|
$: instanceId = $database._id |
|
|
|
|
|
|
|
async function createAutomation() { |
|
|
|
@ -16,41 +18,84 @@ |
|
|
|
name, |
|
|
|
instanceId, |
|
|
|
}) |
|
|
|
const newBlock = await $automationStore.selectedAutomation.constructBlock( |
|
|
|
"TRIGGER", |
|
|
|
triggerVal.stepId, |
|
|
|
triggerVal |
|
|
|
) |
|
|
|
automationStore.actions.addBlockToAutomation(newBlock) |
|
|
|
if (triggerVal.stepId === "WEBHOOK") { |
|
|
|
webhookModal.show() |
|
|
|
} |
|
|
|
|
|
|
|
notifications.success(`Automation ${name} created.`) |
|
|
|
$goto(`./${$automationStore.selectedAutomation.automation._id}`) |
|
|
|
analytics.captureEvent("Automation Created", { name }) |
|
|
|
} |
|
|
|
$: triggers = Object.entries($automationStore.blockDefinitions.TRIGGER) |
|
|
|
|
|
|
|
const selectTrigger = trigger => { |
|
|
|
triggerVal = trigger |
|
|
|
selectedTrigger = trigger.name |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<ModalContent |
|
|
|
title="Create Automation" |
|
|
|
confirmText="Create" |
|
|
|
size="L" |
|
|
|
confirmText="Save" |
|
|
|
size="M" |
|
|
|
onConfirm={createAutomation} |
|
|
|
disabled={!valid} |
|
|
|
disabled={!selectedTrigger} |
|
|
|
> |
|
|
|
<Body size="XS" |
|
|
|
>Please name your automation, then select a trigger. Every automation must |
|
|
|
start with a trigger. |
|
|
|
</Body> |
|
|
|
<Input bind:value={name} label="Name" /> |
|
|
|
<a |
|
|
|
slot="footer" |
|
|
|
target="_blank" |
|
|
|
href="https://docs.budibase.com/automate/introduction-to-automate" |
|
|
|
> |
|
|
|
<Icon name="InfoOutline" /> |
|
|
|
<span>Learn about automations</span> |
|
|
|
</a> |
|
|
|
|
|
|
|
<Layout noPadding> |
|
|
|
<Body size="S">Triggers</Body> |
|
|
|
|
|
|
|
<div class="integration-list"> |
|
|
|
{#each triggers as [idx, trigger]} |
|
|
|
<div |
|
|
|
class="integration hoverable" |
|
|
|
class:selected={selectedTrigger === trigger.name} |
|
|
|
on:click={() => selectTrigger(trigger)} |
|
|
|
> |
|
|
|
<div style="display: flex; margin-left: 8%"> |
|
|
|
<i class={trigger.icon} /> |
|
|
|
<span style="margin-left:5px;"> |
|
|
|
<Body size="S">{trigger.name}</Body></span |
|
|
|
> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
{/each} |
|
|
|
</div> |
|
|
|
</Layout> |
|
|
|
</ModalContent> |
|
|
|
|
|
|
|
<style> |
|
|
|
a { |
|
|
|
color: var(--ink); |
|
|
|
font-size: 14px; |
|
|
|
vertical-align: middle; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
text-decoration: none; |
|
|
|
.integration-list { |
|
|
|
display: grid; |
|
|
|
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); |
|
|
|
grid-gap: var(--spectrum-alias-grid-baseline); |
|
|
|
} |
|
|
|
|
|
|
|
.integration { |
|
|
|
display: grid; |
|
|
|
grid-gap: var(--spectrum-alias-grid-margin-xsmall); |
|
|
|
padding: var(--spectrum-alias-item-padding-s); |
|
|
|
background: var(--spectrum-alias-background-color-secondary); |
|
|
|
transition: 0.3s all; |
|
|
|
border: solid #3b3d3c; |
|
|
|
border-radius: 5px; |
|
|
|
box-sizing: border-box; |
|
|
|
border-width: 2px; |
|
|
|
} |
|
|
|
a span { |
|
|
|
text-decoration: underline; |
|
|
|
margin-left: var(--spectrum-alias-item-padding-s); |
|
|
|
|
|
|
|
.integration:hover, |
|
|
|
.selected { |
|
|
|
background: var(--spectrum-alias-background-color-tertiary); |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
Peter Clement
5 years ago