feat: add format validation to date fields and to dates in schemas

i18n/en.pot

@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2024-11-25T10:03:10.019Z\n"
-"PO-Revision-Date: 2024-11-25T10:03:10.019Z\n"
+"POT-Creation-Date: 2024-11-26T14:06:00.934Z\n"
+"PO-Revision-Date: 2024-11-26T14:06:00.934Z\n"
 
 msgid "schemas"
 msgstr "schemas"
@@ -102,6 +102,9 @@ msgstr "Set up information for the attributes assigned to {{modelName}}"
 msgid "Code"
 msgstr "Code"
 
+msgid "Required"
+msgstr "Required"
+
 msgid "Description"
 msgstr "Description"
 
@@ -891,6 +894,9 @@ msgstr "This field requires a unique value, please choose another one"
 msgid "{{label}} (required)"
 msgstr "{{label}} (required)"
 
+msgid "Should not exceed {{maxLength}} characters"
+msgstr "Should not exceed {{maxLength}} characters"
+
 msgid "No changes to be saved"
 msgstr "No changes to be saved"
 
@@ -903,9 +909,6 @@ msgstr "Cannot save empty object"
 msgid "Created successfully"
 msgstr "Created successfully"
 
-msgid "Required"
-msgstr "Required"
-
 msgid "Period type"
 msgstr "Period type"
 
@@ -1241,8 +1244,8 @@ msgstr ""
 "Choose where this new organisation unit should be placed in the existing "
 "hierarchy"
 
-msgid "Set up the basic information for this organisation unit."
-msgstr "Set up the basic information for this organisation unit."
+msgid "Set up the basic information for this organisation unit"
+msgstr "Set up the basic information for this organisation unit"
 
 msgid "Opening date"
 msgstr "Opening date"
@@ -1311,6 +1314,22 @@ msgstr ""
 "This is the first organisation unit and will be created as the root of the "
 "hierarchy."
 
+msgid "Must be a valid mobile number"
+msgstr "Must be a valid mobile number"
+
+msgid "Must be a valid url"
+msgstr "Must be a valid url"
+
+msgid ""
+"Longitude should be between -90 and 90. Latitude should be between -180 and "
+"180"
+msgstr ""
+"Longitude should be between -90 and 90. Latitude should be between -180 and "
+"180"
+
+msgid "Parent organisation unit cannot be itself or a descendant of itself."
+msgstr "Parent organisation unit cannot be itself or a descendant of itself."
+
 msgid "No organisation units available"
 msgstr "No organisation units available"
 

package.json

@@ -40,7 +40,7 @@
     "dependencies": {
         "@dhis2/app-runtime": "^3.9.3",
         "@dhis2/multi-calendar-dates": "^2.0.0",
-        "@dhis2/ui": "^10.0.2",
+        "@dhis2/ui": "^10.1.3",
         "@tanstack/react-table": "^8.16.0",
         "@types/lodash": "^4.14.198",
         "lodash": "^4.17.21",
@@ -56,6 +56,6 @@
     "resolutions": {
         "eslint": "^8",
         "@dhis2/multi-calendar-dates": "^2.0.0",
-        "@dhis2/ui": "^10.0.2"
+        "@dhis2/ui": "^10.1.3"
     }
 }

src/components/form/fields/DateField.tsx

@@ -1,5 +1,6 @@
+import i18n from '@dhis2/d2-i18n'
 import { CalendarInput, CalendarInputProps } from '@dhis2/ui'
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { useField } from 'react-final-form'
 import { selectedLocale, useSystemSetting } from '../../../lib'
 
@@ -16,6 +17,7 @@
     error: boolean
     validationText?: string
     valid?: boolean
+    validationCode?: string
 }
 export function DateField({
     name,
@@ -29,21 +31,24 @@
         error: false,
     })
 
-    const { input } = useField<string | undefined>(name, {
-        validate: () => {
-            if (validation.error) {
-                return validation.validationText
-            }
-        },
-    })
+    const { input, meta } = useField<string | undefined>(name)
 
     const handleChange: CalendarInputProps['onDateSelect'] = (
         payload: {
             calendarDateString: string
             validation?: ValidationProps
         } | null
     ) => {
-        setValidation(payload?.validation || { error: false })
+        if (!payload?.calendarDateString && required) {
+            setValidation({
+                error: true,
+                valid: false,
+                validationCode: 'EMPTY',
+                validationText: i18n.t('Required'),
+            })
+        } else {
+            setValidation(payload?.validation || { error: false })
+        }
         input.onChange(payload?.calendarDateString || '')
         input.onBlur()
     }
@@ -54,13 +59,15 @@
                 inputWidth={'400px'}
                 date={input.value}
                 name={name}
+                required={required}
                 calendar={calendar as CalendarInputProps['calendar']}
                 onDateSelect={handleChange}
                 timeZone={'utc'}
                 locale={locale}
+                format={'YYYY-MM-DD'}
                 onBlur={(_, e) => input.onBlur(e)}
                 clearable
-                label={required ? `${label} (required) *` : label}
+                label={required ? `${label} (required)` : label}
                 {...validation}
                 valid={validation?.valid && input?.value !== ''}
                 {...calendarInputProps}

src/pages/categoryOptions/form/categoryOptionSchema.ts

@@ -19,8 +19,8 @@ export const categoryOptionSchema = identifiable
             })
             .optional(),
         description: z.string().trim().optional(),
-        startDate: z.string().optional(),
-        endDate: z.string().optional(),
+        startDate: z.string().date().optional(),
+        endDate: z.string().date().optional(),
         organisationUnits: referenceCollection.optional(),
     })
     .refine(

src/pages/organisationUnits/form/organisationUnitSchema.ts

@@ -33,7 +33,7 @@ export const organisationUnitSchema = identifiable
                 }),
             })
             .optional(),
-        openingDate: z.string(),
+        openingDate: z.string().date(),
         email: z.string().email().optional(),
         address: z
             .string()
@@ -47,7 +47,7 @@ export const organisationUnitSchema = identifiable
             .string()
             .url({ message: i18n.t('Must be a valid url') })
             .optional(),
-        closedDate: z.string().optional(),
+        closedDate: z.string().date().optional(),
         comment: z
             .string()
             .max(2147483647, {