allow use of plain inputs for automations enabling use of bindings in all types
This commit is contained in:
parent
8bf26bed76
commit
ca821f2a47
6 changed files with 171 additions and 54 deletions
|
@ -45,6 +45,7 @@ const automationActions = store => ({
|
|||
return state
|
||||
})
|
||||
},
|
||||
|
||||
save: async automation => {
|
||||
const UPDATE_AUTOMATION_URL = `/api/automations`
|
||||
const response = await api.put(UPDATE_AUTOMATION_URL, automation)
|
||||
|
@ -119,6 +120,12 @@ const automationActions = store => ({
|
|||
name: block.name,
|
||||
})
|
||||
},
|
||||
toggleFieldControl: value => {
|
||||
store.update(state => {
|
||||
state.selectedAutomation.automation.rowFieldControl = value
|
||||
return state
|
||||
})
|
||||
},
|
||||
deleteAutomationBlock: block => {
|
||||
store.update(state => {
|
||||
const idx =
|
||||
|
|
|
@ -0,0 +1,25 @@
|
|||
<script>
|
||||
import { automationStore } from "builderStore"
|
||||
|
||||
import { ModalContent, Toggle } from "@budibase/bbui"
|
||||
|
||||
$: rowControl = $automationStore.selectedAutomation.automation.rowFieldControl
|
||||
async function toggleFieldControl(evt) {
|
||||
await automationStore.actions.toggleFieldControl(evt.detail)
|
||||
await automationStore.actions.save(
|
||||
$automationStore.selectedAutomation?.automation
|
||||
)
|
||||
}
|
||||
</script>
|
||||
|
||||
<ModalContent
|
||||
title="Automation Configuration"
|
||||
confirmText="Test"
|
||||
showConfirmButton={false}
|
||||
>
|
||||
<Toggle
|
||||
bind:value={rowControl}
|
||||
on:change={toggleFieldControl}
|
||||
text="Fine Grained Row Control"
|
||||
/>
|
||||
</ModalContent>
|
|
@ -12,9 +12,12 @@
|
|||
notifications,
|
||||
Modal,
|
||||
} from "@budibase/bbui"
|
||||
import ConfigModal from "./ConfigModal.svelte"
|
||||
|
||||
export let automation
|
||||
export let onSelect
|
||||
|
||||
let configModal
|
||||
let testDataModal
|
||||
let blocks
|
||||
let confirmDeleteDialog
|
||||
|
@ -59,6 +62,16 @@
|
|||
<div class="subtitle">
|
||||
<Heading size="S">{automation.name}</Heading>
|
||||
<div style="display:flex;">
|
||||
<div class="iconPadding">
|
||||
<div class="icon">
|
||||
<Icon
|
||||
hoverable
|
||||
size="M"
|
||||
on:click={configModal.show}
|
||||
name="Settings"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="iconPadding">
|
||||
<div class="icon">
|
||||
<Icon
|
||||
|
@ -103,6 +116,10 @@
|
|||
<Modal bind:this={testDataModal} width="30%">
|
||||
<TestDataModal {testAutomation} />
|
||||
</Modal>
|
||||
|
||||
<Modal bind:this={configModal}>
|
||||
<ConfigModal />
|
||||
</Modal>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
|
|
@ -26,7 +26,6 @@
|
|||
let resultsModal
|
||||
let setupToggled
|
||||
let blockComplete
|
||||
|
||||
$: testResult = $automationStore.selectedAutomation.testResults?.steps.filter(
|
||||
step => (block.id ? step.id === block.id : step.stepId === block.stepId)
|
||||
)
|
||||
|
|
|
@ -1,18 +1,12 @@
|
|||
<script>
|
||||
import { tables } from "stores/backend"
|
||||
import {
|
||||
Select,
|
||||
Toggle,
|
||||
DatePicker,
|
||||
Multiselect,
|
||||
TextArea,
|
||||
} from "@budibase/bbui"
|
||||
import { Select } from "@budibase/bbui"
|
||||
import DrawerBindableInput from "../../common/bindings/DrawerBindableInput.svelte"
|
||||
import AutomationBindingPanel from "../../common/bindings/ServerBindingPanel.svelte"
|
||||
import { createEventDispatcher } from "svelte"
|
||||
import ModalBindableInput from "components/common/bindings/ModalBindableInput.svelte"
|
||||
import LinkedRowSelector from "components/common/LinkedRowSelector.svelte"
|
||||
import { automationStore } from "builderStore"
|
||||
import RowSelectorTypes from "./RowSelectorTypes.svelte"
|
||||
|
||||
const dispatch = createEventDispatcher()
|
||||
|
||||
|
@ -21,6 +15,16 @@
|
|||
let table
|
||||
let schemaFields
|
||||
|
||||
let placeholders = {
|
||||
number: 10,
|
||||
boolean: "true",
|
||||
datetime: "2022-02-16T12:00:00.000Z ",
|
||||
options: "1",
|
||||
array: "1,2,3,4",
|
||||
link: "ro_ta_123_456",
|
||||
longform: "long form text",
|
||||
}
|
||||
|
||||
$: {
|
||||
table = $tables.list.find(table => table._id === value?.tableId)
|
||||
schemaFields = Object.entries(table?.schema ?? {})
|
||||
|
@ -32,23 +36,39 @@
|
|||
})
|
||||
}
|
||||
|
||||
$: currentAutomation = $automationStore.selectedAutomation.automation
|
||||
$: console.log(currentAutomation)
|
||||
const onChangeTable = e => {
|
||||
value["tableId"] = e.detail
|
||||
dispatch("change", value)
|
||||
}
|
||||
|
||||
const onChange = (e, field) => {
|
||||
value[field] = e.detail
|
||||
const coerce = (value, type) => {
|
||||
console.log(type)
|
||||
if (type === "boolean") {
|
||||
return value === "true"
|
||||
}
|
||||
if (type === "number") {
|
||||
return Number(value)
|
||||
}
|
||||
if (type === "options" || type === "link") {
|
||||
return [value]
|
||||
}
|
||||
if (type === "array") {
|
||||
return value.split(",")
|
||||
}
|
||||
|
||||
return value
|
||||
}
|
||||
|
||||
const onChange = (e, field, type) => {
|
||||
value[field] = coerce(e.detail, type)
|
||||
dispatch("change", value)
|
||||
}
|
||||
|
||||
// Ensure any nullish tableId values get set to empty string so
|
||||
// that the select works
|
||||
$: if (value?.tableId == null) value = { tableId: "" }
|
||||
|
||||
function schemaHasOptions(schema) {
|
||||
return !!schema.constraints?.inclusion?.length
|
||||
}
|
||||
</script>
|
||||
|
||||
<Select
|
||||
|
@ -62,50 +82,35 @@
|
|||
<div class="schema-fields">
|
||||
{#each schemaFields as [field, schema]}
|
||||
{#if !schema.autocolumn}
|
||||
{#if schemaHasOptions(schema) && schema.type !== "array"}
|
||||
<Select
|
||||
on:change={e => onChange(e, field)}
|
||||
label={field}
|
||||
value={value[field]}
|
||||
options={schema.constraints.inclusion}
|
||||
/>
|
||||
{:else if schema.type === "datetime"}
|
||||
<DatePicker
|
||||
label={field}
|
||||
value={value[field]}
|
||||
on:change={e => onChange(e, field)}
|
||||
/>
|
||||
{:else if schema.type === "boolean"}
|
||||
<Toggle
|
||||
text={field}
|
||||
value={value[field]}
|
||||
on:change={e => onChange(e, field)}
|
||||
/>
|
||||
{:else if schema.type === "array"}
|
||||
<Multiselect
|
||||
bind:value={value[field]}
|
||||
label={field}
|
||||
options={schema.constraints.inclusion}
|
||||
/>
|
||||
{:else if schema.type === "longform"}
|
||||
<TextArea label={field} bind:value={value[field]} />
|
||||
{:else if schema.type === "link"}
|
||||
<LinkedRowSelector bind:linkedRows={value[field]} {schema} />
|
||||
{:else if schema.type === "string" || schema.type === "number"}
|
||||
{#if schema.type !== "attachment"}
|
||||
{#if $automationStore.selectedAutomation.automation.testData}
|
||||
<ModalBindableInput
|
||||
value={value[field]}
|
||||
panel={AutomationBindingPanel}
|
||||
label={field}
|
||||
type={value.customType}
|
||||
on:change={e => onChange(e, field)}
|
||||
{bindings}
|
||||
/>
|
||||
{#if $automationStore.selectedAutomation.automation.rowFieldControl}
|
||||
<RowSelectorTypes
|
||||
{field}
|
||||
{schema}
|
||||
{bindings}
|
||||
{value}
|
||||
{onChange}
|
||||
/>
|
||||
{:else}
|
||||
<ModalBindableInput
|
||||
placeholder={placeholders[schema.type]}
|
||||
value={value[field]}
|
||||
panel={AutomationBindingPanel}
|
||||
label={field}
|
||||
type={value.customType}
|
||||
on:change={e => onChange(e, field, schema.type)}
|
||||
{bindings}
|
||||
/>
|
||||
{/if}
|
||||
{:else if $automationStore.selectedAutomation.automation.rowFieldControl}
|
||||
<RowSelectorTypes {field} {schema} {bindings} {value} {onChange} />
|
||||
{:else}
|
||||
<DrawerBindableInput
|
||||
placeholder={placeholders[schema.type]}
|
||||
panel={AutomationBindingPanel}
|
||||
value={value[field]}
|
||||
on:change={e => onChange(e, field)}
|
||||
on:change={e => onChange(e, field, schema.type)}
|
||||
label={field}
|
||||
type="string"
|
||||
{bindings}
|
||||
|
|
|
@ -0,0 +1,64 @@
|
|||
<script>
|
||||
import {
|
||||
Select,
|
||||
Toggle,
|
||||
DatePicker,
|
||||
Multiselect,
|
||||
TextArea,
|
||||
} from "@budibase/bbui"
|
||||
import LinkedRowSelector from "components/common/LinkedRowSelector.svelte"
|
||||
import DrawerBindableInput from "../../common/bindings/DrawerBindableInput.svelte"
|
||||
import AutomationBindingPanel from "../../common/bindings/ServerBindingPanel.svelte"
|
||||
|
||||
export let onChange
|
||||
export let field
|
||||
export let schema
|
||||
export let value
|
||||
export let bindings
|
||||
|
||||
function schemaHasOptions(schema) {
|
||||
return !!schema.constraints?.inclusion?.length
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if schemaHasOptions(schema) && schema.type !== "array"}
|
||||
<Select
|
||||
on:change={e => onChange(e, field)}
|
||||
label={field}
|
||||
value={value[field]}
|
||||
options={schema.constraints.inclusion}
|
||||
/>
|
||||
{:else if schema.type === "datetime"}
|
||||
<DatePicker
|
||||
label={field}
|
||||
value={value[field]}
|
||||
on:change={e => onChange(e, field)}
|
||||
/>
|
||||
{:else if schema.type === "boolean"}
|
||||
<Toggle
|
||||
text={field}
|
||||
value={value[field]}
|
||||
on:change={e => onChange(e, field)}
|
||||
/>
|
||||
{:else if schema.type === "array"}
|
||||
<Multiselect
|
||||
bind:value={value[field]}
|
||||
label={field}
|
||||
options={schema.constraints.inclusion}
|
||||
/>
|
||||
{:else if schema.type === "longform"}
|
||||
<TextArea label={field} bind:value={value[field]} />
|
||||
{:else if schema.type === "link"}
|
||||
<LinkedRowSelector bind:linkedRows={value[field]} {schema} />
|
||||
{:else if schema.type === "string" || schema.type === "number"}
|
||||
<DrawerBindableInput
|
||||
panel={AutomationBindingPanel}
|
||||
value={value[field]}
|
||||
on:change={e => onChange(e, field)}
|
||||
label={field}
|
||||
type="string"
|
||||
{bindings}
|
||||
fillWidth={true}
|
||||
allowJS={false}
|
||||
/>
|
||||
{/if}
|
Loading…
Reference in a new issue