Add triggers to setup modal
This commit is contained in:
Peter Clement
parent
4869ecbf3a
commit
fd4c1c9929
|
|
@ -4,6 +4,7 @@
|
|||
import { Icon, Modal, Tabs, Tab } from "@budibase/bbui"
|
||||
|
||||
export let modal
|
||||
export let webhookModal
|
||||
</script>
|
||||
|
||||
<div class="title">
|
||||
|
|
@ -12,7 +13,7 @@
|
|||
<div class="tab-content-padding">
|
||||
<AutomationList />
|
||||
<Modal bind:this={modal}>
|
||||
<CreateAutomationModal />
|
||||
<CreateAutomationModal {webhookModal} />
|
||||
</Modal>
|
||||
</div>
|
||||
</Tab>
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
||||
<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)}
|
||||
>
|
||||
<Icon name="InfoOutline" />
|
||||
<span>Learn about automations</span>
|
||||
</a>
|
||||
<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);
|
||||
}
|
||||
a span {
|
||||
text-decoration: underline;
|
||||
margin-left: var(--spectrum-alias-item-padding-s);
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.integration:hover,
|
||||
.selected {
|
||||
background: var(--spectrum-alias-background-color-tertiary);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -4,14 +4,16 @@
|
|||
import AutomationPanel from "components/automation/AutomationPanel/AutomationPanel.svelte"
|
||||
import SetupPanel from "components/automation/SetupPanel/SetupPanel.svelte"
|
||||
import CreateAutomationModal from "components/automation/AutomationPanel/CreateAutomationModal.svelte"
|
||||
import CreateWebhookModal from "components/automation/shared/CreateWebhookModal.svelte"
|
||||
$: automation = $automationStore.selectedAutomation?.automation
|
||||
let modal
|
||||
let webhookModal
|
||||
</script>
|
||||
|
||||
<!-- routify:options index=3 -->
|
||||
<div class="root">
|
||||
<div class="nav">
|
||||
<AutomationPanel modal />
|
||||
<AutomationPanel {modal} {webhookModal} />
|
||||
</div>
|
||||
<div class="content">
|
||||
{#if automation}
|
||||
|
|
@ -44,7 +46,10 @@
|
|||
</div>
|
||||
{/if}
|
||||
<Modal bind:this={modal}>
|
||||
<CreateAutomationModal />
|
||||
<CreateAutomationModal webhookModal />
|
||||
</Modal>
|
||||
<Modal bind:this={webhookModal} width="30%">
|
||||
<CreateWebhookModal />
|
||||
</Modal>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue