feat: add indicator list type list view

src/components/form/FormBase.tsx

@@ -1,4 +1,4 @@
-import { NoticeBox } from '@dhis2/ui'
+// import { NoticeBox } from '@dhis2/ui'
 import React, { useMemo } from 'react'
 import { FormProps, Form as ReactFinalForm } from 'react-final-form'
 import {
@@ -10,6 +10,8 @@ import { useCustomAttributesQuery } from './attributes'
 
 type MaybeModelWithAttributes = {
     id?: string
+    name?: string
+    factor?: string
     attributeValues?: PartialAttributeValue[] | undefined
 }
 
@@ -44,9 +46,9 @@ export function FormBase<TInitialValues extends MaybeModelWithAttributes>({
         }
     }, [customAttributes.data, initialValues, includeAttributes])
 
-    if (customAttributes.error) {
-        return <NoticeBox error title="Failed to load custom attributes" />
-    }
+    // if (customAttributes.error) {
+    //     return <NoticeBox error title="Failed to load custom attributes" />
+    // }
 
     if (!initialValuesWithAttributes || customAttributes.loading) {
         return <LoadingSpinner />

src/pages/indicatorTypes/Edit.tsx

@@ -0,0 +1,47 @@
+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 as IndicatorTypesFormValues}
+            validate={validate}
+        >
+            <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,23 @@
+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}
+        >
+            <DefaultNewFormContents section={section}>
+                <IndicatorTypesFormFields />
+            </DefaultNewFormContents>
+        </FormBase>
+    )
+}

src/pages/indicatorTypes/form/IndicatorTypesFormFields.tsx

@@ -0,0 +1,48 @@
+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,
+} from '../../../components'
+
+export const IndicatorTypesFormFields = () => {
+    return (
+        <>
+            <StandardFormSection>
+                <StandardFormSectionTitle>
+                    {i18n.t('Basic information')}
+                </StandardFormSectionTitle>
+                <StandardFormSectionDescription>
+                    {i18n.t(
+                        'Set up the basic information for this Indicator Type.'
+                    )}
+                </StandardFormSectionDescription>
+
+                <StandardFormField>
+                    <Field
+                        name="name"
+                        component={InputFieldFF}
+                        label={i18n.t('Name')}
+                        required
+                    />
+                </StandardFormField>
+
+                <StandardFormField>
+                    <Field
+                        name="factor"
+                        type="number"
+                        component={InputFieldFF}
+                        label={i18n.t('Factor')}
+                        required
+                    />
+                </StandardFormField>
+            </StandardFormSection>
+            <CustomAttributesSection />
+        </>
+    )
+}

src/pages/indicatorTypes/form/IndicatorTypesSchema.ts

@@ -0,0 +1,16 @@
+import { z } from 'zod'
+import { getDefaults, createFormValidate, modelFormSchemas } from '../../../lib'
+
+const { identifiable } = modelFormSchemas
+
+export const IndicatorSchema = identifiable.extend({
+    name: z.string().min(1, 'Name is required'),
+    factor: z
+        .string()
+        .min(1, 'Factor is required')
+        .regex(/^\d+(\.\d+)?$/, 'Factor must be a valid number'),
+})
+
+export const initialValues = getDefaults(IndicatorSchema)
+
+export const validate = createFormValidate(IndicatorSchema)

src/pages/indicatorTypes/form/index.ts

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

src/types/generated/models.ts

@@ -4776,7 +4776,7 @@ export type IndicatorType = {
     created: string
     createdBy: User
     displayName: string
-    factor: number
+    factor: string
     favorite: boolean
     favorites: Array<string>
     href: string