Add min and max date validations to obsDate field

openmrs · Jul 31, 2024 · 1b4db62 · 1b4db62
1 parent 73bb46e
commit 1b4db62
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 6 deletions.
diff --git a/packages/esm-patient-registration-app/src/config-schema.ts b/packages/esm-patient-registration-app/src/config-schema.ts
@@ -12,7 +12,8 @@ export interface FieldDefinition {
   label?: string;
   uuid: string;
   placeholder?: string;
-  dateFormat?: string;
+  maxDate?: string;
+  minDate?: string;
   showHeading: boolean;
   validation?: {
     required: boolean;

diff --git a/...s/esm-patient-registration-app/src/patient-registration/field/obs/obs-field.component.tsx b/...s/esm-patient-registration-app/src/patient-registration/field/obs/obs-field.component.tsx
@@ -57,8 +57,8 @@ export function ObsField({ fieldDefinition }: ObsFieldProps) {
           concept={concept}
           label={fieldDefinition.label}
           required={fieldDefinition.validation.required}
-          dateFormat={fieldDefinition.dateFormat}
-          placeholder={fieldDefinition.placeholder}
+          minDate={fieldDefinition.minDate}
+          maxDate={fieldDefinition.maxDate}
         />
       );
     case 'Coded':
@@ -159,15 +159,38 @@ interface DateObsFieldProps {
   concept: ConceptResponse;
   label: string;
   required?: boolean;
-  dateFormat?: string;
-  placeholder?: string;
+  minDate?: string;
+  maxDate?: string;
 }
 
-function DateObsField({ concept, label, required, placeholder }: DateObsFieldProps) {
+const evaluateConfigDate = (dateString: string): Date | string | null => {
+  if (!dateString) {
+    return null;
+  }
+
+  if (dateString === 'today') {
+    return new Date();
+  }
+
+  const date = new Date(dateString);
+  if (!isNaN(date.getTime())) {
+    return date;
+  }
+
+  return 'Invalid min or max date!';
+};
+
+function DateObsField({ concept, label, required, maxDate, minDate }: DateObsFieldProps) {
   const { t } = useTranslation();
   const fieldName = `obs.${concept.uuid}`;
   const { setFieldValue } = useContext(PatientRegistrationContext);
 
+  const evaluatedMinDate = evaluateConfigDate(minDate);
+  const evaluatedMaxDate = evaluateConfigDate(maxDate);
+  const configDateError =
+    (typeof evaluatedMinDate === 'string' && evaluatedMinDate) ||
+    (typeof evaluatedMaxDate === 'string' && evaluatedMaxDate);
+
   const onDateChange = ([date]) => {
     const refinedDate = date instanceof Date ? new Date(date.setHours(0, 0, 0, 0)) : new Date(date);
     setFieldValue(fieldName, refinedDate);
@@ -188,10 +211,13 @@ function DateObsField({ concept, label, required, placeholder }: DateObsFieldPro
                   labelText={label ?? concept.display}
                   isInvalid={errors[fieldName] && touched[fieldName]}
                   value={field.value}
+                  minDate={typeof evaluatedMinDate !== 'string' && evaluatedMinDate}
+                  maxDate={typeof evaluatedMaxDate !== 'string' && evaluatedMaxDate}
                 />
                 {errors[fieldName] && touched[fieldName] && (
                   <div className={styles.radioFieldError}>{meta.error && t(meta.error)}</div>
                 )}
+                {configDateError && <div className={styles.radioFieldError}>{configDateError}</div>}
               </>
             );
           }}