BS-207 | Placement of previous alerts near Drugs

ui/app/clinical/consultation/controllers/addTreatmentController.js

@@ -691,10 +691,14 @@ angular.module('bahmni.clinical')
 
             function filterNewAlerts (cdssAlerts, drugMaps) {
                 return cdssAlerts.filter(function (alert) {
-                    if (alert.referenceMedication && alert.referenceMedication.coding && alert.referenceMedication.coding.length > 0) {
+                    if (alert.referenceMedications && alert.referenceMedications.length > 0) {
                         var codes = [];
-                        alert.referenceMedication.coding.forEach(function (item) {
-                            codes.push(item.code);
+                        alert.referenceMedications.forEach(function (referenceMedication) {
+                            if (referenceMedication && referenceMedication.coding && referenceMedication.coding.length > 0) {
+                                referenceMedication.coding.forEach(function (item) {
+                                    codes.push(item.code);
+                                });
+                            }
                         });
 
                         return drugMaps[1] && codes.indexOf(drugMaps[1].trim()) !== -1;
@@ -723,6 +727,7 @@ angular.module('bahmni.clinical')
                             cdssAlerts.then(function (response) {
                                 $scope.cdssAlerts = sortInteractionsByStatus(response.data);
                                 $scope.newAlerts = filterNewAlerts($scope.cdssAlerts, drugMaps);
+                                $rootScope.cdssAlerts = $scope.cdssAlerts;
                             });
                         });
                     }

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,22 @@ angular.module('bahmni.clinical')
                 return _.find(drugOrder.orderAttributes, {name: attributeName});
             };
 
+            $scope.getPreviousDrugAlerts = function (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;
+                                });
+                            });
+                        });
+                    }
+                });
+                return drugOrders;
+            };
+
             init();
         }]);

ui/app/clinical/consultation/directives/newDrugOrders.js

@@ -85,6 +85,23 @@ angular.module('bahmni.clinical')
                 }
                 $scope.bulkDurationData.bulkDuration += stepperValue;
             };
+
+            $scope.getPreviousDrugAlerts = function (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;
+                                });
+                            });
+                        });
+                    }
+                });
+                return drugOrders;
+            };
         };
         return {
             templateUrl: 'consultation/views/newDrugOrders.html',

ui/app/clinical/consultation/views/newDrugOrders.html

@@ -23,14 +23,39 @@ <h2 class="section-title fl">{{ ::'MEDICATION_NEW_PRESCRIPTION' | translate}}</h
         </form>
     </div>
     <ul class="table-mimic">
-        <li id="new-drug-orders" ng-repeat="newTreatment in treatments"
+        <li id="new-drug-orders" ng-repeat="newTreatment in getPreviousDrugAlerts(treatments)"
             ng-class="{highlight : newTreatment.isBeingEdited}">
             <div class="drug-details">
                 <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>
+                            <div ng-repeat="alert in newTreatment.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 {{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>
+                        </div>
                         <div class="dosage-frequency">
                             <span ng-show="newTreatment.getDoseAndUnits()">{{newTreatment.getDoseAndUnits()}} | </span>
                             <span ng-show="newTreatment.getFrequency() && newTreatment.getFrequency().length">{{newTreatment.getFrequency()}} | </span>

ui/app/clinical/consultation/views/treatmentSections/drugOrderHistory.html

@@ -19,10 +19,36 @@
 					<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 getPreviousDrugAlerts(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>
+                                            <div ng-repeat="alert in drugOrder.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 {{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>
+                                        </div>
                                         <div class="dosage-frequency">
                                             <span ng-show="drugOrder.getDoseAndUnits()">{{drugOrder.getDoseAndUnits()}} | </span>
                                             <span ng-show="drugOrder.getFrequency() && drugOrder.getFrequency().length">{{drugOrder.getFrequency()}} | </span> 

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);

ui/app/styles/bahmni-components/_tooltip.scss

@@ -1,25 +1,95 @@
 .ipd-test-results {
-	max-width: 70px;
-	overflow: hidden;
-	white-space: nowrap;
-	display: inline-block;
-	text-overflow: ellipsis;
+  max-width: 70px;
+  overflow: hidden;
+  white-space: nowrap;
+  display: inline-block;
+  text-overflow: ellipsis;
   cursor: pointer;
 }
 
 .tooltip {
-	position: absolute;
-	padding: 5px;
-	margin-left: 70px;
-	margin-top: -28px;
-	background: $clinicalInfoMessageBg;
-	border-radius: 5px;
-	box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2);
-	i {
-		color: $clinicalInfoMessageBg;
-		font-size: 20px;
-		position: absolute;
-		left: -10px;
-		top: 0px;
-	}
-}
+  position: absolute;
+  padding: 5px;
+  margin-left: 70px;
+  margin-top: -28px;
+  background: $clinicalInfoMessageBg;
+  border-radius: 5px;
+  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2);
+  i {
+    color: $clinicalInfoMessageBg;
+    font-size: 20px;
+    position: absolute;
+    left: -10px;
+    top: 0px;
+  }
+}
+
+.cdss-tooltip {
+  background-color: #393939;
+  border-radius: 2px;
+  color: #fff;
+  font-size: 12px;
+  padding: 10px;
+  position: absolute;
+  z-index: 1;
+  top: calc(100% + 10px);
+  left: -70px;
+  max-height: 500px;
+  overflow-y: auto;
+  &:before {
+    content: '';
+    position: absolute;
+    bottom: 100%;
+    left: 10px;
+    margin-left: -5px;
+    width: 0;
+    height: 0;
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+    border-bottom: 5px solid #393939;
+  }
+  > div:not(:nth-child(1)) {
+    margin-bottom: 10px;
+    margin-top: 10px;
+  }
+  > div:not(:last-child){
+    border-bottom: 1px solid #ccc;
+  }
+
+  .cdss-tooltip__status {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 30px;
+    padding: 0px 5px;
+    margin-bottom: 10px;
+    width: fit-content;
+    color: black;
+  }
+  a {
+    margin-left: 5px;
+  }
+  .status-critical {
+    background-color: #ffd6d8;
+    border: 1px solid #ff0000;
+  }
+
+  .status-warning {
+    background-color: #feead6;
+    border: 1px solid #ffa500;
+  }
+
+  .status-info {
+    background-color: #d5f5ff;
+    border: 1px solid #00a3e0;
+  }
+
+  .drug-link {
+    position: relative !important;
+  }
+}
+
+.tooltip-list:not(:first-child) {
+  padding-bottom: 10px;
+  padding-top: 10px;
+}

ui/app/styles/clinical/_diagnosis.scss

@@ -262,6 +262,13 @@
         padding: 8px 7px;
         font-size: 11px;
     }
+    .header-alert-icon {
+        height: auto !important;
+        padding: 0px;
+    }
+    .button-alert {
+        padding: 3px !important;
+    }
 
     .btn-group,
     .small-btn {

ui/app/styles/clinical/treatment/_treatment.scss

@@ -39,6 +39,7 @@
         flex-direction: column;
         flex-wrap: wrap;
         align-items: flex-start;
+        position: relative;
 
         @media screen and (min-width: 540px) and (max-width: 768px) {
             flex-direction: row;
@@ -680,6 +681,10 @@
         clear: both;
     }
 
+    .cdss-icon-medication {
+        font-size: 12px !important;
+    }
+
 }
 
 @import "customDrugOrderHistory";