Require required schema fields before saving

This commit is contained in:
Peter Clement 2021-09-13 15:50:46 +01:00
parent e6e40f1225
commit d0b3db07a6
8 changed files with 57 additions and 40 deletions

View File

@ -94,7 +94,6 @@ const automationActions = store => ({
addTestDataToAutomation: data => { addTestDataToAutomation: data => {
store.update(state => { store.update(state => {
state.selectedAutomation.addTestData(data) state.selectedAutomation.addTestData(data)
console.log(state)
return state return state
}) })
}, },

View File

@ -0,0 +1,14 @@
import DiscordLogo from "assets/discord.svg"
import ZapierLogo from "assets/zapier.png"
import IntegromatLogo from "assets/integromat.png"
import SlackLogo from "assets/slack.svg"
import n8nlogo from "assets/n8nlogo.png"
export const externalActions = {
zapier: { name: "zapier", icon: ZapierLogo },
discord: { name: "discord", icon: DiscordLogo },
slack: { name: "slack", icon: SlackLogo },
integromat: { name: "integromat", icon: IntegromatLogo },
n8n:{ name: "n8n", icon: n8nlogo },
}

View File

@ -15,6 +15,7 @@
import ResultsModal from "./ResultsModal.svelte" import ResultsModal from "./ResultsModal.svelte"
import ActionModal from "./ActionModal.svelte" import ActionModal from "./ActionModal.svelte"
import { database } from "stores/backend" import { database } from "stores/backend"
import { externalActions } from "./ExternalActions"
export let onSelect export let onSelect
export let block export let block
@ -70,15 +71,24 @@
class="splitHeader" class="splitHeader"
> >
<div style="display: flex;"> <div style="display: flex;">
<svg {#if externalActions[block.stepId]}
width="35px" <img
height="35px" alt={externalActions[block.stepId].name}
class="spectrum-Icon" width="35px"
style="color:grey;" height="35px"
focusable="false" src={externalActions[block.stepId].icon}
> />
<use xlink:href="#spectrum-icon-18-{block.icon}" /> {:else}
</svg> <svg
width="35px"
height="35px"
class="spectrum-Icon"
style="color:grey;"
focusable="false"
>
<use xlink:href="#spectrum-icon-18-{block.icon}" />
</svg>
{/if}
<div class="iconAlign"> <div class="iconAlign">
<Body size="XS">When this happens:</Body> <Body size="XS">When this happens:</Body>

View File

@ -16,9 +16,7 @@
} }
// get the outputs so we can define the fields // get the outputs so we can define the fields
let schemaProperties = Object.entries( let schemaProperties = Object.entries(trigger.schema.outputs.properties || {})
trigger.schema?.outputs?.properties || {}
)
// check to see if there is existing test data in the store // check to see if there is existing test data in the store
$: testData = Object.keys( $: testData = Object.keys(
@ -27,6 +25,11 @@
? $automationStore.selectedAutomation.automation.testData ? $automationStore.selectedAutomation.automation.testData
: {} : {}
// Checj the schema to see if required fields have been entered
$: isError = !trigger.schema.outputs.required.every(
required => testData[required]
)
function parseTestJSON(e) { function parseTestJSON(e) {
try { try {
const obj = JSON.parse(e.detail) const obj = JSON.parse(e.detail)
@ -42,7 +45,9 @@
title="Add test data" title="Add test data"
confirmText="Save" confirmText="Save"
showConfirmButton={true} showConfirmButton={true}
disabled={isError}
onConfirm={() => { onConfirm={() => {
automationStore.actions.addTestDataToAutomation(testData)
automationStore.actions.trigger( automationStore.actions.trigger(
$automationStore.selectedAutomation, $automationStore.selectedAutomation,
testData testData
@ -53,7 +58,7 @@
<Tabs selected="Form" quiet <Tabs selected="Form" quiet
><Tab icon="Form" title="Form" ><Tab icon="Form" title="Form"
><AutomationBlockSetup ><AutomationBlockSetup
{testData} bind:testData
{schemaProperties} {schemaProperties}
block={trigger} block={trigger}
/></Tab /></Tab

View File

@ -30,7 +30,7 @@
$: inputData = testData ? testData : block.inputs $: inputData = testData ? testData : block.inputs
const debouncedOnChange = debounce(async function (e, key) { async function onChange(e, key) {
if (testData) { if (testData) {
testData[key] = e.detail testData[key] = e.detail
} else { } else {
@ -40,7 +40,7 @@
automation: $automationStore.selectedAutomation?.automation, automation: $automationStore.selectedAutomation?.automation,
}) })
} }
}, 800) }
function getAvailableBindings(block, automation) { function getAvailableBindings(block, automation) {
if (!block || !automation) { if (!block || !automation) {
@ -80,7 +80,7 @@
<Label>{value.title || key}</Label> <Label>{value.title || key}</Label>
{#if value.type === "string" && value.enum} {#if value.type === "string" && value.enum}
<Select <Select
on:change={e => debouncedOnChange(e, key)} on:change={e => onChange(e, key)}
value={inputData[key]} value={inputData[key]}
options={value.enum} options={value.enum}
getOptionLabel={(x, idx) => (value.pretty ? value.pretty[idx] : x)} getOptionLabel={(x, idx) => (value.pretty ? value.pretty[idx] : x)}
@ -88,7 +88,7 @@
{:else if value.customType === "password"} {:else if value.customType === "password"}
<Input <Input
type="password" type="password"
on:change={e => debouncedOnChange(e, key)} on:change={e => onChange(e, key)}
value={inputData[key]} value={inputData[key]}
/> />
{:else if value.customType === "email"} {:else if value.customType === "email"}
@ -98,7 +98,7 @@
value={inputData[key]} value={inputData[key]}
panel={AutomationBindingPanel} panel={AutomationBindingPanel}
type="email" type="email"
on:change={e => debouncedOnChange(e, key)} on:change={e => onChange(e, key)}
{bindings} {bindings}
/> />
{:else} {:else}
@ -107,51 +107,45 @@
panel={AutomationBindingPanel} panel={AutomationBindingPanel}
type="email" type="email"
value={inputData[key]} value={inputData[key]}
on:change={e => debouncedOnChange(e, key)} on:change={e => onChange(e, key)}
{bindings} {bindings}
/> />
{/if} {/if}
{:else if value.customType === "query"} {:else if value.customType === "query"}
<QuerySelector <QuerySelector
on:change={e => debouncedOnChange(e, key)} on:change={e => onChange(e, key)}
value={inputData[key]} value={inputData[key]}
/> />
{:else if value.customType === "cron"} {:else if value.customType === "cron"}
<CronBuilder <CronBuilder on:change={e => onChange(e, key)} value={inputData[key]} />
on:change={e => debouncedOnChange(e, key)}
value={inputData[key]}
/>
{:else if value.customType === "queryParams"} {:else if value.customType === "queryParams"}
<QueryParamSelector <QueryParamSelector
on:change={e => debouncedOnChange(e, key)} on:change={e => onChange(e, key)}
value={inputData[key]} value={inputData[key]}
{bindings} {bindings}
/> />
{:else if value.customType === "table"} {:else if value.customType === "table"}
<TableSelector <TableSelector
value={inputData[key]} value={inputData[key]}
on:change={e => debouncedOnChange(e, key)} on:change={e => onChange(e, key)}
/> />
{:else if value.customType === "row"} {:else if value.customType === "row"}
<RowSelector <RowSelector
value={inputData[key]} value={inputData[key]}
on:change={e => debouncedOnChange(e, key)} on:change={debounce(e => onChange(e, key), 800)}
{bindings} {bindings}
/> />
{:else if value.customType === "webhookUrl"} {:else if value.customType === "webhookUrl"}
<WebhookDisplay value={inputData[key]} /> <WebhookDisplay value={inputData[key]} />
{:else if value.customType === "triggerSchema"} {:else if value.customType === "triggerSchema"}
<SchemaSetup <SchemaSetup on:change={e => onChange(e, key)} value={value[key]} />
on:change={e => debouncedOnChange(e, key)}
value={value[key]}
/>
{:else if value.customType === "code"} {:else if value.customType === "code"}
<CodeEditorModal> <CodeEditorModal>
<pre>{JSON.stringify(bindings, null, 2)}</pre> <pre>{JSON.stringify(bindings, null, 2)}</pre>
<Editor <Editor
mode="javascript" mode="javascript"
on:change={e => { on:change={e => {
debouncedOnChange(e, key) onChange(e, key)
inputData[key] = e.detail.value inputData[key] = e.detail.value
}} }}
value={inputData[key]} value={inputData[key]}
@ -164,7 +158,7 @@
value={inputData[key]} value={inputData[key]}
panel={AutomationBindingPanel} panel={AutomationBindingPanel}
type={value.customType} type={value.customType}
on:change={e => debouncedOnChange(e, key)} on:change={e => onChange(e, key)}
{bindings} {bindings}
/> />
{:else} {:else}
@ -173,7 +167,7 @@
panel={AutomationBindingPanel} panel={AutomationBindingPanel}
type={value.customType} type={value.customType}
value={inputData[key]} value={inputData[key]}
on:change={e => debouncedOnChange(e, key)} on:change={e => onChange(e, key)}
{bindings} {bindings}
/> />
{/if} {/if}

View File

@ -10,9 +10,6 @@
$: instanceId = $database._id $: instanceId = $database._id
$: automation = $automationStore.selectedAutomation?.automation $: automation = $automationStore.selectedAutomation?.automation
$: automationLive = automation?.live $: automationLive = automation?.live
$: console.log(
$automationStore.selectedBlock.definition.trigger.schema.outputs.properties
)
function setAutomationLive(live) { function setAutomationLive(live) {
if (automationLive === live) { if (automationLive === live) {
return return

View File

@ -7,7 +7,6 @@
m => m._id === $params.automation m => m._id === $params.automation
) )
if (automation) { if (automation) {
console.log(automation)
automationStore.actions.select(automation) automationStore.actions.select(automation)
} }
} }

View File

@ -7,7 +7,6 @@
$: automation = $automationStore.automations[0] $: automation = $automationStore.automations[0]
let modal let modal
let webhookModal let webhookModal
$: console.log(automation)
</script> </script>
<!-- routify:options index=3 --> <!-- routify:options index=3 -->