Require required schema fields before saving
This commit is contained in:
parent
e6e40f1225
commit
d0b3db07a6
|
@ -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
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
|
@ -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 },
|
||||||
|
}
|
||||||
|
|
|
@ -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,6 +71,14 @@
|
||||||
class="splitHeader"
|
class="splitHeader"
|
||||||
>
|
>
|
||||||
<div style="display: flex;">
|
<div style="display: flex;">
|
||||||
|
{#if externalActions[block.stepId]}
|
||||||
|
<img
|
||||||
|
alt={externalActions[block.stepId].name}
|
||||||
|
width="35px"
|
||||||
|
height="35px"
|
||||||
|
src={externalActions[block.stepId].icon}
|
||||||
|
/>
|
||||||
|
{:else}
|
||||||
<svg
|
<svg
|
||||||
width="35px"
|
width="35px"
|
||||||
height="35px"
|
height="35px"
|
||||||
|
@ -79,6 +88,7 @@
|
||||||
>
|
>
|
||||||
<use xlink:href="#spectrum-icon-18-{block.icon}" />
|
<use xlink:href="#spectrum-icon-18-{block.icon}" />
|
||||||
</svg>
|
</svg>
|
||||||
|
{/if}
|
||||||
<div class="iconAlign">
|
<div class="iconAlign">
|
||||||
<Body size="XS">When this happens:</Body>
|
<Body size="XS">When this happens:</Body>
|
||||||
|
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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}
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 -->
|
||||||
|
|
Loading…
Reference in New Issue