Introduce support for maintaining question order when rendering

package.json

@@ -26,7 +26,7 @@
     "@angular/platform-browser": "^11.2.14",
     "@angular/platform-browser-dynamic": "^11.2.14",
     "@angular/router": "^11.2.14",
-    "@carbon/styles": "^1.9.0",
+    "@carbon/styles": "1.x",
     "@ng-select/ng-select": "^6.1.0",
     "core-js": "^2.5.4",
     "font-awesome": "^4.7.0",

projects/ngx-formentry/src/form-entry/form-factory/form-node.ts

@@ -27,6 +27,7 @@ export interface RemoveArrayChildNodeFunction {
 
 export abstract class NodeBase {
   public abstract children?: any;
+  public nodeIndex?: Number;
   private _control: AfeFormControl | AfeFormArray | AfeFormGroup;
   private _questionModel: QuestionBase;
   private _form: Form;

projects/ngx-formentry/src/form-entry/form-factory/form.factory.ts

@@ -22,6 +22,7 @@ import { Form } from './form';
 
 @Injectable()
 export class FormFactory {
+  private nodeIndex = 0;
   public hd: any = {
     getValue: () => {
       return 20;
@@ -80,6 +81,8 @@ export class FormFactory {
     } else {
       node = this.createLeafNode(question, parentNode, parentControl, form);
     }
+    node.nodeIndex = this.nodeIndex;
+    this.nodeIndex++;
     return node;
   }
 

projects/ngx-formentry/src/form-entry/form-factory/question.factory.ts

@@ -33,6 +33,7 @@ import { CustomControlQuestion } from '../question-models/custom-control-questio
 export class QuestionFactory {
   dataSources: any = {};
   historicalHelperService: HistoricalHelperService = new HistoricalHelperService();
+  quetionIndex = 0;
   constructor() {}
 
   createQuestionModel(formSchema: any, form?: Form): QuestionBase {
@@ -45,6 +46,7 @@ export class QuestionFactory {
 
   toSelectQuestion(schemaQuestion: any): SelectQuestion {
     const question = new SelectQuestion({ options: [], type: '', key: '' });
+    question.questionIndex = this.quetionIndex;
     question.label = schemaQuestion.label;
     question.prefix = schemaQuestion.prefix;
     question.key = schemaQuestion.id;
@@ -88,6 +90,7 @@ export class QuestionFactory {
       type: '',
       key: ''
     });
+    question.questionIndex = this.quetionIndex;
     question.label = schemaQuestion.label;
     question.prefix = schemaQuestion.prefix;
     question.key = schemaQuestion.id;
@@ -117,6 +120,7 @@ export class QuestionFactory {
       type: '',
       key: ''
     });
+    question.questionIndex = this.quetionIndex;
     question.label = schemaQuestion.label;
     question.prefix = schemaQuestion.prefix;
     question.key = schemaQuestion.id;
@@ -145,6 +149,7 @@ export class QuestionFactory {
       return this.toEncounterDatetimeQuestion(schemaQuestion);
     }
     const question = new DateQuestion({ type: '', key: '' });
+    question.questionIndex = this.quetionIndex;
     question.renderingType = 'date';
     question.validators = this.addValidators(schemaQuestion);
     question.extras = schemaQuestion;
@@ -170,6 +175,7 @@ export class QuestionFactory {
 
   toEncounterDatetimeQuestion(schemaQuestion: any): DateQuestion {
     const question = new DateQuestion({ type: '', key: '' });
+    question.questionIndex = this.quetionIndex;
     question.label = schemaQuestion.label;
     question.prefix = schemaQuestion.prefix;
     question.renderingType = 'date';
@@ -199,6 +205,7 @@ export class QuestionFactory {
 
   toCheckBoxQuestion(schemaQuestion: any): CheckBoxQuestion {
     const question = new CheckBoxQuestion({ options: [], type: '', key: '' });
+    question.questionIndex = this.quetionIndex;
     question.label = schemaQuestion.label;
     question.prefix = schemaQuestion.prefix;
     question.key = schemaQuestion.id;
@@ -234,6 +241,7 @@ export class QuestionFactory {
       type: '',
       key: ''
     });
+    question.questionIndex = this.quetionIndex;
     question.label = schemaQuestion.label;
     question.prefix = schemaQuestion.prefix;
     question.key = schemaQuestion.id;
@@ -271,6 +279,7 @@ export class QuestionFactory {
       type: '',
       key: ''
     });
+    question.questionIndex = this.quetionIndex;
     question.label = schemaQuestion.label;
     question.prefix = schemaQuestion.prefix;
     question.key = schemaQuestion.id;
@@ -301,6 +310,7 @@ export class QuestionFactory {
       type: '',
       key: ''
     });
+    question.questionIndex = this.quetionIndex;
     question.label = schemaQuestion.label;
     question.prefix = schemaQuestion.prefix;
     question.key = schemaQuestion.id;
@@ -325,6 +335,7 @@ export class QuestionFactory {
 
   toFileUploadQuestion(schemaQuestion: any): FileUploadQuestion {
     const question = new FileUploadQuestion({ type: '', key: '' });
+    question.questionIndex = this.quetionIndex;
     question.label = schemaQuestion.label;
     question.prefix = schemaQuestion.prefix;
     question.key = schemaQuestion.id;
@@ -349,6 +360,7 @@ export class QuestionFactory {
 
   toDrugQuestion(schemaQuestion: any): SelectQuestion {
     const question = new SelectQuestion({ options: [], type: '', key: '' });
+    question.questionIndex = this.quetionIndex;
     question.label = schemaQuestion.label;
     question.prefix = schemaQuestion.prefix;
     question.key = schemaQuestion.id;
@@ -372,6 +384,7 @@ export class QuestionFactory {
 
   toProblemQuestion(schemaQuestion: any): SelectQuestion {
     const question = new SelectQuestion({ options: [], type: '', key: '' });
+    question.questionIndex = this.quetionIndex;
     question.label = schemaQuestion.label;
     question.prefix = schemaQuestion.prefix;
     question.key = schemaQuestion.id;
@@ -395,6 +408,7 @@ export class QuestionFactory {
 
   toConceptAnswerSelect(schemaQuestion: any): SelectQuestion {
     const question = new SelectQuestion({ options: [], type: '', key: '' });
+    question.questionIndex = this.quetionIndex;
     question.label = schemaQuestion.label;
     question.prefix = schemaQuestion.prefix;
     question.key = schemaQuestion.id;
@@ -426,6 +440,7 @@ export class QuestionFactory {
       type: '',
       key: ''
     });
+    question.questionIndex = this.quetionIndex;
     question.label = schemaQuestion.label;
     question.prefix = schemaQuestion.prefix;
     question.questions = this.getChildrenQuestionModels(
@@ -458,6 +473,7 @@ export class QuestionFactory {
 
   toGroupQuestion(schemaQuestion: any): QuestionGroup {
     const question = new QuestionGroup({ questions: [], type: '', key: '' });
+    question.questionIndex = this.quetionIndex;
     question.label = schemaQuestion.label;
     question.prefix = schemaQuestion.prefix;
     question.questions = this.getChildrenQuestionModels(
@@ -533,6 +549,7 @@ export class QuestionFactory {
       searchFunction: function () {},
       resolveFunction: function () {}
     });
+    question.questionIndex = this.quetionIndex;
     question.label = schemaQuestion.label;
     question.prefix = schemaQuestion.prefix;
     question.key = schemaQuestion.id;
@@ -564,6 +581,7 @@ export class QuestionFactory {
       searchFunction: function () {},
       resolveFunction: function () {}
     });
+    question.questionIndex = this.quetionIndex;
     question.label = schemaQuestion.label;
     question.prefix = schemaQuestion.prefix;
     question.key = schemaQuestion.id;
@@ -601,6 +619,7 @@ export class QuestionFactory {
       searchFunction: function () {},
       resolveFunction: function () {}
     });
+    question.questionIndex = this.quetionIndex;
     question.label = schemaQuestion.label;
     question.prefix = schemaQuestion.prefix;
     question.key = schemaQuestion.id;
@@ -634,7 +653,7 @@ export class QuestionFactory {
       label: '',
       rendering: ''
     });
-
+    question.questionIndex = this.quetionIndex;
     question.label = schemaQuestion.label;
     question.prefix = schemaQuestion.prefix;
     question.key = schemaQuestion.id;
@@ -710,6 +729,7 @@ export class QuestionFactory {
   }
 
   toModel(schema: any, renderType: string): any {
+    this.quetionIndex++;
     if (renderType === 'ui-select-extended') {
       renderType = schema.type;
     }

projects/ngx-formentry/src/form-entry/question-models/question-base.ts

@@ -41,6 +41,7 @@ export class QuestionBase implements BaseOptions {
   calculateExpression?: string;
   componentConfigs: Array<any>;
   options?: any;
+  questionIndex?: Number;
 
   constructor(options: BaseOptions) {
     this.defaultValue = options.defaultValue;

projects/ngx-formentry/src/form-entry/value-adapters/encounter.adapter.ts

@@ -78,7 +78,6 @@ export class EncounterAdapter implements ValueAdapter {
 
   generateFormPayload(form: Form) {
     const payload = this.generateNodePayload(form.rootNode);
-
     this.setNonFilledPayloadMembers(form, payload);
 
     payload['obs'] = this.obsAdapter.generateFormPayload(form) || [];

projects/ngx-formentry/src/form-entry/value-adapters/obs-adapter-helper.ts

@@ -13,9 +13,12 @@ import { Injectable } from "@angular/core";
 
 @Injectable()
 export class ObsAdapterHelper {
-  constructor() {}
+  formFieldNamespace = 'O3';
+  obsIndex = 0;
+  constructor() { }
 
   findObsAnswerToQuestion(node: NodeBase, obsArray: Array<any>): Array<any> {
+    // Find and Order the obs based on form_namespace_and_path
     const found = [];
 
     if (!this.isObsNode(node)) {
@@ -123,6 +126,7 @@ export class ObsAdapterHelper {
 
   setMultiselectObsNodeValue(node: NodeBase, obs: Array<any>) {
     if (node && obs.length > 0) {
+      obs = obs.sort(this.comparePath);
       node.initialValue = obs;
 
       const obsUuids = [];
@@ -184,15 +188,22 @@ export class ObsAdapterHelper {
   setRepeatingGroupObsNodeValue(node: NodeBase, obs: Array<any>) {
     if (node && obs.length > 0) {
       const arrayNode = node as ArrayNode;
+      obs = obs.sort(this.comparePath);
       arrayNode.initialValue = obs;
-
       for (let i = 0; i < obs.length; i++) {
         const createdNode = arrayNode.createChildNode();
         this.setGroupObsNodeValue(createdNode, [obs[i]]);
       }
     }
   }
 
+  comparePath(first, second) {
+    if (!first || !second) {
+      return -1;
+    }
+    return Number(first.formFieldPath) - Number(second.formFieldPath);
+  }
+
   setNodeValue(node: NodeBase, obs: Array<any>) {
     switch (this.getObsNodeType(node)) {
       case 'unknown':
@@ -351,9 +362,15 @@ export class ObsAdapterHelper {
       obs.uuid = node.initialValue.uuid;
     }
 
-    return obs;
+    return this.addFieldNameSpaceandPath(node, obs);
   }
 
+  addFieldNameSpaceandPath(node, obs) {
+    obs.formFieldNamespace = this.formFieldNamespace;
+    obs.formFieldPath = `${node?.question?.questionIndex}${node?.nodeIndex}${this.obsIndex}`;
+    this.obsIndex++;
+    return obs;
+  }
   getComplexObsPayload(node: NodeBase) {
     let valueField: LeafNode; // essential memmber
     let dateField: LeafNode; // other member to be manipulated by user
@@ -397,6 +414,7 @@ export class ObsAdapterHelper {
         payload.obsDatetime = this.toOpenMrsDateTimeString(
           dateField.control.value
         );
+
         return payload;
       }
     }
@@ -433,14 +451,13 @@ export class ObsAdapterHelper {
     if (Array.isArray(node.control.value)) {
       _.each(node.control.value, (item) => {
         if (existingUuids.indexOf(item) < 0) {
-          payload.push({
+          payload.push(this.addFieldNameSpaceandPath(node, {
             concept: node.question.extras.questionOptions.concept,
             value: item
-          });
+          }));
         }
       });
     }
-
     return payload;
   }
 
@@ -469,7 +486,7 @@ export class ObsAdapterHelper {
       groupPayload.concept =
         nodeAsGroup.question.extras.questionOptions.concept;
     }
-
+    this.addFieldNameSpaceandPath(node, groupPayload);
     return groupPayload;
   }
 
@@ -511,7 +528,6 @@ export class ObsAdapterHelper {
 
   getObsNodePayload(node: NodeBase): Array<any> {
     let payload = [];
-
     switch (this.getObsNodeType(node)) {
       case 'unknown':
         if (node instanceof GroupNode) {
@@ -583,7 +599,6 @@ export class ObsAdapterHelper {
       default:
         break;
     }
-
     return payload;
   }
 

src/app/adult-1.6.json

@@ -331,7 +331,6 @@
 							"type": "obs",
 							"label": "Custom Control Test:",
 							"id": "customCon",
-							"required": "true",
 							"default": "",
 							"questionOptions": {
 								"rendering": "select",
@@ -1536,6 +1535,34 @@
 								}
 							]
 						},
+						{
+							"label": "Is the patient on ART 2?",
+							"required": "true",
+							"id": "onArt2",
+							"historicalExpression": "arrayContainsAny(['a89b7c50-1350-11df-a1f1-0026b9348838','a89b7ae8-1350-11df-a1f1-0026b9348838','a8a00220-1350-11df-a1f1-0026b9348838','a89b77aa-1350-11df-a1f1-0026b9348838'], HD.getObject('prevEnc').getValue('a89b75d4-1350-11df-a1f1-0026b9348838')) ? 'a899b35c-1350-11df-a1f1-0026b9348838' : HD.getObject('prevEnc').getValue('a89ae254-1350-11df-a1f1-0026b9348838')",
+							"questionOptions": {
+								"concept": "a89ae254-1350-11df-a1f1-0026b9348838",
+								"answers": [
+									{
+										"concept": "a899b35c-1350-11df-a1f1-0026b9348838",
+										"label": "Yes"
+									},
+									{
+										"concept": "a899b42e-1350-11df-a1f1-0026b9348838",
+										"label": "No"
+									}
+								],
+								"rendering": "select"
+							},
+							"type": "obs",
+							"validators": [
+								{
+									"type": "js_expression",
+									"failsWhenExpression": "!isEmpty(transferInControl) && transferInControl === 'a899b42e-1350-11df-a1f1-0026b9348838' && !isEmpty(myValue) && arrayContains(['a899b35c-1350-11df-a1f1-0026b9348838'], myValue)",
+									"message": "In the enrollment section, patient not marked as transfer in. Kindly confirm."
+								}
+							]
+						},
 						{
 							"label": "Reason for use:",
 							"id": "reasonUse",

src/app/app.component.ts

@@ -345,7 +345,6 @@ export class AppComponent implements OnInit {
       providerUuid: 'providerUuid',
       utcOffset: '+0300'
     };
-
     if (this.form.valid) {
       this.form.showErrors = false;
       // const payload = this.encAdapter.generateFormPayload(this.form);