From a3a9ae581835c13d13630d33867c1e0ad904bfc0 Mon Sep 17 00:00:00 2001
From: Flaminia Cavallo <flaminia@dhis2.org>
Date: Mon, 23 Dec 2024 09:23:25 +0100
Subject: [PATCH] fix: small fixxes

---
 .../ModelSingleSelectField.tsx                |  1 +
 src/lib/constants/translatedModelConstants.ts | 24 +++++++++
 .../dataSetsWip/form/CategoryComboField.tsx   | 52 +++++++------------
 .../dataSetsWip/form/PeriodTypeField.tsx      |  4 +-
 .../dataSetsWip/form/dataSetFormSchema.ts     |  4 +-
 5 files changed, 48 insertions(+), 37 deletions(-)

diff --git a/src/components/metadataFormControls/ModelSingleSelect/ModelSingleSelectField.tsx b/src/components/metadataFormControls/ModelSingleSelect/ModelSingleSelectField.tsx
index cc7654bb..0d2dc81a 100644
--- a/src/components/metadataFormControls/ModelSingleSelect/ModelSingleSelectField.tsx
+++ b/src/components/metadataFormControls/ModelSingleSelect/ModelSingleSelectField.tsx
@@ -66,6 +66,7 @@ export function ModelSingleSelectField<TModel extends DisplayableModel>({
                     input.onBlur()
                     onChange?.(selected)
                 }}
+                invalid={meta.touched && !!meta.error}
             />
         </Field>
     )
diff --git a/src/lib/constants/translatedModelConstants.ts b/src/lib/constants/translatedModelConstants.ts
index 4b1c01e3..71c00bee 100644
--- a/src/lib/constants/translatedModelConstants.ts
+++ b/src/lib/constants/translatedModelConstants.ts
@@ -86,6 +86,29 @@ export const FORM_TYPE = {
     SECTION_MULTIORG: i18n.t('Section Multi-org'),
 }
 
