feat: add category options form and list (#419)

* feat(categoryOptions): add categoryOptions form

* feat: add filters to categoryOption list

* fix: add form-name field, add availability header

* fix: blur datefield on date select

* fix: improve getDefaults type

* refactor: use common attributeValues field-filter

* fix(datefield): useSystemSettings instead of settings

* fix(datefield): fix inputWidth

* fix: update multi-calendar-dates dep

* fix(orgunitfield): make orgUnit model available

* fix(categoryOption): fix endDate validation

* fix: update ui to alpha

* style: sort imports

* style: fix lint

* style: cleanup

* fix: minor cleanup

Author: Birkbjo

package.json

@@ -39,7 +39,8 @@
     },
     "dependencies": {
         "@dhis2/app-runtime": "^3.9.3",
-        "@dhis2/ui": "^9.11.3",
+        "@dhis2/multi-calendar-dates": "^2.0.0-alpha.5",
+        "@dhis2/ui": "^10.0.0-alpha.3",
         "@tanstack/react-table": "^8.16.0",
         "@types/lodash": "^4.14.198",
         "lodash": "^4.17.21",
@@ -53,6 +54,8 @@
         "zustand": "^4.4.0"
     },
     "resolutions": {
-        "eslint": "^8"
+        "eslint": "^8",
+        "@dhis2/multi-calendar-dates": "^2.0.0-alpha.5",
+        "@dhis2/ui": "^10.0.0-alpha.3"
     }
 }

src/components/form/fields/DateField.tsx

@@ -0,0 +1,54 @@
+import { CalendarInput, CalendarInputProps } from '@dhis2/ui'
+import React from 'react'
+import { useField } from 'react-final-form'
+import { selectedLocale, useSystemSetting } from '../../../lib'
+
+type DateFieldProps = Omit<
+    CalendarInputProps,
+    'name' | 'calendar' | 'onDateSelect' | 'date'
+> & {
+    name: string
+    // this is not exposed in CalendarInputProps - but it should be
+    label?: string
+}
+export function DateField({
+    name,
+    label,
+    ...calendarInputProps
+}: DateFieldProps) {
+    const calendar = useSystemSetting('keyCalendar')
+    const locale = selectedLocale
+    const { meta, input } = useField<string | undefined>(name, {
+        format: (value) => {
+            if (value) {
+                return value.slice(0, 10)
+            }
+            return value
+        },
+    })
+
+    const handleChange: CalendarInputProps['onDateSelect'] = (payload) => {
+        input.onChange(payload?.calendarDateString)
+        input.onBlur()
+    }
+
+    return (
+        <div style={{ width: '400px' }}>
+            {/* TODO: we can remove style above, once inputWidth for CalendarInput is fixed */}
+            <CalendarInput
+                date={input.value}
+                name={name}
+                calendar={calendar as CalendarInputProps['calendar']}
+                onDateSelect={handleChange}
+                timeZone={'utc'}
+                locale={locale}
+                error={meta.touched && meta.invalid && meta.error}
+                validationText={meta.touched && meta.error}
+                onBlur={(_, e) => input.onBlur(e)}
+                clearable
+                label={label}
+                {...calendarInputProps}
+            />
+        </div>
+    )
+}

src/components/form/fields/OrganisationUnitField.tsx

