MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #5417 from Budibase/form-actions 

Form actions
This commit is contained in:
Andrew Kingston 2022-04-22 10:47:57 +01:00 committed by GitHub
parent 52c056b9ef e60c1a9685
commit 754aa82cec
19 changed files with 420 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/builder/src/builderStore/dataBinding.js
View File

@ -654,7 +654,7 @@ export const getSchemaForDatasource = (asset, datasource, options) => {
* Builds a form schema given a form component.
* A form schema is a schema of all the fields nested anywhere within a form.
*/
const buildFormSchema = component => {
export const buildFormSchema = component => {
let schema = {}
if (!component) {
return schema

78
packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/actions/UpdateFieldValue.svelte Normal file
View File

@ -0,0 +1,78 @@
<script>
import { Select, Label, Combobox } from "@budibase/bbui"
import { onMount } from "svelte"
import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
import { currentAsset, store } from "builderStore"
import {
getActionProviderComponents,
buildFormSchema,
} from "builderStore/dataBinding"
import { findComponent } from "builderStore/componentUtils"
export let parameters
export let bindings = []
const typeOptions = [
{
label: "Set value",
value: "set",
},
{
label: "Reset to default value",
value: "reset",
},
]
$: formComponent = findComponent($currentAsset.props, parameters.componentId)
$: formSchema = buildFormSchema(formComponent)
$: fieldOptions = Object.keys(formSchema || {})
$: actionProviders = getActionProviderComponents(
$currentAsset,
$store.selectedComponentId,
"ValidateForm"
)
onMount(() => {
if (!parameters.type) {
parameters.type = "set"
}
})
</script>
<div class="root">
<Label small>Form</Label>
<Select
bind:value={parameters.componentId}
options={actionProviders}
getOptionLabel={x => x._instanceName}
getOptionValue={x => x._id}
/>
<Label small>Type</Label>
<Select
placeholder={null}
bind:value={parameters.type}
options={typeOptions}
/>
<Label small>Field</Label>
<Combobox bind:value={parameters.field} options={fieldOptions} />
{#if parameters.type === "set"}
<Label small>Value</Label>
<DrawerBindableInput
{bindings}
value={parameters.value}
on:change={e => (parameters.value = e.detail)}
/>
{/if}
</div>
<style>
.root {
display: grid;
column-gap: var(--spacing-l);
row-gap: var(--spacing-s);
grid-template-columns: 60px 1fr;
align-items: center;
max-width: 400px;
margin: 0 auto;
}
</style>

1
packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/actions/index.js
View File

@ -14,3 +14,4 @@ export { default as DuplicateRow } from "./DuplicateRow.svelte"
export { default as S3Upload } from "./S3Upload.svelte"
export { default as ExportData } from "./ExportData.svelte"
export { default as ContinueIf } from "./ContinueIf.svelte"
export { default as UpdateFieldValue } from "./UpdateFieldValue.svelte"

16
packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/manifest.json
View File

@ -42,25 +42,29 @@
"name": "Trigger Automation",
"component": "TriggerAutomation"
},
{
"name": "Update Field Value",
"component": "UpdateFieldValue"
},
{
"name": "Validate Form",
"component": "ValidateForm"
},
{
"name": "Log Out",
"component": "LogOut"
"name": "Change Form Step",
"component": "ChangeFormStep"
},
{
"name": "Clear Form",
"component": "ClearForm"
},
{
"name": "Close Screen Modal",
"component": "CloseScreenModal"
"name": "Log Out",
"component": "LogOut"
},
{
"name": "Change Form Step",
"component": "ChangeFormStep"
"name": "Close Screen Modal",
"component": "CloseScreenModal"
},
{
"name": "Refresh Data Provider",

8
packages/builder/src/pages/builder/portal/apps/create.svelte
View File

@ -75,8 +75,8 @@
<div class="title">
<div class="welcome">
<Layout noPadding gap="XS">
<Heading size="M">{createAppTitle}</Heading>
<Body size="S">
<Heading size="L">{createAppTitle}</Heading>
<Body size="M">
{welcomeBody}
</Body>
</Layout>
@ -84,7 +84,7 @@
<div class="buttons">
<Button
dataCy="create-app-btn"
size="L"
size="M"
icon="Add"
cta
on:click={initiateAppCreation}
@ -94,7 +94,7 @@
<Button
dataCy="import-app-btn"
icon="Import"
size="L"
size="M"
quiet
secondary
on:click={initiateAppImport}

229
packages/client/manifest.json
View File

@ -1834,7 +1834,12 @@
"icon": "Form",
"hasChildren": true,
"illegalChildren": ["section", "form"],
"actions": ["ValidateForm", "ClearForm", "ChangeFormStep"],
"actions": [
"ValidateForm",
"ClearForm",
"ChangeFormStep",
"UpdateFieldValue"
],
"styles": ["size"],
"settings": [
{
@ -1975,6 +1980,17 @@
"label": "Default value",
"key": "defaultValue"
},
{
"type": "event",
"label": "On Change",
"key": "onChange",
"context": [
{
"label": "Field Value",
"key": "value"
}
]
},
{
"type": "boolean",
"label": "Disabled",
@ -2049,6 +2065,17 @@
"label": "Default value",
"key": "defaultValue"
},
{
"type": "event",
"label": "On Change",
"key": "onChange",
"context": [
{
"label": "Field Value",
"key": "value"
}
]
},
{
"type": "boolean",
"label": "Disabled",
@ -2089,6 +2116,17 @@
"label": "Default value",
"key": "defaultValue"
},
{
"type": "event",
"label": "On Change",
"key": "onChange",
"context": [
{
"label": "Field Value",
"key": "value"
}
]
},
{
"type": "boolean",
"label": "Disabled",
@ -2125,6 +2163,17 @@
"key": "placeholder",
"placeholder": "Choose an option"
},
{
"type": "event",
"label": "On Change",
"key": "onChange",
"context": [
{
"label": "Field Value",
"key": "value"
}
]
},
{
"type": "select",
"label": "Type",
@ -2274,6 +2323,17 @@
"label": "Default value",
"key": "defaultValue"
},
{
"type": "event",
"label": "On Change",
"key": "onChange",
"context": [
{
"label": "Field Value",
"key": "value"
}
]
},
{
"type": "boolean",
"label": "Autocomplete",
@ -2399,6 +2459,17 @@
"label": "Default value",
"key": "defaultValue"
},
{
"type": "event",
"label": "On Change",
"key": "onChange",
"context": [
{
"label": "Field Value",
"key": "value"
}
]
},
{
"type": "boolean",
"label": "Disabled",
@ -2439,6 +2510,17 @@
"label": "Default value",
"key": "defaultValue"
},
{
"type": "event",
"label": "On Change",
"key": "onChange",
"context": [
{
"label": "Field Value",
"key": "value"
}
]
},
{
"type": "select",
"label": "Formatting",
@ -2512,6 +2594,17 @@
"label": "Default value",
"key": "defaultValue"
},
{
"type": "event",
"label": "On Change",
"key": "onChange",
"context": [
{
"label": "Field Value",
"key": "value"
}
]
},
{
"type": "boolean",
"label": "Disabled",
@ -2657,6 +2750,17 @@
"label": "Extensions",
"key": "extensions"
},
{
"type": "event",
"label": "On Change",
"key": "onChange",
"context": [
{
"label": "Field Value",
"key": "value"
}
]
},
{
"type": "boolean",
"label": "Disabled",
@ -2697,6 +2801,17 @@
"label": "Default value",
"key": "defaultValue"
},
{
"type": "event",
"label": "On Change",
"key": "onChange",
"context": [
{
"label": "Field Value",
"key": "value"
}
]
},
{
"type": "boolean",
"label": "Autocomplete",
@ -2742,6 +2857,17 @@
"label": "Default value",
"key": "defaultValue"
},
{
"type": "event",
"label": "On Change",
"key": "onChange",
"context": [
{
"label": "Field Value",
"key": "value"
}
]
},
{
"type": "boolean",
"label": "Disabled",
@ -2750,6 +2876,62 @@
}
]
},
"s3upload": {
"name": "S3 File Upload",
"info": "This component can't be used with S3 datasources that use custom endpoints.",
"icon": "UploadToCloud",
"styles": ["size"],
"editable": true,
"settings": [
{
"type": "field/attachment",
"label": "Field",
"key": "field"
},
{
"type": "text",
"label": "Label",
"key": "label"
},
{
"type": "dataSource/s3",
"label": "S3 Datasource",
"key": "datasourceId"
},
{
"type": "text",
"label": "Bucket",
"key": "bucket"
},
{
"type": "text",
"label": "File Name",
"key": "key"
},
{
"type": "event",
"label": "On Change",
"key": "onChange",
"context": [
{
"label": "Field Value",
"key": "value"
}
]
},
{
"type": "boolean",
"label": "Disabled",
"key": "disabled",
"defaultValue": false
},
{
"type": "validation/attachment",
"label": "Validation",
"key": "validation"
}
]
},
"dataprovider": {
"name": "Data Provider",
"info": "Pagination is only available for data stored in tables.",
@ -3581,51 +3763,6 @@
}
]
},
"s3upload": {
"name": "S3 File Upload",
"info": "This component can't be used with S3 datasources that use custom endpoints.",
"icon": "UploadToCloud",
"styles": ["size"],
"editable": true,
"settings": [
{
"type": "field/attachment",
"label": "Field",
"key": "field"
},
{
"type": "text",
"label": "Label",
"key": "label"
},
{
"type": "dataSource/s3",
"label": "S3 Datasource",
"key": "datasourceId"
},
{
"type": "text",
"label": "Bucket",
"key": "bucket"
},
{
"type": "text",
"label": "File Name",
"key": "key"
},
{
"type": "boolean",
"label": "Disabled",
"key": "disabled",
"defaultValue": false
},
{
"type": "validation/attachment",
"label": "Validation",
"key": "validation"
}
]
},
"markdownviewer": {
"name": "Markdown Viewer",
"icon": "TaskList",

12
packages/client/src/components/app/forms/AttachmentField.svelte
View File

@ -8,6 +8,7 @@
export let disabled = false
export let validation
export let extensions
export let onChange
let fieldState
let fieldApi
@ -38,6 +39,13 @@
return []
}
}
const handleChange = e => {
fieldApi.setValue(e.detail)
if (onChange) {
onChange({ value: e.detail })
}
}
</script>
<Field
@ -55,9 +63,7 @@
value={fieldState.value}
disabled={fieldState.disabled}
error={fieldState.error}
on:change={e => {
fieldApi.setValue(e.detail)
}}
on:change={handleChange}
{processFiles}
{handleFileTooLarge}
{extensions}

10
packages/client/src/components/app/forms/BooleanField.svelte
View File

@ -9,6 +9,7 @@
export let size
export let validation
export let defaultValue
export let onChange
let fieldState
let fieldApi
@ -25,6 +26,13 @@
}
return false
}
const handleChange = e => {
fieldApi.setValue(e.detail)
if (onChange) {
onChange({ value: e.detail })
}
}
</script>
<Field
@ -44,8 +52,8 @@
error={fieldState.error}
id={fieldState.fieldId}
{size}
on:change={e => fieldApi.setValue(e.detail)}
{text}
on:change={handleChange}
/>
{/if}
</Field>

