(KHP3-4179) Grey out all other options on checkbox when hideExpressio…

…n is true (#91)
openmrs · Oct 17, 2023 · e5541c7 · e5541c7
1 parent c64143d
commit e5541c7
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 14 deletions.
diff --git a/projects/ngx-formentry/src/components/check-box/checkbox.component.html b/projects/ngx-formentry/src/components/check-box/checkbox.component.html
@@ -10,6 +10,7 @@
       [checked]="option.checked"
       (change)="selectOpt(option, $event)"
       [value]="option.value"
+      [disabled]="option.isDisabled"
     />
     <label [for]="i + id" class="cds--checkbox-label">
       <span class="cds--checkbox-label-text">{{ option.label }}</span>

diff --git a/projects/ngx-formentry/src/components/check-box/checkbox.component.ts b/projects/ngx-formentry/src/components/check-box/checkbox.component.ts
@@ -26,6 +26,7 @@ export class CheckboxControlComponent implements OnInit {
       if (this.selected.indexOf(option.value) !== -1) {
         Object.assign(option, { checked: true });
       }
+      option.isDisabled = this.evaluateDisabledExpression(option, option.value);
       return option;
     });
   }
@@ -61,18 +62,46 @@ export class CheckboxControlComponent implements OnInit {
   }
 
   public selectOpt(option, event) {
+    let myValue = option.value;
+
     if (event.target.checked) {
-      this.selected = [...this.selected, option.value];
+      this.selected = [...this.selected, myValue];
     } else {
-      this.selected = this.selected.filter(function (o) {
-        return o !== option.value;
-      });
+      this.selected = this.selected.filter((o) => o !== myValue);
+      myValue = null;
     }
 
+    this.options.forEach((opt) => {
+      opt.isDisabled = this.evaluateDisabledExpression(opt, myValue);
+
+      if (opt.isDisabled && this.selected.includes(opt.value)) {
+        this.selected = this.selected.filter((val) => val !== opt.value);
+        opt.checked = false;
+      } else if (!opt.isDisabled) {
+        opt.checked = this.selected.includes(opt.value);
+      }
+    });
+
+    // Update the component's internal value
     this._value = [...this.selected];
     this.onChange(this._value);
   }
 
+  private evaluateExpression(expression: string, myValue: string): boolean {
+    const matches = expression.match(/^myValue\s*===\s*['"]([^'"]+)['"]$/);
+    if (matches && matches[1]) {
+      return myValue === matches[1];
+    }
+    return false;
+  }
+
+  private evaluateDisabledExpression(option: any, myValue: string): boolean {
+    if (option.disableWhenExpression) {
+      return this.evaluateExpression(option.disableWhenExpression, myValue);
+    }
+    return false;
+  }
+
   private onChange = (change: any) => {};
   private onTouched = () => {};
 }
diff --git a/projects/ngx-formentry/src/form-entry/form-factory/question.factory.ts b/projects/ngx-formentry/src/form-entry/form-factory/question.factory.ts
@@ -211,7 +211,8 @@ export class QuestionFactory {
     question.options = schemaQuestion.questionOptions.answers.map((obj) => {
       return {
         label: obj.label,
-        value: obj.concept
+        value: obj.concept,
+        disableWhenExpression: obj.disableWhenExpression
       };
     });
     question.options.splice(0, 0);

diff --git a/src/app/adult-1.6.json b/src/app/adult-1.6.json
@@ -514,38 +514,43 @@
             {
               "label": "Civil status:",
               "type": "obs",
-              "historicalExpression": "HD.getObject('prevEnc').getValue('a899a9f2-1350-11df-a1f1-0026b9348838')",
               "questionOptions": {
-                "rendering": "select",
+                "rendering": "checkbox",
                 "concept": "a899a9f2-1350-11df-a1f1-0026b9348838",
                 "answers": [
                   {
                     "concept": "a899af10-1350-11df-a1f1-0026b9348838",
-                    "label": "Cohabitating"
+                    "label": "Cohabitating",
+                    "disableWhenExpression":"myValue === 'a899ae34-1350-11df-a1f1-0026b9348838'"
                   },
                   {
                     "concept": "a899ad58-1350-11df-a1f1-0026b9348838",
-                    "label": "Divorced"
+                    "label": "Divorced",
+                    "disableWhenExpression":"myValue === 'a899ae34-1350-11df-a1f1-0026b9348838'"
                   },
                   {
                     "concept": "a8aa76b0-1350-11df-a1f1-0026b9348838",
-                    "label": "Married monogamous"
+                    "label": "Married monogamous",
+                    "disableWhenExpression":"myValue === 'a899ae34-1350-11df-a1f1-0026b9348838'"
                   },
                   {
                     "concept": "a8b03712-1350-11df-a1f1-0026b9348838",
-                    "label": "Married polygamous"
+                    "label": "Married polygamous",
+                    "disableWhenExpression":"myValue === 'a899ae34-1350-11df-a1f1-0026b9348838'"
                   },
                   {
                     "concept": "a899aba0-1350-11df-a1f1-0026b9348838",
-                    "label": "Separated"
+                    "label": "Separated",
+                    "disableWhenExpression":"myValue === 'a899ae34-1350-11df-a1f1-0026b9348838'"
                   },
                   {
                     "concept": "a899ac7c-1350-11df-a1f1-0026b9348838",
-                    "label": "Single"
+                    "label": "Single",
+                    "disableWhenExpression":"myValue === 'a899ae34-1350-11df-a1f1-0026b9348838'"
                   },
                   {
                     "concept": "a899ae34-1350-11df-a1f1-0026b9348838",
-                    "label": "Widowed"
+                    "label": "Other"
                   }
                 ]
               },