forked from tsai/budibase
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