+const PERIOD_TYPE = {
+    BiMonthly: i18n.t('BiMonthly'),
+    BiWeekly: i18n.t('BiWeekly'),
+    Daily: i18n.t('Daily'),
+    FinancialApril: i18n.t('FinancialApril'),
+    FinancialJuly: i18n.t('FinancialJuly'),
+    FinancialNov: i18n.t('FinancialNov'),
+    FinancialOct: i18n.t('FinancialOct'),
+    Monthly: i18n.t('Monthly'),
+    Quarterly: i18n.t('Quarterly'),
+    QuarterlyNov: i18n.t('QuarterlyNov'),
+    SixMonthlyApril: i18n.t('SixMonthlyApril'),
+    SixMonthlyNov: i18n.t('SixMonthlyNov'),
+    SixMonthly: i18n.t('SixMonthly'),
+    TwoYearly: i18n.t('TwoYearly'),
+    Weekly: i18n.t('Weekly'),
+    WeeklySaturday: i18n.t('WeeklySaturday'),
+    WeeklySunday: i18n.t('WeeklySunday'),
+    WeeklyThursday: i18n.t('WeeklyThursday'),
+    WeeklyWednesday: i18n.t('WeeklyWednesday'),
+    Yearly: i18n.t('Yearly'),
+}
+
 const allConstantTranslations: Record<string, string> = {
     ...AGGREGATION_TYPE,
     ...DOMAIN_TYPE,
@@ -93,6 +116,7 @@ const allConstantTranslations: Record<string, string> = {
     ...DATA_DIMENSION_TYPE,
     ...GEOMETRY_TYPE,
     ...FORM_TYPE,
+    ...PERIOD_TYPE,
 }
 
 export const getConstantTranslation = (constant: string): string => {
diff --git a/src/pages/dataSetsWip/form/CategoryComboField.tsx b/src/pages/dataSetsWip/form/CategoryComboField.tsx
index 49e280c5..194f302a 100644
--- a/src/pages/dataSetsWip/form/CategoryComboField.tsx
+++ b/src/pages/dataSetsWip/form/CategoryComboField.tsx
@@ -1,47 +1,33 @@
 import i18n from '@dhis2/d2-i18n'
-import { Field } from '@dhis2/ui'
 import React from 'react'
-import { useField } from 'react-final-form'
-import { ModelSingleSelect } from '../../../components/metadataFormControls/ModelSingleSelect'
+import { ModelSingleSelectField } from '../../../components/metadataFormControls/ModelSingleSelect'
 import { DEFAULT_CATEGORY_COMBO } from '../../../lib'
 
-export function CategoryComboField() {
-    const { input, meta } = useField('categoryCombo')
-
-    const CATEGORY_COMBOS_QUERY = {
-        resource: 'categoryCombos',
-        params: {
-            filter: ['dataDimensionType:eq:ATTRIBUTE'],
-        },
-    }
+const CATEGORY_COMBOS_QUERY = {
+    resource: 'categoryCombos',
+    params: {
+        filter: ['dataDimensionType:eq:ATTRIBUTE'],
+    },
+}
 
-    const DEFAULT_CATEGORY_SELECT_OPTION = {
-        id: DEFAULT_CATEGORY_COMBO.id,
-        displayName: DEFAULT_CATEGORY_COMBO.displayName,
-    }
+const DEFAULT_CATEGORY_SELECT_OPTION = {
+    id: DEFAULT_CATEGORY_COMBO.id,
+    displayName: DEFAULT_CATEGORY_COMBO.displayName,
+}
 
+export function CategoryComboField() {
     return (
-        <Field
+        <ModelSingleSelectField
             required
             name="categoryCombo"
             label={i18n.t('{{fieldLabel}} (required)', {
                 fieldLabel: i18n.t('Category combination'),
             })}
-            error={meta.touched && !!meta.error}
-            validationText={meta.touched ? meta.error : undefined}
-        >
-            <ModelSingleSelect
-                selected={input.value}
-                query={CATEGORY_COMBOS_QUERY}
-                invalid={meta.touched && !!meta.error}
-                onChange={(selected) => {
-                    input.onChange(selected)
-                }}
-                transform={(catCombos) => [
-                    ...catCombos,
-                    DEFAULT_CATEGORY_SELECT_OPTION,
-                ]}
-            />
-        </Field>
+            query={CATEGORY_COMBOS_QUERY}
+            transform={(catCombos) => [
+                DEFAULT_CATEGORY_SELECT_OPTION,
+                ...catCombos,
+            ]}
+        />
     )
 }
diff --git a/src/pages/dataSetsWip/form/PeriodTypeField.tsx b/src/pages/dataSetsWip/form/PeriodTypeField.tsx
index 87291235..1bbf10bf 100644
--- a/src/pages/dataSetsWip/form/PeriodTypeField.tsx
+++ b/src/pages/dataSetsWip/form/PeriodTypeField.tsx
@@ -5,6 +5,7 @@ import { useField } from 'react-final-form'
 import { useQuery } from 'react-query'
 import { SearchableSingleSelect } from '../../../components'
 import { useBoundResourceQueryFn } from '../../../lib/query/useBoundQueryFn'
+import { getConstantTranslation } from '../../../lib'
 
 export type PeriodTypes = { periodTypes: [{ name: string }] }
 const periodTypesToTranslatedValues: Record<string, string> = {
@@ -49,8 +50,7 @@ export function PeriodTypeField() {
     const options = useMemo(() => {
         return data
             ? data.periodTypes.map((period) => ({
-                  label:
-                      periodTypesToTranslatedValues[period.name] || period.name,
+                  label: getConstantTranslation(period.name),
                   value: period.name,
               }))
             : []
diff --git a/src/pages/dataSetsWip/form/dataSetFormSchema.ts b/src/pages/dataSetsWip/form/dataSetFormSchema.ts
index b87838ee..e1adbe7a 100644
--- a/src/pages/dataSetsWip/form/dataSetFormSchema.ts
+++ b/src/pages/dataSetsWip/form/dataSetFormSchema.ts
@@ -18,8 +18,8 @@ export const dataSetFormSchema = identifiable
         style,
         dataElements: referenceCollection.default([]),
         categoryCombo: z
-            .object({ id: z.string() })
-            .default({ id: DEFAULT_CATEGORY_COMBO.id }),
+            .object({ id: z.string(), displayName: z.string() })
+            .default({ ...DEFAULT_CATEGORY_COMBO }),
         periodType: z.string().default('Monthly'),
     })