[#5074] Started with transforming the data for the Objects API in the variables tab

Author: vaszig

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

@@ -12,9 +12,9 @@ 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 +25,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,7 +6,6 @@ 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';
@@ -15,6 +14,7 @@ import ErrorMessage from 'components/errors/ErrorMessage';
 import {post} from 'utils/fetch';
 
 import {asJsonSchema} from './utils';
+import {SCHEMA_TYPES_WITH_TRANSFORMATION, 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,
+  transformData,
   index,
   mappedVariable,
   objecttype,
@@ -93,27 +94,31 @@ 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
   const {
     loading,
-    value: targetPaths,
+    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 = transformData
+      ? SCHEMA_TYPES_WITH_TRANSFORMATION[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);
+  }, [transformData]);
 
   const getTargetPath = pathSegment => targetPaths.find(t => isEqual(t.targetPath, pathSegment));
 
@@ -153,6 +158,31 @@ export const GenericEditor = ({
           />
         </Field>
       </FormRow>
+      {componentType in SCHEMA_TYPES_WITH_TRANSFORMATION && (
+        <FormRow>
+          <Field name="transformData">
+            <Checkbox
+              name="transformDataCheckbox"
+              label={
+                <FormattedMessage
+                  defaultMessage="Transform data"
+                  description="'Transform data' checkbox label"
+                />
+              }
+              helpText={
+                <FormattedMessage
+                  description="'Transform data' checkbox help text"
+                  defaultMessage="Whether to transform the data of the component to another data type or not (depends on the component)"
+                />
+              }
+              checked={transformData}
+              onChange={event => {
+                setFieldValue('transformData', 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,
+    transformData,
     variablesMapping,
     version,
   } = backendOptions;
@@ -99,6 +100,7 @@ const ObjectsApiVariableConfigurationEditor = ({variable}) => {
           components={components}
           namePrefix={namePrefix}
           isGeometry={isGeometry}
+          transformData={transformData}
           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',
@@ -13,6 +16,8 @@ const FORMAT_TYPE_MAP = {
   date: 'date',
 };
 
+const SCHEMA_TYPES_WITH_TRANSFORMATION = {selectboxes: [{type: 'object'}, {type: 'array'}]};
+
 /**
  * Return a JSON Schema definition matching the provided variable.
  * @param {Object} variable - The current variable
@@ -57,4 +62,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, SCHEMA_TYPES_WITH_TRANSFORMATION};

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

@@ -256,6 +256,14 @@ class ObjectsAPIOptionsSerializer(JsonSchemaSerializerMixin, serializers.Seriali
         required=False,
         allow_blank=True,
     )
+    transform_data = serializers.BooleanField(
+        label=_("transform data"),
+        help_text=_(
+            "Indicates whether or not the data of the component will be transformed "
+            "to another data type."
+        ),
+        default=False,
+    )
 
     def validate(self, attrs: RegistrationOptions) -> RegistrationOptions:
         v1_only_fields = {

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

@@ -15,7 +15,7 @@
 from openforms.formio.typing.vanilla import FileComponent
 from openforms.typing import JSONObject, JSONValue
 
-from ..typing import ObjecttypeVariableMapping
+from ..typing import ObjecttypeVariableMapping, RegistrationOptionsV2
 
 
 @dataclass
@@ -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
+    options: RegistrationOptionsV2 | 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 options: The registration options. They are needed when additional information
+      is needed for processing the variable.
     :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,12 @@ def process_mapped_variable(
                 attachment_urls=attachment_urls,
                 key_prefix=variable_key,
             )
+        case {"type": "selectboxes"}:
+            assert options
+            assert isinstance(value, dict)
+            if options["transform_data"]:
+                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

@@ -571,6 +571,7 @@ def get_record_data(
                 value=value,
                 component=component,
                 attachment_urls=urls_map,
+                options=options,
             )
             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_data: Required[bool]
 
 
 type RegistrationOptions = RegistrationOptionsV1 | RegistrationOptionsV2