feat: split data sets form into multiple components (#495) [skip rele…

…ase] * feat: split data sets form into multiple components * fix: lint * fix: remove unused code * fix: remove unused sync hook --------- Co-authored-by: Birk Johansson <[email protected]>
dhis2 · Jan 20, 2025 · 4f412b4 · 4f412b4
1 parent 2562297
commit 4f412b4
Show file tree

Hide file tree

Showing 19 changed files with 212 additions and 146 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: 2025-01-15T10:27:11.503Z\n"
-"PO-Revision-Date: 2025-01-15T10:27:11.503Z\n"
+"POT-Creation-Date: 2025-01-16T12:51:51.570Z\n"
+"PO-Revision-Date: 2025-01-16T12:51:51.570Z\n"
 
 msgid "schemas"
 msgstr "schemas"
@@ -1292,9 +1292,6 @@ msgstr ""
 "level means that data from lower levels will not be included in the "
 "aggregation."
 
-msgid "Set up the basic information for this data set."
-msgstr "Set up the basic information for this data set."
-
 msgid "Configure data elements"
 msgstr "Configure data elements"
 
@@ -1334,6 +1331,9 @@ msgstr "These options are used for advanced data set configurations."
 msgid "Something went wrong"
 msgstr "Something went wrong"
 
+msgid "Set up the basic information for this data set."
+msgstr "Set up the basic information for this data set."
+
 msgid "Setup"
 msgstr "Setup"
 

diff --git a/src/components/form/fields/DescriptionField.tsx b/src/components/form/fields/DescriptionField.tsx
@@ -6,13 +6,7 @@ import { SchemaSection } from '../../../lib'
 
 const validateMaxLength = createMaxCharacterLength(2000)
 
