(fix) Resolve issue with loading previous values (#378)

* Infer session mode and format date value

* Add unit test

* Support date-time formatting

src/adapters/obs-adapter.test.ts

@@ -745,6 +745,44 @@ describe('ObsAdapter - getInitialValue', () => {
   });
 });
 
+describe('ObsAdapter - getDisplayValue', () => {
+  it('should return the display value for a date', () => {
+    const field: FormField = {
+      label: 'HTS Date',
+      type: 'obs',
+      datePickerFormat: 'calendar',
+      questionOptions: {
+        rendering: 'date',
+        concept: 'j8b6705b-b6d8-4eju-8f37-0b14f5347569',
+      },
+      id: 'hts-date',
+    };
+
+    const dateValue = new Date('2016-11-19T00:00');
+    const displayValue = ObsAdapter.getDisplayValue(field, dateValue);
+
+    expect(displayValue).toBe('19-Nov-2016');
+  });
+
+  it('should return the display value for a datetime', () => {
+    const field: FormField = {
+      label: 'HTS Date',
+      type: 'obs',
+      datePickerFormat: 'both',
+      questionOptions: {
+        rendering: 'date',
+        concept: 'j8b6705b-b6d8-4eju-8f37-0b14f5347569',
+      },
+      id: 'hts-date',
+    };
+
+    const dateValue = new Date('2016-11-19T11:35');
+    const displayValue = ObsAdapter.getDisplayValue(field, dateValue);
+
+    expect(displayValue).toBe('19-Nov-2016, 11:35 AM');
+  });
+});
+
 describe('hasPreviousObsValueChanged', () => {
   it('should support coded values', () => {
     const codedField = {

src/adapters/obs-adapter.ts

@@ -14,6 +14,7 @@ import {
   clearSubmission,
   flattenObsList,
   parseToLocalDateTime,
+  formatDateAsDisplayString,
 } from '../utils/common-utils';
 import { type FormContextProps } from '../provider/form-provider';
 import { type FormFieldValueAdapter } from '../types';
@@ -59,6 +60,9 @@ export const ObsAdapter: FormFieldValueAdapter = {
     if (isEmpty(value)) {
       return value;
     }
+    if (value instanceof Date) {
+      return formatDateAsDisplayString(field, value);
+    }
     if (rendering == 'checkbox') {
       return value.map(
         (selected) => field.questionOptions.answers?.find((option) => option.concept == selected)?.label,

src/components/inputs/date/date.component.tsx

@@ -8,9 +8,10 @@ import { shouldUseInlineLayout } from '../../../utils/form-helper';
 import { isEmpty } from '../../../validators/form-validator';
 import FieldValueView from '../../value/view/field-value-view.component';
 import styles from './date.scss';
-import { OpenmrsDatePicker, formatDate, formatTime } from '@openmrs/esm-framework';
+import { OpenmrsDatePicker } from '@openmrs/esm-framework';
 import { useFormProviderContext } from '../../../provider/form-provider';
 import FieldLabel from '../../field-label/field-label.component';
+import { formatDateAsDisplayString } from '../../../utils/common-utils';
 
 const DateField: React.FC<FormFieldInputProps> = ({ field, value: dateValue, errors, warnings, setFieldValue }) => {
   const { t } = useTranslation();
@@ -74,7 +75,7 @@ const DateField: React.FC<FormFieldInputProps> = ({ field, value: dateValue, err
   return sessionMode == 'view' || sessionMode == 'embedded-view' ? (
     <FieldValueView
       label={t(field.label)}
-      value={dateValue instanceof Date ? getDisplay(dateValue, field.datePickerFormat) : dateValue}
+      value={dateValue instanceof Date ? formatDateAsDisplayString(field, dateValue) : dateValue}
       conceptName={field.meta?.concept?.display}
       isInline={isInline}
     />
@@ -136,12 +137,4 @@ const DateField: React.FC<FormFieldInputProps> = ({ field, value: dateValue, err
   );
 };
 
-function getDisplay(date: Date, rendering: string) {
-  const dateString = formatDate(date);
-  if (rendering == 'both') {
-    return `${dateString} ${formatTime(date)}`;
-  }
-  return dateString;
-}
-
 export default DateField;

src/form-engine.component.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import type { FormField, FormSchema, SessionMode } from './types';
 import { useSession, type Visit } from '@openmrs/esm-framework';
-import { useFormJson } from '.';
+import { isEmpty, useFormJson } from '.';
 import FormProcessorFactory from './components/processor-factory/form-processor-factory.component';
 import Loader from './components/loaders/loader.component';
 import { usePatientData } from './hooks/usePatientData';
@@ -62,6 +62,7 @@ const FormEngine = ({
   const [showSidebar, setShowSidebar] = useState(false);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [isFormDirty, setIsFormDirty] = useState(false);
+  const sessionMode = !isEmpty(mode) ? mode : !isEmpty(encounterUUID) ? 'edit' : 'enter';
   // TODO: Updating this prop triggers a rerender of the entire form. This means whenever we scroll into a new page, the form is rerendered.
   // Figure out a way to avoid this. Maybe use a ref with an observer instead of a state?
   const [currentPage, setCurrentPage] = useState('');
@@ -110,7 +111,7 @@ const FormEngine = ({
       ) : (
         <FormFactoryProvider
           patient={patient}
-          sessionMode={mode}
+          sessionMode={sessionMode}
           sessionDate={sessionDate}
           formJson={refinedFormJson}
           workspaceLayout={workspaceLayout}

src/utils/common-utils.ts

@@ -1,6 +1,7 @@
 import dayjs from 'dayjs';
 import { type FormField, type OpenmrsObs, type RenderType } from '../types';
 import { isEmpty } from '../validators/form-validator';
+import { formatDate, type FormatDateOptions } from '@openmrs/esm-framework';
 
 export function flattenObsList(obsList: OpenmrsObs[]): OpenmrsObs[] {
   const flattenedList: OpenmrsObs[] = [];
@@ -65,3 +66,13 @@ export function parseToLocalDateTime(dateString: string): Date {
   }
   return dateObj;
 }
+
+export function formatDateAsDisplayString(field: FormField, date: Date) {
+  const options: Partial<FormatDateOptions> = { noToday: true };
+  if (field.datePickerFormat === 'calendar') {
+    options.time = false;
+  } else {
+    options.time = true;
+  }
+  return formatDate(date, options);
+}