(enhc) Update alert feature to show when an expression evalutes (#87)

openmrs · Oct 5, 2023 · 3e2bf64 · 3e2bf64
1 parent 7aeb0f5
commit 3e2bf64
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 8 deletions.
diff --git a/projects/ngx-formentry/src/abstract-controls-extension/afe-form-control.ts b/projects/ngx-formentry/src/abstract-controls-extension/afe-form-control.ts
@@ -147,6 +147,7 @@ class AfeFormControl
     ) {
       this._valueChangeListener(value);
     }
+    this.alerts.length > 0 && this.updateAlert();
   }
 
   setValue(value: any) {

diff --git a/projects/ngx-formentry/src/abstract-controls-extension/afe-form-group.ts b/projects/ngx-formentry/src/abstract-controls-extension/afe-form-group.ts
@@ -112,5 +112,8 @@ export class AfeFormGroup
   }
   setValue(value: any) {
     super.setValue(value);
+    if (this.alerts.length > 0) {
+      this.updateAlert();
+    }
   }
 }
diff --git a/projects/ngx-formentry/src/form-entry/form-renderer/form-renderer.component.html b/projects/ngx-formentry/src/form-entry/form-renderer/form-renderer.component.html
@@ -122,14 +122,6 @@
   </div>
 </div>
 
-<!-- MESSAGES -->
-<div
-  *ngIf="node.control && node.control.alert && node.control.alert !== ''"
-  class="alert alert-warning"
->
-  <a class="close" data-dismiss="alert">&times;</a> {{ node.control.alert }}
-</div>
-
 <!--CONTROLS-->
 
 <div
@@ -394,6 +386,39 @@
     </div>
   </div>
 </div>
+
+<!-- MESSAGES -->
+<label
+  *ngIf="node.control && node.control.alert && node.control.alert !== ''"
+  class="cds--label text-warn"
+  style="display: flex; align-items: center; margin: 0.125rem 0"
+>
+  <svg
+    focusable="false"
+    preserveAspectRatio="xMidYMid meet"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
+    width="12"
+    height="12"
+    viewBox="0 0 32 32"
+    aria-hidden="true"
+  >
+    <path
+      fill="none"
+      d="M16,26a1.5,1.5,0,1,1,1.5-1.5A1.5,1.5,0,0,1,16,26Zm-1.125-5h2.25V12h-2.25Z"
+      data-icon-path="inner-path"
+    ></path>
+    <path
+      d="M16.002,6.1714h-.004L4.6487,27.9966,4.6506,28H27.3494l.0019-.0034ZM14.875,12h2.25v9h-2.25ZM16,26a1.5,1.5,0,1,1,1.5-1.5A1.5,1.5,0,0,1,16,26Z"
+    ></path>
+    <path
+      d="M29,30H3a1,1,0,0,1-.8872-1.4614l13-25a1,1,0,0,1,1.7744,0l13,25A1,1,0,0,1,29,30ZM4.6507,28H27.3493l.002-.0033L16.002,6.1714h-.004L4.6487,27.9967Z"
+    ></path>
+    <title>Warning alt filled</title>
+  </svg>
+  {{ node.control.alert | translate }}
+</label>
+
 <div
   *ngIf="node.question.controlType === 1"
   [hidden]="node.control.hidden"

diff --git a/projects/ngx-formentry/src/form-entry/form-renderer/form-renderer.component.scss b/projects/ngx-formentry/src/form-entry/form-renderer/form-renderer.component.scss
@@ -154,6 +154,10 @@ ng-select.form-control {
 .text-danger {
   color: var(--cds-support-01, #da1e28);
 }
+
+.text-warn {
+  color: #eea616;
+}
 .error {
   margin-bottom: 3rem;
 }

diff --git a/src/app/adult-1.6.json b/src/app/adult-1.6.json
@@ -3909,6 +3909,10 @@
                 "max": "43",
                 "min": "25"
               },
+              "alert": {
+                "alertWhenExpression": "myValue >= 40",
+                "message": "The patient temperature is too high"
+              },
               "type": "obs",
               "validators": [],
               "id": "__yuHJFKyxE"
-Original file line number
+Diff line change
@@ Expand Up / @@ -147,6 +147,7 @@ class AfeFormControl @@
         ) {
           this._valueChangeListener(value);
         }
+        this.alerts.length > 0 && this.updateAlert();
       }
       setValue(value: any) {
@@ Expand Down @@