From 160ccc35ac260a1f3762530d74330b2ca408ac0e Mon Sep 17 00:00:00 2001 From: Sergei Maertens Date: Fri, 24 Dec 2021 11:09:31 +0100 Subject: [PATCH] :sparkles: [#326] -- persist mapped process variables to backend --- src/openforms/js/compiled-lang/en.json | 44 +++++++ src/openforms/js/compiled-lang/nl.json | 44 +++++++ .../camunda/CamundaOptionsForm.js | 5 + .../registrations/camunda/FormFields.js | 110 ++++++++++-------- src/openforms/js/lang/en.json | 10 ++ src/openforms/js/lang/nl.json | 10 ++ 6 files changed, 175 insertions(+), 48 deletions(-) diff --git a/src/openforms/js/compiled-lang/en.json b/src/openforms/js/compiled-lang/en.json index 3c0fa716c1..ce732fde07 100644 --- a/src/openforms/js/compiled-lang/en.json +++ b/src/openforms/js/compiled-lang/en.json @@ -277,6 +277,44 @@ "value": "Component where the phone number should be entered" } ], + "BKTOtD": [ + { + "offset": 0, + "options": { + "=0": { + "value": [ + ] + }, + "one": { + "value": [ + { + "type": 0, + "value": "(1 variable mapped)" + } + ] + }, + "other": { + "value": [ + { + "type": 0, + "value": "(" + }, + { + "type": 1, + "value": "varCount" + }, + { + "type": 0, + "value": " variables mapped)" + } + ] + } + }, + "pluralType": "cardinal", + "type": 6, + "value": "varCount" + } + ], "BStu9Z": [ { "type": 0, @@ -735,6 +773,12 @@ "value": "All Submissions Removal Limit" } ], + "V21YkS": [ + { + "type": 0, + "value": "Confirm" + } + ], "VMMOA0": [ { "type": 0, diff --git a/src/openforms/js/compiled-lang/nl.json b/src/openforms/js/compiled-lang/nl.json index 275393a7b9..0f1d79f94c 100644 --- a/src/openforms/js/compiled-lang/nl.json +++ b/src/openforms/js/compiled-lang/nl.json @@ -281,6 +281,44 @@ "value": "Veld waar het telefoonnummer voor een afspraak komt te staan" } ], + "BKTOtD": [ + { + "offset": 0, + "options": { + "=0": { + "value": [ + ] + }, + "one": { + "value": [ + { + "type": 0, + "value": "(1 variable mapped)" + } + ] + }, + "other": { + "value": [ + { + "type": 0, + "value": "(" + }, + { + "type": 1, + "value": "varCount" + }, + { + "type": 0, + "value": " variables mapped)" + } + ] + } + }, + "pluralType": "cardinal", + "type": 6, + "value": "varCount" + } + ], "BStu9Z": [ { "type": 0, @@ -739,6 +777,12 @@ "value": "Bewaartermijn van inzendingen" } ], + "V21YkS": [ + { + "type": 0, + "value": "Confirm" + } + ], "VMMOA0": [ { "type": 0, diff --git a/src/openforms/js/components/admin/form_design/registrations/camunda/CamundaOptionsForm.js b/src/openforms/js/components/admin/form_design/registrations/camunda/CamundaOptionsForm.js index 58c3347903..155df16bfc 100644 --- a/src/openforms/js/components/admin/form_design/registrations/camunda/CamundaOptionsForm.js +++ b/src/openforms/js/components/admin/form_design/registrations/camunda/CamundaOptionsForm.js @@ -57,6 +57,11 @@ CamundaOptionsForm.propTypes = { formData: PropTypes.shape({ // matches the backend serializer! processDefinition: PropTypes.string, processDefinitionVersion: PropTypes.number, + processVariables: PropTypes.arrayOf(PropTypes.shape({ + enabled: PropTypes.bool.isRequired, + componentKey: PropTypes.string.isRequired, + alias: PropTypes.string.isRequired, + })), }), onChange: PropTypes.func.isRequired, }; diff --git a/src/openforms/js/components/admin/form_design/registrations/camunda/FormFields.js b/src/openforms/js/components/admin/form_design/registrations/camunda/FormFields.js index 8d1c902009..48c0f2bea6 100644 --- a/src/openforms/js/components/admin/form_design/registrations/camunda/FormFields.js +++ b/src/openforms/js/components/admin/form_design/registrations/camunda/FormFields.js @@ -1,10 +1,11 @@ import React, {useState} from 'react'; import PropTypes from 'prop-types'; import {FormattedMessage, useIntl} from 'react-intl'; -import {useImmerReducer} from 'use-immer'; +import produce from 'immer'; -import ActionButton from '../../../forms/ActionButton'; +import ActionButton, {SubmitAction} from '../../../forms/ActionButton'; import Select from '../../../forms/Select'; +import SubmitRow from '../../../forms/SubmitRow'; import FormModal from '../../../FormModal'; import {CustomFieldTemplate} from '../../../RJSFWrapper'; import SelectProcessVariables from './SelectProcessVariables'; @@ -21,46 +22,12 @@ const Wrapper = ({children}) => ( ); - -const initialState = { - modalOpen: true, - processVariables: [], +const EMPTY_PROCESS_VARIABLE = { + enabled: true, + componentKey: '', + alias: '', }; -const reducer = (draft, action) => { - switch(action.type) { - case 'TOGGLE_PROCESS_VARS_MODAL': { - draft.modalOpen = !draft.modalOpen; - break; - } - case 'CLOSE_PROCESS_VARS_MODAL': { - draft.modalOpen = false; - break; - } - case 'MODIFY_PROCESS_VAR': { - const {index, event: {target: {name, value}}} = action.payload; - draft.processVariables[index][name] = value; - break; - } - case 'ADD_PROCESS_VAR': { - draft.processVariables.push({ - enabled: true, - componentKey: '', - alias: '', - }); - break; - } - case 'REMOVE_PROCESS_VAR': { - const {index} = action.payload; - draft.processVariables.splice(index, 1); - break; - } - default: - throw new Error(`Unknown action type: ${action.type}`); - } -}; - - const getProcessSelectionChoices = (processDefinitions, processDefinition) => { const processDefinitionChoices = Object.entries(processDefinitions).map(([processKey, versions]) => { // grab the first version name - it is theoretically possible the process name has changed in @@ -83,11 +50,11 @@ const FormFields = ({processDefinitions, formData, onChange}) => { const { processDefinition='', processDefinitionVersion=null, - // TODO: read procssVariables from formData instead of local state once backend is updated + processVariables=[], } = formData; const intl = useIntl(); - const [{modalOpen, processVariables}, dispatch] = useImmerReducer(reducer, initialState); + const [modalOpen, setModalOpen] = useState(false); const [processDefinitionChoices, versionChoices] = getProcessSelectionChoices(processDefinitions, processDefinition); const onFieldChange = (event) => { @@ -115,6 +82,29 @@ const FormFields = ({processDefinitions, formData, onChange}) => { onChange(updatedFormData); }; + const onAddProcessVariable = () => { + const nextFormData = produce(formData, draft => { + if (!draft.processVariables) draft.processVariables = []; + draft.processVariables.push(EMPTY_PROCESS_VARIABLE); + }); + onChange(nextFormData); + }; + + const onChangeProcessVariable = (index, event) => { + const {name, value} = event.target; + const nextFormData = produce(formData, draft => { + draft.processVariables[index][name] = value; + }); + onChange(nextFormData); + }; + + const onDeleteProcessVariable = (index) => { + const nextFormData = produce(formData, draft => { + draft.processVariables.splice(index, 1); + }); + onChange(nextFormData); + }; + return ( <> @@ -165,12 +155,22 @@ const FormFields = ({processDefinitions, formData, onChange}) => { dispatch({type: 'TOGGLE_PROCESS_VARS_MODAL'})} + onClick={() => setModalOpen(!modalOpen)} + /> +   + @@ -179,14 +179,23 @@ const FormFields = ({processDefinitions, formData, onChange}) => { } - closeModal={() => dispatch({type: 'CLOSE_PROCESS_VARS_MODAL'})} + closeModal={() => setModalOpen(false)} > dispatch({type: 'MODIFY_PROCESS_VAR', payload: {index, event}})} - onAdd={() => dispatch({type: 'ADD_PROCESS_VAR'})} - onDelete={(index) => dispatch({type: 'REMOVE_PROCESS_VAR', payload: {index}})} + onChange={onChangeProcessVariable} + onAdd={onAddProcessVariable} + onDelete={onDeleteProcessVariable} /> + + { + event.preventDefault(); + setModalOpen(false); + }} + /> + ); @@ -202,6 +211,11 @@ FormFields.propTypes = { formData: PropTypes.shape({ // matches the backend serializer! processDefinition: PropTypes.string, processDefinitionVersion: PropTypes.number, + processVariables: PropTypes.arrayOf(PropTypes.shape({ + enabled: PropTypes.bool.isRequired, + componentKey: PropTypes.string.isRequired, + alias: PropTypes.string.isRequired, + })), }), onChange: PropTypes.func.isRequired, }; diff --git a/src/openforms/js/lang/en.json b/src/openforms/js/lang/en.json index 9505c62f7f..9453d072d6 100644 --- a/src/openforms/js/lang/en.json +++ b/src/openforms/js/lang/en.json @@ -194,6 +194,11 @@ "description": "Phone Number Component field help text", "originalDefault": "Component where the phone number should be entered" }, + "BKTOtD": { + "defaultMessage": "{varCount, plural, =0 {} one {(1 variable mapped)} other {({varCount} variables mapped)} }", + "description": "Managed Camunda process vars state feedback", + "originalDefault": "{varCount, plural, =0 {} one {(1 variable mapped)} other {({varCount} variables mapped)} }" + }, "BStu9Z": { "defaultMessage": "Form", "description": "Form fields tab title", @@ -569,6 +574,11 @@ "description": "All Submissions Removal Limit field label", "originalDefault": "All Submissions Removal Limit" }, + "V21YkS": { + "defaultMessage": "Confirm", + "description": "Camunda process variables confirm button", + "originalDefault": "Confirm" + }, "VMMOA0": { "defaultMessage": "Page content", "description": "Confirmation page content label", diff --git a/src/openforms/js/lang/nl.json b/src/openforms/js/lang/nl.json index 188352dd64..655796ce68 100644 --- a/src/openforms/js/lang/nl.json +++ b/src/openforms/js/lang/nl.json @@ -194,6 +194,11 @@ "description": "Phone Number Component field help text", "originalDefault": "Component where the phone number should be entered" }, + "BKTOtD": { + "defaultMessage": "{varCount, plural, =0 {} one {(1 variable mapped)} other {({varCount} variables mapped)} }", + "description": "Managed Camunda process vars state feedback", + "originalDefault": "{varCount, plural, =0 {} one {(1 variable mapped)} other {({varCount} variables mapped)} }" + }, "BStu9Z": { "defaultMessage": "Formulier", "description": "Form fields tab title", @@ -569,6 +574,11 @@ "description": "All Submissions Removal Limit field label", "originalDefault": "All Submissions Removal Limit" }, + "V21YkS": { + "defaultMessage": "Confirm", + "description": "Camunda process variables confirm button", + "originalDefault": "Confirm" + }, "VMMOA0": { "defaultMessage": "Inhoud", "description": "Confirmation page content label",