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-31 14:30:18 +02:00
|
|
|
export let testResult
|
|
|
|
|
export let isTrigger
|
2022-05-09 17:50:43 +02:00
|
|
|
|
2022-05-31 14:30:18 +02:00
|
|
|
$: {
|
|
|
|
|
if (!testResult) {
|
|
|
|
|
testResult =
|
|
|
|
|
$automationStore.selectedAutomation?.testResults?.steps.filter(step =>
|
|
|
|
|
block.id ? step.id === block.id : step.stepId === block.stepId
|
|
|
|
|
)[0]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
$: isTrigger = isTrigger || block.type === "TRIGGER"
|
2022-06-28 18:02:24 +02:00
|
|
|
$: status = updateStatus(testResult, isTrigger)
|
2022-05-09 17:50:43 +02:00
|
|
|
|
|
|
|
|
async function onSelect(block) {
|
|
|
|
|
await automationStore.update(state => {
|
|
|
|
|
state.selectedBlock = block
|
|
|
|
|
return state
|
|
|
|
|
})
|
|
|
|
|
}
|
2022-06-28 18:02:24 +02:00
|
|
|
|
|
|
|
|
function updateStatus(results, isTrigger) {
|
|
|
|
|
if (results.outputs?.status?.toLowerCase() === "stopped") {
|
|
|
|
|
return { yellow: true, message: "Stopped" }
|
|
|
|
|
} else if (results.outputs?.success || isTrigger) {
|
|
|
|
|
return { positive: true, message: "Success" }
|
|
|
|
|
} else {
|
|
|
|
|
return { negative: true, message: "Error" }
|
|
|
|
|
}
|
|
|
|
|
}
|
2022-05-09 17:50:43 +02:00
|
|
|
</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">
|
2022-05-31 14:30:18 +02:00
|
|
|
{#if showTestStatus && testResult}
|
2022-05-23 15:11:37 +02:00
|
|
|
<div style="float: right;">
|
2022-05-09 17:50:43 +02:00
|
|
|
<StatusLight
|
2022-06-28 18:02:24 +02:00
|
|
|
positive={status?.positive}
|
|
|
|
|
yellow={status?.yellow}
|
|
|
|
|
negative={status?.negative}
|
|
|
|
|
><Body size="XS">{status?.message}</Body></StatusLight
|
2022-05-09 17:50:43 +02:00
|
|
|
>
|
|
|
|
|
</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>
|
