diff --git a/src/openforms/js/components/admin/form_design/RegistrationFields.stories.js b/src/openforms/js/components/admin/form_design/RegistrationFields.stories.js index 9b9630da3a..c80370ce2d 100644 --- a/src/openforms/js/components/admin/form_design/RegistrationFields.stories.js +++ b/src/openforms/js/components/admin/form_design/RegistrationFields.stories.js @@ -392,10 +392,14 @@ export default { }, { id: 'json', - label: 'JSON', + label: 'JSON registration', schema: { + type: 'object', properties: { - // TODO-4098: update this with all properties + service: { + enum: [1, 2], + enumNames: ['Service 1', 'Service 2'], + }, relativeApiEndpoint: { minLength: 1, title: 'Relative API endpoint', @@ -408,10 +412,9 @@ export default { type: 'string', title: 'form variable', minLength: 1, - } + }, }, }, - type: 'object', }, }, ], @@ -692,9 +695,9 @@ export const ConfiguredBackends = { name: 'JSON', backend: 'json', options: { - // TODO-4098: update this with all variables + service: 1, relativeApiEndpoint: 'Example endpoint', - formVariables: [] + formVariables: [], }, }, ], @@ -954,7 +957,7 @@ export const JSON = { name: 'JSON', backend: 'json', options: { - // TODO-4908: update this with all properties + service: 1, relativeApiEndpoint: 'We are checking.', formVariables: [], }, diff --git a/src/openforms/js/components/admin/form_design/registrations/json/JSONOptionsForm.js b/src/openforms/js/components/admin/form_design/registrations/json/JSONOptionsForm.js index d09ad02bfe..92598e08f6 100644 --- a/src/openforms/js/components/admin/form_design/registrations/json/JSONOptionsForm.js +++ b/src/openforms/js/components/admin/form_design/registrations/json/JSONOptionsForm.js @@ -16,14 +16,15 @@ import { // straightforward. import FormVariablesSelect from './fields/FormVariablesSelect'; import RelativeAPIEndpoint from './fields/RelativeAPIEndpoint'; -// import Service from './fields/Service'; +import ServiceSelect from './fields/ServiceSelect'; +import {getChoicesFromSchema} from '../../../../../utils/json-schema'; -const JSONOptionsForm = ({name, label, formData, onChange}) => { +const JSONOptionsForm = ({name, label, schema, formData, onChange}) => { const validationErrors = useContext(ValidationErrorContext); const relevantErrors = filterErrors(name, validationErrors); - // Get form variables + // Get form variables and create form variable options const formContext = useContext(FormContext) const formVariables = formContext.formVariables ?? []; const staticVariables = formContext.staticVariables ?? []; @@ -31,9 +32,15 @@ const JSONOptionsForm = ({name, label, formData, onChange}) => { const formVariableOptions = []; for (const formVariable of allFormVariables) { - formVariableOptions.push({value: formVariable.key, label: formVariable.name}) + formVariableOptions.push({value: formVariable.key, label: formVariable.name}); } + // Create service options + const {service} = schema.properties; + const serviceOptions = getChoicesFromSchema( + service.enum, service.enumNames + ).map(([value, label]) => ({value, label})); + return ( { >
- {/**/} +
@@ -63,7 +70,16 @@ const JSONOptionsForm = ({name, label, formData, onChange}) => { JSONOptionsForm.propTypes = { name: PropTypes.string.isRequired, label: PropTypes.node.isRequired, + schema: PropTypes.shape({ + properties: PropTypes.shape({ + service: PropTypes.shape({ + enum: PropTypes.arrayOf(PropTypes.number).isRequired, + enumNames: PropTypes.arrayOf(PropTypes.string).isRequired, + }).isRequired, + }).isRequired, + }).isRequired, formData: PropTypes.shape({ + service: PropTypes.number, relativeApiEndpoint: PropTypes.string, // TODO-4098: might need to rename this to selectedFormVariables to avoid confusion or even // naming conflicts diff --git a/src/openforms/js/components/admin/form_design/registrations/json/fields/Service.js b/src/openforms/js/components/admin/form_design/registrations/json/fields/Service.js deleted file mode 100644 index 0bcf5f0f2f..0000000000 --- a/src/openforms/js/components/admin/form_design/registrations/json/fields/Service.js +++ /dev/null @@ -1,5 +0,0 @@ -const Service = () => { - return "asdf" -} - -export default Service diff --git a/src/openforms/js/components/admin/form_design/registrations/json/fields/ServiceSelect.js b/src/openforms/js/components/admin/form_design/registrations/json/fields/ServiceSelect.js new file mode 100644 index 0000000000..4017b45362 --- /dev/null +++ b/src/openforms/js/components/admin/form_design/registrations/json/fields/ServiceSelect.js @@ -0,0 +1,39 @@ +import PropTypes from 'prop-types'; +import {FormattedMessage} from 'react-intl'; + +import Field from 'components/admin/forms/Field'; +import FormRow from 'components/admin/forms/FormRow'; +import ReactSelect from 'components/admin/forms/ReactSelect'; + +const ServiceSelect = ({options}) => { + return ( + + + } + > + + + + ); +}; + +ServiceSelect.propTypes = { + options: PropTypes.arrayOf( + PropTypes.shape({ + value: PropTypes.string.isRequired, + label: PropTypes.node.isRequired, + }) + ).isRequired, +}; + +export default ServiceSelect;