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

package/package.json

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

package/src/adapters/obs-adapter.test.ts

@@ -1,6 +1,6 @@
 import { type FormContextProps } from '../provider/form-provider';
 import { type FormField } from '../types';
-import { hasPreviousObsValueChanged, findObsByFormField, ObsAdapter } from './obs-adapter';
+import { findObsByFormField, hasPreviousObsValueChanged, ObsAdapter } from './obs-adapter';
 
 const formContext = {
   methods: null,
@@ -944,3 +944,280 @@ describe('findObsByFormField', () => {
     expect(matchedObs[0]).toBe(obsList[3]);
   });
 });
+
+describe('ObsAdapter - handling nested obsGroups', () => {
+  const createNestedFields = (): FormField => ({
+    label: 'Parent obsGroup',
+    type: 'obsGroup',
+    required: false,
+    id: 'parentObsgroup',
+    questionOptions: {
+      rendering: 'group',
+      concept: '163770AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+    },
+    questions: [
+      {
+        label: 'Health Center',
+        type: 'obs',
+        required: false,
+        id: 'healthCenter',
+        questionOptions: {
+          rendering: 'select',
+          concept: '1745AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+          answers: [
+            {
+              concept: '1560AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+              label: 'Family member',
+            },
+            {
+              concept: '1588AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+              label: 'Health clinic/post',
+            },
+            {
+              concept: '5622AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+              label: 'Other',
+            },
+          ],
+        },
+      },
+      {
+        label: 'Nested obsGroup',
+        type: 'obsGroup',
+        required: false,
+        id: 'nestedObsgroup',
+        questionOptions: {
+          rendering: 'group',
+          concept: '3f824eeb-8452-4df0-b346-6ed056cbc5b9',
+        },
+        questions: [
+          {
+            label: 'Comment',
+            type: 'obs',
+            required: false,
+            id: 'comment',
+            questionOptions: {
+              rendering: 'textarea',
+              concept: '161011AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+            },
+          },
+          {
+            label: 'Other Diagnoses',
+            type: 'obs',
+            required: false,
+            id: 'otherDiagnoses',
+            questionOptions: {
+              rendering: 'select',
+              concept: '159947AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+              answers: [
+                {
+                  concept: '159394AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+                  label: 'Diagnosis certainty',
+                },
+              ],
+            },
+          },
+        ],
+      },
+    ],
+  });
+
+  const createEncounterWithNestedObs = () => ({
+    uuid: 'encounter-uuid',
+    obs: [
+      {
+        uuid: 'parent-group-uuid',
+        concept: {
+          uuid: '163770AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+        },
+        groupMembers: [
+          {
+            uuid: 'health-center-uuid',
+            concept: {
+              uuid: '1745AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+            },
+            value: {
+              uuid: '1588AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+            },
+            formFieldPath: 'rfe-forms-healthCenter',
+          },
+          {
+            uuid: 'nested-group-uuid',
+            concept: {
+              uuid: '3f824eeb-8452-4df0-b346-6ed056cbc5b9',
+            },
+            groupMembers: [
+              {
+                uuid: 'comment-uuid',
+                concept: {
+                  uuid: '161011AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+                },
+                value: 'Test comment for nested group',
+                formFieldPath: 'rfe-forms-comment',
+              },
+              {
+                uuid: 'diagnosis-uuid',
+                concept: {
+                  uuid: '159947AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+                },
+                value: {
+                  uuid: '159394AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+                },
+                formFieldPath: 'rfe-forms-otherDiagnoses',
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  });
+
+  beforeEach(() => {
+    formContext.domainObjectValue = createEncounterWithNestedObs();
+    ObsAdapter.tearDown();
+  });
+
+  it('should get initial values from nested obs groups', async () => {
+    const fields = createNestedFields();
+
+    const healthCenterField = fields.questions[0];
+    const healthCenterValue = await ObsAdapter.getInitialValue(
+      healthCenterField,
+      formContext.domainObjectValue,
+      formContext,
+    );
+    expect(healthCenterValue).toBe('1588AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA');
+
+    const commentField = fields.questions[1].questions[0];
+    const commentValue = await ObsAdapter.getInitialValue(commentField, formContext.domainObjectValue, formContext);
+    expect(commentValue).toBe('Test comment for nested group');
+
+    const diagnosisField = fields.questions[1].questions[1];
+    const diagnosisValue = await ObsAdapter.getInitialValue(diagnosisField, formContext.domainObjectValue, formContext);
+    expect(diagnosisValue).toBe('159394AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA');
+  });
+
+  it('should transform values in nested groups', () => {
+    const fields = createNestedFields();
+
+    const healthCenterField = fields.questions[0];
+    const healthCenterObs = ObsAdapter.transformFieldValue(
+      healthCenterField,
+      '1560AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+      formContext,
+    );
+    expect(healthCenterObs).toEqual({
+      concept: '1745AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+      formFieldNamespace: 'rfe-forms',
+      formFieldPath: 'rfe-forms-healthCenter',
+      value: '1560AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+    });
+
+    const commentField = fields.questions[1].questions[0];
+    const commentObs = ObsAdapter.transformFieldValue(commentField, 'New test comment', formContext);
+    expect(commentObs).toEqual({
+      concept: '161011AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+      formFieldNamespace: 'rfe-forms',
+      formFieldPath: 'rfe-forms-comment',
+      value: 'New test comment',
+    });
+  });
+
+  it('should edit existing values in nested groups', () => {
+    formContext.sessionMode = 'edit';
+    const fields = createNestedFields();
+
+    const healthCenterField = fields.questions[0];
+    healthCenterField.meta = {
+      previousValue: {
+        uuid: 'health-center-uuid',
+        value: {
+          uuid: '1588AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+        },
+      },
+    };
+
+    const healthCenterObs = ObsAdapter.transformFieldValue(
+      healthCenterField,
+      '5622AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+      formContext,
+    );
+
+    expect(healthCenterObs).toEqual({
+      uuid: 'health-center-uuid',
+      formFieldNamespace: 'rfe-forms',
+      formFieldPath: 'rfe-forms-healthCenter',
+      value: '5622AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+    });
+
+    const commentField = fields.questions[1].questions[0];
+    commentField.meta = {
+      previousValue: {
+        uuid: 'comment-uuid',
+        value: 'Test comment for nested group',
+      },
+    };
+
+    const commentObs = ObsAdapter.transformFieldValue(commentField, 'Updated comment text', formContext);
+
+    expect(commentObs).toEqual({
+      uuid: 'comment-uuid',
+      formFieldNamespace: 'rfe-forms',
+      formFieldPath: 'rfe-forms-comment',
+      value: 'Updated comment text',
+    });
+  });
+
+  it('should void deleted values in nested groups', () => {
+    formContext.sessionMode = 'edit';
+    const fields = createNestedFields();
+
+    const commentField = fields.questions[1].questions[0];
+    commentField.meta = {
+      previousValue: {
+        uuid: 'comment-uuid',
+        value: 'Test comment for nested group',
+      },
+    };
+
+    ObsAdapter.transformFieldValue(commentField, '', formContext);
+    expect(commentField.meta.submission.voidedValue).toEqual({
+      uuid: 'comment-uuid',
+      voided: true,
+    });
+    expect(commentField.meta.submission.newValue).toBe(null);
+
+    const diagnosisField = fields.questions[1].questions[1];
+    diagnosisField.meta = {
+      previousValue: {
+        uuid: 'diagnosis-uuid',
+        value: {
+          uuid: '159394AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+        },
+      },
+    };
+
+    ObsAdapter.transformFieldValue(diagnosisField, null, formContext);
+    expect(diagnosisField.meta.submission.voidedValue).toEqual({
+      uuid: 'diagnosis-uuid',
+      voided: true,
+    });
+    expect(diagnosisField.meta.submission.newValue).toBe(null);
+  });
+
+  it('should handle empty nested groups', async () => {
+    const emptyEncounter = {
+      uuid: 'encounter-uuid',
+      obs: [],
+    };
+
+    const fields = createNestedFields();
+
+    const healthCenterField = fields.questions[0];
+    const healthCenterValue = await ObsAdapter.getInitialValue(healthCenterField, emptyEncounter, formContext);
+    expect(healthCenterValue).toBe('');
+
+    const commentField = fields.questions[1].questions[0];
+    const commentValue = await ObsAdapter.getInitialValue(commentField, emptyEncounter, formContext);
+    expect(commentValue).toBe('');
+  });
+});

package/src/components/group/obs-group.component.tsx

@@ -1,29 +1,54 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import classNames from 'classnames';
 import { type FormFieldInputProps } from '../../types';
 import styles from './obs-group.scss';
-import { FormFieldRenderer } from '../renderer/field/form-field-renderer.component';
+import { FormFieldRenderer, isGroupField } from '../renderer/field/form-field-renderer.component';
 import { useFormProviderContext } from '../../provider/form-provider';
+import { FormGroup } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
 
-export const ObsGroup: React.FC<FormFieldInputProps> = ({ field }) => {
+export const ObsGroup: React.FC<FormFieldInputProps> = ({ field, ...restProps }) => {
+  const { t } = useTranslation();
   const { formFieldAdapters } = useFormProviderContext();
+  const showLabel = useMemo(() => field.questions?.length > 1, [field]);
 
-  const groupContent = field.questions
-    ?.filter((child) => !child.isHidden)
-    .map((child, index) => {
-      const keyId = child.id + '_' + index;
-      if (formFieldAdapters[child.type]) {
-        return (
-          <div className={classNames(styles.flexColumn)} key={keyId}>
-            <div className={styles.groupContainer}>
-              <FormFieldRenderer fieldId={child.id} valueAdapter={formFieldAdapters[child.type]} />
-            </div>
-          </div>
-        );
-      }
-    });
+  const content = useMemo(
+    () =>
+      field.questions
+        ?.filter((child) => !child.isHidden)
+        .map((child, index) => {
+          const key = `${child.id}_${index}`;
 
-  return <div className={styles.flexRow}>{groupContent}</div>;
+          if (child.type === 'obsGroup' && isGroupField(child.questionOptions.rendering)) {
+            return (
+              <div key={key} className={styles.nestedGroupContainer}>
+                <ObsGroup field={child} {...restProps} />
+              </div>
+            );
+          } else if (formFieldAdapters[child.type]) {
+            return (
+              <div className={classNames(styles.flexColumn)} key={key}>
+                <div className={styles.groupContainer}>
+                  <FormFieldRenderer fieldId={child.id} valueAdapter={formFieldAdapters[child.type]} />
+                </div>
+              </div>
+            );
+          }
+        }),
+    [field],
+  );
+
+  return (
+    <div className={styles.groupContainer}>
+      {showLabel ? (
+        <FormGroup legendText={t(field.label)} className={styles.boldLegend}>
+          {content}
+        </FormGroup>
+      ) : (
+        content
+      )}
+    </div>
+  );
 };
 
 export default ObsGroup;

package/src/components/group/obs-group.scss

@@ -10,3 +10,7 @@
 .groupContainer {
   margin: 0.5rem 0;
 }
+
+.boldLegend > legend {
+  font-weight: bolder;
+}

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

@@ -235,6 +235,6 @@ export function isUnspecifiedSupported(question: FormField) {
   );
 }
 
-function isGroupField(rendering: RenderType) {
+export function isGroupField(rendering: RenderType) {
   return rendering === 'group' || rendering === 'repeating';
 }

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

@@ -1,5 +1,4 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { FormGroup } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
 import type { FormField, FormFieldInputProps, RenderType } from '../../types';
 import { evaluateAsyncExpression, evaluateExpression } from '../../utils/expression-runner';
@@ -79,6 +78,7 @@ const Repeat: React.FC<FormFieldInputProps> = ({ field }) => {
           });
         }
       }
+
       const clonedField = cloneRepeatField(field, null, counter);
       // run necessary expressions
       if (clonedField.type === 'obsGroup') {
@@ -170,15 +170,7 @@ const Repeat: React.FC<FormFieldInputProps> = ({ field }) => {
 
   return (
     <React.Fragment>
-      {isGrouped ? (
-        <div className={styles.container}>
-          <FormGroup legendText={t(field.label)} className={styles.boldLegend}>
-            {nodes}
-          </FormGroup>
-        </div>
-      ) : (
-        <div>{nodes}</div>
-      )}
+      <div>{nodes}</div>
     </React.Fragment>
   );
 };

package/src/hooks/useFormFields.ts

@@ -1,35 +1,63 @@
 import { useMemo } from 'react';
-import { type FormSchema, type FormField } from '../types';
+import { type FormField, type FormSchema } from '../types';
 
 export function useFormFields(form: FormSchema): { formFields: FormField[]; conceptReferences: Set<string> } {
   const [flattenedFields, conceptReferences] = useMemo(() => {
-    const flattenedFieldsTemp = [];
+    const flattenedFieldsTemp: FormField[] = [];
     const conceptReferencesTemp = new Set<string>();
-    form.pages?.forEach((page) =>
-      page.sections?.forEach((section) => {
-        section.questions?.forEach((question) => {
-          flattenedFieldsTemp.push(question);
-          if (question.type == 'obsGroup') {
-            question.questions.forEach((groupedField) => {
-              groupedField.meta.groupId = question.id;
-              flattenedFieldsTemp.push(groupedField);
-            });
+
+    const processFlattenedFields = (
+      fields: FormField[],
+    ): {
+      flattenedFields: FormField[];
+      conceptReferences: Set<string>;
+    } => {
+      const flattenedFields: FormField[] = [];
+      const conceptReferences = new Set<string>();
+
+      const processField = (field: FormField, parentGroupId?: string) => {
+        // Add group ID to nested fields if applicable
+        const processedField = parentGroupId ? { ...field, meta: { ...field.meta, groupId: parentGroupId } } : field;
+
+        // Add field to flattened list
+        flattenedFields.push(processedField);
+
+        // Collect concept references
+        if (processedField.questionOptions?.concept) {
+          conceptReferences.add(processedField.questionOptions.concept);
+        }
+
+        // Collect concept references from answers
+        processedField.questionOptions?.answers?.forEach((answer) => {
+          if (answer.concept) {
+            conceptReferences.add(answer.concept);
           }
         });
+
+        // Recursively process nested questions for obsGroup
+        if (processedField.type === 'obsGroup' && processedField.questions) {
+          processedField.questions.forEach((nestedField) => {
+            processField(nestedField, processedField.id);
+          });
+        }
+      };
+
+      // Process all input fields
+      fields.forEach((field) => processField(field));
+
+      return { flattenedFields, conceptReferences };
+    };
+
+    form.pages?.forEach((page) =>
+      page.sections?.forEach((section) => {
+        if (section.questions) {
+          const { flattenedFields, conceptReferences } = processFlattenedFields(section.questions);
+          flattenedFieldsTemp.push(...flattenedFields);
+          conceptReferences.forEach((conceptReference) => conceptReferencesTemp.add(conceptReference));
+        }
       }),
     );
-    flattenedFieldsTemp.forEach((field) => {
-      if (field.questionOptions?.concept) {
-        conceptReferencesTemp.add(field.questionOptions.concept);
-      }
-      if (field.questionOptions?.answers) {
-        field.questionOptions.answers.forEach((answer) => {
-          if (answer.concept) {
-            conceptReferencesTemp.add(answer.concept);
-          }
-        });
-      }
-    });
+
     return [flattenedFieldsTemp, conceptReferencesTemp];
   }, [form]);
 

package/src/processors/encounter/encounter-form-processor.ts

@@ -100,7 +100,7 @@ export class EncounterFormProcessor extends FormProcessor {
         field.meta.fixedValue = field.value;
         delete field.value;
       }
-      if (field.questionOptions?.rendering == 'group') {
+      if (field.questionOptions?.rendering == 'group' || field.type === 'obsGroup') {
         field.questions?.forEach((child) => {
           child.readonly = child.readonly ?? field.readonly;
           return prepareFormField(child, section, page, schema);

package/src/processors/encounter/encounter-processor-helper.ts

@@ -1,16 +1,16 @@
 import {
-  type PatientProgram,
   type FormField,
+  type FormProcessorContextProps,
   type OpenmrsEncounter,
   type OpenmrsObs,
   type PatientIdentifier,
+  type PatientProgram,
   type PatientProgramPayload,
-  type FormProcessorContextProps,
 } from '../../types';
 import { saveAttachment, savePatientIdentifier, saveProgramEnrollment } from '../../api';
 import { hasRendering, hasSubmission } from '../../utils/common-utils';
 import dayjs from 'dayjs';
-import { voidObs, constructObs, assignedObsIds } from '../../adapters/obs-adapter';
+import { assignedObsIds, constructObs, voidObs } from '../../adapters/obs-adapter';
 import { type FormContextProps } from '../../provider/form-provider';
 import { ConceptTrue } from '../../constants';
 import { DefaultValueValidator } from '../../validators/default-value-validator';
@@ -185,43 +185,53 @@ export function getMutableSessionProps(context: FormContextProps) {
 // Helpers
 
 function prepareObs(obsForSubmission: OpenmrsObs[], fields: FormField[]) {
-  fields
-    .filter((field) => hasSubmittableObs(field))
-    .forEach((field) => {
-      if ((field.isHidden || field.isParentHidden) && field.meta.previousValue) {
-        const valuesArray = Array.isArray(field.meta.previousValue)
-          ? field.meta.previousValue
-          : [field.meta.previousValue];
-        addObsToList(
-          obsForSubmission,
-          valuesArray.map((obs) => voidObs(obs)),
-        );
-        return;
-      }
-      if (field.type == 'obsGroup') {
-        if (field.meta.submission?.voidedValue) {
-          addObsToList(obsForSubmission, field.meta.submission.voidedValue);
-          return;
-        }
-        const obsGroup = constructObs(field, null);
-        if (field.meta.previousValue) {
-          obsGroup.uuid = field.meta.previousValue.uuid;
-        }
-        field.questions.forEach((groupedField) => {
-          if (hasSubmission(groupedField)) {
-            addObsToList(obsGroup.groupMembers, groupedField.meta.submission.newValue);
-            addObsToList(obsGroup.groupMembers, groupedField.meta.submission.voidedValue);
-          }
-        });
-        if (obsGroup.groupMembers.length || obsGroup.voided) {
-          addObsToList(obsForSubmission, obsGroup);
-        }
-      }
-      if (hasSubmission(field)) {
-        addObsToList(obsForSubmission, field.meta.submission.newValue);
-        addObsToList(obsForSubmission, field.meta.submission.voidedValue);
-      }
-    });
+  fields.filter((field) => hasSubmittableObs(field)).forEach((field) => processObsField(obsForSubmission, field));
+}
+
+function processObsField(obsForSubmission: OpenmrsObs[], field: FormField) {
+  if ((field.isHidden || field.isParentHidden) && field.meta.previousValue) {
+    const valuesArray = Array.isArray(field.meta.previousValue) ? field.meta.previousValue : [field.meta.previousValue];
+    addObsToList(
+      obsForSubmission,
+      valuesArray.map((obs) => voidObs(obs)),
+    );
+    return;
+  }
+
+  if (field.type === 'obsGroup') {
+    processObsGroup(obsForSubmission, field);
+  } else if (hasSubmission(field)) {
+    // For non-group obs with a submission
+    addObsToList(obsForSubmission, field.meta.submission.newValue);
+    addObsToList(obsForSubmission, field.meta.submission.voidedValue);
+  }
+}
+
+function processObsGroup(obsForSubmission: OpenmrsObs[], groupField: FormField) {
+  if (groupField.meta.submission?.voidedValue) {
+    addObsToList(obsForSubmission, groupField.meta.submission.voidedValue);
+    return;
+  }
+
+  const obsGroup = constructObs(groupField, null);
+  if (groupField.meta.previousValue) {
+    obsGroup.uuid = groupField.meta.previousValue.uuid;
+  }
+
+  groupField.questions.forEach((nestedField) => {
+    if (nestedField.type === 'obsGroup') {
+      const nestedObsGroup: OpenmrsObs[] = [];
+      processObsGroup(nestedObsGroup, nestedField);
+      addObsToList(obsGroup.groupMembers, nestedObsGroup);
+    } else if (hasSubmission(nestedField)) {
+      addObsToList(obsGroup.groupMembers, nestedField.meta.submission.newValue);
+      addObsToList(obsGroup.groupMembers, nestedField.meta.submission.voidedValue);
+    }
+  });
+
+  if (obsGroup.groupMembers?.length || obsGroup.voided) {
+    addObsToList(obsForSubmission, obsGroup);
+  }
 }
 
 function prepareOrders(fields: FormField[]) {

package/src/transformers/default-schema-transformer.ts

@@ -41,8 +41,13 @@ function handleQuestion(question: FormField, page: FormPage, form: FormSchema) {
     setFieldValidators(question);
     transformByType(question);
     transformByRendering(question);
-    if (question?.questions?.length) {
-      question.questions.forEach((question) => handleQuestion(question, page, form));
+
+    if (question.questions?.length) {
+      if (question.type === 'obsGroup' && question.questions.length) {
+        question.questions.forEach((nestedQuestion) => handleQuestion(nestedQuestion, page, form));
+      } else {
+        question.questions.forEach((nestedQuestion) => handleQuestion(nestedQuestion, page, form));
+      }
     }
     question.meta.pageId = page.id;
   } catch (error) {