POC-495 (#1685)

* customised toastr for pre-appointment rescheduled appointments * added pre-appointment banner for patients who rescheduled appointments * added customised toastr for predicted patients who rescheduled appointments * POC-495: added customised toastr for predicted patients with rescheduled appointments added customised toastr for predicted patients who rescheduled appointments POC-495: added customised toastr for predicted patients with rescheduled appointments --------- Co-authored-by: Drizzentic <[email protected]>
AMPATH · Nov 30, 2023 · 44f627e · 44f627e
1 parent ecd37da
commit 44f627e
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 1 deletion.
diff --git a/src/app/patient-dashboard/common/patient-reminders/patient-reminder-custom.component.css b/src/app/patient-dashboard/common/patient-reminders/patient-reminder-custom.component.css
@@ -20,3 +20,33 @@
 :host.toast.toast-warning {
   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII=') !important;
 }
+
+/* Custom toast class for ml custom notification type */
+::ng-deep .ngx-toastr-custom-type {
+  position: relative;
+  overflow: hidden;
+  margin: 0 0 6px;
+  padding: 15px 15px 15px 50px;
+  width: 300px;
+  border-radius: 3px 3px 3px 3px;
+  background-position: 15px center;
+  background-repeat: no-repeat;
+  background-size: 24px;
+  box-shadow: 0 0 12px #999999;
+  color: #271e1e;
+  background-color: #ffff00;
+  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=') !important;
+}
+
+/* Additional styles for toastr */
+.ngx-toastr-custom-type .toast-title {
+  font-weight: bold;
+}
+
+.ngx-toastr-custom-type .toast-close-button {
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 8px;
+  cursor: pointer;
+}
diff --git a/src/app/patient-dashboard/common/patient-reminders/patient-reminder.component.css b/src/app/patient-dashboard/common/patient-reminders/patient-reminder.component.css
@@ -1,3 +1,8 @@
 patient-reminders .panel-body {
   padding: 0px !important;
 }
+
+:host.toast.alert-ml {
+  background-color: #ffff00;
+  border-color: #bdaaad;
+}
diff --git a/src/app/patient-dashboard/common/patient-reminders/patient-reminders.component.ts b/src/app/patient-dashboard/common/patient-reminders/patient-reminders.component.ts
@@ -136,7 +136,15 @@ export class PatientRemindersComponent implements OnInit, OnDestroy {
           this.toastrConfig
         );
       }
-
+      if (reminder.type === 'ml') {
+        toast = this.toastrService.show(reminder.message, reminder.title, {
+          extendedTimeOut: 0,
+          timeOut: 0,
+          positionClass: 'toast-bottom-right',
+          closeButton: true,
+          toastClass: 'ngx-toastr-custom-type'
+        });
+      }
       if (reminder.type === 'info') {
         toast = this.toastrService.info(
           reminder.message,

diff --git a/src/app/patient-dashboard/common/patient-reminders/patient-reminders.components.html b/src/app/patient-dashboard/common/patient-reminders/patient-reminders.components.html
@@ -45,4 +45,18 @@
     >
     {{reminder.message}}
   </div>
+  <div
+    *ngIf="reminder.type === 'ml' && reminder.display.banner === true"
+    class="alert alert-danger alert-dismissable"
+    style="padding: 10px !important; margin-bottom: 3px !important"
+  >
+    <a
+      class="close"
+      data-dismiss="alert"
+      aria-label="close"
+      style="right: 0px; !important"
+      >&times;</a
+    >
+    {{reminder.message}}
+  </div>
 </div>