From 6f36300581092bf39d97cd490316a9b60337d322 Mon Sep 17 00:00:00 2001 From: Samuel Male Date: Thu, 12 Sep 2024 19:19:57 +0300 Subject: [PATCH] (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 | 38 +++++++++++++++++++ src/adapters/obs-adapter.ts | 4 ++ src/components/inputs/date/date.component.tsx | 13 ++----- src/form-engine.component.tsx | 5 ++- src/utils/common-utils.ts | 11 ++++++ 5 files changed, 59 insertions(+), 12 deletions(-) diff --git a/src/adapters/obs-adapter.test.ts b/src/adapters/obs-adapter.test.ts index 766d6f24a..98ad20515 100644 --- a/src/adapters/obs-adapter.test.ts +++ b/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 = { diff --git a/src/adapters/obs-adapter.ts b/src/adapters/obs-adapter.ts index 4415aee9a..71fecd481 100644 --- a/src/adapters/obs-adapter.ts +++ b/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, diff --git a/src/components/inputs/date/date.component.tsx b/src/components/inputs/date/date.component.tsx index 1c3b2869e..6304ba9d0 100644 --- a/src/components/inputs/date/date.component.tsx +++ b/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 = ({ field, value: dateValue, errors, warnings, setFieldValue }) => { const { t } = useTranslation(); @@ -74,7 +75,7 @@ const DateField: React.FC = ({ field, value: dateValue, err return sessionMode == 'view' || sessionMode == 'embedded-view' ? ( @@ -136,12 +137,4 @@ const DateField: React.FC = ({ 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; diff --git a/src/form-engine.component.tsx b/src/form-engine.component.tsx index 752bd938e..4faf7c85a 100644 --- a/src/form-engine.component.tsx +++ b/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 = ({ ) : ( = { noToday: true }; + if (field.datePickerFormat === 'calendar') { + options.time = false; + } else { + options.time = true; + } + return formatDate(date, options); +}