fix: address feedback on org unit edit page

- fix gap between come fields - change copies - fix attribues validation on edit
dhis2 · Nov 14, 2024 · 4b8a7b0 · 4b8a7b0
1 parent 16814c1
commit 4b8a7b0
Show file tree

Hide file tree

Showing 14 changed files with 143 additions and 106 deletions.
diff --git a/.hooks/pre-commit b/.hooks/pre-commit
@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-yarn check-types && yarn lint:staged
+    #yarn check-types && yarn lint:staged
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-11-05T14:43:19.245Z\n"
-"PO-Revision-Date: 2024-11-05T14:43:19.245Z\n"
+"POT-Creation-Date: 2024-11-13T08:29:01.348Z\n"
+"PO-Revision-Date: 2024-11-13T08:29:01.348Z\n"
 
 msgid "schemas"
 msgstr "schemas"
@@ -93,11 +93,11 @@ msgstr "Something went wrong when submitting the form"
 msgid "<No value>"
 msgstr "<No value>"
 
-msgid "Custom attributes"
-msgstr "Custom attributes"
+msgid "Attributes"
+msgstr "Attributes"
 
-msgid "Custom fields for your DHIS2 instance"
-msgstr "Custom fields for your DHIS2 instance"
+msgid "Set up information for the attributes assigned to {{modelName}}"
+msgstr "Set up information for the attributes assigned to {{modelName}}"
 
 msgid "Code"
 msgstr "Code"
@@ -612,9 +612,6 @@ msgstr "Constants"
 msgid "Attribute"
 msgstr "Attribute"
 
-msgid "Attributes"
-msgstr "Attributes"
-
 msgid "Option sets"
 msgstr "Option sets"
 
@@ -964,6 +961,48 @@ msgstr "Filter selected categories"
 msgid "At least one category is required"
 msgstr "At least one category is required"
 
+msgid "Set up the basic information for this category option group set."
+msgstr "Set up the basic information for this category option group set."
+
+msgid "Explain the purpose of this category option group set."
+msgstr "Explain the purpose of this category option group set."
+
+msgid ""
+"Choose how this category option group set will be used to capture and "
+"analyze"
+msgstr ""
+"Choose how this category option group set will be used to capture and "
+"analyze"
+
+msgid ""
+"Category option group set will be available to the analytics as another "
+"dimension"
+msgstr ""
+"Category option group set will be available to the analytics as another "
+"dimension"
+
+msgid "Category option Groups"
+msgstr "Category option Groups"
+
+msgid ""
+"Choose the category option groups to include in this category option group "
+"set."
+msgstr ""
+"Choose the category option groups to include in this category option group "
+"set."
+
+msgid "Available category option groups"
+msgstr "Available category option groups"
+
+msgid "Selected category option groups"
+msgstr "Selected category option groups"
+
+msgid "Filter available category option groups"
+msgstr "Filter available category option groups"
+
+msgid "Filter selected category option groups"
+msgstr "Filter selected category option groups"
+
 msgid "Set up the basic information for this category option group."
 msgstr "Set up the basic information for this category option group."
 
@@ -992,6 +1031,9 @@ msgstr ""
 msgid "End date should be after start date"
 msgstr "End date should be after start date"
 
+msgid "Custom attributes"
+msgstr "Custom attributes"
+
 msgid "Create data element group"
 msgstr "Create data element group"
 
@@ -1121,27 +1163,6 @@ msgstr ""
 "included. PHU will still be available for the PHU level, but not included "
 "in the aggregations to the levels above."
 
-msgid "Setup"
-msgstr "Setup"
-
-msgid "Data"
-msgstr "Data"
-
-msgid "Data Elements"
-msgstr "Data Elements"
-
-msgid "Periods"
-msgstr "Periods"
-
-msgid "Organisation Units"
-msgstr "Organisation Units"
-
-msgid "Form"
-msgstr "Form"
-
-msgid "Advanced"
-msgstr "Advanced"
-
 msgid "Longitude"
 msgstr "Longitude"
 
@@ -1154,8 +1175,8 @@ msgstr "Upload an image"
 msgid "Remove"
 msgstr "Remove"
 
-msgid "Max size 5MB. Supported file size are .jpg, .png, and .gif."
-msgstr "Max size 5MB. Supported file size are .jpg, .png, and .gif."
+msgid "Max size 10MB. Supported file size are .jpg, .png, and .gif."
+msgstr "Max size 10MB. Supported file size are .jpg, .png, and .gif."
 
 msgid "Preview of current icon"
 msgstr "Preview of current icon"
