149 lines
3.5 KiB
Svelte
149 lines
3.5 KiB
Svelte
<script>
|
|
import { automationStore } from "builderStore"
|
|
|
|
import FlowItem from "./FlowItem.svelte"
|
|
import TestDataModal from "./TestDataModal.svelte"
|
|
|
|
import { flip } from "svelte/animate"
|
|
import { fade, fly } from "svelte/transition"
|
|
import {
|
|
Detail,
|
|
Icon,
|
|
ActionButton,
|
|
notifications,
|
|
Modal,
|
|
} from "@budibase/bbui"
|
|
import { database } from "stores/backend"
|
|
|
|
export let automation
|
|
export let onSelect
|
|
let testDataModal
|
|
let blocks
|
|
$: instanceId = $database._id
|
|
|
|
$: {
|
|
blocks = []
|
|
if (automation) {
|
|
if (automation.definition.trigger) {
|
|
blocks.push(automation.definition.trigger)
|
|
}
|
|
blocks = blocks.concat(automation.definition.steps || [])
|
|
}
|
|
}
|
|
|
|
async function deleteAutomation() {
|
|
await automationStore.actions.delete({
|
|
instanceId,
|
|
automation: $automationStore.selectedAutomation?.automation,
|
|
})
|
|
}
|
|
|
|
async function testAutomation() {
|
|
const result = await automationStore.actions.trigger({
|
|
automation: $automationStore.selectedAutomation.automation,
|
|
})
|
|
if (result.status === 200) {
|
|
notifications.success(
|
|
`Automation ${$automationStore.selectedAutomation.automation.name} triggered successfully.`
|
|
)
|
|
} else {
|
|
notifications.error(
|
|
`Failed to trigger automation ${$automationStore.selectedAutomation.automation.name}.`
|
|
)
|
|
}
|
|
return result
|
|
}
|
|
</script>
|
|
|
|
<div class="canvas">
|
|
<div class="content">
|
|
<div class="title">
|
|
<div class="subtitle">
|
|
<Detail size="L">{automation.name}</Detail>
|
|
<div
|
|
style="display:flex;
|
|
color: var(--spectrum-global-color-gray-400);"
|
|
>
|
|
<span on:click={() => deleteAutomation()} class="iconPadding">
|
|
<Icon name="DeleteOutline" />
|
|
</span>
|
|
<ActionButton
|
|
on:click={() => {
|
|
testDataModal.show()
|
|
}}
|
|
icon="MultipleCheck"
|
|
size="S">Run test</ActionButton
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{#each blocks as block, idx (block.id)}
|
|
<div
|
|
class="block"
|
|
animate:flip={{ duration: 800 }}
|
|
in:fade|local
|
|
out:fly|local={{ x: 500 }}
|
|
>
|
|
<FlowItem {testDataModal} {testAutomation} {onSelect} {block} />
|
|
{#if idx !== blocks.length - 1}
|
|
<div class="separator" />
|
|
<Icon name="AddCircle" size="S" />
|
|
<div class="separator" />
|
|
{/if}
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
<Modal bind:this={testDataModal} width="30%">
|
|
<TestDataModal {testAutomation} />
|
|
</Modal>
|
|
</div>
|
|
|
|
<style>
|
|
.separator {
|
|
width: 1px;
|
|
height: 25px;
|
|
border-left: 1px dashed var(--grey-4);
|
|
color: var(--grey-4);
|
|
/* center horizontally */
|
|
align-self: center;
|
|
}
|
|
.canvas {
|
|
margin: 0 -40px calc(-1 * var(--spacing-l)) -40px;
|
|
overflow-y: auto;
|
|
text-align: center;
|
|
height: 100%;
|
|
}
|
|
/* Fix for firefox not respecting bottom padding in scrolling containers */
|
|
.canvas > *:last-child {
|
|
padding-bottom: 40px;
|
|
}
|
|
|
|
.block {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
}
|
|
|
|
.content {
|
|
display: inline-block;
|
|
text-align: left;
|
|
}
|
|
|
|
.title {
|
|
padding-bottom: var(--spacing-xl);
|
|
}
|
|
|
|
.subtitle {
|
|
padding-bottom: var(--spacing-xl);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.iconPadding {
|
|
cursor: pointer;
|
|
display: flex;
|
|
padding-right: var(--spacing-m);
|
|
}
|
|
</style>
|