From 3e2bf64daa110d59f0629420aa83405a4715b6fa Mon Sep 17 00:00:00 2001
From: Donald Kibet <chelashawdonald@yahoo.com>
Date: Thu, 5 Oct 2023 16:29:24 +0300
Subject: [PATCH] (enhc) Update alert feature to show when an expression
 evalutes (#87)

---
 .../afe-form-control.ts                       |  1 +
 .../afe-form-group.ts                         |  3 ++
 .../form-renderer.component.html              | 41 +++++++++++++++----
 .../form-renderer.component.scss              |  4 ++
 src/app/adult-1.6.json                        |  4 ++
 5 files changed, 45 insertions(+), 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
index 8a30deaa..15a0e218 100644
--- 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
index 910fc01f..0700b0a6 100644
--- 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
index 4dafc20b..f667c7b4 100644
--- 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
index c9ac51de..30b584a9 100644
--- 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
index a9f13d22..2f3a4edf 100644
--- 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"