10
packages/client/src/components/app/forms/DateTimeField.svelte
View File

@ -10,9 +10,17 @@
export let timeOnly = false
export let validation
export let defaultValue
export let onChange
let fieldState
let fieldApi
const handleChange = e => {
fieldApi.setValue(e.detail)
if (onChange) {
onChange({ value: e.detail })
}
}
</script>
<Field
@ -28,7 +36,7 @@
{#if fieldState}
<CoreDatePicker
value={fieldState.value}
on:change={e => fieldApi.setValue(e.detail)}
on:change={handleChange}
disabled={fieldState.disabled}
error={fieldState.error}
id={fieldState.fieldId}

41
packages/client/src/components/app/forms/InnerForm.svelte
View File

@ -219,10 +219,10 @@
})
return valid
},
clear: () => {
// Clear the form by clearing each individual field
reset: () => {
// Reset the form by resetting each individual field
fields.forEach(field => {
get(field).fieldApi.clearValue()
get(field).fieldApi.reset()
})
},
changeStep: ({ type, number }) => {
@ -241,6 +241,22 @@
currentStep.set(step)
}
},
setFieldValue: (fieldName, value) => {
const field = getField(fieldName)
if (!field) {
return
}
const { fieldApi } = get(field)
fieldApi.setValue(value)
},
resetField: fieldName => {
const field = getField(fieldName)
if (!field) {
return
}
const { fieldApi } = get(field)
fieldApi.reset()
},
}
// Creates an API for a specific field
@ -268,11 +284,11 @@
return !error
}
// Clears the value of a certain field back to the initial value
const clearValue = () => {
// Clears the value of a certain field back to the default value
const reset = () => {
const fieldInfo = getField(field)
const { fieldState } = get(fieldInfo)
const newValue = initialValues[field] ?? fieldState.defaultValue
const newValue = fieldState.defaultValue
// Update field state
fieldInfo.update(state => {
@ -329,7 +345,7 @@
return {
setValue,
clearValue,
reset,
updateValidation,
setDisabled,
validate: () => {
@ -354,11 +370,20 @@
// register their fields to step 1
setContext("form-step", writable(1))
const handleUpdateFieldValue = ({ type, field, value }) => {
if (type === "set") {
formApi.setFieldValue(field, value)
} else {
formApi.resetField(field)
}
}
// Action context to pass to children
const actions = [
{ type: ActionTypes.ValidateForm, callback: formApi.validate },
{ type: ActionTypes.ClearForm, callback: formApi.clear },
{ type: ActionTypes.ClearForm, callback: formApi.reset },
{ type: ActionTypes.ChangeFormStep, callback: formApi.changeStep },
{ type: ActionTypes.UpdateFieldValue, callback: handleUpdateFieldValue },
]
</script>

11
packages/client/src/components/app/forms/JSONField.svelte
View File

@ -8,6 +8,7 @@
export let placeholder
export let disabled = false
export let defaultValue = ""
export let onChange
const component = getContext("component")
const validation = [
@ -33,6 +34,14 @@
return value
}
}
const handleChange = e => {
const value = parseValue(e.detail)
fieldApi.setValue(value)
if (onChange) {
onChange({ value })
}
}
</script>
<Field
@ -49,7 +58,7 @@
<div style="--height: {height};">
<CoreTextArea
value={serialiseValue(fieldState.value)}
on:change={e => fieldApi.setValue(parseValue(e.detail))}
on:change={handleChange}
disabled={fieldState.disabled}
error={fieldState.error}
id={fieldState.fieldId}

12
packages/client/src/components/app/forms/LongFormField.svelte
View File

@ -11,6 +11,7 @@
export let validation
export let defaultValue = ""
export let format = "auto"
export let onChange
let fieldState
let fieldApi
@ -44,6 +45,13 @@
},
})
}
const handleChange = e => {
fieldApi.setValue(e.detail)
if (onChange) {
onChange({ value: e.detail })
}
}
</script>
<Field
@ -61,7 +69,7 @@
{#if useRichText}
<CoreRichTextField
value={fieldState.value}
on:change={e => fieldApi.setValue(e.detail)}
on:change={handleChange}
disabled={fieldState.disabled}
error={fieldState.error}
id={fieldState.fieldId}
@ -78,7 +86,7 @@
{:else}
<CoreTextArea
value={fieldState.value}
on:change={e => fieldApi.setValue(e.detail)}
on:change={handleChange}
disabled={fieldState.disabled}
error={fieldState.error}
id={fieldState.fieldId}

12
packages/client/src/components/app/forms/MultiFieldSelect.svelte
View File

@ -14,6 +14,7 @@
export let valueColumn
export let customOptions
export let autocomplete = false
export let onChange
let fieldState
let fieldApi
@ -34,13 +35,18 @@
if (!values) {
return []
}
if (Array.isArray(values)) {
return values
}
return values.split(",").map(value => value.trim())
}
const handleChange = e => {
fieldApi.setValue(e.detail)
if (onChange) {
onChange({ value: e.detail })
}
}
</script>
<Field
@ -62,7 +68,7 @@
getOptionValue={flatOptions ? x => x : x => x.value}
id={fieldState.fieldId}
disabled={fieldState.disabled}
on:change={e => fieldApi.setValue(e.detail)}
on:change={handleChange}
{placeholder}
{options}
{autocomplete}

12
packages/client/src/components/app/forms/OptionsField.svelte
View File

@ -16,6 +16,7 @@
export let customOptions
export let autocomplete = false
export let direction = "vertical"
export let onChange
let fieldState
let fieldApi
@ -30,6 +31,13 @@
valueColumn,
customOptions
)
const handleChange = e => {
fieldApi.setValue(e.detail)
if (onChange) {
onChange({ value: e.detail })
}
}
</script>
<Field
@ -52,7 +60,7 @@
error={fieldState.error}
{options}
{placeholder}
on:change={e => fieldApi.setValue(e.detail)}
on:change={handleChange}
getOptionLabel={flatOptions ? x => x : x => x.label}
getOptionValue={flatOptions ? x => x : x => x.value}
{autocomplete}
@ -66,7 +74,7 @@
error={fieldState.error}
{options}
{direction}
on:change={e => fieldApi.setValue(e.detail)}
on:change={handleChange}
getOptionLabel={flatOptions ? x => x : x => x.label}
getOptionValue={flatOptions ? x => x : x => x.value}
/>

