forked from tsai/budibase
Peter Clement
4 years ago
5 changed files with 282 additions and 71 deletions
@ -0,0 +1,117 @@ |
|||
<script> |
|||
import { automationStore } from "builderStore" |
|||
import { Icon, Body, Detail, StatusLight, Modal } from "@budibase/bbui" |
|||
import { externalActions } from "./ExternalActions" |
|||
import ResultsModal from "./ResultsModal.svelte" |
|||
|
|||
export let block |
|||
export let blockComplete |
|||
export let showTestStatus = false |
|||
export let showParameters |
|||
let resultsModal |
|||
|
|||
$: 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 |
|||
showParameters = { complete: !showParameters?.complete, id: block.id } |
|||
}} |
|||
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]} |
|||
<div style="float: right;" on:click={() => resultsModal.show()}> |
|||
<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 |
|||
style="margin-left: 10px;" |
|||
on:click={() => { |
|||
onSelect(block) |
|||
}} |
|||
> |
|||
<Icon name={blockComplete ? "ChevronDown" : "ChevronUp"} /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<Modal bind:this={resultsModal} width="30%"> |
|||
<ResultsModal {isTrigger} {testResult} /> |
|||
</Modal> |
|||
|
|||
<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> |
|||
@ -0,0 +1,137 @@ |
|||
<script> |
|||
import { Icon, Divider, Tabs, Tab, TextArea } from "@budibase/bbui" |
|||
import FlowItemTitle from "./FlowChart/FlowItemTitle.svelte" |
|||
import { automationStore } from "builderStore" |
|||
|
|||
export let automation |
|||
|
|||
let showParameters |
|||
let blocks |
|||
|
|||
$: { |
|||
blocks = [] |
|||
if (automation) { |
|||
if (automation.definition.trigger) { |
|||
blocks.push(automation.definition.trigger) |
|||
} |
|||
blocks = blocks |
|||
.concat(automation.definition.steps || []) |
|||
.filter(x => x.stepId !== "LOOP") |
|||
} |
|||
} |
|||
|
|||
$: testResults = |
|||
$automationStore.selectedAutomation?.testResults?.steps.filter( |
|||
x => x.stepId !== "LOOP" || [] |
|||
) |
|||
</script> |
|||
|
|||
<div class="title"> |
|||
<div class="title-text"> |
|||
<Icon name="MultipleCheck" /> |
|||
<div style="padding-left: var(--spacing-l)">Test Details</div> |
|||
</div> |
|||
<div style="padding-right: var(--spacing-xl)"> |
|||
<Icon |
|||
on:click={async () => { |
|||
$automationStore.selectedAutomation.automation.showTestPanel = false |
|||
await automationStore.actions.save( |
|||
$automationStore.selectedAutomation?.automation |
|||
) |
|||
}} |
|||
hoverable |
|||
name="Close" |
|||
/> |
|||
</div> |
|||
</div> |
|||
|
|||
<Divider /> |
|||
|
|||
<div class="container"> |
|||
{#each blocks as block, idx} |
|||
<div class="block"> |
|||
{#if block.stepId !== "LOOP"} |
|||
<FlowItemTitle showTestStatus={true} bind:showParameters {block} /> |
|||
{#if showParameters?.complete && block?.id === showParameters?.id} |
|||
<Divider noMargin /> |
|||
|
|||
<div class="tabs"> |
|||
<Tabs quiet noPadding selected="Input"> |
|||
<Tab title="Input"> |
|||
<div style="padding: 10px 10px 10px 10px;"> |
|||
<TextArea |
|||
disabled |
|||
value={JSON.stringify(testResults?.[idx]?.inputs, null, 2)} |
|||
/> |
|||
</div></Tab |
|||
> |
|||
<Tab title="Output"> |
|||
<div style="padding: 10px 10px 10px 10px;"> |
|||
<TextArea |
|||
disabled |
|||
value={JSON.stringify(testResults?.[idx]?.outputs, null, 2)} |
|||
/> |
|||
</div> |
|||
</Tab> |
|||
</Tabs> |
|||
</div> |
|||
{/if} |
|||
{/if} |
|||
</div> |
|||
{#if blocks.length - 1 !== idx} |
|||
<div class="separator" /> |
|||
{/if} |
|||
{/each} |
|||
</div> |
|||
|
|||
<style> |
|||
.container { |
|||
padding: 0px 30px 0px 30px; |
|||
} |
|||
.title { |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
gap: var(--spacing-xs); |
|||
padding-left: var(--spacing-xl); |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
.tabs { |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: flex-start; |
|||
align-items: stretch; |
|||
position: relative; |
|||
flex: 1 1 auto; |
|||
} |
|||
|
|||
.title-text { |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
} |
|||
|
|||
.title :global(h1) { |
|||
flex: 1 1 auto; |
|||
} |
|||
|
|||
.block { |
|||
display: inline-block; |
|||
width: 400px; |
|||
font-size: 16px; |
|||
background-color: var(--background); |
|||
border: 1px solid var(--spectrum-global-color-gray-300); |
|||
border-radius: 4px 4px 4px 4px; |
|||
} |
|||
|
|||
.separator { |
|||
width: 1px; |
|||
height: 40px; |
|||
border-left: 1px dashed var(--grey-4); |
|||
color: var(--grey-4); |
|||
/* center horizontally */ |
|||
text-align: center; |
|||
margin-left: 50%; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue