2022-05-09 17:50:43 +02:00
|
|
|
<script>
|
|
|
|
|
import { automationStore } from "builderStore"
|
2022-05-23 15:11:37 +02:00
|
|
|
import { Icon, Body, Detail, StatusLight } from "@budibase/bbui"
|
2022-05-09 17:50:43 +02:00
|
|
|
import { externalActions } from "./ExternalActions"
|
|
|
|
|
|
|
|
|
|
export let block
|
|
|
|
|
export let blockComplete
|
|
|
|
|
export let showTestStatus = false
|
2022-05-10 16:15:34 +02:00
|
|
|
export let showParameters = {}
|
2022-05-09 17:50:43 +02:00
|
|
|
|
|
|
|
|
$: testResult =
|
|
|
|
|
$automationStore.selectedAutomation?.testResults?.steps.filter(step =>
|
|
|
|
|
block.id ? step.id === block.id : step.stepId === block.stepId
|
|
|
|
|
)
|
|
|
|
|
$: isTrigger = block.type === "TRIGGER"
|
|
|
|
|
|
|
|
|
|
async function onSelect(block) {
|
|
|
|
|
await automationStore.update(state => {
|
|
|
|
|
state.selectedBlock = block
|
|
|
|
|
return state
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<div class="blockSection">
|
|
|
|
|
<div
|
|
|
|
|
on:click={() => {
|
|
|
|
|
blockComplete = !blockComplete
|
2022-05-10 11:51:48 +02:00
|
|
|
showParameters[block.id] = blockComplete
|
2022-05-09 17:50:43 +02:00
|
|
|
}}
|
|
|
|
|
class="splitHeader"
|
|
|
|
|
>
|
|
|
|
|
<div class="center-items">
|
|
|
|
|
{#if externalActions[block.stepId]}
|
|
|
|
|
<img
|
|
|
|
|
alt={externalActions[block.stepId].name}
|
|
|
|
|
width="28px"
|
|
|
|
|
height="28px"
|
|
|
|
|
src={externalActions[block.stepId].icon}
|
|
|
|
|
/>
|
|
|
|
|
{:else}
|
|
|
|
|
<svg
|
|
|
|
|
width="28px"
|
|
|
|
|
height="28px"
|
|
|
|
|
class="spectrum-Icon"
|
|
|
|
|
style="color:grey;"
|
|
|
|
|
focusable="false"
|
|
|
|
|
>
|
|
|
|
|
<use xlink:href="#spectrum-icon-18-{block.icon}" />
|
|
|
|
|
</svg>
|
|
|
|
|
{/if}
|
|
|
|
|
<div class="iconAlign">
|
|
|
|
|
{#if isTrigger}
|
|
|
|
|
<Body size="XS">When this happens:</Body>
|
|
|
|
|
{:else}
|
|
|
|
|
<Body size="XS">Do this:</Body>
|
|
|
|
|
{/if}
|
|
|
|
|
|
|
|
|
|
<Detail size="S">{block?.name?.toUpperCase() || ""}</Detail>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="blockTitle">
|
|
|
|
|
{#if showTestStatus && testResult && testResult[0]}
|
2022-05-23 15:11:37 +02:00
|
|
|
<div style="float: right;">
|
2022-05-09 17:50:43 +02:00
|
|
|
<StatusLight
|
|
|
|
|
positive={isTrigger || testResult[0].outputs?.success}
|
|
|
|
|
negative={!testResult[0].outputs?.success}
|
|
|
|
|
><Body size="XS"
|
|
|
|
|
>{testResult[0].outputs?.success || isTrigger
|
|
|
|
|
? "Success"
|
|
|
|
|
: "Error"}</Body
|
|
|
|
|
></StatusLight
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
{/if}
|
|
|
|
|
<div
|
2022-05-09 18:02:24 +02:00
|
|
|
style="margin-left: 10px; margin-bottom: var(--spacing-xs);"
|
2022-05-09 17:50:43 +02:00
|
|
|
on:click={() => {
|
|
|
|
|
onSelect(block)
|
|
|
|
|
}}
|
|
|
|
|
>
|
2022-05-20 15:20:53 +02:00
|
|
|
<Icon name={blockComplete ? "ChevronUp" : "ChevronDown"} />
|
2022-05-09 17:50:43 +02:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
.center-items {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
.splitHeader {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
.iconAlign {
|
|
|
|
|
padding: 0 0 0 var(--spacing-m);
|
|
|
|
|
display: inline-block;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.blockSection {
|
|
|
|
|
padding: var(--spacing-xl);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.blockTitle {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