-export function DescriptionField({
-    helpText,
-    schemaSection,
-}: {
-    helpText?: string
-    schemaSection: SchemaSection
-}) {
+export function DescriptionField({ helpText }: { helpText?: string }) {
     return (
         <FieldRFF
             component={TextAreaFieldFF}

diff --git a/src/pages/categories/form/CategoryFormFields.tsx b/src/pages/categories/form/CategoryFormFields.tsx
@@ -29,7 +29,6 @@ export const CategoryFormFields = () => {
                 </StandardFormSectionDescription>
                 <DefaultIdentifiableFields />
                 <DescriptionField
-                    schemaSection={section}
                     helpText={i18n.t('Explain the purpose of this category.')}
                 />
             </StandardFormSection>

diff --git a/src/pages/categoryOptionGroupSets/form/CategoryOptionGroupSetFormFields.tsx b/src/pages/categoryOptionGroupSets/form/CategoryOptionGroupSetFormFields.tsx
@@ -30,7 +30,6 @@ function CategoryOptionGroupSetFormFields() {
                 </StandardFormSectionDescription>
                 <DefaultIdentifiableFields />
                 <DescriptionField
-                    schemaSection={section}
                     helpText={i18n.t(
                         'Explain the purpose of this category option group set.'
                     )}

diff --git a/src/pages/categoryOptionGroups/form/CategoryOptionGroupFormFields.tsx b/src/pages/categoryOptionGroups/form/CategoryOptionGroupFormFields.tsx
@@ -30,7 +30,6 @@ function CategoryOptionGroupFormFields() {
                 </StandardFormSectionDescription>
                 <DefaultIdentifiableFields />
                 <DescriptionField
-                    schemaSection={section}
                     helpText={i18n.t(
                         'Explain the purpose of this category option group.'
                     )}

diff --git a/src/pages/categoryOptions/form/CategoryOptionFormFields.tsx b/src/pages/categoryOptions/form/CategoryOptionFormFields.tsx
@@ -45,7 +45,7 @@ export const CategoryOptionFormFields = () => {
                     />
                 </StandardFormField>
                 <StandardFormField>
-                    <DescriptionField schemaSection={section} />
+                    <DescriptionField />
                 </StandardFormField>
             </StandardFormSection>
 

diff --git a/src/pages/dataElementGroupSets/form/DataElementGroupSetFormFields.tsx b/src/pages/dataElementGroupSets/form/DataElementGroupSetFormFields.tsx
@@ -38,7 +38,6 @@ export function DataElementGroupSetFormFields() {
 
                 <StandardFormField>
                     <DescriptionField
-                        schemaSection={section}
                         helpText={i18n.t(
                             'Explain the purpose of this data element group set.'
                         )}

diff --git a/src/pages/dataElementGroups/form/DataElementGroupFormFields.tsx b/src/pages/dataElementGroups/form/DataElementGroupFormFields.tsx
@@ -34,7 +34,6 @@ export function DataElementGroupFormFields() {
 
                 <StandardFormField>
                     <DescriptionField
-                        schemaSection={section}
                         helpText={i18n.t(
                             'Explain the purpose of this data element group.'
                         )}

diff --git a/src/pages/dataElements/form/DataElementFormFields.tsx b/src/pages/dataElements/form/DataElementFormFields.tsx
@@ -64,7 +64,6 @@ export function DataElementFormFields() {
                         helpText={i18n.t(
                             'Explain the purpose of this data element.'
                         )}
-                        schemaSection={section}
                     />
                 </StandardFormField>
 

diff --git a/src/pages/dataSetsWip/form/AdvancedFormContents.tsx b/src/pages/dataSetsWip/form/AdvancedFormContents.tsx
@@ -0,0 +1,23 @@
+import i18n from '@dhis2/d2-i18n'
+import React from 'react'
+import {
+    StandardFormSectionDescription,
+    StandardFormSectionTitle,
+} from '../../../components'
+import { SectionedFormSection } from '../../../components/sectionedForm'
+
+export const AdvancedFormContents = ({ name }: { name: string }) => {
+    return (
+        <SectionedFormSection name={name}>
+            <StandardFormSectionTitle>
+                {i18n.t('Advanced options')}
+            </StandardFormSectionTitle>
+            <StandardFormSectionDescription>
+                {i18n.t(
+                    'These options are used for advanced data set configurations.'
+                )}
+            </StandardFormSectionDescription>
+            <div style={{ height: 900 }} />
+        </SectionedFormSection>
+    )
+}
diff --git a/src/pages/dataSetsWip/form/DataFormContents.tsx b/src/pages/dataSetsWip/form/DataFormContents.tsx
@@ -0,0 +1,41 @@
+import i18n from '@dhis2/d2-i18n'
+import React from 'react'
+import {
+    ModelTransferField,
+    StandardFormField,
+    StandardFormSectionDescription,
+    StandardFormSectionTitle,
+} from '../../../components'
+import { SectionedFormSection } from '../../../components/sectionedForm'
+import { CategoryComboField } from './CategoryComboField'
+
+export const DataFormContents = ({ name }: { name: string }) => {
+    return (
+        <SectionedFormSection name={name}>
+            <StandardFormSectionTitle>
+                {i18n.t('Configure data elements')}
+            </StandardFormSectionTitle>
+            <StandardFormSectionDescription>
+                {i18n.t('Choose what data is collected for this data set.')}
+            </StandardFormSectionDescription>
+            <StandardFormField>
+                <ModelTransferField
+                    name={'dataElements'}
+                    query={{
+                        resource: 'dataElements',
+                    }}
+                />
+            </StandardFormField>
+            <div style={{ height: 24 }} />
+            <StandardFormSectionTitle>
+                {i18n.t('Data set disaggregation')}
+            </StandardFormSectionTitle>
+            <StandardFormSectionDescription>
+                {i18n.t(
+                    'Choose an optional category combination to disaggregate the entire data set.'
+                )}
+            </StandardFormSectionDescription>
+            <CategoryComboField />
+        </SectionedFormSection>
+    )
+}
diff --git a/src/pages/dataSetsWip/form/DataSetFormContents.tsx b/src/pages/dataSetsWip/form/DataSetFormContents.tsx
@@ -1,143 +1,37 @@
-import i18n from '@dhis2/d2-i18n'
 import React from 'react'
+import { SectionedFormSections } from '../../../components/sectionedForm'
 import {
-    DefaultIdentifiableFields,
-    DescriptionField,
-    ModelTransferField,
-    StandardFormField,
-    StandardFormSectionDescription,
-    StandardFormSectionTitle,
-} from '../../../components'
-import {
-    SectionedFormSection,
-    SectionedFormSections,
-} from '../../../components/sectionedForm'
-import {
-    SECTIONS_MAP,
     useSectionedFormContext,
     useSyncSelectedSectionWithScroll,
 } from '../../../lib'
-import { ColorAndIconField } from '../../dataElements/fields'
-import { CategoryComboField } from './CategoryComboField'
+import { AdvancedFormContents } from './AdvancedFormContents'
+import { DataFormContents } from './DataFormContents'
 import { DataSetFormDescriptor } from './formDescriptor'
-import { PeriodTypeField } from './PeriodTypeField'
-
-const section = SECTIONS_MAP.dataSet
+import { FormFormContents } from './FormFormContents'
+import { OrganisationUnitsFormContents } from './OrganisationUnitsFormContents'
+import { PeriodsContents } from './PeriodsFormContents'
+import { SetupFormContents } from './SetupFormContents'
+import { ValidationFormContents } from './ValidationFormContents'
 
 export const DataSetFormContents = () => {
     const descriptor = useSectionedFormContext<typeof DataSetFormDescriptor>()
     useSyncSelectedSectionWithScroll()
     return (
         <>
             <SectionedFormSections>
-                <SectionedFormSection
-                    name={descriptor.getSection('setup').name}
-                >
-                    <StandardFormSectionTitle>
-                        {i18n.t('Basic information')}
-                    </StandardFormSectionTitle>
-                    <StandardFormSectionDescription>
-                        {i18n.t(
-                            'Set up the basic information for this data set.'
-                        )}
-                    </StandardFormSectionDescription>
-                    <DefaultIdentifiableFields />
-                    <DescriptionField schemaSection={section} />
-                    <ColorAndIconField />
-                </SectionedFormSection>
-                <SectionedFormSection name={descriptor.getSection('data').name}>
-                    <StandardFormSectionTitle>
-                        {i18n.t('Configure data elements')}
-                    </StandardFormSectionTitle>
-                    <StandardFormSectionDescription>
-                        {i18n.t(
-                            'Choose what data is collected for this data set.'
-                        )}
-                    </StandardFormSectionDescription>
-                    <StandardFormField>
-                        <ModelTransferField
-                            name={'dataElements'}
-                            query={{
-                                resource: 'dataElements',
-                            }}
-                        />
-                    </StandardFormField>
-                    <div style={{ height: 24 }} />
-                    <StandardFormSectionTitle>
-                        {i18n.t('Data set disaggregation')}
-                    </StandardFormSectionTitle>
-                    <StandardFormSectionDescription>
-                        {i18n.t(
-                            'Choose an optional category combination to disaggregate the entire data set.'
-                        )}
-                    </StandardFormSectionDescription>
-                    <CategoryComboField />
-                </SectionedFormSection>
-                <SectionedFormSection
-                    name={descriptor.getSection('periods').name}
-                >
-                    <StandardFormSectionTitle>
-                        {i18n.t('Configure data entry periods')}
-                    </StandardFormSectionTitle>
-                    <StandardFormSectionDescription>
-                        {i18n.t(
-                            'Choose for what time periods data can be entered for this data set'
-                        )}
-                    </StandardFormSectionDescription>
-                    <PeriodTypeField />
-                </SectionedFormSection>
-                <SectionedFormSection
+                <SetupFormContents name={descriptor.getSection('setup').name} />
+                <DataFormContents name={descriptor.getSection('data').name} />
+                <PeriodsContents name={descriptor.getSection('periods').name} />
+                <ValidationFormContents
+                    name={descriptor.getSection('validation').name}
+                />
+                <OrganisationUnitsFormContents
                     name={descriptor.getSection('validation').name}
-                >
-                    <StandardFormSectionTitle>
-                        {i18n.t('Validation and limitations')}
-                    </StandardFormSectionTitle>
-                    <StandardFormSectionDescription>
-                        {i18n.t(
-                            'Configure how data can and must be entered for this data'
-                        )}
-                    </StandardFormSectionDescription>
-                    <StandardFormField>
-                        <ModelTransferField
-                            name={'dataElements'}
-                            query={{
-                                resource: 'dataElements',
-                            }}
-                        />
-                    </StandardFormField>
-                </SectionedFormSection>
-                <SectionedFormSection
-                    name={descriptor.getSection('organisationUnits').name}
-                >
-                    <StandardFormSectionTitle>
-                        {i18n.t('Organisation units')}
-                    </StandardFormSectionTitle>
-                    <StandardFormSectionDescription>
-                        {i18n.t(
-                            'Configure which organisation units can collect data for this data set.'
-                        )}
-                    </StandardFormSectionDescription>
-                    <div style={{ height: 300 }} />
-                </SectionedFormSection>
-                <SectionedFormSection name={descriptor.getSection('form').name}>
-                    <StandardFormSectionTitle>
-                        {i18n.t('Data entry form')}
-                    </StandardFormSectionTitle>
-                    <div style={{ height: 300 }} />
-                </SectionedFormSection>
-                <SectionedFormSection
+                />
+                <FormFormContents name={descriptor.getSection('form').name} />
+                <AdvancedFormContents
                     name={descriptor.getSection('advanced').name}
-                >
-                    <StandardFormSectionTitle>
-                        {i18n.t('Advanced options')}
-                    </StandardFormSectionTitle>
-                    <StandardFormSectionDescription>
-                        {i18n.t(
-                            'These options are used for advanced data set configurations.'
-                        )}
-                    </StandardFormSectionDescription>
-                    <div style={{ height: 900 }} />
-                </SectionedFormSection>
+                />
             </SectionedFormSections>
         </>
     )

diff --git a/src/pages/dataSetsWip/form/FormFormContents.tsx b/src/pages/dataSetsWip/form/FormFormContents.tsx
@@ -0,0 +1,15 @@
+import i18n from '@dhis2/d2-i18n'
+import React from 'react'
+import { StandardFormSectionTitle } from '../../../components'
+import { SectionedFormSection } from '../../../components/sectionedForm'
+
+export const FormFormContents = ({ name }: { name: string }) => {
+    return (
+        <SectionedFormSection name={name}>
+            <StandardFormSectionTitle>
+                {i18n.t('Data entry form')}
+            </StandardFormSectionTitle>
+            <div style={{ height: 300 }} />
+        </SectionedFormSection>
+    )
+}
diff --git a/src/pages/dataSetsWip/form/OrganisationUnitsFormContents.tsx b/src/pages/dataSetsWip/form/OrganisationUnitsFormContents.tsx
@@ -0,0 +1,23 @@
+import i18n from '@dhis2/d2-i18n'
+import React from 'react'
+import {
+    StandardFormSectionDescription,
+    StandardFormSectionTitle,
+} from '../../../components'
+import { SectionedFormSection } from '../../../components/sectionedForm'
+
+export const OrganisationUnitsFormContents = ({ name }: { name: string }) => {
+    return (
+        <SectionedFormSection name={name}>
+            <StandardFormSectionTitle>
+                {i18n.t('Organisation units')}
+            </StandardFormSectionTitle>
+            <StandardFormSectionDescription>
+                {i18n.t(
+                    'Configure which organisation units can collect data for this data set.'
+                )}
+            </StandardFormSectionDescription>
+            <div style={{ height: 300 }} />
+        </SectionedFormSection>
+    )
+}
diff --git a/src/pages/dataSetsWip/form/PeriodsFormContents.tsx b/src/pages/dataSetsWip/form/PeriodsFormContents.tsx
@@ -0,0 +1,24 @@
+import i18n from '@dhis2/d2-i18n'
+import React from 'react'
+import {
+    StandardFormSectionDescription,
+    StandardFormSectionTitle,
+} from '../../../components'
+import { SectionedFormSection } from '../../../components/sectionedForm'
+import { PeriodTypeField } from './PeriodTypeField'
+
+export const PeriodsContents = ({ name }: { name: string }) => {
+    return (
+        <SectionedFormSection name={name}>
+            <StandardFormSectionTitle>
+                {i18n.t('Configure data entry periods')}
+            </StandardFormSectionTitle>
+            <StandardFormSectionDescription>
+                {i18n.t(
+                    'Choose for what time periods data can be entered for this data set'
+                )}
+            </StandardFormSectionDescription>
+            <PeriodTypeField />
+        </SectionedFormSection>
+    )
+}