feat: category option group sets

i18n/en.pot

@@ -858,6 +858,9 @@ msgstr "Data dimension type"
 msgid "This field requires a unique value, please choose another one"
 msgstr "This field requires a unique value, please choose another one"
 
+msgid "{{label}} (required)"
+msgstr "{{label}} (required)"
+
 msgid "No changes to be saved"
 msgstr "No changes to be saved"
 
@@ -879,23 +882,27 @@ msgstr "Basic information"
 msgid "Set up the basic information for this category."
 msgstr "Set up the basic information for this category."
 
-msgid "Explain the purpose of this category."
-msgstr "Explain the purpose of this category."
+msgid "Explain the purpose of this category option group."
+msgstr "Explain the purpose of this category option group."
 
 msgid "Data configuration"
 msgstr "Data configuration"
 
-msgid "Choose how this category will be used to capture and analyze"
-msgstr "Choose how this category will be used to capture and analyze"
+msgid "Choose how this category option group will be used to capture and analyze"
+msgstr "Choose how this category option group will be used to capture and analyze"
 
 msgid "Use as data dimension"
 msgstr "Use as data dimension"
 
-msgid "Category will be available to the analytics as another dimension"
-msgstr "Category will be available to the analytics as another dimension"
+msgid ""
+"Category option group will be available to the analytics as another "
+"dimension"
+msgstr ""
+"Category option group will be available to the analytics as another "
+"dimension"
 
-msgid "Choose the category options to include in this category."
-msgstr "Choose the category options to include in this category."
+msgid "Choose the category options to include in this category option group."
+msgstr "Choose the category options to include in this category option group."
 
 msgid "Available category options"
 msgstr "Available category options"
@@ -933,6 +940,45 @@ 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 "Set up the basic information for this category option group."
+msgstr "Set up the basic information for this category option group."
+
+msgid "Choose how this category option  will be used to capture and analyze"
+msgstr "Choose how this category option  will be used to capture and analyze"
+
+msgid "Choose the category options to include in this category."
+msgstr "Choose the category options to include in this category."
+
 msgid "Set up the basic information for this category option."
 msgstr "Set up the basic information for this category option."
 

src/components/metadataFormControls/ModelTransfer/ModelTransfer.tsx

@@ -92,7 +92,7 @@ const BaseModelTransfer = <TModel extends DisplayableModel>(
         [queryResult.data, modelName]
     )
 
-    const selectedOptions = selected.map(toDisplayOption)
+    const selectedOptions = selected ? selected?.map(toDisplayOption) : []
     const loadedOptions = Array.from(allDataMap.values()).map(toDisplayOption)
     // always include selected options
     const allOptions = selectedOptions.concat(loadedOptions || [])

src/lib/sectionList/listViews/sectionListViewsConfig.ts

@@ -126,6 +126,19 @@ export const modelListViewsConfig = {
             default: ['dataDimensionType', 'categoryCombo'],
         },
     },
