prevent future time for start visits

openmrs · Sep 17, 2024 · d1566bc · d1566bc
1 parent 1bd8cc4
commit d1566bc
Show file tree

Hide file tree

Showing 3 changed files with 137 additions and 113 deletions.
diff --git a/packages/esm-form-entry-app/package.json b/packages/esm-form-entry-app/package.json
@@ -94,7 +94,7 @@
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "^2.1.0",
     "ngx-build-plus": "^17.0.0",
-    "openmrs": "next",
+    "openmrs": "^5.8.2-pre.2303",
     "protractor": "~7.0.0",
     "rxjs": "^7.8.0",
     "style-loader": "2.x",

diff --git a/packages/esm-patient-chart-app/src/visit/visit-form/visit-date-time.component.tsx b/packages/esm-patient-chart-app/src/visit/visit-form/visit-date-time.component.tsx
@@ -31,15 +31,31 @@ const VisitDateTimeField: React.FC<VisitDateTimeFieldProps> = ({
   const { t } = useTranslation();
   const {
     control,
+    setError,
+    clearErrors,
+    getValues,
     formState: { errors },
   } = useFormContext<VisitFormData>();
 
-  // Since we have the separate date and time fields, the final validation needs to be done at the form
-  // submission, hence just using the min date with hours/ minutes/ seconds set to 0 and max date set to
-  // last second of the day. We want to just compare dates and not time.
+  // Format min and max dates
   const minDateObj = minDate ? dayjs(new Date(minDate).setHours(0, 0, 0, 0)).format('DD/MM/YYYY') : null;
   const maxDateObj = maxDate ? dayjs(new Date(maxDate).setHours(23, 59, 59, 59)).format('DD/MM/YYYY') : null;
 
+  // Validate time against the current time
+  const validateTimeField = (selectedTime: string, selectedDate: Date) => {
+    const currentDateTime = dayjs();
+    const selectedDateTime = dayjs(`${dayjs(selectedDate).format('YYYY-MM-DD')} ${selectedTime}`);
+
+    if (selectedDateTime.isAfter(currentDateTime)) {
+      setError(timeFieldName, {
+        type: 'manual',
+        message: 'Selected time is in the future.',
+      });
+    } else {
+      clearErrors(timeFieldName);
+    }
+  };
+
   return (
     <section>
       <div className={styles.sectionTitle}>{visitDatetimeLabel}</div>
@@ -56,7 +72,10 @@ const VisitDateTimeField: React.FC<VisitDateTimeFieldProps> = ({
                 style={{ paddingBottom: '1rem' }}
                 minDate={minDateObj}
                 maxDate={maxDateObj}
-                onChange={([date]) => onChange(date)}
+                onChange={([date]) => {
+                  onChange(date);
+                  validateTimeField(getValues(timeFieldName), date); // Validate time immediately on date change
+                }}
                 value={value}
               >
                 <DatePickerInput
@@ -79,7 +98,12 @@ const VisitDateTimeField: React.FC<VisitDateTimeFieldProps> = ({
               <TimePicker
                 id={timeFieldName}
                 labelText={t('time', 'Time')}
-                onChange={(event) => onChange(event.target.value as amPm)}
+                onChange={(event) => {
+                  const selectedTime = event.target.value;
+                  const selectedDate = getValues(dateFieldName);
+                  onChange(selectedTime);
+                  validateTimeField(selectedTime, selectedDate); // Validate time immediately
+                }}
                 pattern="^(1[0-2]|0?[1-9]):([0-5]?[0-9])$"
                 style={{ marginLeft: '0.125rem', flex: 'none' }}
                 value={value}