From 04b299750da02d1be72557c0a30187814c8a84db Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Thu, 14 Apr 2022 09:46:07 +0100 Subject: [PATCH] Add button actions to update form field values --- .../builder/src/builderStore/dataBinding.js | 2 +- .../actions/UpdateFieldValue.svelte | 78 +++++++++++ .../ButtonActionEditor/actions/index.js | 1 + .../ButtonActionEditor/manifest.json | 16 ++- packages/client/manifest.json | 128 +++++++++++++++++- .../src/components/app/forms/InnerForm.svelte | 41 ++++-- packages/client/src/constants.js | 1 + packages/client/src/utils/buttonActions.js | 14 ++ 8 files changed, 265 insertions(+), 16 deletions(-) create mode 100644 packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/actions/UpdateFieldValue.svelte diff --git a/packages/builder/src/builderStore/dataBinding.js b/packages/builder/src/builderStore/dataBinding.js index 8dff56dd6b..8cbc629291 100644 --- a/packages/builder/src/builderStore/dataBinding.js +++ b/packages/builder/src/builderStore/dataBinding.js @@ -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 diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/actions/UpdateFieldValue.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/actions/UpdateFieldValue.svelte new file mode 100644 index 0000000000..cddf3e9fda --- /dev/null +++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/actions/UpdateFieldValue.svelte @@ -0,0 +1,78 @@ + + +
+ + + + + {#if parameters.type === "set"} + + (parameters.value = e.detail)} + /> + {/if} +
+ + diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/actions/index.js b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/actions/index.js index 2306d4a548..8f0baf08be 100644 --- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/actions/index.js +++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/actions/index.js @@ -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" diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/manifest.json b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/manifest.json index 80464b281f..cf18fee3a6 100644 --- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/manifest.json +++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/manifest.json @@ -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", diff --git a/packages/client/manifest.json b/packages/client/manifest.json index 4c3c0faf1f..9df9a30d1c 100644 --- a/packages/client/manifest.json +++ b/packages/client/manifest.json @@ -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", diff --git a/packages/client/src/components/app/forms/InnerForm.svelte b/packages/client/src/components/app/forms/InnerForm.svelte index ae6ae3ebcc..99dcbf4d5e 100644 --- a/packages/client/src/components/app/forms/InnerForm.svelte +++ b/packages/client/src/components/app/forms/InnerForm.svelte @@ -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 }, ] diff --git a/packages/client/src/constants.js b/packages/client/src/constants.js index 965ca788e1..51ef3fd124 100644 --- a/packages/client/src/constants.js +++ b/packages/client/src/constants.js @@ -21,6 +21,7 @@ export const UnsortableTypes = [ export const ActionTypes = { ValidateForm: "ValidateForm", + UpdateFieldValue: "UpdateFieldValue", RefreshDatasource: "RefreshDatasource", AddDataProviderQueryExtension: "AddDataProviderQueryExtension", RemoveDataProviderQueryExtension: "RemoveDataProviderQueryExtension", diff --git a/packages/client/src/utils/buttonActions.js b/packages/client/src/utils/buttonActions.js index f851a623c0..bb1e7c30c9 100644 --- a/packages/client/src/utils/buttonActions.js +++ b/packages/client/src/utils/buttonActions.js @@ -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,