+    categoryOptionGroupSet: {
+        columns: {
+            default: [
+                'name',
+                'dataDimensionType',
+                DESCRIPTORS.publicAccess,
+                'lastUpdated',
+            ],
+        },
+        filters: {
+            default: ['dataDimensionType'],
+        },
+    },
     categoryOptionGroup: {
         columns: {
             default: [

src/pages/categoryOptionGroupSets/Edit.tsx

@@ -0,0 +1,62 @@
+import React from 'react'
+import { useQuery } from 'react-query'
+import { useParams } from 'react-router-dom'
+import { DefaultEditFormContents, FormBase } from '../../components'
+import {
+    ATTRIBUTE_VALUES_FIELD_FILTERS,
+    DEFAULT_FIELD_FILTERS,
+    SECTIONS_MAP,
+    useOnSubmitEdit,
+} from '../../lib'
+import { useBoundResourceQueryFn } from '../../lib/query/useBoundQueryFn'
+import { PickWithFieldFilters } from '../../types/generated'
+import { CategoryOptionGroupSet } from '../../types/models'
+import CategoryOptionGroupSetFormFields from './form/CategoryOptionGroupSetFormFields'
+import { validate } from './form/categoryOptionGroupSetSchema'
+
+const fieldFilters = [
+    ...DEFAULT_FIELD_FILTERS,
+    ...ATTRIBUTE_VALUES_FIELD_FILTERS,
+    'name',
+    'shortName',
+    'code',
+    'description',
+    'categoryOptionGroups[id,displayName]',
+    'dataDimension',
+    'dataDimensionType',
+] as const
+
+export type CategoryOptionGroupSetFormValues = PickWithFieldFilters<
+    CategoryOptionGroupSet,
+    typeof fieldFilters
+>
+
+export const Component = () => {
+    const section = SECTIONS_MAP.categoryOptionGroupSet
+    const queryFn = useBoundResourceQueryFn()
+    const modelId = useParams().id as string
+    const query = {
+        resource: 'categoryOptionGroupSets',
+        id: modelId,
+        params: {
+            fields: fieldFilters.concat(),
+        },
+    }
+    const categoryOptionGroupSetQuery = useQuery({
+        queryKey: [query],
+        queryFn: queryFn<CategoryOptionGroupSetFormValues>,
+    })
+
+    return (
+        <FormBase
+            onSubmit={useOnSubmitEdit({ section, modelId })}
+            section={section}
+            initialValues={categoryOptionGroupSetQuery.data}
+            validate={validate}
+        >
+            <DefaultEditFormContents section={section}>
+                <CategoryOptionGroupSetFormFields />
+            </DefaultEditFormContents>
+        </FormBase>
+    )
+}

src/pages/categoryOptionGroupSets/List.tsx

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

src/pages/categoryOptionGroupSets/New.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import { FormBase } from '../../components'
+import { DefaultNewFormContents } from '../../components/form/DefaultFormContents'
+import { SECTIONS_MAP, useOnSubmitNew } from '../../lib'
+import CategoryOptionGroupSetFormFields from './form/CategoryOptionGroupSetFormFields'
+import { initialValues, validate } from './form/categoryOptionGroupSetSchema'
+
+const section = SECTIONS_MAP.categoryOptionGroupSet
+
+export const Component = () => {
+    return (
+        <FormBase
+            section={section}
+            onSubmit={useOnSubmitNew({ section })}
+            initialValues={initialValues}
+            validate={validate}
+        >
+            <DefaultNewFormContents section={section}>
+                <CategoryOptionGroupSetFormFields />
+            </DefaultNewFormContents>
+        </FormBase>
+    )
+}

src/pages/categoryOptionGroupSets/form/CategoryOptionGroupSetFormFields.tsx

@@ -0,0 +1,119 @@
+import i18n from '@dhis2/d2-i18n'
+import { RadioFieldFF, CheckboxFieldFF } from '@dhis2/ui'
+import React from 'react'
+import { Field } from 'react-final-form'
+import {
+    DefaultIdentifiableFields,
+    DescriptionField,
+    HorizontalFieldGroup,
+    ModelTransferField,
+    StandardFormField,
+    StandardFormSection,
+    StandardFormSectionDescription,
+    StandardFormSectionTitle,
+} from '../../../components'
+import { SECTIONS_MAP } from '../../../lib'
+
+function CategoryOptionGroupSetFormFields() {
+    const section = SECTIONS_MAP.categoryOptionGroupSet
+    return (
+        <>
+            <StandardFormSection>
+                <StandardFormSectionTitle>
+                    {i18n.t('Basic information')}
+                </StandardFormSectionTitle>
+                <StandardFormSectionDescription>
+                    {i18n.t(
+                        'Set up the basic information for this category option group set.'
+                    )}
+                </StandardFormSectionDescription>
+                <DefaultIdentifiableFields />
+                <DescriptionField
+                    schemaSection={section}
+                    helpText={i18n.t(
+                        'Explain the purpose of this category option group set.'
+                    )}
+                />
+            </StandardFormSection>
+
+            <StandardFormSection>
+                <StandardFormSectionTitle>
+                    {i18n.t('Data configuration')}
+                </StandardFormSectionTitle>
+                <StandardFormSectionDescription>
+                    {i18n.t(
+                        'Choose how this category option group set will be used to capture and analyze'
+                    )}
+                </StandardFormSectionDescription>
+                <StandardFormField>
+                    <HorizontalFieldGroup
+                        label={'Data dimension type (required)'}
+                    >
+                        <Field<string | undefined>
+                            name="dataDimensionType"
+                            component={RadioFieldFF}
+                            label={i18n.t('Disaggregation')}
+                            type="radio"
+                            value={'DISAGGREGATION'}
+                        />
+                        <Field<string | undefined>
+                            name="dataDimensionType"
+                            component={RadioFieldFF}
+                            label={i18n.t('Attribute')}
+                            type="radio"
+                            value={'ATTRIBUTE'}
+                        />
+                    </HorizontalFieldGroup>
+                </StandardFormField>
+                <StandardFormField>
+                    <Field
+                        name="dataDimension"
+                        type="checkbox"
+                        component={CheckboxFieldFF}
+                        label={i18n.t('Use as data dimension')}
+                        helpText={i18n.t(
+                            'Category option group set will be available to the analytics as another dimension'
+                        )}
+                    />
+                </StandardFormField>
+            </StandardFormSection>
+
+            <StandardFormSection>
+                <StandardFormSectionTitle>
+                    <label htmlFor={'categoryOptionGroups'}>
+                        {i18n.t('Category option Groups')}
+                    </label>
+                </StandardFormSectionTitle>
+                <StandardFormSectionDescription>
+                    {i18n.t(
+                        'Choose the category option groups to include in this category option group set.'
+                    )}
+                </StandardFormSectionDescription>
+                <StandardFormField>
+                    <StandardFormField>
+                        <ModelTransferField
+                            name="categoryOptionGroups"
+                            query={{
+                                resource: 'categoryOptionGroups',
+                            }}
+                            leftHeader={i18n.t(
+                                'Available category option groups'
+                            )}
+                            rightHeader={i18n.t(
+                                'Selected category option groups'
+                            )}
+                            filterPlaceholder={i18n.t(
+                                'Filter available category option groups'
+                            )}
+                            filterPlaceholderPicked={i18n.t(
+                                'Filter selected category option groups'
+                            )}
+                        />
+                    </StandardFormField>
+                </StandardFormField>
+            </StandardFormSection>
+        </>
+    )
+}
+
+export default CategoryOptionGroupSetFormFields

src/pages/categoryOptionGroupSets/form/categoryOptionGroupSetSchema.ts

@@ -0,0 +1,25 @@
+import { z } from 'zod'
+import { getDefaults, createFormValidate, modelFormSchemas } from '../../../lib'
+import { CategoryOptionGroupSet } from '../../../types/generated'
+
+const { identifiable, referenceCollection, withAttributeValues } =
+    modelFormSchemas
+
+export const categoryOptionGroupSetSchema = identifiable
+    .merge(withAttributeValues)
+    .extend({
+        shortName: z.string().trim(),
+        code: z.string().trim().optional(),
+        description: z.string().trim().optional(),
+        dataDimensionType: z
+            .nativeEnum(CategoryOptionGroupSet.dataDimensionType)
+            .default(CategoryOptionGroupSet.dataDimensionType.DISAGGREGATION),
+        dataDimension: z.boolean().default(true),
+        categoryOptionGroups: referenceCollection
+            .min(1, 'At least one category option group is required')
+            .default([]),
+    })
+
+export const initialValues = getDefaults(categoryOptionGroupSetSchema)
+
+export const validate = createFormValidate(categoryOptionGroupSetSchema)