Merge pull request #12585 from Budibase/feature/multistep-form-block
Multi-step form block
This commit is contained in:
deanhannigan
GitHub
commit
66f040a295
|
|
@ -130,5 +130,6 @@
|
|||
max-width: 150px;
|
||||
transform: translateX(-50%);
|
||||
text-align: center;
|
||||
z-index: 1;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -78,7 +78,7 @@
|
|||
var(--spacing-xl);
|
||||
}
|
||||
.property-panel.no-title {
|
||||
padding: var(--spacing-xl);
|
||||
padding-top: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.show {
|
||||
|
|
|
|||
|
|
@ -51,15 +51,13 @@
|
|||
margin-top: var(--spectrum-global-dimension-size-75);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.helpText :global(svg) {
|
||||
width: 14px;
|
||||
color: var(--grey-5);
|
||||
width: 13px;
|
||||
color: var(--spectrum-global-color-gray-600);
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.helpText span {
|
||||
color: var(--grey-7);
|
||||
color: var(--spectrum-global-color-gray-800);
|
||||
font-size: var(--spectrum-global-dimension-font-size-75);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -465,8 +465,8 @@ const filterCategoryByContext = (component, context) => {
|
|||
const { _component } = component
|
||||
if (_component.endsWith("formblock")) {
|
||||
if (
|
||||
(component.actionType == "Create" && context.type === "schema") ||
|
||||
(component.actionType == "View" && context.type === "form")
|
||||
(component.actionType === "Create" && context.type === "schema") ||
|
||||
(component.actionType === "View" && context.type === "form")
|
||||
) {
|
||||
return false
|
||||
}
|
||||
|
|
@ -474,20 +474,21 @@ const filterCategoryByContext = (component, context) => {
|
|||
return true
|
||||
}
|
||||
|
||||
// Enrich binding category information for certain components
|
||||
const getComponentBindingCategory = (component, context, def) => {
|
||||
let icon = def.icon
|
||||
let category = component._instanceName
|
||||
|
||||
if (component._component.endsWith("formblock")) {
|
||||
let contextCategorySuffix = {
|
||||
form: "Fields",
|
||||
schema: "Row",
|
||||
if (context.type === "form") {
|
||||
category = `${component._instanceName} - Fields`
|
||||
icon = "Form"
|
||||
} else if (context.type === "schema") {
|
||||
category = `${component._instanceName} - Row`
|
||||
icon = "Data"
|
||||
}
|
||||
category = `${component._instanceName} - ${
|
||||
contextCategorySuffix[context.type]
|
||||
}`
|
||||
icon = context.type === "form" ? "Form" : "Data"
|
||||
}
|
||||
|
||||
return {
|
||||
icon,
|
||||
category,
|
||||
|
|
|
|||
|
|
@ -610,12 +610,12 @@ export const getFrontendStore = () => {
|
|||
// Use default config if the 'buttons' prop has never been initialised
|
||||
if (!("buttons" in enrichedComponent)) {
|
||||
enrichedComponent["buttons"] =
|
||||
Utils.buildDynamicButtonConfig(enrichedComponent)
|
||||
Utils.buildFormBlockButtonConfig(enrichedComponent)
|
||||
migrated = true
|
||||
} else if (enrichedComponent["buttons"] == null) {
|
||||
// Ignore legacy config if 'buttons' has been reset by 'resetOn'
|
||||
const { _id, actionType, dataSource } = enrichedComponent
|
||||
enrichedComponent["buttons"] = Utils.buildDynamicButtonConfig({
|
||||
enrichedComponent["buttons"] = Utils.buildFormBlockButtonConfig({
|
||||
_id,
|
||||
actionType,
|
||||
dataSource,
|
||||
|
|
@ -1289,15 +1289,14 @@ export const getFrontendStore = () => {
|
|||
const settings = getComponentSettings(component._component)
|
||||
const updatedSetting = settings.find(setting => setting.key === name)
|
||||
|
||||
// Can be a single string or array of strings
|
||||
const resetFields = settings.filter(setting => {
|
||||
return (
|
||||
// Reset dependent fields
|
||||
settings.forEach(setting => {
|
||||
const needsReset =
|
||||
name === setting.resetOn ||
|
||||
(Array.isArray(setting.resetOn) && setting.resetOn.includes(name))
|
||||
)
|
||||
})
|
||||
resetFields?.forEach(setting => {
|
||||
component[setting.key] = null
|
||||
if (needsReset) {
|
||||
component[setting.key] = setting.defaultValue || null
|
||||
}
|
||||
})
|
||||
|
||||
if (
|
||||
|
|
|
|||
|
|
@ -25,6 +25,8 @@ import BarButtonList from "./controls/BarButtonList.svelte"
|
|||
import FieldConfiguration from "./controls/FieldConfiguration/FieldConfiguration.svelte"
|
||||
import ButtonConfiguration from "./controls/ButtonConfiguration/ButtonConfiguration.svelte"
|
||||
import RelationshipFilterEditor from "./controls/RelationshipFilterEditor.svelte"
|
||||
import FormStepConfiguration from "./controls/FormStepConfiguration.svelte"
|
||||
import FormStepControls from "components/design/settings/controls/FormStepControls.svelte"
|
||||
|
||||
const componentMap = {
|
||||
text: DrawerBindableInput,
|
||||
|
|
@ -51,6 +53,8 @@ const componentMap = {
|
|||
url: URLSelect,
|
||||
fieldConfiguration: FieldConfiguration,
|
||||
buttonConfiguration: ButtonConfiguration,
|
||||
stepConfiguration: FormStepConfiguration,
|
||||
formStepControls: FormStepControls,
|
||||
columns: ColumnEditor,
|
||||
"columns/basic": BasicColumnEditor,
|
||||
"columns/grid": GridColumnEditor,
|
||||
|
|
|
|||
|
|
@ -34,6 +34,9 @@
|
|||
$: canAddButtons = max == null || buttonList.length < max
|
||||
|
||||
const sanitizeValue = val => {
|
||||
if (!Array.isArray(val)) {
|
||||
return null
|
||||
}
|
||||
return val?.map(button => {
|
||||
return button._component ? button : buildPseudoInstance(button)
|
||||
})
|
||||
|
|
|
|||
|
|
@ -13,6 +13,8 @@
|
|||
export let draggable = true
|
||||
export let focus
|
||||
|
||||
let zoneType = generate()
|
||||
|
||||
let store = writable({
|
||||
selected: null,
|
||||
actions: {
|
||||
|
|
@ -46,6 +48,7 @@
|
|||
return {
|
||||
id: listItemKey ? item[listItemKey] : generate(),
|
||||
item,
|
||||
type: zoneType,
|
||||
}
|
||||
})
|
||||
.filter(item => item.id)
|
||||
|
|
@ -83,6 +86,8 @@
|
|||
items: draggableItems,
|
||||
dropTargetStyle: { outline: "none" },
|
||||
dragDisabled: !draggable || inactive,
|
||||
type: zoneType,
|
||||
dropFromOthersDisabled: true,
|
||||
}}
|
||||
on:finalize={handleFinalize}
|
||||
on:consider={updateRowOrder}
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@
|
|||
import { convertOldFieldFormat, getComponentForField } from "./utils"
|
||||
|
||||
export let componentInstance
|
||||
export let bindings
|
||||
export let value
|
||||
|
||||
const dispatch = createEventDispatcher()
|
||||
|
|
@ -28,7 +29,9 @@
|
|||
|
||||
let selectAll = true
|
||||
|
||||
$: bindings = getBindableProperties($selectedScreen, componentInstance._id)
|
||||
$: resolvedBindings =
|
||||
bindings || getBindableProperties($selectedScreen, componentInstance._id)
|
||||
|
||||
$: actionType = componentInstance.actionType
|
||||
let componentBindings = []
|
||||
|
||||
|
|
@ -39,7 +42,10 @@
|
|||
)
|
||||
}
|
||||
|
||||
$: datasource = getDatasourceForProvider($currentAsset, componentInstance)
|
||||
$: datasource =
|
||||
componentInstance.dataSource ||
|
||||
getDatasourceForProvider($currentAsset, componentInstance)
|
||||
|
||||
$: resourceId = datasource?.resourceId || datasource?.tableId
|
||||
|
||||
$: if (!isEqual(value, cachedValue)) {
|
||||
|
|
@ -179,7 +185,7 @@
|
|||
listType={FieldSetting}
|
||||
listTypeProps={{
|
||||
componentBindings,
|
||||
bindings,
|
||||
bindings: resolvedBindings,
|
||||
}}
|
||||
/>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,171 @@
|
|||
<script>
|
||||
import { createEventDispatcher, setContext } from "svelte"
|
||||
import ComponentSettingsSection from "../../../../pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte"
|
||||
import { getDatasourceForProvider } from "builderStore/dataBinding"
|
||||
import { currentAsset, store } from "builderStore"
|
||||
import { Helpers } from "@budibase/bbui"
|
||||
import { derived, writable } from "svelte/store"
|
||||
import { Utils } from "@budibase/frontend-core"
|
||||
import { cloneDeep } from "lodash"
|
||||
|
||||
export let componentInstance
|
||||
export let componentBindings
|
||||
export let value
|
||||
export let bindings
|
||||
|
||||
const dispatch = createEventDispatcher()
|
||||
const multiStepStore = writable({
|
||||
stepCount: value?.length ?? 0,
|
||||
currentStep: 0,
|
||||
})
|
||||
const currentStep = derived(multiStepStore, state => state.currentStep)
|
||||
const componentType = "@budibase/standard-components/multistepformblockstep"
|
||||
|
||||
setContext("multi-step-form-block", multiStepStore)
|
||||
|
||||
$: stepCount = value?.length || 0
|
||||
$: updateStore(stepCount)
|
||||
$: dataSource = getDatasourceForProvider($currentAsset, componentInstance)
|
||||
$: emitCurrentStep($currentStep)
|
||||
$: stepLabel = getStepLabel($multiStepStore)
|
||||
$: stepDef = getDefinition(stepLabel)
|
||||
$: stepSettings = value?.[$currentStep] || {}
|
||||
$: defaults = Utils.buildMultiStepFormBlockDefaultProps({
|
||||
_id: componentInstance._id,
|
||||
stepCount: $multiStepStore.stepCount,
|
||||
currentStep: $multiStepStore.currentStep,
|
||||
actionType: componentInstance.actionType,
|
||||
dataSource: componentInstance.dataSource,
|
||||
})
|
||||
$: stepInstance = {
|
||||
_id: Helpers.uuid(),
|
||||
_component: componentType,
|
||||
_instanceName: `Step ${currentStep + 1}`,
|
||||
title: stepSettings.title ?? defaults.title,
|
||||
buttons: stepSettings.buttons || defaults.buttons,
|
||||
fields: stepSettings.fields,
|
||||
desc: stepSettings.desc,
|
||||
|
||||
// Needed for field configuration
|
||||
dataSource,
|
||||
}
|
||||
|
||||
const getDefinition = stepLabel => {
|
||||
let def = cloneDeep(store.actions.components.getDefinition(componentType))
|
||||
def.settings.find(x => x.key === "steps").label = stepLabel
|
||||
return def
|
||||
}
|
||||
|
||||
const updateStore = stepCount => {
|
||||
multiStepStore.update(state => {
|
||||
state.stepCount = stepCount
|
||||
if (state.currentStep >= stepCount) {
|
||||
state.currentStep = 0
|
||||
}
|
||||
return { ...state }
|
||||
})
|
||||
}
|
||||
|
||||
const getStepLabel = ({ stepCount, currentStep }) => {
|
||||
if (stepCount <= 1) {
|
||||
return "Steps"
|
||||
}
|
||||
return `Steps (${currentStep + 1}/${stepCount})`
|
||||
}
|
||||
|
||||
const emitCurrentStep = step => {
|
||||
store.actions.preview.sendEvent("builder-meta", {
|
||||
componentId: componentInstance._id,
|
||||
step: step,
|
||||
})
|
||||
}
|
||||
|
||||
const addStep = () => {
|
||||
value = value.toSpliced($currentStep + 1, 0, {})
|
||||
dispatch("change", value)
|
||||
multiStepStore.update(state => ({
|
||||
...state,
|
||||
currentStep: $currentStep + 1,
|
||||
}))
|
||||
}
|
||||
|
||||
const removeStep = () => {
|
||||
value = value.toSpliced($currentStep, 1)
|
||||
dispatch("change", value)
|
||||
multiStepStore.update(state => ({
|
||||
...state,
|
||||
currentStep: Math.min($currentStep, stepCount - 2),
|
||||
}))
|
||||
}
|
||||
|
||||
const previousStep = () => {
|
||||
multiStepStore.update(state => ({
|
||||
...state,
|
||||
currentStep: Math.max($currentStep - 1, 0),
|
||||
}))
|
||||
}
|
||||
|
||||
const nextStep = () => {
|
||||
multiStepStore.update(state => ({
|
||||
...state,
|
||||
currentStep: Math.min($currentStep + 1, value.length - 1),
|
||||
}))
|
||||
}
|
||||
|
||||
const updateStep = (field, val) => {
|
||||
const newStep = {
|
||||
...value[$currentStep],
|
||||
[field.key]: val,
|
||||
}
|
||||
value = value.toSpliced($currentStep, 1, newStep)
|
||||
dispatch("change", value)
|
||||
}
|
||||
|
||||
const handleStepAction = action => {
|
||||
switch (action) {
|
||||
case "addStep":
|
||||
addStep()
|
||||
break
|
||||
case "removeStep":
|
||||
removeStep()
|
||||
break
|
||||
case "nextStep":
|
||||
nextStep()
|
||||
break
|
||||
case "previousStep":
|
||||
previousStep()
|
||||
}
|
||||
}
|
||||
|
||||
const processUpdate = (field, val) => {
|
||||
if (field.key === "steps") {
|
||||
handleStepAction(val.action)
|
||||
} else {
|
||||
updateStep(field, val)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="nested-section">
|
||||
<ComponentSettingsSection
|
||||
includeHidden
|
||||
componentInstance={stepInstance}
|
||||
componentDefinition={stepDef}
|
||||
onUpdateSetting={processUpdate}
|
||||
showSectionTitle={false}
|
||||
isScreen={false}
|
||||
nested={true}
|
||||
{bindings}
|
||||
{componentBindings}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.nested-section {
|
||||
margin: 0 calc(-1 * var(--spacing-xl)) calc(-1 * var(--spacing-xl))
|
||||
calc(-1 * var(--spacing-xl));
|
||||
}
|
||||
.nested-section :global(.property-panel) {
|
||||
padding-top: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
<script>
|
||||
import { createEventDispatcher, getContext } from "svelte"
|
||||
import { ActionButton } from "@budibase/bbui"
|
||||
|
||||
const multiStepStore = getContext("multi-step-form-block")
|
||||
const dispatch = createEventDispatcher()
|
||||
|
||||
$: ({ stepCount, currentStep } = $multiStepStore)
|
||||
|
||||
const stepAction = action => {
|
||||
dispatch("change", {
|
||||
action,
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if stepCount === 1}
|
||||
<div class="stretch">
|
||||
<ActionButton
|
||||
icon="MultipleAdd"
|
||||
secondary
|
||||
on:click={() => {
|
||||
stepAction("addStep")
|
||||
}}
|
||||
>
|
||||
Add Step
|
||||
</ActionButton>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="step-actions">
|
||||
<ActionButton
|
||||
size="S"
|
||||
secondary
|
||||
icon="ChevronLeft"
|
||||
disabled={currentStep === 0}
|
||||
on:click={() => {
|
||||
stepAction("previousStep")
|
||||
}}
|
||||
tooltip={"Previous step"}
|
||||
/>
|
||||
<ActionButton
|
||||
size="S"
|
||||
secondary
|
||||
disabled={currentStep === stepCount - 1}
|
||||
icon="ChevronRight"
|
||||
on:click={() => {
|
||||
stepAction("nextStep")
|
||||
}}
|
||||
tooltip={"Next step"}
|
||||
/>
|
||||
<ActionButton
|
||||
size="S"
|
||||
secondary
|
||||
icon="Close"
|
||||
disabled={stepCount === 1}
|
||||
on:click={() => {
|
||||
stepAction("removeStep")
|
||||
}}
|
||||
tooltip={"Remove step"}
|
||||
/>
|
||||
<ActionButton
|
||||
size="S"
|
||||
secondary
|
||||
icon="MultipleAdd"
|
||||
on:click={() => {
|
||||
stepAction("addStep")
|
||||
}}
|
||||
tooltip={"Add step"}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.stretch :global(.spectrum-ActionButton) {
|
||||
width: 100%;
|
||||
}
|
||||
.step-actions {
|
||||
display: flex;
|
||||
gap: var(--spacing-s);
|
||||
}
|
||||
.step-actions :global(.spectrum-ActionButton) {
|
||||
height: 32px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -24,6 +24,7 @@
|
|||
export let propertyFocus = false
|
||||
export let info = null
|
||||
export let disableBindings = false
|
||||
export let wide
|
||||
|
||||
$: nullishValue = value == null || value === ""
|
||||
$: allBindings = getAllBindings(bindings, componentBindings, nested)
|
||||
|
|
@ -78,7 +79,7 @@
|
|||
|
||||
<div
|
||||
class="property-control"
|
||||
class:wide={!label || labelHidden}
|
||||
class:wide={!label || labelHidden || wide === true}
|
||||
class:highlighted={highlighted && nullishValue}
|
||||
class:property-focus={propertyFocus}
|
||||
>
|
||||
|
|
@ -104,6 +105,7 @@
|
|||
{...props}
|
||||
on:drawerHide
|
||||
on:drawerShow
|
||||
on:meta
|
||||
/>
|
||||
</div>
|
||||
{#if info}
|
||||
|
|
@ -146,15 +148,28 @@
|
|||
.control {
|
||||
position: relative;
|
||||
}
|
||||
.property-control.wide .control {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
.text {
|
||||
font-size: var(--spectrum-global-dimension-font-size-75);
|
||||
color: var(--grey-6);
|
||||
grid-column: 2 / 2;
|
||||
}
|
||||
|
||||
.property-control.wide .control {
|
||||
flex: 1;
|
||||
}
|
||||
.property-control.wide {
|
||||
grid-template-columns: unset;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
.property-control.wide > * {
|
||||
width: 100%;
|
||||
}
|
||||
.property-control.wide .text {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
.property-control.wide .label {
|
||||
margin-bottom: -8px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,10 @@
|
|||
} from "@budibase/bbui"
|
||||
import { currentAsset, selectedComponent } from "builderStore"
|
||||
import { findClosestMatchingComponent } from "builderStore/componentUtils"
|
||||
import { getSchemaForDatasource } from "builderStore/dataBinding"
|
||||
import {
|
||||
getSchemaForDatasource,
|
||||
getDatasourceForProvider,
|
||||
} from "builderStore/dataBinding"
|
||||
import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
|
||||
import { generate } from "shortid"
|
||||
|
||||
|
|
@ -124,6 +127,12 @@
|
|||
],
|
||||
}
|
||||
|
||||
const resolveDatasource = (currentAsset, componentInstance, parent) => {
|
||||
return (
|
||||
getDatasourceForProvider(currentAsset, parent || componentInstance) || {}
|
||||
)
|
||||
}
|
||||
|
||||
$: dataSourceSchema = getDataSourceSchema($currentAsset, $selectedComponent)
|
||||
$: field = fieldName || $selectedComponent?.field
|
||||
$: schemaRules = parseRulesFromSchema(field, dataSourceSchema || {})
|
||||
|
|
@ -146,8 +155,8 @@
|
|||
component._component.endsWith("/formblock") ||
|
||||
component._component.endsWith("/tableblock")
|
||||
)
|
||||
|
||||
return getSchemaForDatasource(asset, formParent?.dataSource)
|
||||
const dataSource = resolveDatasource(asset, component, formParent)
|
||||
return getSchemaForDatasource(asset, dataSource)
|
||||
}
|
||||
|
||||
const parseRulesFromSchema = (field, dataSourceSchema) => {
|
||||
|
|
|
|||
|
|
@ -32,21 +32,19 @@
|
|||
const generalSettings = settings.filter(
|
||||
setting => !setting.section && setting.tag === tag
|
||||
)
|
||||
|
||||
const customSections = settings.filter(
|
||||
setting => setting.section && setting.tag === tag
|
||||
)
|
||||
let sections = [
|
||||
...(generalSettings?.length
|
||||
? [
|
||||
{
|
||||
name: "General",
|
||||
settings: generalSettings,
|
||||
},
|
||||
]
|
||||
: []),
|
||||
...(customSections || []),
|
||||
]
|
||||
let sections = []
|
||||
if (generalSettings.length) {
|
||||
sections.push({
|
||||
name: "General",
|
||||
settings: generalSettings,
|
||||
})
|
||||
}
|
||||
if (customSections.length) {
|
||||
sections = sections.concat(customSections)
|
||||
}
|
||||
|
||||
// Filter out settings which shouldn't be rendered
|
||||
sections.forEach(section => {
|
||||
|
|
@ -153,6 +151,7 @@
|
|||
<DetailSummary
|
||||
name={showSectionTitle ? section.name : ""}
|
||||
initiallyShow={section.collapsed !== true}
|
||||
collapsible={section.name !== "General"}
|
||||
>
|
||||
{#if section.info}
|
||||
<div class="section-info">
|
||||
|
|
@ -172,6 +171,7 @@
|
|||
control={getComponentForSetting(setting)}
|
||||
label={setting.label}
|
||||
labelHidden={setting.labelHidden}
|
||||
wide={setting.wide}
|
||||
key={setting.key}
|
||||
value={componentInstance[setting.key]}
|
||||
defaultValue={setting.defaultValue}
|
||||
|
|
@ -208,7 +208,7 @@
|
|||
</DetailSummary>
|
||||
{/if}
|
||||
{/each}
|
||||
{#if componentDefinition?.block && !tag}
|
||||
{#if componentDefinition?.block && !tag && componentDefinition.ejectable !== false}
|
||||
<DetailSummary name="Eject" collapsible={false}>
|
||||
<EjectBlockButton />
|
||||
</DetailSummary>
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
"cardsblock",
|
||||
"repeaterblock",
|
||||
"formblock",
|
||||
"multistepformblock",
|
||||
"chartblock",
|
||||
"rowexplorer"
|
||||
]
|
||||
|
|
|
|||
|
|
@ -4879,7 +4879,7 @@
|
|||
},
|
||||
"chartblock": {
|
||||
"block": true,
|
||||
"name": "Chart block",
|
||||
"name": "Chart Block",
|
||||
"icon": "GraphPie",
|
||||
"hasChildren": false,
|
||||
"settings": [
|
||||
|
|
@ -5369,7 +5369,7 @@
|
|||
},
|
||||
"tableblock": {
|
||||
"block": true,
|
||||
"name": "Table block",
|
||||
"name": "Table Block",
|
||||
"icon": "Table",
|
||||
"styles": ["size"],
|
||||
"size": {
|
||||
|
|
@ -5615,7 +5615,7 @@
|
|||
},
|
||||
"cardsblock": {
|
||||
"block": true,
|
||||
"name": "Cards block",
|
||||
"name": "Cards Block",
|
||||
"icon": "PersonalizationField",
|
||||
"styles": ["size"],
|
||||
"size": {
|
||||
|
|
@ -5795,7 +5795,7 @@
|
|||
},
|
||||
"repeaterblock": {
|
||||
"block": true,
|
||||
"name": "Repeater block",
|
||||
"name": "Repeater Block",
|
||||
"icon": "ViewList",
|
||||
"illegalChildren": ["section"],
|
||||
"hasChildren": true,
|
||||
|
|
@ -6035,6 +6035,164 @@
|
|||
}
|
||||
]
|
||||
},
|
||||
"multistepformblock": {
|
||||
"name": "Multi-step Form Block",
|
||||
"icon": "AssetsAdded",
|
||||
"block": true,
|
||||
"hasChildren": false,
|
||||
"ejectable": false,
|
||||
"size": {
|
||||
"width": 400,
|
||||
"height": 400
|
||||
},
|
||||
"styles": ["size"],
|
||||
"settings": [
|
||||
{
|
||||
"type": "table",
|
||||
"label": "Data",
|
||||
"key": "dataSource"
|
||||
},
|
||||
{
|
||||
"type": "radio",
|
||||
"label": "Type",
|
||||
"key": "actionType",
|
||||
"options": ["Create", "Update", "View"],
|
||||
"defaultValue": "Create"
|
||||
},
|
||||
{
|
||||
"section": true,
|
||||
"dependsOn": {
|
||||
"setting": "actionType",
|
||||
"value": "Create",
|
||||
"invert": true
|
||||
},
|
||||
"name": "Row ID",
|
||||
"info": "<a href='https://docs.budibase.com/docs/form-block' target='_blank'>How to pass a row ID using bindings</a>",
|
||||
"settings": [
|
||||
{
|
||||
"type": "text",
|
||||
"label": "Row ID",
|
||||
"key": "rowId",
|
||||
"nested": true
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"label": "No rows found",
|
||||
"key": "noRowsMessage",
|
||||
"defaultValue": "We couldn't find a row to display",
|
||||
"nested": true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"section": true,
|
||||
"name": "Details",
|
||||
"settings": [
|
||||
{
|
||||
"type": "stepConfiguration",
|
||||
"key": "steps",
|
||||
"nested": true,
|
||||
"labelHidden": true,
|
||||
"resetOn": [
|
||||
"dataSource",
|
||||
"actionType"
|
||||
],
|
||||
"defaultValue": [
|
||||
{}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"actions": [
|
||||
{
|
||||
"type": "ValidateForm",
|
||||
"suffix": "form"
|
||||
},
|
||||
{
|
||||
"type": "ClearForm",
|
||||
"suffix": "form"
|
||||
},
|
||||
{
|
||||
"type": "UpdateFieldValue",
|
||||
"suffix": "form"
|
||||
},
|
||||
{
|
||||
"type": "ScrollTo",
|
||||
"suffix": "form"
|
||||
},
|
||||
{
|
||||
"type": "ChangeFormStep",
|
||||
"suffix": "form"
|
||||
}
|
||||
],
|
||||
"context": [
|
||||
{
|
||||
"type": "form",
|
||||
"suffix": "form"
|
||||
},
|
||||
{
|
||||
"type": "static",
|
||||
"suffix": "form",
|
||||
"values": [
|
||||
{
|
||||
"label": "Value",
|
||||
"key": "__value",
|
||||
"type": "object"
|
||||
},
|
||||
{
|
||||
"label": "Valid",
|
||||
"key": "__valid",
|
||||
"type": "boolean"
|
||||
},
|
||||
{
|
||||
"label": "Current Step",
|
||||
"key": "__currentStep",
|
||||
"type": "number"
|
||||
},
|
||||
{
|
||||
"label": "Current Step Valid",
|
||||
"key": "__currentStepValid",
|
||||
"type": "boolean"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
"multistepformblockstep": {
|
||||
"name": "Multi-step Form Block Step",
|
||||
"settings": [
|
||||
{
|
||||
"type": "formStepControls",
|
||||
"label": "Steps",
|
||||
"key": "steps"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"label": "Title",
|
||||
"key": "title",
|
||||
"nested": true
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"label": "Description",
|
||||
"key": "desc",
|
||||
"nested": true
|
||||
},
|
||||
{
|
||||
"type": "fieldConfiguration",
|
||||
"key": "fields",
|
||||
"nested": true
|
||||
},
|
||||
{
|
||||
"type": "buttonConfiguration",
|
||||
"label": "Buttons",
|
||||
"key": "buttons",
|
||||
"wide": true,
|
||||
"nested": true
|
||||
}
|
||||
]
|
||||
},
|
||||
"formblock": {
|
||||
"name": "Form Block",
|
||||
"icon": "Form",
|
||||
|
|
@ -6290,7 +6448,7 @@
|
|||
}
|
||||
},
|
||||
"gridblock": {
|
||||
"name": "Grid block",
|
||||
"name": "Grid Block",
|
||||
"icon": "Table",
|
||||
"styles": ["size"],
|
||||
"size": {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,187 @@
|
|||
<script>
|
||||
import BlockComponent from "components/BlockComponent.svelte"
|
||||
import { getContext, setContext } from "svelte"
|
||||
import { builderStore } from "stores"
|
||||
import { Utils } from "@budibase/frontend-core"
|
||||
import FormBlockWrapper from "./form/FormBlockWrapper.svelte"
|
||||
import { writable } from "svelte/store"
|
||||
|
||||
export let actionType
|
||||
export let rowId
|
||||
export let noRowsMessage
|
||||
export let steps
|
||||
export let dataSource
|
||||
|
||||
const { fetchDatasourceSchema } = getContext("sdk")
|
||||
const component = getContext("component")
|
||||
|
||||
// Set current step context to force child form to use it
|
||||
const currentStep = writable(1)
|
||||
setContext("current-step", currentStep)
|
||||
|
||||
const FieldTypeToComponentMap = {
|
||||
string: "stringfield",
|
||||
number: "numberfield",
|
||||
bigint: "bigintfield",
|
||||
options: "optionsfield",
|
||||
array: "multifieldselect",
|
||||
boolean: "booleanfield",
|
||||
longform: "longformfield",
|
||||
datetime: "datetimefield",
|
||||
attachment: "attachmentfield",
|
||||
link: "relationshipfield",
|
||||
json: "jsonfield",
|
||||
barcodeqr: "codescanner",
|
||||
bb_reference: "bbreferencefield",
|
||||
}
|
||||
|
||||
let schema
|
||||
|
||||
$: fetchSchema(dataSource)
|
||||
$: enrichedSteps = enrichSteps(steps, schema, $component.id)
|
||||
$: updateCurrentStep(enrichedSteps, $builderStore, $component)
|
||||
|
||||
const updateCurrentStep = (steps, builderStore, component) => {
|
||||
const { componentId, step } = builderStore.metadata || {}
|
||||
|
||||
// If we aren't in the builder or aren't selected then don't update the step
|
||||
// context at all, allowing the normal form to take control.
|
||||
if (
|
||||
!component.selected ||
|
||||
!builderStore.inBuilder ||
|
||||
componentId !== component.id
|
||||
) {
|
||||
return
|
||||
}
|
||||
|
||||
// Ensure we have a valid step selected
|
||||
let newStep = Math.min(step || 0, steps.length - 1)
|
||||
|
||||
// Sanity check
|
||||
newStep = Math.max(newStep, 0)
|
||||
|
||||
// Add 1 because the form component expects 1 indexed rather than 0 indexed
|
||||
currentStep.set(newStep + 1)
|
||||
}
|
||||
|
||||
const getPropsForField = field => {
|
||||
if (field._component) {
|
||||
return field
|
||||
}
|
||||
return {
|
||||
field: field.name,
|
||||
label: field.name,
|
||||
placeholder: field.name,
|
||||
_instanceName: field.name,
|
||||
}
|
||||
}
|
||||
|
||||
const getComponentForField = field => {
|
||||
const fieldSchemaName = field.field || field.name
|
||||
if (!fieldSchemaName || !schema?.[fieldSchemaName]) {
|
||||
return null
|
||||
}
|
||||
const type = schema[fieldSchemaName].type
|
||||
return FieldTypeToComponentMap[type]
|
||||
}
|
||||
|
||||
const fetchSchema = async () => {
|
||||
schema = (await fetchDatasourceSchema(dataSource)) || {}
|
||||
}
|
||||
|
||||
const getDefaultFields = (fields, schema) => {
|
||||
if (fields?.length) {
|
||||
return fields.filter(field => field.active)
|
||||
}
|
||||
return Object.values(schema || {})
|
||||
.filter(field => !field.autocolumn)
|
||||
.map(field => ({
|
||||
name: field.name,
|
||||
}))
|
||||
}
|
||||
|
||||
const enrichSteps = (steps, schema, id) => {
|
||||
const safeSteps = steps?.length ? steps : [{}]
|
||||
return safeSteps.map((step, idx) => {
|
||||
const { title, desc, fields, buttons } = step
|
||||
const defaultProps = Utils.buildMultiStepFormBlockDefaultProps({
|
||||
_id: id,
|
||||
stepCount: safeSteps.length,
|
||||
currentStep: idx,
|
||||
actionType,
|
||||
dataSource,
|
||||
})
|
||||
return {
|
||||
fields: getDefaultFields(fields || [], schema),
|
||||
title: title ?? defaultProps.title,
|
||||
desc,
|
||||
buttons: buttons || defaultProps.buttons,
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<FormBlockWrapper {actionType} {dataSource} {rowId} {noRowsMessage}>
|
||||
<BlockComponent
|
||||
type="form"
|
||||
context="form"
|
||||
props={{
|
||||
dataSource,
|
||||
actionType: actionType === "Create" ? "Create" : "Update",
|
||||
readonly: actionType === "View",
|
||||
}}
|
||||
styles={{
|
||||
normal: {
|
||||
width: "600px",
|
||||
"margin-left": "auto",
|
||||
"margin-right": "auto",
|
||||
},
|
||||
}}
|
||||
>
|
||||
{#each enrichedSteps as step, stepIdx}
|
||||
<BlockComponent
|
||||
type="formstep"
|
||||
props={{ step: stepIdx + 1, _instanceName: `Step ${stepIdx + 1}` }}
|
||||
>
|
||||
<BlockComponent
|
||||
type="container"
|
||||
props={{
|
||||
gap: "M",
|
||||
direction: "column",
|
||||
hAlign: "stretch",
|
||||
vAlign: "top",
|
||||
size: "shrink",
|
||||
}}
|
||||
>
|
||||
<BlockComponent type="container" order={0}>
|
||||
<BlockComponent type="heading" props={{ text: step.title }} />
|
||||
</BlockComponent>
|
||||
<BlockComponent type="text" props={{ text: step.desc }} order={1} />
|
||||
<BlockComponent type="fieldgroup" order={2}>
|
||||
{#each step.fields as field, fieldIdx (`${field.field || field.name}_${stepIdx}_${fieldIdx}`)}
|
||||
{#if getComponentForField(field)}
|
||||
<BlockComponent
|
||||
type={getComponentForField(field)}
|
||||
props={getPropsForField(field)}
|
||||
order={fieldIdx}
|
||||
interactive
|
||||
name={field.field}
|
||||
/>
|
||||
{/if}
|
||||
{/each}
|
||||
</BlockComponent>
|
||||
<BlockComponent
|
||||
type="buttongroup"
|
||||
props={{ buttons: step.buttons }}
|
||||
styles={{
|
||||
normal: {
|
||||
"margin-top": "16px",
|
||||
},
|
||||
}}
|
||||
order={3}
|
||||
/>
|
||||
</BlockComponent>
|
||||
</BlockComponent>
|
||||
{/each}
|
||||
</BlockComponent>
|
||||
</FormBlockWrapper>
|
||||
|
|
@ -265,7 +265,7 @@
|
|||
props={{
|
||||
dataSource,
|
||||
buttonPosition: "top",
|
||||
buttons: Utils.buildDynamicButtonConfig({
|
||||
buttons: Utils.buildFormBlockButtonConfig({
|
||||
_id: $component.id + "-form-edit",
|
||||
showDeleteButton: deleteLabel !== "",
|
||||
showSaveButton: true,
|
||||
|
|
@ -299,7 +299,7 @@
|
|||
props={{
|
||||
dataSource,
|
||||
buttonPosition: "top",
|
||||
buttons: Utils.buildDynamicButtonConfig({
|
||||
buttons: Utils.buildFormBlockButtonConfig({
|
||||
_id: $component.id + "-form-new",
|
||||
showDeleteButton: false,
|
||||
showSaveButton: true,
|
||||
|
|
|
|||
|
|
@ -1,10 +1,8 @@
|
|||
<script>
|
||||
import { getContext } from "svelte"
|
||||
import BlockComponent from "components/BlockComponent.svelte"
|
||||
import Block from "components/Block.svelte"
|
||||
import { makePropSafe as safe } from "@budibase/string-templates"
|
||||
import InnerFormBlock from "./InnerFormBlock.svelte"
|
||||
import { Utils } from "@budibase/frontend-core"
|
||||
import FormBlockWrapper from "./FormBlockWrapper.svelte"
|
||||
|
||||
export let actionType
|
||||
export let dataSource
|
||||
|
|
@ -71,22 +69,10 @@
|
|||
}
|
||||
|
||||
let schema
|
||||
let providerId
|
||||
let repeaterId
|
||||
|
||||
$: formattedFields = convertOldFieldFormat(fields)
|
||||
$: fieldsOrDefault = getDefaultFields(formattedFields, schema)
|
||||
$: fetchSchema(dataSource)
|
||||
$: dataProvider = `{{ literal ${safe(providerId)} }}`
|
||||
$: filter = [
|
||||
{
|
||||
field: "_id",
|
||||
operator: "equal",
|
||||
type: "string",
|
||||
value: !rowId ? `{{ ${safe("url")}.${safe("id")} }}` : rowId,
|
||||
valueType: "Binding",
|
||||
},
|
||||
]
|
||||
// We could simply spread $$props into the inner form and append our
|
||||
// additions, but that would create svelte warnings about unused props and
|
||||
// make maintenance in future more confusing as we typically always have a
|
||||
|
|
@ -102,11 +88,10 @@
|
|||
title,
|
||||
description,
|
||||
schema,
|
||||
repeaterId,
|
||||
notificationOverride,
|
||||
buttons:
|
||||
buttons ||
|
||||
Utils.buildDynamicButtonConfig({
|
||||
Utils.buildFormBlockButtonConfig({
|
||||
_id: $component.id,
|
||||
showDeleteButton,
|
||||
showSaveButton,
|
||||
|
|
@ -124,43 +109,6 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<Block>
|
||||
{#if actionType === "Create"}
|
||||
<BlockComponent
|
||||
type="container"
|
||||
props={{
|
||||
direction: "column",
|
||||
hAlign: "left",
|
||||
vAlign: "stretch",
|
||||
}}
|
||||
>
|
||||
<InnerFormBlock {...innerProps} />
|
||||
</BlockComponent>
|
||||
{:else}
|
||||
<BlockComponent
|
||||
type="dataprovider"
|
||||
context="provider"
|
||||
bind:id={providerId}
|
||||
props={{
|
||||
dataSource,
|
||||
filter,
|
||||
limit: 1,
|
||||
paginate: false,
|
||||
}}
|
||||
>
|
||||
<BlockComponent
|
||||
type="repeater"
|
||||
context="repeater"
|
||||
bind:id={repeaterId}
|
||||
props={{
|
||||
dataProvider,
|
||||
noRowsMessage: noRowsMessage || "We couldn't find a row to display",
|
||||
direction: "column",
|
||||
hAlign: "center",
|
||||
}}
|
||||
>
|
||||
<InnerFormBlock {...innerProps} />
|
||||
</BlockComponent>
|
||||
</BlockComponent>
|
||||
{/if}
|
||||
</Block>
|
||||
<FormBlockWrapper {actionType} {dataSource} {rowId} {noRowsMessage}>
|
||||
<InnerFormBlock {...innerProps} />
|
||||
</FormBlockWrapper>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,64 @@
|
|||
<script>
|
||||
import BlockComponent from "components/BlockComponent.svelte"
|
||||
import Block from "components/Block.svelte"
|
||||
import { makePropSafe as safe } from "@budibase/string-templates"
|
||||
import { getContext } from "svelte"
|
||||
|
||||
export let actionType
|
||||
export let dataSource
|
||||
export let rowId
|
||||
export let noRowsMessage
|
||||
|
||||
const component = getContext("component")
|
||||
|
||||
$: providerId = `${$component.id}-provider`
|
||||
$: dataProvider = `{{ literal ${safe(providerId)} }}`
|
||||
$: filter = [
|
||||
{
|
||||
field: "_id",
|
||||
operator: "equal",
|
||||
type: "string",
|
||||
value: !rowId ? `{{ ${safe("url")}.${safe("id")} }}` : rowId,
|
||||
valueType: "Binding",
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<Block>
|
||||
{#if actionType === "Create"}
|
||||
<BlockComponent
|
||||
type="container"
|
||||
props={{
|
||||
direction: "column",
|
||||
hAlign: "left",
|
||||
vAlign: "stretch",
|
||||
}}
|
||||
>
|
||||
<slot />
|
||||
</BlockComponent>
|
||||
{:else}
|
||||
<BlockComponent
|
||||
type="dataprovider"
|
||||
context="provider"
|
||||
props={{
|
||||
dataSource,
|
||||
filter,
|
||||
limit: 1,
|
||||
paginate: false,
|
||||
}}
|
||||
>
|
||||
<BlockComponent
|
||||
type="repeater"
|
||||
context="repeater"
|
||||
props={{
|
||||
dataProvider,
|
||||
noRowsMessage: noRowsMessage || "We couldn't find a row to display",
|
||||
direction: "column",
|
||||
hAlign: "center",
|
||||
}}
|
||||
>
|
||||
<slot />
|
||||
</BlockComponent>
|
||||
</BlockComponent>
|
||||
{/if}
|
||||
</Block>
|
||||
|
|
@ -4,3 +4,4 @@ export { default as repeaterblock } from "./RepeaterBlock.svelte"
|
|||
export { default as formblock } from "./form/FormBlock.svelte"
|
||||
export { default as chartblock } from "./ChartBlock.svelte"
|
||||
export { default as rowexplorer } from "./RowExplorer.svelte"
|
||||
export { default as multistepformblock } from "./MultiStepFormblock.svelte"
|
||||
|
|
|
|||
|
|
@ -137,21 +137,23 @@
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.error :global(svg),
|
||||
.helpText :global(svg) {
|
||||
width: 13px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.error {
|
||||
display: flex;
|
||||
margin-top: var(--spectrum-global-dimension-size-75);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.error :global(svg) {
|
||||
width: 14px;
|
||||
color: var(
|
||||
--spectrum-semantic-negative-color-default,
|
||||
var(--spectrum-global-color-red-500)
|
||||
);
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.error span {
|
||||
color: var(
|
||||
--spectrum-semantic-negative-color-default,
|
||||
|
|
@ -165,17 +167,14 @@
|
|||
margin-top: var(--spectrum-global-dimension-size-75);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.helpText :global(svg) {
|
||||
width: 14px;
|
||||
color: var(--grey-7);
|
||||
margin-right: 6px;
|
||||
color: var(--spectrum-global-color-gray-600);
|
||||
}
|
||||
|
||||
.helpText span {
|
||||
color: var(--grey-5);
|
||||
color: var(--spectrum-global-color-gray-800);
|
||||
font-size: var(--spectrum-global-dimension-font-size-75);
|
||||
}
|
||||
|
||||
.spectrum-FieldLabel--right,
|
||||
.spectrum-FieldLabel--left {
|
||||
padding-right: var(--spectrum-global-dimension-size-200);
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@
|
|||
let loaded = false
|
||||
let schema
|
||||
let table
|
||||
let currentStep = writable(getInitialFormStep())
|
||||
let currentStep = getContext("current-step") || writable(getInitialFormStep())
|
||||
|
||||
$: fetchSchema(dataSource)
|
||||
$: schemaKey = generateSchemaKey(schema)
|
||||
|
|
|
|||
|
|
@ -423,10 +423,14 @@
|
|||
}
|
||||
const fieldId = field.fieldState.fieldId
|
||||
const fieldElement = document.getElementById(fieldId)
|
||||
fieldElement.focus({ preventScroll: true })
|
||||
if (fieldElement) {
|
||||
fieldElement.focus({ preventScroll: true })
|
||||
}
|
||||
const label = document.querySelector(`label[for="${fieldId}"]`)
|
||||
label.style.scrollMargin = "100px"
|
||||
label.scrollIntoView({ behavior: "smooth", block: "nearest" })
|
||||
if (label) {
|
||||
label.style.scrollMargin = "100px"
|
||||
label.scrollIntoView({ behavior: "smooth", block: "nearest" })
|
||||
}
|
||||
}
|
||||
|
||||
// Action context to pass to children
|
||||
|
|
|
|||
|
|
@ -76,6 +76,8 @@ const loadBudibase = async () => {
|
|||
} else {
|
||||
dndStore.actions.reset()
|
||||
}
|
||||
} else if (type === "builder-meta") {
|
||||
builderStore.actions.setMetadata(data)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@ const createBuilderStore = () => {
|
|||
hiddenComponentIds: [],
|
||||
usedPlugins: null,
|
||||
eventResolvers: {},
|
||||
metadata: null,
|
||||
|
||||
// Legacy - allow the builder to specify a layout
|
||||
layout: null,
|
||||
|
|
@ -123,6 +124,12 @@ const createBuilderStore = () => {
|
|||
parentType,
|
||||
})
|
||||
},
|
||||
setMetadata: metadata => {
|
||||
store.update(state => ({
|
||||
...state,
|
||||
metadata,
|
||||
}))
|
||||
},
|
||||
}
|
||||
return {
|
||||
...store,
|
||||
|
|
|
|||
|
|
@ -116,7 +116,7 @@ export const domDebounce = callback => {
|
|||
*
|
||||
* @param {any} props
|
||||
* */
|
||||
export const buildDynamicButtonConfig = props => {
|
||||
export const buildFormBlockButtonConfig = props => {
|
||||
const {
|
||||
_id,
|
||||
actionType,
|
||||
|
|
@ -130,7 +130,6 @@ export const buildDynamicButtonConfig = props => {
|
|||
} = props || {}
|
||||
|
||||
if (!_id) {
|
||||
console.log("MISSING ID")
|
||||
return
|
||||
}
|
||||
const formId = `${_id}-form`
|
||||
|
|
@ -228,7 +227,7 @@ export const buildDynamicButtonConfig = props => {
|
|||
})
|
||||
}
|
||||
|
||||
if (actionType == "Update" && showDeleteButton !== false) {
|
||||
if (actionType === "Update" && showDeleteButton !== false) {
|
||||
defaultButtons.push({
|
||||
text: deleteText || "Delete",
|
||||
_id: Helpers.uuid(),
|
||||
|
|
@ -241,3 +240,108 @@ export const buildDynamicButtonConfig = props => {
|
|||
|
||||
return defaultButtons
|
||||
}
|
||||
|
||||
export const buildMultiStepFormBlockDefaultProps = props => {
|
||||
const { _id, stepCount, currentStep, actionType, dataSource } = props || {}
|
||||
|
||||
// Sanity check
|
||||
if (!_id || !stepCount) {
|
||||
return
|
||||
}
|
||||
|
||||
const title = `Step {{ [${_id}-form].[__currentStep] }}`
|
||||
const resourceId = dataSource?.resourceId
|
||||
const formId = `${_id}-form`
|
||||
let buttons = []
|
||||
|
||||
// Add previous step button if we aren't the first step
|
||||
if (currentStep !== 0) {
|
||||
buttons.push({
|
||||
_id: Helpers.uuid(),
|
||||
_component: "@budibase/standard-components/button",
|
||||
_instanceName: Helpers.uuid(),
|
||||
text: "Back",
|
||||
type: "secondary",
|
||||
size: "M",
|
||||
onClick: [
|
||||
{
|
||||
parameters: {
|
||||
type: "prev",
|
||||
componentId: formId,
|
||||
},
|
||||
"##eventHandlerType": "Change Form Step",
|
||||
},
|
||||
],
|
||||
})
|
||||
}
|
||||
|
||||
// Add a next button if we aren't the last step
|
||||
if (currentStep !== stepCount - 1) {
|
||||
buttons.push({
|
||||
_id: Helpers.uuid(),
|
||||
_component: "@budibase/standard-components/button",
|
||||
_instanceName: Helpers.uuid(),
|
||||
text: "Next",
|
||||
type: "cta",
|
||||
size: "M",
|
||||
onClick: [
|
||||
{
|
||||
"##eventHandlerType": "Validate Form",
|
||||
parameters: {
|
||||
componentId: formId,
|
||||
},
|
||||
},
|
||||
{
|
||||
parameters: {
|
||||
type: "next",
|
||||
componentId: formId,
|
||||
},
|
||||
"##eventHandlerType": "Change Form Step",
|
||||
},
|
||||
],
|
||||
})
|
||||
}
|
||||
|
||||
// Add save button if we are the last step
|
||||
if (actionType !== "View" && currentStep === stepCount - 1) {
|
||||
buttons.push({
|
||||
_id: Helpers.uuid(),
|
||||
_component: "@budibase/standard-components/button",
|
||||
_instanceName: Helpers.uuid(),
|
||||
text: "Save",
|
||||
type: "cta",
|
||||
size: "M",
|
||||
onClick: [
|
||||
{
|
||||
"##eventHandlerType": "Validate Form",
|
||||
parameters: {
|
||||
componentId: formId,
|
||||
},
|
||||
},
|
||||
{
|
||||
"##eventHandlerType": "Save Row",
|
||||
parameters: {
|
||||
tableId: resourceId,
|
||||
providerId: formId,
|
||||
},
|
||||
},
|
||||
// Clear a create form once submitted
|
||||
...(actionType !== "Create"
|
||||
? []
|
||||
: [
|
||||
{
|
||||
"##eventHandlerType": "Clear Form",
|
||||
parameters: {
|
||||
componentId: formId,
|
||||
},
|
||||
},
|
||||
]),
|
||||
],
|
||||
})
|
||||
}
|
||||
|
||||
return {
|
||||
buttons,
|
||||
title,
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue