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

Add triggers to setup modal

This commit is contained in:
Peter Clement 2021-09-02 14:25:01 +01:00
parent ca866378d0
commit c70ca7badc
3 changed files with 77 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte
View File

@ -4,6 +4,7 @@
import { Icon, Modal, Tabs, Tab } from "@budibase/bbui" import { Icon, Modal, Tabs, Tab } from "@budibase/bbui"
export let modal export let modal
export let webhookModal
</script> </script>
<div class="title"> <div class="title">
@ -12,7 +13,7 @@
<div class="tab-content-padding"> <div class="tab-content-padding">
<AutomationList /> <AutomationList />
<Modal bind:this={modal}> <Modal bind:this={modal}>
<CreateAutomationModal /> <CreateAutomationModal {webhookModal} />
</Modal> </Modal>
</div> </div>
</Tab> </Tab>

91
packages/builder/src/components/automation/AutomationPanel/CreateAutomationModal.svelte
View File

@ -3,12 +3,14 @@
import { database } from "stores/backend" import { database } from "stores/backend"
import { automationStore } from "builderStore" import { automationStore } from "builderStore"
import { notifications } from "@budibase/bbui" import { notifications } from "@budibase/bbui"
import { Icon, Input, ModalContent } from "@budibase/bbui" import { Input, ModalContent, Layout, Body } from "@budibase/bbui"
import analytics from "analytics" import analytics from "analytics"
let name let name
let selectedTrigger
let triggerVal
export let webhookModal
$: valid = !!name
$: instanceId = $database._id $: instanceId = $database._id
async function createAutomation() { async function createAutomation() {
@ -16,41 +18,84 @@
name, name,
instanceId, 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.`) notifications.success(`Automation ${name} created.`)
$goto(`./${$automationStore.selectedAutomation.automation._id}`) $goto(`./${$automationStore.selectedAutomation.automation._id}`)
analytics.captureEvent("Automation Created", { name }) analytics.captureEvent("Automation Created", { name })
} }
$: triggers = Object.entries($automationStore.blockDefinitions.TRIGGER)
const selectTrigger = trigger => {
triggerVal = trigger
selectedTrigger = trigger.name
}
</script> </script>
<ModalContent <ModalContent
title="Create Automation" title="Create Automation"
confirmText="Create" confirmText="Save"
size="L" size="M"
onConfirm={createAutomation} 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" /> <Input bind:value={name} label="Name" />
<a
slot="footer" <Layout noPadding>
target="_blank" <Body size="S">Triggers</Body>
href="https://docs.budibase.com/automate/introduction-to-automate"
> <div class="integration-list">
<Icon name="InfoOutline" /> {#each triggers as [idx, trigger]}
<span>Learn about automations</span> <div
</a> 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> </ModalContent>
<style> <style>
a { .integration-list {
color: var(--ink); display: grid;
font-size: 14px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
vertical-align: middle; grid-gap: var(--spectrum-alias-grid-baseline);
display: flex;
align-items: center;
text-decoration: none;
} }
a span {
text-decoration: underline; .integration {
margin-left: var(--spectrum-alias-item-padding-s); 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> </style>

9
packages/builder/src/pages/builder/app/[application]/automate/_layout.svelte
View File

@ -4,14 +4,16 @@
import AutomationPanel from "components/automation/AutomationPanel/AutomationPanel.svelte" import AutomationPanel from "components/automation/AutomationPanel/AutomationPanel.svelte"
import SetupPanel from "components/automation/SetupPanel/SetupPanel.svelte" import SetupPanel from "components/automation/SetupPanel/SetupPanel.svelte"
import CreateAutomationModal from "components/automation/AutomationPanel/CreateAutomationModal.svelte" import CreateAutomationModal from "components/automation/AutomationPanel/CreateAutomationModal.svelte"
import CreateWebhookModal from "components/automation/shared/CreateWebhookModal.svelte"
$: automation = $automationStore.selectedAutomation?.automation $: automation = $automationStore.selectedAutomation?.automation
let modal let modal
let webhookModal
</script> </script>
<!-- routify:options index=3 --> <!-- routify:options index=3 -->
<div class="root"> <div class="root">
<div class="nav"> <div class="nav">
<AutomationPanel modal /> <AutomationPanel {modal} {webhookModal} />
</div> </div>
<div class="content"> <div class="content">
{#if automation} {#if automation}
@ -44,7 +46,10 @@
</div> </div>
{/if} {/if}
<Modal bind:this={modal}> <Modal bind:this={modal}>
<CreateAutomationModal /> <CreateAutomationModal webhookModal />
</Modal>
<Modal bind:this={webhookModal} width="30%">
<CreateWebhookModal />
</Modal> </Modal>
</div> </div>