From daddebaaaba4242c197619abeb6e6f6eafc5b573 Mon Sep 17 00:00:00 2001
From: Flaminia Cavallo <flaminia@dhis2.org>
Date: Mon, 25 Nov 2024 11:21:09 +0100
Subject: [PATCH] fix: add validations to datefield and small change to css of
 bulk upload

---
 src/components/form/fields/DateField.tsx      | 38 +++++++++++++------
 .../sectionList/bulk/Bulk.module.css          |  5 ++-
 2 files changed, 29 insertions(+), 14 deletions(-)

diff --git a/src/components/form/fields/DateField.tsx b/src/components/form/fields/DateField.tsx
index 6c20a0ef..e5c8c799 100644
--- a/src/components/form/fields/DateField.tsx
+++ b/src/components/form/fields/DateField.tsx
@@ -1,5 +1,5 @@
 import { CalendarInput, CalendarInputProps } from '@dhis2/ui'
-import React from 'react'
+import React, { useState } from 'react'
 import { useField } from 'react-final-form'
 import { selectedLocale, useSystemSetting } from '../../../lib'
 
@@ -12,6 +12,11 @@ type DateFieldProps = Omit<
     label?: string
     required?: boolean
 }
+type ValidationProps = {
+    error: boolean
+    validationText?: string
+    valid?: boolean
+}
 export function DateField({
     name,
     label,
@@ -20,35 +25,44 @@ export function DateField({
 }: DateFieldProps) {
     const calendar = useSystemSetting('keyCalendar')
     const locale = selectedLocale
-    const { meta, input } = useField<string | undefined>(name, {
-        format: (value) => {
-            if (value) {
-                return value.slice(0, 10)
+    const [validation, setValidation] = useState<ValidationProps>({
+        error: false,
+    })
+
+    const { input } = useField<string | undefined>(name, {
+        validate: () => {
+            if (validation.error) {
+                return validation.validationText
             }
-            return value
         },
     })
 
-    const handleChange: CalendarInputProps['onDateSelect'] = (payload) => {
-        input.onChange(payload?.calendarDateString)
+    const handleChange: CalendarInputProps['onDateSelect'] = (
+        payload: {
+            calendarDateString: string
+            validation?: ValidationProps
+        } | null
+    ) => {
+        setValidation(payload?.validation || { error: false })
+        input.onChange(payload?.calendarDateString || '')
         input.onBlur()
     }
 
     return (
-        <div style={{ width: '400px' }}>
-            {/* TODO: we can remove style above, once inputWidth for CalendarInput is fixed */}
+        <div>
             <CalendarInput
+                inputWidth={'400px'}
                 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 : undefined}
                 onBlur={(_, e) => input.onBlur(e)}
                 clearable
                 label={required ? `${label} (required) *` : label}
+                {...validation}
+                valid={validation?.valid && input?.value !== ''}
                 {...calendarInputProps}
             />
         </div>
diff --git a/src/components/sectionList/bulk/Bulk.module.css b/src/components/sectionList/bulk/Bulk.module.css
index 2ff76cf8..d80c1c03 100644
--- a/src/components/sectionList/bulk/Bulk.module.css
+++ b/src/components/sectionList/bulk/Bulk.module.css
@@ -8,7 +8,8 @@
     flex-shrink: 0;
     flex-basis: 160px;
     flex-grow: 1;
-    max-width: 250px;
+    min-width: 250px;
+    max-width: 300px;
 }
 
 .subtitle {
@@ -27,7 +28,7 @@
     flex-basis: 160px;
     flex-grow: 1;
     flex-shrink: 0;
-    max-width: 250px;
+    max-width: 225px;
 }
 
 .addActionButton {