12
packages/client/src/components/app/forms/RelationshipField.svelte
View File

@ -13,6 +13,7 @@
export let validation
export let autocomplete = false
export let defaultValue
export let onChange
let fieldState
let fieldApi
@ -62,11 +63,11 @@
}
const singleHandler = e => {
fieldApi.setValue(e.detail == null ? [] : [e.detail])
handleChange(e.detail == null ? [] : [e.detail])
}
const multiHandler = e => {
fieldApi.setValue(e.detail)
handleChange(e.detail)
}
const expand = values => {
@ -78,6 +79,13 @@
}
return values.split(",").map(value => value.trim())
}
const handleChange = value => {
fieldApi.setValue(value)
if (onChange) {
onChange({ value })
}
}
</script>
<Field

12
packages/client/src/components/app/forms/S3Upload.svelte
View File

@ -10,6 +10,7 @@
export let label
export let disabled = false
export let validation
export let onChange
let fieldState
let fieldApi
@ -88,6 +89,13 @@
}
}
const handleChange = e => {
fieldApi.setValue(e.detail)
if (onChange) {
onChange({ value: e.detail })
}
}
onMount(() => {
uploadStore.actions.registerFileUpload($component.id, upload)
})
@ -113,9 +121,7 @@
value={fieldState.value}
disabled={loading || fieldState.disabled}
error={fieldState.error}
on:change={e => {
fieldApi.setValue(e.detail)
}}
on:change={handleChange}
{processFiles}
{handleFileTooLarge}
maximum={1}

