fix: address feedback from org unit new form

dhis2 · Nov 21, 2024 · 367d462 · 367d462
1 parent f3812fc
commit 367d462
Show file tree

Hide file tree

Showing 8 changed files with 85 additions and 20 deletions.
diff --git a/i18n/en.pot b/i18n/en.pot
@@ -5,10 +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-13T12:57:12.003Z\n"
-"PO-Revision-Date: 2024-11-13T12:57:12.004Z\n"
-"POT-Creation-Date: 2024-11-13T08:29:01.348Z\n"
-"PO-Revision-Date: 2024-11-13T08:29:01.348Z\n"
+"POT-Creation-Date: 2024-11-21T09:51:36.932Z\n"
+"PO-Revision-Date: 2024-11-21T09:51:36.933Z\n"
 
 msgid "schemas"
 msgstr "schemas"
@@ -1042,6 +1040,9 @@ msgstr ""
 "Choose when, and for which organisation units this category option will be "
 "available."
 
+msgid "Form name should not exceed 230 characters"
+msgstr "Form name should not exceed 230 characters"
+
 msgid "End date should be after start date"
 msgstr "End date should be after start date"
 

diff --git a/src/components/form/fields/DateField.tsx b/src/components/form/fields/DateField.tsx
@@ -48,7 +48,7 @@ export function DateField({
                 validationText={meta.touched ? meta.error : undefined}
                 onBlur={(_, e) => input.onBlur(e)}
                 clearable
-                label={required ? `${label} *` : label}
+                label={required ? `${label} (required) *` : label}
                 {...calendarInputProps}
             />
         </div>

diff --git a/src/lib/form/modelFormSchemas.ts b/src/lib/form/modelFormSchemas.ts
@@ -1,6 +1,7 @@
 import { z } from 'zod'
+import i18n from '@dhis2/d2-i18n'
 
-/*  Note that these schemas describes validations for what we send to the server, 
+/*  Note that these schemas describes validations for what we send to the server,
     and not what is stored in the form. Unknown keys are stripped by default. */
 
 const modelReference = z.object({ id: z.string() })
@@ -15,7 +16,11 @@ const identifiable = z.object({
 const attributeValues = z
     .array(
         z.object({
-            value: z.string(),
+            value: z.string().max(230, {
+                message: i18n.t('Should not exceed {{maxLength}} characters', {
+                    maxLength: 230,
+                }),
+            }),
             attribute: z.object({
                 id: z.string(),
             }),

diff --git a/src/pages/organisationUnits/New.tsx b/src/pages/organisationUnits/New.tsx
@@ -10,7 +10,6 @@ import {
 } from './form'
 
 const section = SECTIONS_MAP.organisationUnit
-
 export const Component = () => {
     return (
         <FormBase

diff --git a/src/pages/organisationUnits/form/GeometryFields.tsx b/src/pages/organisationUnits/form/GeometryFields.tsx
@@ -19,16 +19,18 @@ export function GeometryFields() {
             type: 'Point',
             coordinates: [longitude || undefined, latitude || undefined],
         }
-
         input.onChange(geometry)
+        input.onBlur()
     }
 
     return !input.value || input.value?.type === 'Point' ? (
         <>
             <Field
                 name={fieldName}
                 error={meta.touched && !!meta.error}
-                validationText={meta.touched ? meta.error?.type : undefined}
+                validationText={
+                    meta.touched ? meta.error?.coordinates : undefined
+                }
             >
                 <InputField
                     onChange={(e) =>

diff --git a/src/pages/organisationUnits/form/ImageField.tsx b/src/pages/organisationUnits/form/ImageField.tsx
@@ -87,7 +87,13 @@ export function ImageField() {
     }
 
     return (
-        <UIField label={i18n.t('Image')} name="image">
+        <UIField
+            label={i18n.t('Image')}
+            name="image"
+            error={!!(input.value && input.value.error)}
+            valid={!!(input.value && input.value.id)}
+            validationText={input.value?.error}
+        >
             <div className={css.fileInputWrapper}>
                 <ImagePreview
                     fileBase64={fileBase64}

diff --git a/src/pages/organisationUnits/form/OrganisationUnitFormFields.tsx b/src/pages/organisationUnits/form/OrganisationUnitFormFields.tsx
@@ -1,5 +1,5 @@
 import i18n from '@dhis2/d2-i18n'
-import { InputFieldFF } from '@dhis2/ui'
+import { Field, InputFieldFF } from '@dhis2/ui'
 import React from 'react'
 import { Field as FieldRFF } from 'react-final-form'
 import {
@@ -49,7 +49,7 @@ export function OrganisationUnitFormField() {
 
                 <StandardFormSectionDescription>
                     {i18n.t(
-                        'Set up the basic information for this organisation unit.'
+                        'Set up the basic information for this organisation unit'
                     )}
                 </StandardFormSectionDescription>
                 <DefaultIdentifiableFields />

diff --git a/src/pages/organisationUnits/form/organisationUnitSchema.ts b/src/pages/organisationUnits/form/organisationUnitSchema.ts
@@ -1,3 +1,4 @@
+import i18n from '@dhis2/d2-i18n'
 import { z } from 'zod'
 import { getDefaults, modelFormSchemas } from '../../../lib'
 
@@ -9,20 +10,71 @@ export const organisationUnitSchema = identifiable
     .extend({
         shortName: z.string().trim().default(''),
         code: z.string().trim().optional(),
-        description: z.string().trim().optional(),
+        description: z
+            .string()
+            .trim()
+            .max(500, {
+                message: i18n.t('Should not exceed {{maxLength}} characters', {
+                    maxLength: 500,
+                }),
+            })
+            .optional(),
         image: z.object({ id: z.string() }).optional(),
-        phoneNumber: z.string().optional(),
-        contactPerson: z.string().optional(),
+        phoneNumber: z
+            .string()
+            .min(10, { message: i18n.t('Must be a valid mobile number') })
+            .max(14, { message: i18n.t('Must be a valid mobile number') })
+            .optional(),
+        contactPerson: z
+            .string()
+            .max(230, {
+                message: i18n.t('Should not exceed {{maxLength}} characters', {
+                    maxLength: 230,
+                }),
+            })
+            .optional(),
         openingDate: z.string(),
-        email: z.string().optional(),
-        address: z.string().optional(),
-        url: z.string().optional(),
+        email: z.string().email().optional(),
+        address: z
+            .string()
+            .max(230, {
+                message: i18n.t('Should not exceed {{maxLength}} characters', {
+                    maxLength: 230,
+                }),
+            })
+            .optional(),
+        url: z
+            .string()
+            .url({ message: i18n.t('Must be a valid url') })
+            .optional(),
         closedDate: z.string().optional(),
+        comment: z
+            .string()
+            .max(230, {
+                message: i18n.t('Should not exceed {{maxLength}} characters', {
+                    maxLength: 230,
+                }),
+            })
+            .optional(),
         parent: z.object({ id: z.string() }).optional(),
         geometry: z
             .object({
                 type: z.literal('Point'),
-                coordinates: z.array(z.number()).length(2),
+                coordinates: z
+                    .array(z.number())
+                    .length(2)
+                    .refine(
+                        (coord) =>
+                            coord[0] >= -90 &&
+                            coord[0] <= 90 &&
+                            coord[1] >= -180 &&
+                            coord[1] <= 180,
+                        {
+                            message: i18n.t(
+                                'Longitude should be between -90 and 90. Latitude should be between -180 and 180'
+                            ),
+                        }
+                    ),
             })
             .or(
                 z.object({