BS-207 | Placement of previous alerts near Drugs (#683)

* BS-207 | Patrick | add CDSS alert icons and tooltips for previous drug alerts * BS-207 | Patrick | Fix tooltip placement * BS-207 | Patrick | add cdss alert details and link * BS-207 | Patrick | make CDSS alert icon a button * BS-207 | Patrick | fix alert icon button size * BS-207 | Patrick | Refactor previous alert filtering logic * BS-207 | Patrick | Refactor new drug order alert filtering logic * BS-207 | Patrick | remove font size from global icon class * BS-207 | Patrick | Allow multiple cdss alerts in one tooltip * BS-207 | Patrick | move tooltip trigger to button * BS-207 | Patrick | Fix tooltip padding * BS-207 | Patrick | Add directive for CDSS alerts * BS-207 | Patrick | Add watchers for the alerts and treatment changes * BS-207 | Patrick | Add translations for "Dismissed" * BS-207 | Patrick | Add unit tests * BS-207 | Patrick | remove translations for other languages
Bahmni · Nov 1, 2023 · 42a1f9a · 42a1f9a
1 parent ca8cd8e
commit 42a1f9a
Show file tree

Hide file tree

Showing 16 changed files with 660 additions and 356 deletions.
diff --git a/ui/app/clinical/consultation/controllers/addTreatmentController.js b/ui/app/clinical/consultation/controllers/addTreatmentController.js
@@ -737,6 +737,7 @@ angular.module('bahmni.clinical')
                             cdssAlerts.then(function (response) {
                                 $scope.cdssAlerts = sortInteractionsByStatus(response.data);
                                 $scope.newAlerts = filterNewAlerts($scope.cdssAlerts, drugMaps);
+                                $rootScope.cdssAlerts = $scope.cdssAlerts;
                             });
                         });
                     }

diff --git a/ui/app/clinical/consultation/controllers/drugOrderHistoryController.js b/ui/app/clinical/consultation/controllers/drugOrderHistoryController.js
@@ -187,7 +187,7 @@ angular.module('bahmni.clinical')
 
             $scope.updateAllOrderAttributesByName = function (orderAttribute, drugOrderGroup) {
                 drugOrderGroup[orderAttribute.name] = drugOrderGroup[orderAttribute.name] || {};
-                drugOrderGroup[orderAttribute.name].selected = drugOrderGroup[orderAttribute.name].selected ? false : true;
+                drugOrderGroup[orderAttribute.name].selected = !drugOrderGroup[orderAttribute.name].selected;
 
                 drugOrderGroup.drugOrders.forEach(function (drugOrder) {
                     var selectedOrderAttribute = getAttribute(drugOrder, orderAttribute.name);
@@ -230,5 +230,43 @@ angular.module('bahmni.clinical')
                 return _.find(drugOrder.orderAttributes, {name: attributeName});
             };
 
+            var getPreviousDrugAlerts = function () {
+                var drugOrderGroups = $scope.consultation.drugOrderGroups;
+                if (!drugOrderGroups || (drugOrderGroups && !drugOrderGroups.length > 0)) return;
+                drugOrderGroups.forEach(function (order) {
+                    var drugOrders = order.drugOrders;
+                    drugOrders && drugOrders.forEach(function (drugOrder) {
+                        var drug = drugOrder.drug;
+                        var cdssAlerts = $rootScope.cdssAlerts;
+                        if (cdssAlerts) {
+                            drugOrder.alerts = cdssAlerts.filter(function (
+                                cdssAlert
+                                ) {
+                                return cdssAlert.referenceMedications.some(
+                                    function (referenceMedication) {
+                                        return referenceMedication.coding.some(
+                                    function (coding) {
+                                        return (
+                                            drug.uuid === coding.code ||
+                                        drug.name === coding.display
+                                        );
+                                    }
+                                  );
+                                    }
+                                );
+                            });
+                        }
+                    });
+                });
+            };
+
+            var cdssAlertsWatcher = $rootScope.$watch('cdssAlerts', function () {
+                getPreviousDrugAlerts();
+            });
+
+            $scope.$on('$destroy', function () {
+                cdssAlertsWatcher();
+            });
+
             init();
         }]);