11
packages/client/src/components/app/forms/StringField.svelte
View File

@ -10,9 +10,17 @@
export let validation
export let defaultValue = ""
export let align
export let onChange
let fieldState
let fieldApi
const handleChange = e => {
fieldApi.setValue(e.detail)
if (onChange) {
onChange({ value: e.detail })
}
}
</script>
<Field
@ -21,6 +29,7 @@
{disabled}
{validation}
{defaultValue}
{onChange}
type={type === "number" ? "number" : "string"}
bind:fieldState
bind:fieldApi
@ -29,7 +38,7 @@
<CoreTextField
updateOnChange={false}
value={fieldState.value}
on:change={e => fieldApi.setValue(e.detail)}
on:change={handleChange}
disabled={fieldState.disabled}
error={fieldState.error}
id={fieldState.fieldId}

1
packages/client/src/constants.js
View File

@ -21,6 +21,7 @@ export const UnsortableTypes = [
export const ActionTypes = {
ValidateForm: "ValidateForm",
UpdateFieldValue: "UpdateFieldValue",
RefreshDatasource: "RefreshDatasource",
AddDataProviderQueryExtension: "AddDataProviderQueryExtension",
RemoveDataProviderQueryExtension: "RemoveDataProviderQueryExtension",

14
packages/client/src/utils/buttonActions.js
View File

@ -162,6 +162,19 @@ const executeActionHandler = async (
}
}
const updateFieldValueHandler = async (action, context) => {
return await executeActionHandler(
context,
action.parameters.componentId,
ActionTypes.UpdateFieldValue,
{
type: action.parameters.type,
field: action.parameters.field,
value: action.parameters.value,
}
)
}
const validateFormHandler = async (action, context) => {
return await executeActionHandler(
context,
@ -295,6 +308,7 @@ const handlerMap = {
["Execute Query"]: queryExecutionHandler,
["Trigger Automation"]: triggerAutomationHandler,
["Validate Form"]: validateFormHandler,
["Update Field Value"]: updateFieldValueHandler,
["Refresh Data Provider"]: refreshDataProviderHandler,
["Log Out"]: logoutHandler,
["Clear Form"]: clearFormHandler,