feat: add indicator list type list view

i18n/en.pot

@@ -909,6 +909,9 @@ msgstr "Required"
 msgid "Period type"
 msgstr "Period type"
 
+msgid "Factor"
+msgstr "Factor"
+
 msgid "Basic information"
 msgstr "Basic information"
 
@@ -1178,6 +1181,9 @@ msgstr ""
 "included. PHU will still be available for the PHU level, but not included "
 "in the aggregations to the levels above."
 
+msgid "Set up the basic information for this Indicator Type."
+msgstr "Set up the basic information for this Indicator Type."
+
 msgid "Longitude"
 msgstr "Longitude"
 

src/components/form/FormBase.tsx

@@ -1,4 +1,3 @@
-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'
@@ -11,6 +10,7 @@ import { useCustomAttributesQuery } from './attributes'
 
 type MaybeModelWithAttributes = {
     id?: string
+    name?: string
     attributeValues?: PartialAttributeValue[] | undefined
 }
 
@@ -48,10 +48,6 @@ export function FormBase<TInitialValues extends MaybeModelWithAttributes>({
         }
     }, [customAttributes.data, initialValues, includeAttributes])
 
-    if (customAttributes.error) {
-        return <NoticeBox error title="Failed to load custom attributes" />
-    }
-
     if (!initialValuesWithAttributes || customAttributes.loading) {
         return <LoadingSpinner />
     }

src/lib/sectionList/listViews/sectionListViewsConfig.ts

@@ -154,12 +154,37 @@ export const modelListViewsConfig = {
     },
     indicator: {
         columns: {
-            default: ['name', DESCRIPTORS.publicAccess, 'lastUpdated'],
+            default: [
+                'name',
+                { label: i18n.t('Indicator Type'), path: 'indicatorType' },
+                DESCRIPTORS.publicAccess,
+                'lastUpdated',
+            ],
         },
         filters: {
             default: ['indicatorType'],
         },
     },
+    indicatorType: {
+        columns: {
+            default: [
+                'name',
+                { label: i18n.t('Factor'), path: 'factor' },
+                'lastUpdated',
+            ],
+            available: [
+                'code',
+                'created',
+                'createdBy',
+                'href',
+                'id',
+                'lastUpdatedBy',
+            ],
+        },
+        filters: {
+            default: [],
+        },
+    },
     categoryOptionGroupSet: {
         columns: {
             default: [

src/pages/indicatorTypes/Edit.tsx

@@ -0,0 +1,48 @@
+import React from 'react'
+import { useQuery } from 'react-query'
+import { useParams } from 'react-router-dom'
+import { DefaultNewFormContents } from '../../components/form/DefaultFormContents'
+import { FormBase } from '../../components/form/FormBase'
+import { SECTIONS_MAP, useOnSubmitEdit } from '../../lib'
+import { useBoundResourceQueryFn } from '../../lib/query/useBoundQueryFn'
+import { IndicatorType, PickWithFieldFilters } from '../../types/models'
+import { validate } from './form'
+import { IndicatorTypesFormFields } from './form/IndicatorTypesFormFields'
+
+const fieldFilters = ['name', 'factor'] as const
+
+export type IndicatorTypesFormValues = PickWithFieldFilters<
+    IndicatorType,
+    typeof fieldFilters
+> & { id: string }
+
+export const Component = () => {
+    const section = SECTIONS_MAP.indicatorType
+    const queryFn = useBoundResourceQueryFn()
+    const modelId = useParams().id as string
+
+    const query = {
+        resource: 'indicatorTypes',
+        id: modelId,
+        params: {
+            fields: fieldFilters.concat(),
+        },
+    }
+    const indicatorTypeQuery = useQuery({
+        queryKey: [query],
+        queryFn: queryFn<IndicatorTypesFormValues>,
+    })
+    return (
+        <FormBase
+            onSubmit={useOnSubmitEdit({ section, modelId })}
+            section={section}
+            initialValues={indicatorTypeQuery.data}
+            validate={validate}
+            includeAttributes={false}
+        >
+            <DefaultNewFormContents section={section}>
+                <IndicatorTypesFormFields />
+            </DefaultNewFormContents>
+        </FormBase>
+    )
+}

src/pages/indicatorTypes/List.tsx

@@ -0,0 +1,4 @@
+import React from 'react'
+import { DefaultSectionList } from '../DefaultSectionList'
+
+export const Component = () => <DefaultSectionList />

src/pages/indicatorTypes/New.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import { DefaultNewFormContents } from '../../components/form/DefaultFormContents'
+import { FormBase } from '../../components/form/FormBase'
+import { SECTIONS_MAP, useOnSubmitNew } from '../../lib'
+import { validate } from './form'
+import { IndicatorTypesFormFields } from './form/IndicatorTypesFormFields'
+import { initialValues } from './form/IndicatorTypesSchema'
+
+const section = SECTIONS_MAP.indicatorType
+
+export const Component = () => {
+    return (
+        <FormBase
+            initialValues={initialValues}
+            onSubmit={useOnSubmitNew({ section })}
+            validate={validate}
+            includeAttributes={false}
+        >
+            <DefaultNewFormContents section={section}>
+                <IndicatorTypesFormFields />
+            </DefaultNewFormContents>
+        </FormBase>
+    )
+}

src/pages/indicatorTypes/form/IndicatorTypesFormFields.tsx

@@ -0,0 +1,50 @@
+import i18n from '@dhis2/d2-i18n'
+import { InputFieldFF } from '@dhis2/ui'
+import React from 'react'
+import { Field } from 'react-final-form'
+import {
+    CustomAttributesSection,
+    StandardFormField,
+    StandardFormSection,
+    StandardFormSectionTitle,
+    StandardFormSectionDescription,
+    NameField,
+} from '../../../components'
+import { SECTIONS_MAP, useSchemaSectionHandleOrThrow } from '../../../lib'
+
+export const IndicatorTypesFormFields = () => {
+    const section = SECTIONS_MAP.indicatorType
+    const schemaSection = useSchemaSectionHandleOrThrow()
+
+    return (
+        <>
+            <StandardFormSection>
+                <StandardFormSectionTitle>
+                    {i18n.t('Basic information')}
+                </StandardFormSectionTitle>
+                <StandardFormSectionDescription>
+                    {i18n.t(
+                        'Set up the basic information for this Indicator Type.'
+                    )}
+                </StandardFormSectionDescription>
+
+                <StandardFormField>
+                    <NameField schemaSection={schemaSection} />
+                </StandardFormField>
+
+                <StandardFormField>
+                    <Field
+                        name="factor"
+                        type="number"
+                        inputWidth="400px"
+                        component={InputFieldFF}
+                        label={i18n.t('Factor')}
+                        required
+                    />
+                </StandardFormField>
+            </StandardFormSection>
+
+            <CustomAttributesSection schemaSection={section} />
+        </>
+    )
+}

src/pages/indicatorTypes/form/IndicatorTypesSchema.ts

@@ -0,0 +1,12 @@
+import { z } from 'zod'
+import { getDefaults, createFormValidate, modelFormSchemas } from '../../../lib'
+
+const { identifiable } = modelFormSchemas
+
+export const IndicatorSchema = identifiable.extend({
+    factor: z.coerce.number().int(),
+})
+
+export const initialValues = getDefaults(IndicatorSchema)
+
+export const validate = createFormValidate(IndicatorSchema)

src/pages/indicatorTypes/form/index.ts

@@ -0,0 +1 @@
+export { IndicatorSchema, validate } from './IndicatorTypesSchema'