diff --git a/ui/app/clinical/consultation/directives/cdssPopover.js b/ui/app/clinical/consultation/directives/cdssPopover.js
@@ -0,0 +1,13 @@
+"use strict";
+
+angular.module('bahmni.clinical')
+    .directive('cdssPopover', [function () {
+        return {
+            restrict: 'E',
+            templateUrl: './consultation/views/cdssPopover.html',
+            scope: {
+                alerts: '='
+            }
+        };
+    }]
+);
diff --git a/ui/app/clinical/consultation/directives/newDrugOrders.js b/ui/app/clinical/consultation/directives/newDrugOrders.js
@@ -85,6 +85,43 @@ angular.module('bahmni.clinical')
                 }
                 $scope.bulkDurationData.bulkDuration += stepperValue;
             };
+
+            var getPreviousDrugAlerts = function () {
+                var treatments = $scope.treatments;
+                treatments.forEach(function (drugOrder) {
+                    var drug = drugOrder.drug;
+                    var cdssAlerts = $rootScope.cdssAlerts;
+                    if (!cdssAlerts) return;
+                    drugOrder.alerts = cdssAlerts.filter(function (cdssAlert) {
+                        return cdssAlert.referenceMedications.some(function (
+                        referenceMedication
+                      ) {
+                            return referenceMedication.coding.some(function (
+                          coding
+                        ) {
+                                return (
+                            drug.uuid === coding.code ||
+                            drug.name === coding.display
+                                );
+                            });
+                        });
+                    });
+                });
+            };
+
+            var cdssAlertsWatcher = $rootScope.$watch('cdssAlerts', function () {
+                getPreviousDrugAlerts();
+            });
+
+            $scope.$watch('treatments', function (newValue, oldValue) {
+                if ((newValue && newValue) && newValue.length !== oldValue.length) {
+                    getPreviousDrugAlerts();
+                }
+            }, true);
+
+            $scope.$on('$destroy', function () {
+                cdssAlertsWatcher();
+            });
         };
         return {
             templateUrl: 'consultation/views/newDrugOrders.html',

diff --git a/ui/app/clinical/consultation/views/cdssPopover.html b/ui/app/clinical/consultation/views/cdssPopover.html
@@ -0,0 +1,15 @@
+<div ng-repeat="alert in alerts" class="tooltip-list">
+  <div
+    class="cdss-tooltip__status"
+    ng-class="{'status-critical': alert.indicator == 'critical','status-warning' : alert.indicator == 'warning', 'status-info': alert.indicator == 'info'}"
+  >
+    {{ "DISMISSED_KEY" | translate}} {{alert.indicator}}
+  </div>
+  <p>{{alert.summary}}</p>
+  <p>
+    <span> {{alert.detail}} </span>
+    <a href="{{alert.source.url}}" target="_blank" ng-show="alert.source.url">
+      <i class="fa fa-question-circle drug-link"></i>
+    </a>
+  </p>
+</div>
diff --git a/ui/app/clinical/consultation/views/newDrugOrders.html b/ui/app/clinical/consultation/views/newDrugOrders.html
@@ -29,8 +29,16 @@ <h2 class="section-title fl">{{ ::'MEDICATION_NEW_PRESCRIPTION' | translate}}</h
                 <div class="form">
                     <input type="checkbox" ng-show="showBulkChangeToggle" ng-model="newTreatment.durationUpdateFlag"
                            class="treatmentChkBox"/>
-                    <div class="drug-dosage">
-                        <strong class="drug-name">{{newTreatment.getDisplayName()}}</strong>
+                    <div class="drug-dosage" bm-pop-over autoclose="true">
+                        <strong class="drug-name">
+                            <button ng-if="newTreatment.alerts && newTreatment.alerts.length > 0" class="cdss-alert-icon" bm-pop-over-trigger>
+                                <i class="fa fa-exclamation-triangle cdss-icon-medication"></i>
+                            </button>
+                            {{newTreatment.getDisplayName()}}
+                        </strong>
+                        <div class="tooltip cdss-tooltip" bm-pop-over-target>
+                            <cdss-popover alerts="newTreatment.alerts"></cdss-popover>
+                        </div>
                         <div class="dosage-frequency">
                             <span ng-show="newTreatment.getDoseAndUnits()">{{newTreatment.getDoseAndUnits()}} | </span>
                             <span ng-show="newTreatment.getFrequency() && newTreatment.getFrequency().length">{{newTreatment.getFrequency()}} | </span>

diff --git a/ui/app/clinical/consultation/views/treatmentSections/drugOrderHistory.html b/ui/app/clinical/consultation/views/treatmentSections/drugOrderHistory.html
@@ -19,10 +19,20 @@
 					<div class="inpage-tab-content">
                         <p ng-if="!drugOrderGroup.drugOrders.length" class="placeholder-text">{{ ::'MEDICATION_NO_RECENT_TREATMENT' | translate }}</p>
                         <ul class="table-mimic">
-							<li id="ordered-drug-orders" ng-repeat="drugOrder in drugOrderGroup.drugOrders" ng-class="{'active-drug' : drugOrder.isActive(), 'highlight' : drugOrder.isBeingEdited, 'scheduled-drug': drugOrder.isScheduled()}">
+							<li id="ordered-drug-orders" bm-pop-over autoclose="true" ng-repeat="drugOrder in drugOrderGroup.drugOrders" ng-class="{'active-drug' : drugOrder.isActive(), 'highlight' : drugOrder.isBeingEdited, 'scheduled-drug': drugOrder.isScheduled()}">
                                 <div class="drug-details" ng-class="{'strike-through': drugOrder.isDiscontinuedOrStopped()}">
-                                    <div class="drug-dosage">
-                                        <strong class="drug-name">{{drugOrder.getDisplayName()}}</strong>
+                                    <div class="drug-dosage relative">
+                                        <strong class="drug-name popover-trigger">
+                                            <button ng-if="drugOrder.alerts && drugOrder.alerts.length > 0" class="cdss-alert-icon" bm-pop-over-trigger>
+                                                <i class="fa cdss-icon-medication fa-exclamation-triangle">
+                                                </i>
+                                            </button>
+                                            {{drugOrder.getDisplayName()}}
+                                        </strong>
+                                        <div class="tooltip cdss-tooltip" bm-pop-over-target>
+                                            <cdss-popover alerts="drugOrder.alerts"></cdss-popover>
+                                        </div>
+
                                         <div class="dosage-frequency">
                                             <span ng-show="drugOrder.getDoseAndUnits()">{{drugOrder.getDoseAndUnits()}} | </span>
                                             <span ng-show="drugOrder.getFrequency() && drugOrder.getFrequency().length">{{drugOrder.getFrequency()}} | </span> 

diff --git a/ui/app/clinical/index.html b/ui/app/clinical/index.html
@@ -408,6 +408,7 @@ <h3 class="close" ng-click="closeTeleConsultation()">
         <script src="consultation/directives/buttonsRadio.js"></script>
         <script src="consultation/directives/alertOnExit.js"></script>
         <script src="consultation/directives/orderSelector.js"></script>
+        <script src="consultation/directives/cdssPopover.js"></script>
         <script src="consultation/directives/diagnosisAutoComplete.js"></script>
         <script src="consultation/directives/newDrugOrders.js"></script>
         <script src="consultation/directives/newOrderGroup.js"></script>

diff --git a/ui/app/common/ui-helper/directives/popOver.js b/ui/app/common/ui-helper/directives/popOver.js
@@ -31,6 +31,7 @@ angular.module('bahmni.common.uiHelper')
                         hideTargetElements(0);
                         $(document).off('click', docClickHandler);
                     } else {
+                        $('.tooltip').hide();
                         $scope.isTargetOpen = true;
                         showTargetElements();
                         $(document).on('click', docClickHandler);