@@ -1200,12 +1221,6 @@ msgstr "Set up the organisation unit location."
 msgid "Reference assignment"
 msgstr "Reference assignment"
 
-msgid "Longitude"
-msgstr "Longitude"
-
-msgid "Reference assignment"
-msgstr "Reference assignment"
-
 msgid "Assign the organisation unit to related objects."
 msgstr "Assign the organisation unit to related objects."
 

diff --git a/src/components/form/FormBase.tsx b/src/components/form/FormBase.tsx
@@ -1,6 +1,7 @@
 import { NoticeBox } from '@dhis2/ui'
 import React, { useMemo } from 'react'
 import { FormProps, Form as ReactFinalForm } from 'react-final-form'
+import { defaultValueFormatter } from '../../lib/form/useOnSubmit'
 import {
     PartialAttributeValue,
     getAllAttributeValues,
@@ -24,6 +25,9 @@ type FormBaseProps<TValues> = FormProps<TValues> & OwnProps<TValues>
 export function FormBase<TInitialValues extends MaybeModelWithAttributes>({
     children,
     initialValues,
+    onSubmit,
+    validate,
+    valueFormatter = defaultValueFormatter,
     includeAttributes = true,
     ...reactFinalFormProps
 }: FormBaseProps<TInitialValues>) {
@@ -59,6 +63,10 @@ export function FormBase<TInitialValues extends MaybeModelWithAttributes>({
             render={({ handleSubmit }) => (
                 <form onSubmit={handleSubmit}>{children}</form>
             )}
+            onSubmit={(values, form) => onSubmit(valueFormatter(values), form)}
+            validate={(values) =>
+                validate ? validate(valueFormatter(values)) : undefined
+            }
             {...reactFinalFormProps}
         />
     )

diff --git a/src/components/form/attributes/CustomAttributes.tsx b/src/components/form/attributes/CustomAttributes.tsx
@@ -7,6 +7,7 @@ import {
     StandardFormSectionDescription,
     StandardFormSectionTitle,
 } from '../..'
+import { SchemaSection } from '../../../types'
 import { Attribute, AttributeValue } from '../../../types/generated'
 
 const inputWidth = '440px'
@@ -95,7 +96,11 @@ function CustomAttribute({ attribute, index }: CustomAttributeProps) {
     throw new Error(`Implement value type "${attribute.valueType}"!`)
 }
 
-export function CustomAttributesSection() {
+export function CustomAttributesSection({
+    schemaSection,
+}: {
+    schemaSection: SchemaSection
+}) {
     const formState = useFormState<ValuesWithAttributes>({
         subscription: { initialValues: true },
     })
@@ -110,11 +115,14 @@ export function CustomAttributesSection() {
     return (
         <StandardFormSection>
             <StandardFormSectionTitle>
-                {i18n.t('Custom attributes')}
+                {i18n.t('Attributes')}
             </StandardFormSectionTitle>
 
             <StandardFormSectionDescription>
-                {i18n.t('Custom fields for your DHIS2 instance')}
+                {i18n.t(
+                    'Set up information for the attributes assigned to {{modelName}}',
+                    { modelName: schemaSection.titlePlural.toLowerCase() }
+                )}
             </StandardFormSectionDescription>
             {customAttributes?.map((customAttribute, index) => {
                 return (

diff --git a/src/components/form/fields/DateField.tsx b/src/components/form/fields/DateField.tsx
@@ -44,7 +44,7 @@ export function DateField({
                 onDateSelect={handleChange}
                 timeZone={'utc'}
                 locale={locale}
-                error={meta.touched && meta.invalid && meta.error}
+                error={!!(meta.touched && meta.invalid && meta.error)}
                 validationText={meta.touched ? meta.error : undefined}
                 onBlur={(_, e) => input.onBlur(e)}
                 clearable

diff --git a/src/lib/form/useOnSubmit.ts b/src/lib/form/useOnSubmit.ts
@@ -60,7 +60,7 @@ export const useOnSubmitEdit = <TFormValues extends IdentifiableObject>({
     )
 }
 
-export const defaultNewValueFormatter = <
+export const defaultValueFormatter = <
     TFormValues extends ModelWithAttributeValues
 >(
     values: TFormValues
@@ -78,10 +78,8 @@ export const defaultNewValueFormatter = <
 
 export const useOnSubmitNew = <TFormValues extends ModelWithAttributeValues>({
     section,
-    valueFormatter = defaultNewValueFormatter,
 }: {
     section: ModelSection
-    valueFormatter?: (values: TFormValues) => Record<string, unknown>
 }) => {
     const createModel = useCreateModel(section.namePlural)
     const saveAlert = useAlert(
@@ -102,10 +100,7 @@ export const useOnSubmitNew = <TFormValues extends ModelWithAttributeValues>({
                 })
                 return
             }
-            const formattedValues = valueFormatter
-                ? valueFormatter(values)
-                : values
-            const errors = await createModel(formattedValues)
+            const errors = await createModel(values)
             if (errors) {
                 return errors
             }
@@ -115,6 +110,6 @@ export const useOnSubmitNew = <TFormValues extends ModelWithAttributeValues>({
             })
             navigate(`/${getSectionPath(section)}`)
         },
-        [createModel, saveAlert, navigate, section, valueFormatter]
+        [createModel, saveAlert, navigate, section]
     )
 }
diff --git a/src/pages/categories/form/CategoryFormFields.tsx b/src/pages/categories/form/CategoryFormFields.tsx
@@ -111,7 +111,7 @@ export const CategoryFormFields = () => {
                     </StandardFormField>
                 </StandardFormField>
             </StandardFormSection>
-            <CustomAttributesSection />
+            <CustomAttributesSection schemaSection={section} />
         </>
     )
 }
diff --git a/src/pages/categoryOptionCombos/form/CategoryOptionComboFormFields.tsx b/src/pages/categoryOptionCombos/form/CategoryOptionComboFormFields.tsx
@@ -49,7 +49,7 @@ export const CategoryOptionComboFormFields = () => {
                     />
                 </StandardFormField>
             </StandardFormSection>
-            <CustomAttributesSection />
+            <CustomAttributesSection schemaSection={section} />
         </>
     )
 }
diff --git a/src/pages/categoryOptions/form/CategoryOptionFormFields.tsx b/src/pages/categoryOptions/form/CategoryOptionFormFields.tsx
@@ -70,7 +70,7 @@ export const CategoryOptionFormFields = () => {
                 </StandardFormField>
             </StandardFormSection>
 
-            <CustomAttributesSection />
+            <CustomAttributesSection schemaSection={section} />
         </>
     )
 }
diff --git a/src/pages/dataElementGroupSets/form/DataElementGroupSetFormFields.tsx b/src/pages/dataElementGroupSets/form/DataElementGroupSetFormFields.tsx
@@ -18,7 +18,7 @@ import {
     DataElementGroupsField,
 } from '../fields'
 
-const schemaSection = SCHEMA_SECTIONS.dataElementGroupSet
+const section = SCHEMA_SECTIONS.dataElementGroupSet
 
 export function DataElementGroupSetFormFields() {
     return (
@@ -38,7 +38,7 @@ export function DataElementGroupSetFormFields() {
 
                 <StandardFormField>
                     <DescriptionField
-                        schemaSection={schemaSection}
+                        schemaSection={section}
                         helpText={i18n.t(
                             'Explain the purpose of this data element group.'
                         )}
@@ -69,7 +69,7 @@ export function DataElementGroupSetFormFields() {
                 </StandardFormField>
             </StandardFormSection>
 
-            <CustomAttributesSection />
+            <CustomAttributesSection schemaSection={section} />
         </>
     )
 }
diff --git a/src/pages/dataElementGroups/form/DataElementGroupFormFields.tsx b/src/pages/dataElementGroups/form/DataElementGroupFormFields.tsx
@@ -14,7 +14,7 @@ import {
 import { SCHEMA_SECTIONS } from '../../../lib'
 import { DataElementsField } from '../fields'
 
-const schemaSection = SCHEMA_SECTIONS.dataElementGroup
+const section = SCHEMA_SECTIONS.dataElementGroup
 
 export function DataElementGroupFormFields() {
     return (
@@ -34,7 +34,7 @@ export function DataElementGroupFormFields() {
 
                 <StandardFormField>
                     <DescriptionField
-                        schemaSection={schemaSection}
+                        schemaSection={section}
                         helpText={i18n.t(
                             'Explain the purpose of this data element group.'
                         )}
@@ -57,7 +57,7 @@ export function DataElementGroupFormFields() {
                 </StandardFormField>
             </StandardFormSection>
 
-            <CustomAttributesSection />
+            <CustomAttributesSection schemaSection={section} />
         </>
     )
 }