[#5074] Transform selectboxes data to list for Objects API

Author: vaszig

src/openforms/js/components/admin/form_design/registrations/objectsapi/AddressNlObjectsApiVariableConfigurationEditor.js

@@ -5,16 +5,15 @@ import {FormattedMessage} from 'react-intl';
 import {useAsync, useToggle} from 'react-use';
 
 import {APIContext} from 'components/admin/form_design/Context';
-import {REGISTRATION_OBJECTS_TARGET_PATHS} from 'components/admin/form_design/constants';
 import Field from 'components/admin/forms/Field';
 import Fieldset from 'components/admin/forms/Fieldset';
 import FormRow from 'components/admin/forms/FormRow';
 import {Checkbox} from 'components/admin/forms/Inputs';
 import {TargetPathSelect} from 'components/admin/forms/objects_api';
 import ErrorMessage from 'components/errors/ErrorMessage';
-import {post} from 'utils/fetch';
 
 import {MappedVariableTargetPathSelect} from './GenericObjectsApiVariableConfigurationEditor';
+import {fetchTargetPaths} from './utils';
 
 const ADDRESSNL_NESTED_PROPERTIES = {
   postcode: {type: 'string'},
@@ -25,27 +24,6 @@ const ADDRESSNL_NESTED_PROPERTIES = {
   streetName: {type: 'string'},
 };
 
-const fetchTargetPaths = async (
-  csrftoken,
-  objectsApiGroup,
-  objecttype,
-  objecttypeVersion,
-  schemaType
-) => {
-  const response = await post(REGISTRATION_OBJECTS_TARGET_PATHS, csrftoken, {
-    objectsApiGroup,
-    objecttype,
-    objecttypeVersion,
-    variableJsonSchema: schemaType,
-  });
-
-  if (!response.ok) {
-    throw new Error(`Error when loading target paths for type: ${schemaType}`);
-  }
-
-  return response.data;
-};
-
 export const AddressNlEditor = ({
   variable,
   components,

src/openforms/js/components/admin/form_design/registrations/objectsapi/GenericObjectsApiVariableConfigurationEditor.js

@@ -6,15 +6,15 @@ import {FormattedMessage} from 'react-intl';
 import {useAsync, useToggle} from 'react-use';
 
 import {APIContext} from 'components/admin/form_design/Context';
-import {REGISTRATION_OBJECTS_TARGET_PATHS} from 'components/admin/form_design/constants';
 import Field from 'components/admin/forms/Field';
 import FormRow from 'components/admin/forms/FormRow';
 import {Checkbox} from 'components/admin/forms/Inputs';
 import {TargetPathSelect} from 'components/admin/forms/objects_api';
 import ErrorMessage from 'components/errors/ErrorMessage';
-import {post} from 'utils/fetch';
 
+import {CUSTOM_COMPONENTS_SCHEMA} from '../utils';
 import {asJsonSchema} from './utils';
+import {fetchTargetPaths} from './utils';
 
 /**
  * Hack-ish way to manage the variablesMapping state for one particular entry.
@@ -83,6 +83,7 @@ export const GenericEditor = ({
   components,
   namePrefix,
   isGeometry,
+  transformToList,
   index,
   mappedVariable,
   objecttype,
@@ -93,27 +94,32 @@ export const GenericEditor = ({
   const [jsonSchemaVisible, toggleJsonSchemaVisible] = useToggle(false);
   const {setFieldValue} = useFormikContext();
 
+  const componentType = components[variable?.key]?.type;
+
+  // Load all the possible target paths in parallel depending on if the data should be
+  // transformed or not
   const {
     loading,
     value: targetPaths,
     error,
-  } = useAsync(
-    async () => {
-      const response = await post(REGISTRATION_OBJECTS_TARGET_PATHS, csrftoken, {
-        objectsApiGroup,
-        objecttype,
-        objecttypeVersion,
-        variableJsonSchema: asJsonSchema(variable, components),
-      });
-      if (!response.ok) {
-        throw new Error('Error when loading target paths');
-      }
+  } = useAsync(async () => {
+    const promises = transformToList?.[variable.key]
+      ? CUSTOM_COMPONENTS_SCHEMA[componentType].map(type =>
+          fetchTargetPaths(csrftoken, objectsApiGroup, objecttype, objecttypeVersion, type)
+        )
+      : [
+          fetchTargetPaths(
+            csrftoken,
+            objectsApiGroup,
+            objecttype,
+            objecttypeVersion,
+            asJsonSchema(variable, components)
+          ),
+        ];
 
-      return response.data;
-    },
-    // Load only once:
-    []
-  );
+    const results = await Promise.all(promises);
+    return results.flat(1);
+  }, [transformToList?.[variable.key]]);
 
   const getTargetPath = pathSegment => targetPaths.find(t => isEqual(t.targetPath, pathSegment));
 
@@ -153,6 +159,36 @@ export const GenericEditor = ({
           />
         </Field>
       </FormRow>
+      {componentType in CUSTOM_COMPONENTS_SCHEMA && (
+        <FormRow>
+          <Field name={`transformToList.${variable.key}`}>
+            <Checkbox
+              name="transformToListCheckbox"
+              label={
+                <FormattedMessage
+                  defaultMessage="Transform to list"
+                  description="'Transform to list' checkbox label"
+                />
+              }
+              helpText={
+                <FormattedMessage
+                  description="'Transform to list' checkbox help text"
+                  defaultMessage="Whether to transform the data of the component to a list or not (depends on the component type)"
+                />
+              }
+              checked={transformToList.includes(variable.key) || false}
+              onChange={event => {
+                const shouldBeTransformed = event.target.checked;
+                const newTransformToList = shouldBeTransformed
+                  ? [...transformToList, variable.key]
+                  : transformToList.filter(key => key !== variable.key);
+                setFieldValue('transformToList', newTransformToList);
+                setFieldValue(`transformToList.${variable.key}`, event.target.checked);
+              }}
+            />
+          </Field>
+        </FormRow>
+      )}
       <FormRow>
         <Field
           name={`${namePrefix}.targetPath`}

src/openforms/js/components/admin/form_design/registrations/objectsapi/ObjectsApiVariableConfigurationEditor.js

@@ -45,6 +45,7 @@ const ObjectsApiVariableConfigurationEditor = ({variable}) => {
     objecttype,
     objecttypeVersion,
     geometryVariableKey,
+    transformToList,
     variablesMapping,
     version,
   } = backendOptions;
@@ -99,6 +100,7 @@ const ObjectsApiVariableConfigurationEditor = ({variable}) => {
           components={components}
           namePrefix={namePrefix}
           isGeometry={isGeometry}
+          transformToList={transformToList}
           index={index}
           mappedVariable={mappedVariable}
           objecttype={objecttype}

src/openforms/js/components/admin/form_design/registrations/objectsapi/utils.js

@@ -1,3 +1,6 @@
+import {REGISTRATION_OBJECTS_TARGET_PATHS} from 'components/admin/form_design/constants';
+import {post} from 'utils/fetch';
+
 const VARIABLE_TYPE_MAP = {
   boolean: 'boolean',
   int: 'integer',
@@ -57,4 +60,25 @@ const asJsonSchema = (variable, components) => {
   };
 };
 
-export {asJsonSchema};
+const fetchTargetPaths = async (
+  csrftoken,
+  objectsApiGroup,
+  objecttype,
+  objecttypeVersion,
+  schemaType
+) => {
+  const response = await post(REGISTRATION_OBJECTS_TARGET_PATHS, csrftoken, {
+    objectsApiGroup,
+    objecttype,
+    objecttypeVersion,
+    variableJsonSchema: schemaType,
+  });
+
+  if (!response.ok) {
+    throw new Error(`Error when loading target paths for type: ${schemaType}`);
+  }
+
+  return response.data;
+};
+
+export {asJsonSchema, fetchTargetPaths};

src/openforms/registrations/contrib/objects_api/config.py

@@ -256,6 +256,16 @@ class ObjectsAPIOptionsSerializer(JsonSchemaSerializerMixin, serializers.Seriali
         required=False,
         allow_blank=True,
     )
+    transform_to_list = serializers.ListField(
+        child=FormioVariableKeyField(),
+        label=_("transform to list"),
+        required=False,
+        default=list,
+        help_text=_(
+            "The components which need special handling concerning the shape of the data "
+            "and need to be transformed to a list."
+        ),
+    )
 
     def validate(self, attrs: RegistrationOptions) -> RegistrationOptions:
         v1_only_fields = {

src/openforms/registrations/contrib/objects_api/handlers/v2.py

@@ -58,6 +58,7 @@ def process_mapped_variable(
     value: (
         JSONValue | date | datetime
     ),  # can't narrow it down yet, as the type depends on the component type
+    transform_to_list: list | None = None,
     component: Component | None = None,
     attachment_urls: dict[str, list[str]] | None = None,
 ) -> AssignmentSpec | Sequence[AssignmentSpec]:
@@ -73,6 +74,8 @@ def process_mapped_variable(
     :arg value: The raw value of the form variable for the submission being processed.
       The type/shape of the value depends on the variable/component data type being
       processed and even the component configuration (such as multiple True/False).
+    :arg transform_to_list: The list of the variables(keys) which need special handling
+      concerning the shape of the data (need transformation to a list).
     :arg component: If the variable corresponds to a Formio component, the component
       definition is provided, otherwise ``None``.
     :arg attachment_urls: The registration plugin uploads attachments to a Documents API
@@ -139,6 +142,11 @@ def process_mapped_variable(
                 attachment_urls=attachment_urls,
                 key_prefix=variable_key,
             )
+        case {"type": "selectboxes"}:
+            assert isinstance(value, dict)
+            if transform_to_list and variable_key in transform_to_list:
+                value = [option for option, is_selected in value.items() if is_selected]
+
         # not a component or standard behaviour where no transformation is necessary
         case None | _:
             pass

src/openforms/registrations/contrib/objects_api/submission_registration.py

@@ -521,6 +521,7 @@ def get_record_data(
         urls_map = self.get_attachment_urls_by_key(submission)
 
         variables_mapping = options["variables_mapping"]
+        transform_to_list = options.get("transform_to_list")
 
         # collect all the assignments to be done to the object
         assignment_specs: list[AssignmentSpec] = []
@@ -571,6 +572,7 @@ def get_record_data(
                 value=value,
                 component=component,
                 attachment_urls=urls_map,
+                transform_to_list=transform_to_list,
             )
             if isinstance(assignment_spec, AssignmentSpec):
                 assignment_specs.append(assignment_spec)

src/openforms/registrations/contrib/objects_api/typing.py

@@ -70,6 +70,7 @@ class RegistrationOptionsV2(_BaseRegistrationOptions, total=False):
     version: Required[Literal[2]]
     variables_mapping: Required[list[ObjecttypeVariableMapping]]
     geometry_variable_key: str
+    transform_to_list: NotRequired[list]
 
 
 type RegistrationOptions = RegistrationOptionsV1 | RegistrationOptionsV2