#1137 - changing web app model mapping to support question groups. f…

…ixed warnings due to missing key fields.

package.json

@@ -36,7 +36,7 @@
     "material-table": "1.43.0",
     "moment": "^2.22.2",
     "openchs-idi": "git+https://github.com/avniproject/openchs-idi#b6c57e051b91ed4bc2634f4f087dba51cc3a01c8",
-    "openchs-models": "1.31.55",
+    "openchs-models": "1.31.58",
     "popper.js": "^1.14.3",
     "prismjs": "^1.17.1",
     "prop-types": "^15.7.2",

src/common/adapters.js

@@ -2,10 +2,7 @@ import {
   Concept,
   ConceptAnswer,
   EncounterType,
-  Form,
   Format,
-  FormElement,
-  FormElementGroup,
   Gender,
   KeyValue,
   ModelGeneral as General,
@@ -15,6 +12,9 @@ import {
 } from "avni-models";
 import { get, isEmpty, isNil, map } from "lodash";
 import { conceptService } from "dataEntryApp/services/ConceptService";
+import WebFormElement from "./model/WebFormElement";
+import WebFormElementGroup from "./model/WebFormElementGroup";
+import WebForm from "./model/WebForm";
 
 export const mapConceptAnswer = json => {
   const conceptAnswer = new ConceptAnswer();
@@ -34,39 +34,53 @@ export const mapConcept = json => {
   return concept;
 };
 
-export const mapFormElement = (json, formElementGroup) => {
+export const mapFormElement = (
+  formElementResource,
+  formElementGroup,
+  questionGroupFormElements = new Map()
+) => {
   const formElement = General.assignFields(
-    json,
-    new FormElement(),
+    formElementResource,
+    new WebFormElement(),
     ["uuid", "name", "displayOrder", "mandatory", "type", "voided", "rule"],
     []
   );
   formElement.formElementGroup = formElementGroup;
-  formElement.keyValues = map(json.keyValues, KeyValue.fromResource);
-  formElement.validFormat = Format.fromResource(json.validFormat);
-  formElement.concept = mapConcept(json.concept);
-  if (json.group) formElement.groupUuid = json.group.uuid;
+  formElement.keyValues = map(formElementResource.keyValues, KeyValue.fromResource);
+  formElement.validFormat = Format.fromResource(formElementResource.validFormat);
+  formElement.concept = mapConcept(formElementResource.concept);
+  if (formElementResource.group) {
+    formElement.groupUuid = formElementResource.group.uuid;
+    if (!questionGroupFormElements.has(formElement.groupUuid))
+      questionGroupFormElements.set(
+        formElement.groupUuid,
+        mapFormElement(formElementResource.group, formElementGroup)
+      );
+
+    formElement.group = questionGroupFormElements.get(formElement.groupUuid);
+  }
   return formElement;
 };
 
 export const mapFormElementGroup = (json, form) => {
-  const formElementGroup = General.assignFields(json, new FormElementGroup(), [
+  const formElementGroup = General.assignFields(json, new WebFormElementGroup(), [
     "uuid",
     "name",
     "displayOrder",
     "display",
     "voided",
     "rule"
   ]);
+  const questionGroupFormElements = new Map();
   formElementGroup.formElements = map(json.applicableFormElements, feJson =>
-    mapFormElement(feJson, formElementGroup)
+    mapFormElement(feJson, formElementGroup, questionGroupFormElements)
   );
   formElementGroup.form = form;
   return formElementGroup;
 };
 
 export const mapForm = json => {
-  let form = General.assignFields(json, new Form(), ["uuid", "name", "formType"]);
+  let form = General.assignFields(json, new WebForm(), ["uuid", "name", "formType"]);
   form.formElementGroups = map(json.formElementGroups, fegJson =>
     mapFormElementGroup(fegJson, form)
   );

src/common/adapters.test.js

@@ -15,6 +15,7 @@ import {
   Program,
   SubjectType
 } from "avni-models";
+import WebFormElementGroup from "./model/WebFormElementGroup";
 
 describe("adapters", () => {
   it("can map concept", () => {
@@ -54,8 +55,21 @@ describe("adapters", () => {
     assert.equal(feg.formElements.length, 3);
   });
 
+  it("should map form element group with question groups", function() {
+    const form = {};
+    const feg = { name: "a", form: form, applicableFormElements: [] };
+    const questionGroup = { name: "qg", uuid: "uuid-1", concept: {} };
+    feg.applicableFormElements.push({ name: "1", group: questionGroup, concept: {} });
+    feg.applicableFormElements.push({ name: "2", group: questionGroup, concept: {} });
+    const mapped = mapFormElementGroup(feg);
+    assert.equal(mapped.formElements.length, 2);
+    assert.equal(mapped.formElements[0].name, "1");
+    assert.equal(mapped.formElements[0].group.uuid, "uuid-1");
+    assert.equal(mapped.formElements[1].group.uuid, "uuid-1");
+  });
+
   it("can map form element", () => {
-    const feg = new FormElementGroup();
+    const feg = new WebFormElementGroup();
     feg.uuid = "uuid";
     const fe = mapFormElement(sampleFormElement, feg);
 
@@ -79,7 +93,7 @@ describe("adapters", () => {
     assert.equal(form.uuid, "36ba19a3-c289-44b7-bf56-eed36e9d7519");
     assert.equal(form.formType, "IndividualProfile");
     assert.equal(form.formElementGroups.length, 2);
-    assert.equal(form.formElementGroups[0].constructor, FormElementGroup);
+    assert.equal(form.formElementGroups[0].constructor, WebFormElementGroup);
     assert.equal(form.formElementGroups[0].name, "Individual details");
     assert.equal(form.formElementGroups[1].uuid, "0ef62f9b-e52e-4fd9-be85-4c3f08c9a973");
   });

src/common/model/WebForm.js

@@ -0,0 +1,14 @@
+import { Form } from "openchs-models";
+import WebFormElementGroup from "./WebFormElementGroup";
+
+class WebForm extends Form {
+  get formElementGroups() {
+    return this.toEntityList("formElementGroups", WebFormElementGroup);
+  }
+
+  set formElementGroups(x) {
+    this.that.formElementGroups = this.fromEntityList(x);
+  }
+}
+
+export default WebForm;

src/common/model/WebFormElement.js

@@ -0,0 +1,32 @@
+import { FormElement } from "openchs-models";
+import WebFormElementGroup from "./WebFormElementGroup";
+
+class WebFormElement extends FormElement {
+  get group() {
+    return this.toEntity("group", WebFormElement);
+  }
+
+  set group(x) {
+    this.that.group = this.fromObject(x);
+  }
+
+  newFormElement() {
+    return new WebFormElement();
+  }
+
+  clone() {
+    const clone = super.clone();
+    clone.group = this.group;
+    return clone;
+  }
+
+  get formElementGroup() {
+    return this.toEntity("formElementGroup", WebFormElementGroup);
+  }
+
+  set formElementGroup(x) {
+    this.that.formElementGroup = this.fromObject(x);
+  }
+}
+
+export default WebFormElement;

src/common/model/WebFormElementGroup.js

@@ -0,0 +1,23 @@
+import { FormElementGroup } from "openchs-models";
+import WebFormElement from "./WebFormElement";
+import WebForm from "./WebForm";
+
+class WebFormElementGroup extends FormElementGroup {
+  get formElements() {
+    return this.toEntityList("formElements", WebFormElement);
+  }
+
+  set formElements(x) {
+    this.that.formElements = this.fromEntityList(x);
+  }
+
+  get form() {
+    return this.toEntity("form", WebForm);
+  }
+
+  set form(x) {
+    this.that.form = this.fromObject(x);
+  }
+}
+
+export default WebFormElementGroup;

src/common/subjectModelMapper.js

@@ -129,7 +129,7 @@ export const mapProfile = subjectProfile => {
   }
 };
 
-export const mapProgramEnrolment = (json, subject) => {
+export function mapProgramEnrolment(json, subject) {
   const programEnrolment = new ProgramEnrolment();
   programEnrolment.uuid = json.uuid;
   if (json.enrolmentDateTime) programEnrolment.enrolmentDateTime = new Date(json.enrolmentDateTime);
@@ -149,7 +149,7 @@ export const mapProgramEnrolment = (json, subject) => {
     );
   }
   return programEnrolment;
-};
+}
 
 export const mapRelationships = relationshipList => {
   if (relationshipList) {

src/dataEntryApp/components/CodedFormElement.js

@@ -58,9 +58,8 @@ export const CodedFormElement = ({
       <FormGroup>
         <Box display="flex" flexWrap="wrap" alignContent="flex-start">
           {items.map(item => (
-            <Box>
+            <Box key={item.uuid}>
               <FormControlLabel
-                key={item.uuid}
                 control={
                   multiSelect ? (
                     <Checkbox

src/dataEntryApp/components/FormElement.js

@@ -13,8 +13,8 @@ import MediaFormElement from "./MediaFormElement";
 import PhoneNumberFormElement from "./PhoneNumberFormElement";
 import LocationFormElement from "./LocationFormElement";
 import LandingSubjectFormElement from "./LandingSubjectFormElement";
-// import QuestionGroupFormElement from "./QuestionGroupFormElement";
-import { isNil } from "lodash";
+import QuestionGroupFormElement from "./QuestionGroupFormElement";
+import { RepeatableQuestionGroupElement } from "./RepeatableQuestionGroupElement";
 
 const div = () => <div />;
 
@@ -37,8 +37,9 @@ const elements = {
   Id: TextFormElement,
   PhoneNumber: PhoneNumberFormElement,
   Subject: LandingSubjectFormElement,
-  Location: LocationFormElement
-  // QuestionGroup: QuestionGroupFormElement
+  Location: LocationFormElement,
+  QuestionGroup: QuestionGroupFormElement,
+  RepeatableQuestionGroup: RepeatableQuestionGroupElement
 };
 
 export const FormElement = ({
@@ -50,12 +51,10 @@ export const FormElement = ({
   uuid,
   feIndex,
   filteredFormElements,
-  isChildFormElement,
   ignoreLineBreak,
   isGrid,
   updateObs
 }) => {
-  if (!isChildFormElement && !isNil(formElement.groupUuid)) return null;
   const type = formElement.getType();
   if (type === Concept.dataType.Id) {
     formElement.keyValues = [
@@ -64,6 +63,7 @@ export const FormElement = ({
     ];
     formElement.mandatory = false;
   }
+
   const props = {
     formElement,
     value,

src/dataEntryApp/components/FormElementGroup.js

@@ -2,6 +2,7 @@ import { get } from "lodash";
 import React from "react";
 import { LineBreak } from "../../common/components/utils";
 import { FormElement } from "./FormElement";
+import { nestedFormElements } from "../services/FormElementService";
 
 export const FormElementGroup = ({
   obsHolder,
@@ -12,20 +13,26 @@ export const FormElementGroup = ({
   entity,
   renderChildren
 }) => {
+  const nestedElements = nestedFormElements(filteredFormElements);
   return (
     <div>
       <LineBreak num={1} />
       {children && renderChildren ? children : ""}
 
-      {filteredFormElements.map((fe, index) => {
+      {nestedElements.map((fe, index) => {
         const observation = obsHolder.findObservation(fe.concept);
-        const observationValue = observation
-          ? observation.concept.isDurationConcept()
-            ? get(observation, "valueJSON")
-            : observation.concept.isIdConcept()
-            ? get(observation, "valueJSON.value")
-            : get(observation, "valueJSON.answer")
-          : null;
+        let observationValue;
+        if (observation) {
+          if (observation.concept.isDurationConcept()) {
+            observationValue = get(observation, "valueJSON");
+          } else if (observation.concept.isIdConcept()) {
+            observationValue = get(observation, "valueJSON.value");
+          } else {
+            observationValue = get(observation, "valueJSON.answer");
+          }
+        } else {
+          observationValue = null;
+        }
         return (
           <FormElement
             key={fe.uuid}