@openmrs/esm-form-engine-lib 2.1.0-pre.1584 → 2.1.0-pre.1594

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-form-engine-lib",
-  "version": "2.1.0-pre.1584",
+  "version": "2.1.0-pre.1594",
   "description": "React Form Engine for O3",
   "browser": "dist/openmrs-esm-form-engine-lib.js",
   "main": "src/index.ts",

package/src/adapters/obs-adapter.ts

@@ -83,7 +83,7 @@ export const ObsAdapter: FormFieldValueAdapter = {
       return null;
     }
     if (hasRendering(field, 'checkbox')) {
-      return handleMultiSelect(field, value);
+      return handleMultiSelect(field, Array.isArray(value) ? value : [value]);
     }
     if (!isEmpty(value) && hasPreviousObsValueChanged(field, value)) {
       return gracefullySetSubmission(field, editObs(field, value), undefined);

package/src/api/index.ts

@@ -1,6 +1,6 @@
 import { fhirBaseUrl, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
 import { encounterRepresentation } from '../constants';
-import { type OpenmrsForm, type PatientIdentifier, type PatientProgramPayload } from '../types';
+import type { FHIRObsResource, OpenmrsForm, PatientIdentifier, PatientProgramPayload } from '../types';
 import { isUuid } from '../utils/boolean-utils';
 
 export function saveEncounter(abortController: AbortController, payload, encounterUuid?: string) {
@@ -76,15 +76,18 @@ export async function getPreviousEncounter(patientUuid: string, encounterType: s
   return null;
 }
 
-export function getLatestObs(patientUuid: string, conceptUuid: string, encounterTypeUuid?: string) {
+export async function getLatestObs(
+  patientUuid: string,
+  conceptUuid: string,
+  encounterTypeUuid?: string,
+): Promise<FHIRObsResource> {
   let params = `patient=${patientUuid}&code=${conceptUuid}${
     encounterTypeUuid ? `&encounter.type=${encounterTypeUuid}` : ''
   }`;
   // the latest obs
   params += '&_sort=-date&_count=1';
-  return openmrsFetch(`${fhirBaseUrl}/Observation?${params}`).then(({ data }) => {
-    return data.entry?.length ? data.entry[0].resource : null;
-  });
+  const { data } = await openmrsFetch(`${fhirBaseUrl}/Observation?${params}`);
+  return data.entry?.length ? data.entry[0].resource : null;
 }
 
 /**

package/src/components/inputs/text/text.component.tsx

@@ -42,7 +42,9 @@ const TextField: React.FC<FormFieldInputProps> = ({ field, value, errors, warnin
           <TextInput
             id={field.id}
             labelText={<FieldLabel field={field} />}
-            onChange={setFieldValue}
+            onChange={(event) => {
+              setFieldValue(event.target.value);
+            }}
             onBlur={onBlur}
             name={field.id}
             value={value}

package/src/components/inputs/text/text.test.tsx

@@ -161,17 +161,11 @@ describe('Text field input', () => {
   it('should record new obs', async () => {
     await renderForm(textValues);
     const inputField = screen.getByLabelText('Indicate your notes');
-
-    await user.type(inputField, 'Updated patient notes');
+    await user.click(inputField);
+    await user.paste('Updated patient notes');
 
     await act(async () => {
-      expect(mockSetFieldValue).toHaveBeenCalledWith(
-        expect.objectContaining({
-          target: expect.objectContaining({
-            value: 'Updated patient notes',
-          }),
-        }),
-      );
+      expect(mockSetFieldValue).toHaveBeenCalledWith('Updated patient notes');
     });
   });
 

package/src/components/renderer/form/form-renderer.component.tsx

@@ -6,7 +6,6 @@ import { formStateReducer, initialState } from './state';
 import { useEvaluateFormFieldExpressions } from '../../../hooks/useEvaluateFormFieldExpressions';
 import { useFormFactory } from '../../../provider/form-factory-provider';
 import { FormProvider, type FormContextProps } from '../../../provider/form-provider';
-import { isTrue } from '../../../utils/boolean-utils';
 import { type FormProcessorContextProps } from '../../../types';
 import { useFormStateHelpers } from '../../../hooks/useFormStateHelpers';
 import { pageObserver } from '../../sidebar/page-observer';

package/src/components/repeat/helpers.ts

@@ -15,6 +15,7 @@ export function cloneRepeatField(srcField: FormField, value: OpenmrsResource, id
     childField.id = `${childField.id}_${idSuffix}`;
     childField.meta.groupId = clonedField.id;
     childField.meta.previousValue = null;
+    childField.fieldDependents = new Set();
     clearSubmission(childField);
 
     // cleanup expressions

package/src/components/repeat/repeat.component.tsx

@@ -47,12 +47,13 @@ const Repeat: React.FC<FormFieldInputProps> = ({ field }) => {
 
   const handleAdd = useCallback(
     (counter: number) => {
+      const clonedFieldsBuffer: FormField[] = [];
       function evaluateExpressions(field: FormField) {
         if (field.hide?.hideWhenExpression) {
           field.isHidden = evaluateExpression(
             field.hide.hideWhenExpression,
             { value: field, type: 'field' },
-            formFields,
+            [...formFields, ...clonedFieldsBuffer],
             getValues(),
             {
               mode: sessionMode,
@@ -64,7 +65,7 @@ const Repeat: React.FC<FormFieldInputProps> = ({ field }) => {
           evaluateAsyncExpression(
             field.questionOptions.calculate?.calculateExpression,
             { value: field, type: 'field' },
-            formFields,
+            [...formFields, ...clonedFieldsBuffer],
             getValues(),
             {
               mode: sessionMode,
@@ -80,16 +81,19 @@ const Repeat: React.FC<FormFieldInputProps> = ({ field }) => {
       }
 
       const clonedField = cloneRepeatField(field, null, counter);
-      // run necessary expressions
+      clonedFieldsBuffer.push(clonedField);
+
+      // Handle nested questions
       if (clonedField.type === 'obsGroup') {
         clonedField.questions?.forEach((childField) => {
-          evaluateExpressions(childField);
-          addFormField(childField);
+          clonedFieldsBuffer.push(childField);
         });
-      } else {
-        evaluateExpressions(clonedField);
       }
-      addFormField(clonedField);
+
+      clonedFieldsBuffer.forEach((field) => {
+        evaluateExpressions(field);
+        addFormField(field);
+      });
       setRows([...rows, clonedField]);
     },
     [formFields, field, rows, context],

package/src/hooks/useFormStateHelpers.ts

@@ -8,9 +8,24 @@ export function useFormStateHelpers(dispatch: Dispatch<Action>, formFields: Form
   const addFormField = useCallback((field: FormField) => {
     dispatch({ type: 'ADD_FORM_FIELD', value: field });
   }, []);
-  const updateFormField = useCallback((field: FormField) => {
-    dispatch({ type: 'UPDATE_FORM_FIELD', value: cloneDeep(field) });
-  }, []);
+  const updateFormField = useCallback(
+    (field: FormField) => {
+      if (field.meta.groupId) {
+        const group = formFields.find((f) => f.id === field.meta.groupId);
+        if (group) {
+          group.questions = group.questions.map((child) => {
+            if (child.id === field.id) {
+              return field;
+            }
+            return child;
+          });
+          updateFormField(group);
+        }
+      }
+      dispatch({ type: 'UPDATE_FORM_FIELD', value: cloneDeep(field) });
+    },
+    [formFields],
+  );
 
   const getFormField = useCallback(
     (fieldId: string) => {

package/src/types/domain.ts

@@ -15,20 +15,80 @@ export interface OpenmrsEncounter {
 }
 
 export interface OpenmrsObs extends OpenmrsResource {
-  concept: any;
-  obsDatetime: string | Date;
-  obsGroup: OpenmrsObs;
-  groupMembers: Array<OpenmrsObs>;
-  comment: string;
-  location: OpenmrsResource;
-  order: OpenmrsResource;
-  encounter: OpenmrsResource;
-  voided: boolean;
-  value: any;
-  formFieldPath: string;
-  formFieldNamespace: string;
-  status: string;
-  interpretation: string;
+  concept?: any;
+  obsDatetime?: string | Date;
+  obsGroup?: OpenmrsObs;
+  groupMembers?: Array<OpenmrsObs>;
+  comment?: string;
+  location?: OpenmrsResource;
+  order?: OpenmrsResource;
+  encounter?: OpenmrsResource;
+  voided?: boolean;
+  value?: any;
+  formFieldPath?: string;
+  formFieldNamespace?: string;
+  status?: string;
+  interpretation?: string;
+}
+
+export interface FHIRObsResource {
+  resourceType: string;
+  id: string;
+  category: Array<{
+    coding: Array<{
+      system: string;
+      code: string;
+      display: string;
+    }>;
+  }>;
+  code: {
+    coding: Array<{
+      code: string;
+      display: string;
+    }>;
+    text: string;
+  };
+  encounter?: {
+    reference: string;
+    type: string;
+  };
+  effectiveDateTime: string;
+  issued: string;
+  valueBoolean?: boolean;
+  valueString?: string;
+  valueDateTime?: string;
+  valueQuantity?: {
+    value: number;
+    unit: string;
+    system: string;
+    code: string;
+  };
+  valueCodeableConcept?: {
+    coding: [
+      {
+        code: string;
+        display: string;
+      },
+    ];
+    text: string;
+  };
+  referenceRange: Array<{
+    low?: {
+      value: number;
+    };
+    high?: {
+      value: number;
+    };
+    type: {
+      coding: Array<{
+        system: string;
+        code: string;
+      }>;
+    };
+  }>;
+  hasMember?: Array<{
+    reference: string;
+  }>;
 }
 
 export interface OpenmrsForm {

package/src/utils/form-helper.test.ts

@@ -1,14 +1,12 @@
 import {
   findConceptByReference,
-  evaluateConditionalAnswered,
   evaluateFieldReadonlyProp,
   evaluateDisabled,
   isPageContentVisible,
+  extractObsValueAndDisplay,
 } from './form-helper';
-import { DefaultValueValidator } from '../validators/default-value-validator';
-import { type LayoutType } from '@openmrs/esm-framework';
 import { ConceptTrue } from '../constants';
-import { type FormPage, type FormField, type OpenmrsEncounter, type SessionMode } from '../types';
+import type { FormPage, FormField } from '../types';
 
 jest.mock('../validators/default-value-validator');
 
@@ -507,4 +505,160 @@ describe('Form Engine Helper', () => {
       expect(isPageContentVisible(page)).toBe(false);
     });
   });
+
+  describe('extractObsValueAndDisplay', () => {
+    // Mock form field types
+    const mockFormFields = {
+      codedField: {
+        questionOptions: {
+          rendering: 'select',
+          answers: [{ concept: '2395de62-f5a6-49b6-ab0f-57a21a9029c1', label: 'Sneezing Symptom' }],
+        },
+      },
+      toggleField: {
+        questionOptions: {
+          rendering: 'toggle',
+          answers: [],
+        },
+      },
+      dateField: {
+        questionOptions: {
+          rendering: 'date',
+        },
+      },
+      stringField: {
+        questionOptions: {
+          rendering: 'text',
+        },
+      },
+    } as any;
+
+    // Primitive value tests
+    describe('Primitive Value Handling', () => {
+      it('should handle string primitive value', () => {
+        const result = extractObsValueAndDisplay(mockFormFields.stringField, 'Hello World');
+        expect(result).toEqual({
+          value: 'Hello World',
+          display: 'Hello World',
+        });
+      });
+
+      it('should handle number primitive value', () => {
+        const result = extractObsValueAndDisplay(mockFormFields.stringField, 42);
+        expect(result).toEqual({
+          value: 42,
+          display: 42,
+        });
+      });
+    });
+
+    // FHIR Observation tests
+    describe('FHIR Observation Handling', () => {
+      const codedFHIRObs = {
+        resourceType: 'Observation',
+        code: {
+          coding: {
+            code: '1095de62-b5a6-49v6-ab0f-57a21a9029cb',
+          },
+        },
+        valueCodeableConcept: {
+          coding: [
+            {
+              code: '2395de62-f5a6-49b6-ab0f-57a21a9029c1',
+              display: 'Sneezing',
+            },
+          ],
+        },
+      };
+
+      const booleanFHIRObs = {
+        resourceType: 'Observation',
+        code: {
+          coding: {
+            code: 'b095deb2-b5a6-49v6-ab0f-57a21a9029cx',
+          },
+        },
+        valueBoolean: true,
+      };
+
+      const dateFHIRObs = {
+        resourceType: 'Observation',
+        code: {
+          coding: {
+            code: 'e095de62-b5a6-49v6-ab0f-57a21a9029cy',
+          },
+        },
+        valueDateTime: '2024-07-31T01:33:19+00:00',
+      };
+
+      it('should handle coded FHIR observation', () => {
+        const result = extractObsValueAndDisplay(mockFormFields.codedField, codedFHIRObs);
+        expect(result).toEqual({
+          value: '2395de62-f5a6-49b6-ab0f-57a21a9029c1',
+          display: 'Sneezing Symptom',
+        });
+      });
+
+      it('should handle boolean FHIR observation', () => {
+        const result = extractObsValueAndDisplay(mockFormFields.toggleField, booleanFHIRObs);
+        expect(result).toEqual({
+          value: ConceptTrue,
+          display: undefined,
+        });
+      });
+
+      it('should handle date FHIR observation', () => {
+        const result = extractObsValueAndDisplay(mockFormFields.dateField, dateFHIRObs);
+        expect(result).toEqual({
+          value: expect.any(Date),
+          display: expect.stringContaining('2024-07-31'),
+        });
+      });
+    });
+
+    // OpenMRS Observation tests
+    describe('OpenMRS Observation Handling', () => {
+      const codedOpenMRSObs = {
+        value: {
+          uuid: '2395de62-f5a6-49b6-ab0f-57a21a9029c1',
+          name: { name: 'Sneezing' },
+        },
+      };
+
+      const booleanOpenMRSObs = {
+        value: {
+          uuid: 'cf82933b-3f3f-45e7-a5ab-5d31aaee3da3',
+          name: { name: 'True' },
+        },
+      };
+
+      const dateOpenMRSObs = {
+        value: '2024-07-31T01:33:19+00:00',
+      };
+
+      it('should handle coded OpenMRS observation', () => {
+        const result = extractObsValueAndDisplay(mockFormFields.codedField, codedOpenMRSObs);
+        expect(result).toEqual({
+          value: '2395de62-f5a6-49b6-ab0f-57a21a9029c1',
+          display: 'Sneezing Symptom',
+        });
+      });
+
+      it('should handle boolean OpenMRS observation', () => {
+        const result = extractObsValueAndDisplay(mockFormFields.toggleField, booleanOpenMRSObs);
+        expect(result).toEqual({
+          value: 'cf82933b-3f3f-45e7-a5ab-5d31aaee3da3',
+          display: 'True',
+        });
+      });
+
+      it('should handle date OpenMRS observation', () => {
+        const result = extractObsValueAndDisplay(mockFormFields.dateField, dateOpenMRSObs);
+        expect(result).toEqual({
+          value: expect.any(Date),
+          display: expect.stringMatching(/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}$/),
+        });
+      });
+    });
+  });
 });

package/src/utils/form-helper.ts

@@ -1,8 +1,9 @@
 import { type LayoutType } from '@openmrs/esm-framework';
-import { type OpenmrsObs, type FormField, type FormPage, type FormSection, type SessionMode } from '../types';
+import type { FormField, FormPage, FormSection, SessionMode, FHIRObsResource, RenderType } from '../types';
 import { isEmpty } from '../validators/form-validator';
 import { parseToLocalDateTime } from './common-utils';
 import dayjs from 'dayjs';
+import { ConceptFalse, ConceptTrue } from '../constants';
 
 export function shouldUseInlineLayout(
   renderingType: 'single-line' | 'multiline' | 'automatic',
@@ -172,24 +173,30 @@ export function scrollIntoView(viewId: string, shouldFocus: boolean = false) {
   }
 }
 
-export const extractObsValueAndDisplay = (field: FormField, obs: OpenmrsObs) => {
+export const extractObsValueAndDisplay = (field: FormField, obs: any) => {
   const rendering = field.questionOptions.rendering;
-
-  if (typeof obs.value === 'string' || typeof obs.value === 'number') {
+  if (typeof obs !== 'object') {
+    return { value: obs, display: obs };
+  }
+  const omrsObs = obs.resourceType === 'Observation' ? mapFHIRObsToOpenMRS(obs, rendering) : obs;
+  if (!omrsObs) {
+    return { value: null, display: null };
+  }
+  if (typeof omrsObs.value === 'string' || typeof omrsObs.value === 'number') {
     if (rendering === 'date' || rendering === 'datetime') {
-      const dateObj = parseToLocalDateTime(`${obs.value}`);
+      const dateObj = parseToLocalDateTime(`${omrsObs.value}`);
       return { value: dateObj, display: dayjs(dateObj).format('YYYY-MM-DD HH:mm') };
     }
-    return { value: obs.value, display: obs.value };
+    return { value: omrsObs.value, display: omrsObs.value };
   } else if (['toggle', 'checkbox'].includes(rendering)) {
     return {
-      value: obs.value?.uuid,
-      display: obs.value?.name?.name,
+      value: omrsObs.value?.uuid,
+      display: omrsObs.value?.name?.name,
     };
   } else {
     return {
-      value: obs.value?.uuid,
-      display: field.questionOptions.answers?.find((option) => option.concept === obs.value?.uuid)?.label,
+      value: omrsObs.value?.uuid,
+      display: field.questionOptions.answers?.find((option) => option.concept === omrsObs.value?.uuid)?.label,
     };
   }
 };
@@ -212,3 +219,48 @@ export function isPageContentVisible(page: FormPage) {
     }) ?? false
   );
 }
+
+function mapFHIRObsToOpenMRS(fhirObs: FHIRObsResource, rendering: RenderType) {
+  try {
+    return {
+      obsDatetime: fhirObs.effectiveDateTime,
+      uuid: fhirObs.id,
+      concept: {
+        uuid: fhirObs.code.coding[0]?.code,
+        display: fhirObs.code.coding[0]?.display,
+      },
+      value: extractFHIRObsValue(fhirObs, rendering),
+    };
+  } catch (error) {
+    console.error('Error converting FHIR Obs to OpenMRS modelling', error);
+    return null;
+  }
+}
+
+function extractFHIRObsValue(fhirObs: FHIRObsResource, rendering: RenderType) {
+  switch (rendering) {
+    case 'toggle':
+      return fhirObs.valueBoolean ? { uuid: ConceptTrue } : { uuid: ConceptFalse };
+
+    case 'date':
+    case 'datetime':
+      return fhirObs.valueDateTime;
+
+    case 'number':
+      return fhirObs.valueQuantity?.value ?? null;
+
+    case 'radio':
+    case 'checkbox':
+    case 'select':
+    case 'content-switcher':
+      return fhirObs.valueCodeableConcept?.coding[0]
+        ? {
+            uuid: fhirObs.valueCodeableConcept?.coding[0].code,
+            name: { name: fhirObs.valueCodeableConcept?.coding[0].display },
+          }
+        : null;
+
+    default:
+      return fhirObs.valueString;
+  }
+}