mirror of https://github.com/Budibase/budibase.git
Peter Clement
5 years ago
15 changed files with 31 additions and 239 deletions
@ -1,114 +0,0 @@ |
|||
<script> |
|||
import { sortBy } from "lodash/fp" |
|||
import { automationStore } from "builderStore" |
|||
import { ActionButton, Popover, Modal } from "@budibase/bbui" |
|||
import { DropdownContainer, DropdownItem } from "components/common/Dropdowns" |
|||
import CreateWebhookModal from "../Shared/CreateWebhookModal.svelte" |
|||
|
|||
$: hasTrigger = $automationStore.selectedAutomation.hasTrigger() |
|||
$: tabs = [ |
|||
{ |
|||
label: "Trigger", |
|||
value: "TRIGGER", |
|||
icon: "Algorithm", |
|||
disabled: hasTrigger, |
|||
}, |
|||
{ |
|||
label: "Internal", |
|||
value: "ACTION", |
|||
internal: true, |
|||
icon: "Actions", |
|||
disabled: !hasTrigger, |
|||
}, |
|||
{ |
|||
label: "External", |
|||
value: "ACTION", |
|||
internal: false, |
|||
icon: "Extension", |
|||
disabled: !hasTrigger, |
|||
}, |
|||
] |
|||
|
|||
let selectedIndex |
|||
let anchors = [] |
|||
let popover |
|||
let webhookModal |
|||
$: selectedTab = selectedIndex == null ? null : tabs[selectedIndex].value |
|||
$: selectedInternal = |
|||
selectedIndex == null ? null : tabs[selectedIndex].internal |
|||
$: anchor = selectedIndex === -1 ? null : anchors[selectedIndex] |
|||
$: blocks = sortBy(entry => entry[1].name)( |
|||
Object.entries($automationStore.blockDefinitions[selectedTab] ?? {}) |
|||
).filter( |
|||
entry => selectedInternal == null || entry[1].internal === selectedInternal |
|||
) |
|||
|
|||
function onChangeTab(idx) { |
|||
selectedIndex = idx |
|||
popover.show() |
|||
} |
|||
|
|||
function closePopover() { |
|||
selectedIndex = null |
|||
popover.hide() |
|||
} |
|||
|
|||
function addBlockToAutomation(stepId, blockDefinition) { |
|||
const newBlock = $automationStore.selectedAutomation.constructBlock( |
|||
selectedTab, |
|||
stepId, |
|||
blockDefinition |
|||
) |
|||
automationStore.actions.addBlockToAutomation(newBlock) |
|||
closePopover() |
|||
if (stepId === "WEBHOOK") { |
|||
webhookModal.show() |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<div class="tab-container"> |
|||
{#each tabs as tab, idx} |
|||
<div bind:this={anchors[idx]}> |
|||
<ActionButton |
|||
quiet |
|||
size="S" |
|||
icon={tab.icon} |
|||
disabled={tab.disabled} |
|||
on:click={tab.disabled ? null : () => onChangeTab(idx)} |
|||
> |
|||
{tab.label} |
|||
</ActionButton> |
|||
</div> |
|||
{/each} |
|||
</div> |
|||
<Popover |
|||
on:close={() => (selectedIndex = null)} |
|||
bind:this={popover} |
|||
{anchor} |
|||
align="left" |
|||
> |
|||
<DropdownContainer> |
|||
{#each blocks as [stepId, blockDefinition]} |
|||
<DropdownItem |
|||
icon={blockDefinition.icon} |
|||
title={blockDefinition.name} |
|||
subtitle={blockDefinition.description} |
|||
on:click={() => addBlockToAutomation(stepId, blockDefinition)} |
|||
/> |
|||
{/each} |
|||
</DropdownContainer> |
|||
</Popover> |
|||
<Modal bind:this={webhookModal} width="30%"> |
|||
<CreateWebhookModal /> |
|||
</Modal> |
|||
|
|||
<style> |
|||
.tab-container { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: flex-start; |
|||
align-items: center; |
|||
min-height: 24px; |
|||
} |
|||
</style> |
|||
@ -1,95 +0,0 @@ |
|||
<script> |
|||
import { automationStore } from "builderStore" |
|||
import { database } from "stores/backend" |
|||
import { notifications, Button, Modal, Heading, Toggle } from "@budibase/bbui" |
|||
import AutomationBlockSetup from "./AutomationBlockSetup.svelte" |
|||
import CreateWebookModal from "../Shared/CreateWebhookModal.svelte" |
|||
|
|||
let webhookModal |
|||
|
|||
$: instanceId = $database._id |
|||
$: automation = $automationStore.selectedAutomation?.automation |
|||
$: automationLive = automation?.live |
|||
function setAutomationLive(live) { |
|||
if (automationLive === live) { |
|||
return |
|||
} |
|||
automation.live = live |
|||
automationStore.actions.save({ instanceId, automation }) |
|||
if (live) { |
|||
notifications.info(`Automation ${automation.name} enabled.`) |
|||
} else { |
|||
notifications.error(`Automation ${automation.name} disabled.`) |
|||
} |
|||
} |
|||
|
|||
async function testAutomation() { |
|||
const result = await automationStore.actions.test({ |
|||
automation: $automationStore.selectedAutomation.automation, |
|||
}) |
|||
if (result.status === 200) { |
|||
notifications.success( |
|||
`Automation ${automation.name} triggered successfully.` |
|||
) |
|||
} else { |
|||
notifications.error(`Failed to trigger automation ${automation.name}.`) |
|||
} |
|||
} |
|||
|
|||
async function saveAutomation() { |
|||
await automationStore.actions.save({ |
|||
instanceId, |
|||
automation, |
|||
}) |
|||
notifications.success(`Automation ${automation.name} saved.`) |
|||
} |
|||
</script> |
|||
|
|||
<div class="title"> |
|||
<Heading size="S">Setup</Heading> |
|||
<Toggle |
|||
value={automationLive} |
|||
on:change={() => setAutomationLive(!automationLive)} |
|||
dataCy="activate-automation" |
|||
text="Live" |
|||
/> |
|||
</div> |
|||
{#if $automationStore.selectedBlock} |
|||
<AutomationBlockSetup |
|||
bind:block={$automationStore.selectedBlock} |
|||
{webhookModal} |
|||
/> |
|||
{:else if automation} |
|||
<div class="block-label">{automation.name}</div> |
|||
<Button secondary on:click={testAutomation}>Test Automation</Button> |
|||
{/if} |
|||
<Button |
|||
secondary |
|||
wide |
|||
data-cy="save-automation-setup" |
|||
on:click={saveAutomation} |
|||
> |
|||
Save Automation |
|||
</Button> |
|||
<Modal bind:this={webhookModal} width="30%"> |
|||
<CreateWebookModal /> |
|||
</Modal> |
|||
|
|||
<style> |
|||
.title { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
gap: var(--spacing-xs); |
|||
} |
|||
.title :global(h1) { |
|||
flex: 1 1 auto; |
|||
} |
|||
|
|||
.block-label { |
|||
font-size: var(--spectrum-global-dimension-font-size-75); |
|||
font-weight: 600; |
|||
color: var(--grey-7); |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue