diff --git a/src/openforms/js/components/admin/form_design/registrations/index.js b/src/openforms/js/components/admin/form_design/registrations/index.js index 4c549674ee..9a973dc8f7 100644 --- a/src/openforms/js/components/admin/form_design/registrations/index.js +++ b/src/openforms/js/components/admin/form_design/registrations/index.js @@ -1,7 +1,9 @@ import CamundaOptionsForm from './camunda'; import DemoOptionsForm from './demo'; import EmailOptionsForm from './email'; -import JSONOptionsForm from './json'; +import JSONOptionsForm from './json/JSONOptionsForm'; +import JSONSummaryHandler from './json/JSONSummaryHandler'; +import JSONVariableConfigurationEditor from './json/JSONVariableConfigurationEditor'; import MSGraphOptionsForm from './ms_graph'; import ObjectsApiOptionsForm from './objectsapi/ObjectsApiOptionsForm'; import ObjectsApiSummaryHandler from './objectsapi/ObjectsApiSummaryHandler'; @@ -47,7 +49,12 @@ export const BACKEND_OPTIONS_FORMS = { form: StufZDSOptionsForm, }, 'microsoft-graph': {form: MSGraphOptionsForm}, - 'json': {form: JSONOptionsForm}, + 'json': { + form: JSONOptionsForm, + configurableFromVariables: true, + summaryHandler: JSONSummaryHandler, + variableConfigurationEditor: JSONVariableConfigurationEditor, + }, // demo plugins demo: {form: DemoOptionsForm}, 'failing-demo': {form: DemoOptionsForm}, diff --git a/src/openforms/js/components/admin/form_design/registrations/json/JSONSummaryHandler.js b/src/openforms/js/components/admin/form_design/registrations/json/JSONSummaryHandler.js new file mode 100644 index 0000000000..28878d65ac --- /dev/null +++ b/src/openforms/js/components/admin/form_design/registrations/json/JSONSummaryHandler.js @@ -0,0 +1,32 @@ +import {FormattedMessage} from 'react-intl'; +import React from 'react'; + +const JSONSummaryHandler = ({variable, backendOptions}) => { + + const isIncluded = backendOptions.formVariables.includes(variable.key); + + if (isIncluded) { + return ( + + ); + } + else { + return ( + + ); + } +}; + + +// TODO-4098: ?? +JSONSummaryHandler.propTypes = { + +}; + +export default JSONSummaryHandler; diff --git a/src/openforms/js/components/admin/form_design/registrations/json/JSONVariableConfigurationEditor.js b/src/openforms/js/components/admin/form_design/registrations/json/JSONVariableConfigurationEditor.js new file mode 100644 index 0000000000..2c89090183 --- /dev/null +++ b/src/openforms/js/components/admin/form_design/registrations/json/JSONVariableConfigurationEditor.js @@ -0,0 +1,69 @@ +// TODO-4908: fix imports +import {Checkbox} from 'components/admin/forms/Inputs'; +import Field from '../../../forms/Field'; +import {FormattedMessage} from 'react-intl'; +import FormRow from '../../../forms/FormRow'; +import React from 'react'; +import {useField, useFormikContext} from 'formik'; +import PropTypes from 'prop-types'; + + +const JSONVariableConfigurationEditor = ({variable}) => { + const [fieldProps, , fieldHelpers] = useField('formVariables'); + const {setValue} = fieldHelpers; + + const formVariables = fieldProps.value + const isIncluded = formVariables.includes(variable.key); + + return ( + + + + } + helpText={ + + } + checked={isIncluded} + onChange={event => { + const formVariablesNew = formVariables.slice(); + const index = formVariablesNew.indexOf(variable.key); + if (event.target.checked) { + // TODO-4908: remove this when testing is implemented + if (index !== -1) {throw new Error( + "This form variable is already on the list of " + + "form variables to include. This shouldn't happen" + );} + formVariablesNew.push(variable.key); + } else { + if (index === -1) {throw new Error( + "This form variable is not yet on the list of " + + "form variables to include. This shouldn't happen." + );} + formVariablesNew.splice(index, 1); + } + setValue(formVariablesNew); + }} + /> + + + ) +} + +// TODO-4098: ??? +JSONVariableConfigurationEditor.propTypes = { + variable: PropTypes.shape({ + key: PropTypes.string.isRequired, + }).isRequired, +}; + + +export default JSONVariableConfigurationEditor