BAH-3785 | Add. Horizontal Scroll And Dashboard Link In OT (#962)

* Phani | A- 1205706604943139 | OT Module enhancements (#745) * Update fields on Add Surgery page * Add tests * Update CSS for p tag * Add translations in OT Surgical block * Bindu, Phani, Kavitha | removed diagnoses from move surgery payload * Phani | A-1205290605709958 | Fix Date Picker for OT Module and update Red colour in Allergies display control (#796) * Phani | Fix date picker in OT Module and update red text in Allergies * Phani | Update snapshot * Phani | A-1206793791033787 | Fix CSS in OT Module provider view(#870) * Phani, Arjun | Update custom attributes in OT surgical block --------- Co-authored-by: Phanindra-tw <[email protected]>
Bahmni · Jun 13, 2024 · e4f939e · e4f939e
1 parent 1b462cd
commit e4f939e
Show file tree

Hide file tree

Showing 20 changed files with 190 additions and 31 deletions.
diff --git a/...-frontends/src/next-ui/Components/ViewAllergiesAndReactions/ViewAllergiesAndReactions.jsx b/...-frontends/src/next-ui/Components/ViewAllergiesAndReactions/ViewAllergiesAndReactions.jsx
@@ -16,7 +16,8 @@ export const ViewAllergiesAndReactions = (props) => {
             <div>
                 {allergies.map((allergy, index) => {
                     const title = <div key={index}
-                                       className={` allergies-row ${showTextAsAbnormal ? "red-text" : allergy.severity === "severe" ? "red-text": ""}`}>
+                                       className={` allergies-row ${showTextAsAbnormal ? "allergies-red-text" 
+                                           : allergy.severity === "severe" ? "allergies-red-text": ""}`}>
                         <div>{allergy.allergen}</div>
                         <div>{allergy.reactions.join(", ")}</div>
                         <div className={"capitalize"}>{allergy.severity}</div>

diff --git a/...frontends/src/next-ui/Components/ViewAllergiesAndReactions/ViewAllergiesAndReactions.scss b/...frontends/src/next-ui/Components/ViewAllergiesAndReactions/ViewAllergiesAndReactions.scss
@@ -21,6 +21,9 @@
     min-width: 20px;
   }
 }
+.allergies-red-text{
+  color: red
+}
 .bx--accordion__content{
   padding: 0;
 }

diff --git a/...omponents/ViewAllergiesAndReactions/__snapshots__/ViewAllergiesAndReactions.spec.jsx.snap b/...omponents/ViewAllergiesAndReactions/__snapshots__/ViewAllergiesAndReactions.spec.jsx.snap
@@ -51,7 +51,7 @@ exports[`ViewAllergiesAndReactions should render ViewAllergiesAndReactions compo
               dir="auto"
             >
               <div
-                class=" allergies-row red-text"
+                class=" allergies-row allergies-red-text"
               >
                 <div>
                   Bee

diff --git a/ui/app/i18n/ot/locale_en.json b/ui/app/i18n/ot/locale_en.json
@@ -103,7 +103,8 @@
     "PATIENT_ATTRIBUTE_PATIENT_NAME": "Patient Name",
     "PERSON_ATTRIBUTE_PATIENT_AGE":"Patient Age",
     "OT_SURGICAL_BLOCK_START_TIME":"Start Time",
-    "OT_SURGICAL_APPOINTMENT_EST_TIME":"Est Time",
+    "OT_SURGICAL_APPOINTMENT_PATIENT_WEIGHT":"Weight (Kg)",
+    "OT_SURGICAL_APPOINTMENT_PRIMARY_DIAGNOSIS":"Primary Diagnosis",
     "OT_SURGICAL_BLOCK_LOCATION_NAME": "OT#",
     "OT_PROVIDER_SURGEON": "Surgeon",
     "OT_SURGICAL_APPOINTMENT_STATUS_CHANGE_NOTES": "Status Change Notes",

diff --git a/ui/app/ot/directives/onHorizontalScroll.js b/ui/app/ot/directives/onHorizontalScroll.js
@@ -0,0 +1,15 @@
+'use strict';
+
+angular.module("bahmni.ot")
+    .directive("onHorizontalScroll", [function () {
+        var link = function (scope, element, attrs) {
+            var divTag = document.getElementsByClassName(attrs.onHorizontalScroll)[0];
+            element.on('scroll', function () {
+                divTag.scrollLeft = element[0].scrollLeft;
+            });
+        };
+        return {
+            restrict: "A",
+            link: link
+        };
+    }]);
diff --git a/ui/app/ot/directives/otCalendarSurgicalAppointment.js b/ui/app/ot/directives/otCalendarSurgicalAppointment.js
@@ -1,9 +1,15 @@
 'use strict';
 
 angular.module('bahmni.ot')
-    .directive('otCalendarSurgicalAppointment', ['surgicalAppointmentHelper', function (surgicalAppointmentHelper) {
+    .directive('otCalendarSurgicalAppointment', ['surgicalAppointmentHelper', 'appService', '$window', function (surgicalAppointmentHelper, appService, $window) {
         var link = function ($scope) {
             $scope.attributes = surgicalAppointmentHelper.getSurgicalAttributes($scope.surgicalAppointment);
+            var patientUrls = appService.getAppDescriptor().getConfigValue("patientDashboardUrl");
+            $scope.patientDashboardUrl = patientUrls && patientUrls.link && appService.getAppDescriptor().formatUrl(patientUrls.link, {'patientUuid': $scope.surgicalAppointment.patient.uuid});
+            $scope.goToForwardUrl = function ($event) {
+                $window.open($scope.patientDashboardUrl);
+                $event.stopPropagation();
+            };
 
             var hasAppointmentStatusInFilteredStatusList = function () {
                 if (_.isEmpty($scope.filterParams.statusList)) {

diff --git a/ui/app/ot/directives/otCalendarSurgicalBlock.js b/ui/app/ot/directives/otCalendarSurgicalBlock.js
@@ -96,6 +96,8 @@ angular.module('bahmni.ot')
                         getCalendarEndDateTime($scope.viewDate) < surgicalAppointment.derivedAttributes.expectedEndDatetime
                             ? getCalendarEndDateTime($scope.viewDate) : surgicalAppointment.derivedAttributes.expectedEndDatetime
                     );
+                    surgicalAppointment.primaryDiagnosis = new Bahmni.OT.SurgicalBlockMapper().mapPrimaryDiagnoses(surgicalAppointment.patientObservations);
+
                     nextAppointmentStartDatetime = surgicalAppointment.derivedAttributes.expectedEndDatetime;
                     return surgicalAppointment;
                 });

diff --git a/ui/app/ot/helpers/surgicalAppointmentHelper.js b/ui/app/ot/helpers/surgicalAppointmentHelper.js
@@ -91,7 +91,7 @@ angular.module('bahmni.ot')
                 ['notes', "OT_SURGICAL_APPOINTMENT_NOTES"], ['Status', "OT_SURGICAL_APPOINTMENT_STATUS"], ['Day', "OT_SURGICAL_BLOCK_START_DAY"],
                 ['Date', "OT_SURGICAL_BLOCK_START_DATE"], ['Identifier', "PATIENT_ATTRIBUTE_IDENTIFIER"],
                 ['Patient Name', "PATIENT_ATTRIBUTE_PATIENT_NAME"], ['Patient Age', "PERSON_ATTRIBUTE_PATIENT_AGE"],
-                ['Start Time', "OT_SURGICAL_BLOCK_START_TIME"], ['Est Time', "OT_SURGICAL_APPOINTMENT_EST_TIME"],
+                ['Start Time', "OT_SURGICAL_BLOCK_START_TIME"], ['Est Time', "OT_SURGICAL_APPOINTMENT_ESTIMATED_TIME"],
                 ['Actual Time', "OT_SURGICAL_APPOINTMENT_ACTUAL_TIME"], ['OT#', "OT_SURGICAL_BLOCK_LOCATION_NAME"],
                 ['Surgeon', "OT_PROVIDER_SURGEON"], ['Status Change Notes', "OT_SURGICAL_APPOINTMENT_STATUS_CHANGE_NOTES"],
                 ['Bed Location', "OT_SURGICAL_APPOINTMENT_BED_LOCATION"],

diff --git a/ui/app/ot/index.html b/ui/app/ot/index.html
@@ -266,6 +266,7 @@
     <script src="directives/stringToNumber.js"></script>
     <script src="directives/listView.js"></script>
     <script src="directives/onScroll.js"></script>
+    <script src="directives/onHorizontalScroll.js"></script>
 
     <script src="mappers/SurgicalBlockMapper.js"></script>
 

diff --git a/ui/app/ot/mappers/SurgicalBlockMapper.js b/ui/app/ot/mappers/SurgicalBlockMapper.js
@@ -156,4 +156,6 @@ Bahmni.OT.SurgicalBlockMapper = function () {
         });
         return attributes;
     };
+
+    this.mapPrimaryDiagnoses = mapPrimaryDiagnoses;
 };
diff --git a/ui/app/ot/views/calendarSurgicalAppointment.html b/ui/app/ot/views/calendarSurgicalAppointment.html
@@ -2,15 +2,17 @@
      ng-style="{ height: height + 'px', background : backgroundColor.color, borderColor : backgroundColor.borderColor }"
      tabindex="1" ng-click="selectSurgicalAppointment($event)" class="surgical-block-appointment"
      title=" {{'OT_PATIENT' | translate}}: {{patient}}<br/> {{'OT_SURGICAL_BLOCK_DIALOG_LOCATION' | translate}}: {{operationTheatre}}<br/> {{'OT_SURGICAL_BLOCK_DIALOG_SURGEON' | translate}}: {{$parent.surgicalBlock.provider.person.display}}">
-    <div ng-if="weekOrDay === 'day'" class="collapse">
-        <p class="surgicalblock-patientname"> {{patient}}  <i ng-show="surgicalAppointment.status === 'COMPLETED'" class="fa fa-check" aria-hidden="true"></i> </p>
-        <p ng-if="surgicalAppointment.derivedAttributes.expectedStartDatetime"> Est Time: {{surgicalAppointment.derivedAttributes.expectedStartDatetime | bahmniTime}} - {{surgicalAppointment.derivedAttributes.expectedEndDatetime | bahmniTime}}</p>
-        <p ng-if="attributes.procedure"> Procedure - {{attributes.procedure}} </p>
-        <p ng-if="attributes.anaesthetist"> Anaesthetist - {{attributes.anaesthetist}} </p>
-        <p ng-if="attributes.notes"> Notes - {{attributes.notes}} </p>
-        <p ng-if="surgicalAppointment.actualStartDatetime"><br> Actual Time: {{surgicalAppointment.actualStartDatetime | bahmniTime}} - {{surgicalAppointment.actualEndDatetime | bahmniTime}}</p>
+    <div ng-if="weekOrDay === 'day'" class="collapse ot-day-text">
+        <p class="surgicalblock-patientname" ng-click="goToForwardUrl($event)"> {{patient}}  <i ng-show="surgicalAppointment.status === 'COMPLETED'" class="fa fa-check" aria-hidden="true"></i> </p>
+        <p ng-if="attributes.patientWeight"> {{'OT_SURGICAL_APPOINTMENT_PATIENT_WEIGHT' | translate}} - {{attributes.patientWeight}}</p>
+        <p ng-if="attributes.estTimeHours || attributes.estTimeMinutes"> {{ 'OT_SURGICAL_APPOINTMENT_ESTIMATED_TIME'| translate}} - {{attributes.estTimeHours || 0 }} hrs(s): {{attributes.estTimeMinutes || 0}} min(s) </p>
+        <p ng-if="surgicalAppointment.primaryDiagnosis"> {{ 'OT_SURGICAL_APPOINTMENT_PRIMARY_DIAGNOSIS' | translate}}  - {{surgicalAppointment.primaryDiagnosis}} </p>
+        <p ng-if="attributes.procedure"> {{ 'OT_SURGICAL_APPOINTMENT_PROCEDURE' | translate}} - {{attributes.procedure}} </p>
+        <p ng-if="attributes.anaesthetist"> {{ 'OT_SURGICAL_APPOINTMENT_ANAESTHETIST'| translate}} - {{attributes.anaesthetist}} </p>
+        <p ng-if="attributes.notes"> {{ 'OT_SURGICAL_APPOINTMENT_NOTES'| translate}} - {{attributes.notes}} </p>
+        <p ng-if="surgicalAppointment.actualStartDatetime"><br> {{'OT_SURGICAL_APPOINTMENT_ACTUAL_TIME' | translate}} - {{surgicalAppointment.actualStartDatetime | bahmniTime}} - {{surgicalAppointment.actualEndDatetime | bahmniTime}}</p>
     </div>
-    <div ng-if="weekOrDay === 'week'" class="collapse">
+    <div ng-if="weekOrDay === 'week'" class="collapse ot-text">
         <p><i ng-show="surgicalAppointment.status === 'COMPLETED'" class="fa fa-check" aria-hidden="true"></i></p>
         <p class="surgicalblock-patientname"> {{patient}}</p>
         <p class="surgicalblock-ot"> {{operationTheatre}}</p>

diff --git a/ui/app/ot/views/home.html b/ui/app/ot/views/home.html
@@ -71,7 +71,7 @@ <h4>{{'OT_APPOINTMENT_STATUS' | translate}}</h4>
         <button type="button" ng-click="goToNextWeek()"><i class="fa fa-angle-right"></i></button>
     </p>
 
-    <p class="calendar-current-day" ng-if="weekOrDay === 'day'">
+    <p class="calendar-current-day" ng-show="weekOrDay === 'day'">
         <button ng-click="goToPreviousDate(viewDate)"><i class="fa fa-angle-left"></i></button>
         <input class="calendar-day-input" type="date" ng-model="viewDate" required ng-change="goToSelectedDate(viewDate)"/>
         <button ng-click="goToNextDate(viewDate)"><i class="fa fa-angle-right"></i></button>

diff --git a/ui/app/ot/views/otCalendar.html b/ui/app/ot/views/otCalendar.html
@@ -11,8 +11,7 @@
             </div>
             <span ng-click="openDeletePopup()"><i class="fa fa-trash-o" aria-hidden="true"></i></span>
         </div>
-        <hr/>
-        <div style="display: flex;">
+        <div class="provider-location-name" on-horizontal-scroll="ot-block-wrapper">
             <p ng-switch-default bindonce="locations" class="heading-cell" ng-repeat="location in locations">
                 {{location.name}}
             </p>
@@ -24,13 +23,13 @@
 
     <div class="table-block">
         <!-- Please dont remove or alter the below class name -->
-        <div class="calendar-time-container">
+        <div class="calendar-time-container" style="top: 110px">
             <div ng-repeat="row in ::rows" class="calendar-time">
                 {{::row.date | bahmniTime}}
             </div>
         </div>
         <div class="ot-block-container">
-            <div class="ot-block-wrapper">
+            <div class="ot-block-wrapper" on-horizontal-scroll="provider-location-name" style="top: 110px">
             <div class="ot-block" ng-repeat="(blockIndex, blocks) in surgicalBlocks">
                 <div ng-repeat="row in ::rows" class="calendar-cell">
                 </div>

diff --git a/ui/app/ot/views/surgicalAppointment.html b/ui/app/ot/views/surgicalAppointment.html
@@ -55,6 +55,14 @@ <h4 class="appointment-title" ng-show="ngDialogData.sortWeight >= 0 ">{{'EDIT_SU
                     <label class="surgeon-block surgeon-text">{{defaultAttributeTranslations.get(attributeTypeName) | translate}}</label>
                     <textarea class="text-section" placeholder="{{'OT_ENTER_YOUR_NOTES' | translate}}" id="notesID" ng-model="attributes.notes.value" msd-elastic></textarea>
                 </p>
+                <p ng-switch-when="patientWeight">
+                    <label class="surgeon-block surgeon-text">{{'OT_SURGICAL_APPOINTMENT_PATIENT_WEIGHT' | translate}}</label>
+                    <input type="text" id="{{attribute.surgicalAppointmentAttributeType.patientWeight}}" ng-model="attribute.value">
+                </p>
+                <p ng-switch-when="anaesthetist">
+                    <label class="surgeon-block surgeon-text">{{'OT_SURGICAL_APPOINTMENT_ANAESTHETIST' | translate}}</label>
+                    <input type="text" id="{{attribute.surgicalAppointmentAttributeType.anaesthetist}}" ng-model="attribute.value">
+                </p>
                 <p ng-switch-default ng-if="attributeTypeName != 'estTimeMinutes'">
                     <label class="surgeon-block surgeon-text">{{(defaultAttributeTranslations.get(attributeTypeName) | translate) || attribute.surgicalAppointmentAttributeType.name}}</label>
                     <input type="text" id="{{attribute.surgicalAppointmentAttributeType.name}}" ng-model="attribute.value">

diff --git a/ui/app/styles/ot/_ot.scss b/ui/app/styles/ot/_ot.scss
@@ -150,6 +150,7 @@ div[ng-app="ot"] {
           padding: 10px;
           border-radius: 3px;
           position: relative;
+          margin-bottom: 2px;
         }
         > i {
           right: 85px;
@@ -160,6 +161,7 @@ div[ng-app="ot"] {
         select {
           height: 35px;
           width: 273px;
+          margin-bottom: 2px;
         }
       }
 
@@ -182,6 +184,7 @@ div[ng-app="ot"] {
         padding: 10px;
         box-sizing: border-box;
         min-height: 80px;
+        margin-bottom: 2px;
         .text-section {
           overflow: auto !important;
         }

diff --git a/ui/app/styles/ot/_otCalendar.scss b/ui/app/styles/ot/_otCalendar.scss
@@ -25,9 +25,13 @@
       box-sizing: border-box;
       text-align: center;
       float: left;
-      padding: 10px 0;
+      padding: 12px 0;
       border-bottom: 1px solid #ddd;
-      font-family: OpenSansSemiBold;
+      border-top: 1px solid #ddd;
+      font-family: OpenSansSemiBold, serif;
+    }
+    hr{
+      margin-bottom: 0;
     }
   }
   .day-heading{
@@ -58,6 +62,13 @@
       background-color: #EDF5FF;
     }
   }
+  .provider-location-name{
+    display: grid;
+    grid-auto-flow: column;
+    grid-auto-columns: max-content;
+    margin-top: 15px;
+    overflow-x: scroll;
+  }
   .notes-text{
     background-color: #FCF4D6;
     width: calc(100% - 10px);
@@ -101,7 +112,8 @@
         position: absolute;
         display: flex;
         left: 80px;
-        overflow: auto;
+        overflow-x: scroll;
+        overflow-y: auto;
         padding-bottom: 5px;
         top: 95px;
         width: calc(100% - 90px);
@@ -120,7 +132,6 @@
         float: left;
         position: relative;
         padding-bottom: 20px;
-        overflow: hidden;
         border-right: 0.5px solid lightgrey;
         .surgical-block {
           width: calc(100% - 10px);
@@ -289,14 +300,17 @@
     }
     .surgicalblock-patientname {
       font-weight: 600;
-      color: #000;
+      color: #5394fc;
       font-size: 14px;
       padding: 0 10px 3px 1px;
+      cursor: pointer;
     }
-    p {
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
+    .ot-day-text{
+      p {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        padding: 2px 0;
+      }
     }
   }
   .surgicalblock-surgeon-name {

diff --git a/ui/app/styles/ot/_otSurgical.scss b/ui/app/styles/ot/_otSurgical.scss
@@ -64,7 +64,7 @@
             height: 35px;
             display: inline-block;
             border-color: #929699;
-
+            margin-bottom: 2px;
           }
           .start-time {
             display: block;

diff --git a/ui/app/styles/ot/_otWeeklyCalendar.scss b/ui/app/styles/ot/_otWeeklyCalendar.scss
@@ -177,6 +177,11 @@
       padding-right: 20px;
       margin: 2% 0;
     }
+    .ot-text {
+      p{
+        white-space: nowrap;
+      }
+    }
   }
   .surgicalblock-surgeon-name {
     word-break: break-word;

diff --git a/ui/test/unit/ot/directives/otCalendarSurgicalAppointment.spec.js b/ui/test/unit/ot/directives/otCalendarSurgicalAppointment.spec.js
@@ -3,15 +3,29 @@
 describe("otCalendarSurgicalAppointment", function () {
     var simpleHtml = '<ot-calendar-surgical-appointment ' +
         'surgical-appointment="surgicalAppointment" background-color="blockDimensions.color" height-per-min="heightPerMin" filter-params="filterParams"/>';
-    var $compile, element, mockBackend, scope, surgicalAppointment;
+
+    var $compile, window, element, mockBackend, scope, surgicalAppointment, provide, mockAppDescriptor, mockAppService;
 
     beforeEach(module('ngHtml2JsPreprocessor'));
     beforeEach(module('bahmni.ot'));
-    beforeEach(inject(function (_$compile_, $rootScope, $httpBackend) {
+    beforeEach(module('bahmni.ot', function ($provide) {
+        mockAppDescriptor = jasmine.createSpyObj('appDescriptor', ['getConfig','getConfigValue', 'formatUrl']);
+        mockAppDescriptor.getConfigValue.and.returnValue({
+            link: "/bahmni/clinical/#/default/patient/{{patientUuid}}/dashboard"
+        });
+        mockAppDescriptor.formatUrl.and.returnValue("formattedUrl");
+        mockAppService = jasmine.createSpyObj('appService', ['getAppDescriptor']);
+        mockAppService.getAppDescriptor.and.returnValue(mockAppDescriptor);
+        provide = $provide;
+        $provide.value('appService', mockAppService);
+    }));
+    beforeEach(inject(function (_$compile_, $rootScope, $httpBackend, $window) {
         scope = $rootScope.$new();
         $compile = _$compile_;
         mockBackend = $httpBackend;
+        window = $window
     }));
+
     beforeEach(function () {
         surgicalAppointment = {
                 "patient": {uuid: "168eed46-dabe-4b7b-a0d6-a8e4ccc02510", display: "IQ100032 - Sri Rama"},
@@ -69,7 +83,6 @@ describe("otCalendarSurgicalAppointment", function () {
         };
     });
 
-
     it("should set the attributes of the surgical appointment", function () {
         scope.surgicalAppointment = surgicalAppointment;
         scope.backgroundColor = "#FFFFF";