@@ -0,0 +1,64 @@
+import i18n from '@dhis2/d2-i18n'
+import {
+    Field,
+    OrganisationUnitTree,
+    OrganisationUnitTreeProps,
+} from '@dhis2/ui'
+import React from 'react'
+import { useField } from 'react-final-form'
+import { useCurrentUserRootOrgUnits } from '../../../lib/user/currentUserStore'
+
+type OrganisationUnitFieldProps = {
+    name?: string
+}
+
+type OrganisationUnitFormValue = {
+    id: string
+    path: string
+    displayName: string
+}
+
+export const OrganisationUnitField = ({ name }: OrganisationUnitFieldProps) => {
+    const { input, meta } = useField<
+        OrganisationUnitFormValue[],
+        HTMLElement,
+        OrganisationUnitFormValue[]
+    >(name ?? 'organisationUnits')
+
+    const roots = useCurrentUserRootOrgUnits()
+
+    const rootIds = roots.map((ou) => ou.id)
+
+    const handleChange: OrganisationUnitTreeProps['onChange'] = ({
+        selected,
+        displayName,
+        id,
+        path,
+    }) => {
+        const prevSelected = new Map(input.value.map((ou) => [ou.path, ou]))
+        const newSelected = selected.map((selectedPath) => {
+            const prev = prevSelected.get(selectedPath)
+            return prev ?? { id, path, displayName }
+        })
+
+        input.onChange(newSelected)
+        input.onBlur()
+    }
+
+    const selectedPaths = input.value?.map((ou) => ou.path) ?? []
+
+    return (
+        <Field
+            label={i18n.t('Select organisation units')}
+            error={meta.touched && meta.error}
+            validationText={meta.touched && meta.error}
+        >
+            <OrganisationUnitTree
+                roots={rootIds}
+                onChange={handleChange}
+                selected={selectedPaths}
+                initiallyExpanded={rootIds}
+            />
+        </Field>
+    )
+}

src/components/form/fields/index.ts

@@ -3,3 +3,4 @@ export { NameField } from './NameField'
 export { ShortNameField } from './ShortNameField'
 export { CodeField } from './CodeField'
 export { DescriptionField } from './DescriptionField'
+export { OrganisationUnitField } from './OrganisationUnitField'

src/components/sectionList/filters/DynamicFilters.tsx

@@ -9,6 +9,7 @@ import {
     PublicAccessFilter,
     DataDimensionTypeFilter,
     Categoryfilter,
+    CategoryOptionGroupFilter,
 } from './filterSelectors'
 import { useFilterKeys } from './useFilterKeys'
 
@@ -17,6 +18,7 @@ type FilterKeyToComponentMap = Partial<Record<ConfigurableFilterKey, React.FC>>
 const filterKeyToComponentMap: FilterKeyToComponentMap = {
     category: Categoryfilter,
     categoryCombo: CategoryComboFilter,
+    categoryOptionGroup: CategoryOptionGroupFilter,
     dataSet: DataSetFilter,
     domainType: DomainTypeSelectionFilter,
     valueType: ValueTypeSelectionFilter,

src/components/sectionList/filters/filterSelectors/CategoryOptionGroupFilter.tsx

@@ -0,0 +1,24 @@
+import i18n from '@dhis2/d2-i18n'
+import React from 'react'
+import { useSectionListFilter } from '../../../../lib'
+import { createFilterDataQuery } from './createFilterDataQuery'
+import { ModelFilterSelect } from './ModelFilter'
+
+const query = createFilterDataQuery('categoryOptionGroups')
+
+export const CategoryOptionGroupFilter = () => {
+    const [filter, setFilter] = useSectionListFilter('categoryOptionGroup')
+
+    const selected = filter?.[0]
+
+    return (
+        <ModelFilterSelect
+            placeholder={i18n.t('Category option group')}
+            query={query}
+            selected={selected}
+            onChange={({ selected }) =>
+                setFilter(selected ? [selected] : undefined)
+            }
+        />
+    )
+}

src/components/sectionList/filters/filterSelectors/index.ts

@@ -5,3 +5,4 @@ export * from './IdentifiableFilter'
 export * from './ConstantSelectionFilter'
 export * from './PublicAccessFilter'
 export * from './CategoryFilter'
+export * from './CategoryOptionGroupFilter'

src/lib/form/label.ts

@@ -0,0 +1,10 @@
+import i18n from '@dhis2/d2-i18n'
+
+/**
+ *  Utility function to get the required label.
+ *
+ * Note that label should already be translated
+ */
+export const getRequiredLabel = (label: string) => {
+    return i18n.t('{{label}} (required)', { label })
+}

src/lib/form/validate.ts

@@ -19,6 +19,6 @@ export function validate<FormValues>(
     return allFormErrors
 }
 
-export function createFormValidate<FormValues>(zodSchema: z.AnyZodObject) {
-    return (values: FormValues) => validate(zodSchema, values)
+export function createFormValidate(zodSchema: z.ZodTypeAny) {
+    return <FormValues>(values: FormValues) => validate(zodSchema, values)
 }