diff --git a/i18n/en.pot b/i18n/en.pot index f8baf702..84795220 100644 --- 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 index 31b4633a..ffc8cfe6 100644 --- 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 ( -
+