feat: support custom forms with plugins

package.json

@@ -30,7 +30,7 @@
     "devDependencies": {
         "@badeball/cypress-cucumber-preprocessor": "^16.0.0",
         "@cypress/webpack-preprocessor": "^5.17.0",
-        "@dhis2/cli-app-scripts": "^10.2.3",
+        "@dhis2/cli-app-scripts": "10.4.0-alpha.2",
         "@dhis2/cli-style": "10.5.1",
         "@dhis2/cypress-commands": "^10.0.1",
         "@dhis2/cypress-plugins": "^10.0.1",
@@ -46,7 +46,7 @@
         "start-server-and-test": "1.15.4"
     },
     "dependencies": {
-        "@dhis2/app-runtime": "^3.8.0",
+        "@dhis2/app-runtime": "3.10.0-alpha.2",
         "@dhis2/multi-calendar-dates": "^1.0.0-alpha.22",
         "@dhis2/ui": "^8.12.0",
         "@dhis2/ui-forms": "7.16.3",
@@ -75,5 +75,9 @@
     },
     "engines": {
         "node": ">=14.0.0"
+    },
+    "resolutions": {
+        "@dhis2/multi-calendar-dates": "^1.0.0-alpha.22",
+        "**/@dhis2/multi-calendar-dates": "^1.0.0-alpha.22"
     }
 }

src/data-workspace/custom-form/custom-form.js

@@ -1,7 +1,13 @@
+import { Plugin, useDataEngine } from '@dhis2/app-runtime'
+import { useMutation } from '@tanstack/react-query'
 import PropTypes from 'prop-types'
 import React from 'react'
 import useCustomForm from '../../custom-forms/use-custom-form.js'
-import { useMetadata } from '../../shared/index.js'
+import {
+    useContextSelection,
+    useMetadata,
+    useValueStore,
+} from '../../shared/index.js'
 import styles from './custom-form.module.css'
 import { parseHtmlToReact } from './parse-html-to-react.js'
 
@@ -15,12 +21,79 @@ export const CustomForm = ({ dataSet }) => {
         id: dataSet.dataEntryForm.id,
         version: dataSet.version,
     })
+
+    const getDataValues = useValueStore((state) => state.getDataValues)
+    const initialDataValues = getDataValues()
+
     const { data: metadata } = useMetadata()
+    const engine = useDataEngine()
+    const [{ dataSetId, orgUnitId, periodId }] = useContextSelection()
+
+    const mutationClient = useMutation({
+        mutationFn: (variables) => {
+            return engine.mutate(
+                {
+                    resource: 'dataValues',
+                    type: 'create',
+                    data: (data) => data,
+                },
+                {
+                    variables,
+                    onComplete: () => {
+                        // ToDo: maybe there is a way to update the client cache here?
+                    },
+                }
+            )
+        },
+        networkMode: 'online',
+    })
+
+    /* 
+
+
+    */
+    /**
+     * saveMutation - an imperative saveMutation method
+     *
+     * the declarative style we use in the app is tied to each field and is hard (impossible?) to pass to the plugin
+     *
+     * @param {*} valueToSave an object  {deId: dataElementId, cocId: categoryOptionId, value: valueToSave }
+     */
+    const saveMutation = async (valueToSave) => {
+        const { deId, cocId, value } = valueToSave
+
+        const dataValueParams = {
+            de: deId,
+            co: cocId,
+            ds: dataSetId,
+            ou: orgUnitId,
+            pe: periodId,
+            value,
+        }
+
+        // ToDo: do optimistic update and stuff?
+        return mutationClient.mutateAsync(dataValueParams)
+    }
 
+    /*
+        displaying both versions of the form for now: the new "sanitised" way of rendering the custom form (the plugin way)
+    */
     return customForm ? (
-        <div className={styles.customForm}>
-            {parseHtmlToReact(customForm.htmlCode, metadata)}
-        </div>
+        <>
+            <div style={{ height: '100vh', width: '100%' }}>
+                <Plugin
+                    pluginSource="http://localhost:3002/plugin.html"
+                    htmlCode={customForm.htmlCode}
+                    initialValues={initialDataValues}
+                    metadata={metadata}
+                    dataSet={dataSet}
+                    saveValue={saveMutation}
+                />
+            </div>
+            <div className={styles.customForm}>
+                {parseHtmlToReact(customForm.htmlCode, metadata)}
+            </div>
+        </>
     ) : null
 }