fix(de groups): add custom attribute fields to new-form

dhis2 · Mar 5, 2024 · 81daead · 81daead
1 parent 0311045
commit 81daead
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 41 deletions.
diff --git a/i18n/en.pot b/i18n/en.pot
@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2024-03-05T22:37:21.854Z\n"
-"PO-Revision-Date: 2024-03-05T22:37:21.854Z\n"
+"POT-Creation-Date: 2024-03-05T22:39:55.667Z\n"
+"PO-Revision-Date: 2024-03-05T22:39:55.667Z\n"
 
 msgid "schemas"
 msgstr "schemas"
@@ -657,6 +657,9 @@ msgstr "This field requires a unique value, please choose another one"
 msgid "Required"
 msgstr "Required"
 
+msgid "Custom attributes"
+msgstr "Custom attributes"
+
 msgid "Exit without saving"
 msgstr "Exit without saving"
 
@@ -684,8 +687,8 @@ msgstr "Explain the purpose of this data element group."
 msgid "@TODO"
 msgstr "@TODO"
 
-msgid "Custom attributes"
-msgstr "Custom attributes"
+msgid "Custom fields for your DHIS2 instance"
+msgstr "Custom fields for your DHIS2 instance"
 
 msgid "Create data element"
 msgstr "Create data element"
@@ -712,12 +715,6 @@ msgstr ""
 "A color and icon are helpful for identifying data elements in "
 "information-dense screens."
 
-msgid "Loading custom attributes"
-msgstr "Loading custom attributes"
-
-msgid "Something went wrong with retrieving the custom attributes"
-msgstr "Something went wrong with retrieving the custom attributes"
-
 msgid "Domain"
 msgstr "Domain"
 
@@ -810,9 +807,6 @@ msgstr ""
 "included. PHU will still be available for the PHU level, but not included "
 "in the aggregations to the levels above."
 
-msgid "Custom fields for your DHIS2 instance"
-msgstr "Custom fields for your DHIS2 instance"
-
 msgid "Metadata management"
 msgstr "Metadata management"
 

diff --git a/src/pages/dataElementGroups/New.tsx b/src/pages/dataElementGroups/New.tsx
@@ -2,23 +2,41 @@ import { useDataEngine } from '@dhis2/app-runtime'
 import i18n from '@dhis2/d2-i18n'
 import { NoticeBox } from '@dhis2/ui'
 import { FORM_ERROR } from 'final-form'
-import React, { useEffect, useRef } from 'react'
+import React, { useEffect, useMemo, useRef } from 'react'
 import { Form } from 'react-final-form'
 import { useNavigate } from 'react-router-dom'
-import { StandardFormActions, StandardFormSection } from '../../components'
+import {
+    Loader,
+    StandardFormActions,
+    StandardFormSection,
+} from '../../components'
+import { useCustomAttributesQuery } from '../../components/form'
 import { SCHEMA_SECTIONS, getSectionPath, validate } from '../../lib'
+import { Attribute } from '../../types/generated'
 import { DataElementGroupFormFields, dataElementGroupSchema } from './form'
 import type { FormValues } from './form'
 import classes from './New.module.css'
 
 const listPath = `/${getSectionPath(SCHEMA_SECTIONS.dataElementGroup)}`
 
-const initialValues = {
-    name: '',
-    shortName: '',
-    code: '',
-    description: '',
-    dataElements: [],
+function useInitialValues(customAttributes: Attribute[]) {
+    const attributeValues = useMemo(
+        () =>
+            customAttributes.map((attribute) => ({
+                attribute,
+                value: '',
+            })),
+        [customAttributes]
+    )
+
+    return {
+        name: '',
+        shortName: '',
+        code: '',
+        description: '',
+        dataElements: [],
+        attributeValues,
+    }
 }
 
 const ADD_NEW_DATA_ELEMENT_GROUP_MUTATION = {
@@ -30,8 +48,22 @@ const ADD_NEW_DATA_ELEMENT_GROUP_MUTATION = {
 export function Component() {
     const dataEngine = useDataEngine()
     const navigate = useNavigate()
+    const customAttributesQuery = useCustomAttributesQuery()
+    const loading = customAttributesQuery.loading
+    const error = customAttributesQuery.error
+    const initialValues = useInitialValues(customAttributesQuery.data)
+
+    if (error && !loading) {
+        // @TODO(Edit): Implement error screen
+        return <>Error: {error.toString()}</>
+    }
 
-    const onSubmit = async (payload: FormValues) => {
+    if (loading) {
+        // @TODO(Edit): Implement loading screen
+        return <>Loading...</>
+    }
+
+    async function onSubmit(payload: FormValues) {
         try {
             // We want the promise so we know when submitting is done. The promise
             // returned by the mutation function of useDataMutation will never
@@ -47,24 +79,29 @@ export function Component() {
     }
 
     return (
-        <Form
-            validateOnBlur
-            onSubmit={onSubmit}
-            validate={(values: FormValues) => {
-                return validate(dataElementGroupSchema, values)
-            }}
-            initialValues={initialValues}
+        <Loader
+            queryResponse={customAttributesQuery}
+            label={i18n.t('Custom attributes')}
         >
-            {({ handleSubmit, submitting, submitError }) => (
-                <form onSubmit={handleSubmit}>
-                    <FormContents
-                        submitError={submitError}
-                        submitting={submitting}
-                        onCancelClick={() => navigate(listPath)}
-                    />
-                </form>
-            )}
-        </Form>
+            <Form
+                validateOnBlur
+                onSubmit={onSubmit}
+                validate={(values: FormValues) => {
+                    return validate(dataElementGroupSchema, values)
+                }}
+                initialValues={initialValues}
+            >
+                {({ handleSubmit, submitting, submitError }) => (
+                    <form onSubmit={handleSubmit}>
+                        <FormContents
+                            submitError={submitError}
+                            submitting={submitting}
+                            onCancelClick={() => navigate(listPath)}
+                        />
+                    </form>
+                )}
+            </Form>
+        </Loader>
     )
 }
 

diff --git a/src/pages/dataElements/New.tsx b/src/pages/dataElements/New.tsx
@@ -106,10 +106,8 @@ export const Component = () => {
     const dataEngine = useDataEngine()
     const navigate = useNavigate()
     const customAttributesQuery = useCustomAttributesQuery()
-
     const loading = customAttributesQuery.loading
     const error = customAttributesQuery.error
-
     const initialValues = useInitialValues(customAttributesQuery.data)
 
     if (error && !loading) {