BAH-3050 | Add. Provider Based OT View And Date Picker

* BAH-3050 | add provider based OT view and date picker (#591) * BAH-3050 | add provider based OT view and date picker * BAH-3050 | refactored provider toggle without config * BAH-3050 | removed unwanted span * BAH-3050 | fix test failures --------- Co-authored-by: Umair Fayaz <[email protected]> * [Rahul] | BAH-3050 | Add. Unit Test For ProviderView --------- Co-authored-by: kavitha-sundararajan <[email protected]> Co-authored-by: Umair Fayaz <[email protected]> Co-authored-by: Rahul Ramesh <[email protected]>
Bahmni · May 3, 2024 · 385b014 · 385b014
1 parent 7416ef7
commit 385b014
Show file tree

Hide file tree

Showing 7 changed files with 238 additions and 40 deletions.
diff --git a/ui/app/ot/controller/calendarViewController.js b/ui/app/ot/controller/calendarViewController.js
@@ -70,6 +70,7 @@ angular.module('bahmni.ot')
                     return newVar;
                 });
                 $scope.filters.statusList = [];
+                $rootScope.providerToggle = appService.getAppDescriptor().getConfigValue("defaultViewAsSurgeonBased");
                 setAppointmentStatusList($scope.view);
                 return locationService.getAllByTag('Operation Theater').then(function (response) {
                     $scope.locations = response.data.results;
@@ -101,6 +102,11 @@ angular.module('bahmni.ot')
                 $state.view = $scope.view;
             };
 
+            $scope.providerView = function (providerToggle) {
+                $rootScope.providerToggle = providerToggle;
+                $rootScope.$broadcast("event:providerView", providerToggle);
+            };
+
             var getBackGroundHSLColorFor = function (otCalendarColorAttribute) {
                 var hue = otCalendarColorAttribute ? otCalendarColorAttribute.value.toString() : "0";
                 return "hsl(" + hue + ", 100%, 90%)";
@@ -185,6 +191,12 @@ angular.module('bahmni.ot')
                 $scope.viewDate = Bahmni.Common.Util.DateUtil.addDays(date, 1);
                 $state.viewDate = $scope.viewDate;
             };
+
+            $scope.goToSelectedDate = function (date) {
+                $scope.viewDate = date;
+                $state.viewDate = $scope.viewDate;
+            };
+
             $scope.goToCurrentWeek = function () {
                 $scope.weekStartDate = Bahmni.Common.Util.DateUtil.getWeekStartDate(currentDate, $scope.startOfWeekCode);
                 $state.weekStartDate = $scope.weekStartDate;
@@ -211,6 +223,13 @@ angular.module('bahmni.ot')
                 $state.weekEndDate = $scope.weekEndDate;
             };
 
+            $scope.goToSelectedWeek = function (date) {
+                $scope.weekStartDate = date;
+                $scope.weekEndDate = Bahmni.Common.Util.DateUtil.addDays($scope.weekStartDate, 7);
+                $state.weekStartDate = $scope.weekStartDate;
+                $state.weekEndDate = $scope.weekEndDate;
+            };
+
             $scope.$on("event:surgicalAppointmentSelect", function (event, surgicalAppointment, surgicalBlock) {
                 $scope.cancelDisabled = !(surgicalAppointment.status === Bahmni.OT.Constants.scheduled);
                 $scope.moveButtonDisabled = !(surgicalAppointment.status === Bahmni.OT.Constants.scheduled);

diff --git a/ui/app/ot/controller/otCalendarController.js b/ui/app/ot/controller/otCalendarController.js
@@ -1,8 +1,8 @@
 'use strict';
 
 angular.module('bahmni.ot')
-    .controller('otCalendarController', ['$scope', '$q', '$interval', 'spinner', 'locationService', 'surgicalAppointmentService', '$timeout',
-        function ($scope, $q, $interval, spinner, locationService, surgicalAppointmentService, $timeout) {
+    .controller('otCalendarController', ['$scope', '$rootScope', '$q', '$interval', 'spinner', 'locationService', 'surgicalAppointmentService', '$timeout', 'appService', 'surgicalAppointmentHelper',
+        function ($scope, $rootScope, $q, $interval, spinner, locationService, surgicalAppointmentService, $timeout, appService, surgicalAppointmentHelper) {
             var updateCurrentDayTimeline = function () {
                 $scope.currentTimeLineHeight = heightPerMin * Bahmni.Common.Util.DateUtil.diffInMinutes($scope.calendarStartDatetime, new Date());
             };
@@ -27,20 +27,41 @@ angular.module('bahmni.ot')
                 updateBlocksStartDatetimeAndBlocksEndDatetime();
                 $scope.rows = $scope.getRowsForCalendar();
                 return $q.all([locationService.getAllByTag('Operation Theater'),
-                    surgicalAppointmentService.getSurgicalBlocksInDateRange($scope.blocksStartDatetime, $scope.blocksEndDatetime, false, true)]).then(function (response) {
+                    surgicalAppointmentService.getSurgicalBlocksInDateRange($scope.blocksStartDatetime, $scope.blocksEndDatetime, false, true),
+                    surgicalAppointmentService.getSurgeons()]).then(function (response) {
                         $scope.locations = response[0].data.results;
                         $scope.weekDates = $scope.getAllWeekDates();
-                        $scope.surgicalBlocksByLocation = _.map($scope.locations, function (location) {
+                        var surgicalBlocksByLocation = _.map($scope.locations, function (location) {
                             return _.filter(response[1].data.results, function (surgicalBlock) {
                                 return surgicalBlock.location.uuid === location.uuid;
                             });
                         });
+                        var providerNames = appService.getAppDescriptor().getConfigValue("primarySurgeonsForOT");
+                        $scope.surgeons = surgicalAppointmentHelper.filterProvidersByName(providerNames, response[2].data.results);
+                        var surgicalBlocksBySurgeons = _.map($scope.surgeons, function (surgeon) {
+                            return _.filter(response[1].data.results, function (surgicalBlock) {
+                                return surgicalBlock.provider.uuid === surgeon.uuid;
+                            });
+                        });
                         $scope.surgicalBlocksByDate = _.map($scope.weekDates, function (weekDate) {
                             return _.filter(response[1].data.results, function (surgicalBlock) {
                                 return $scope.isSurgicalBlockActiveOnGivenDate(surgicalBlock, weekDate);
                             });
                         });
                         $scope.blockedOtsOfTheWeek = getBlockedOtsOfTheWeek();
+
+                        var setOTView = function (providerToggle) {
+                            $scope.providerToggle = providerToggle;
+                            if (providerToggle) {
+                                $scope.surgicalBlocks = surgicalBlocksBySurgeons;
+                            } else {
+                                $scope.surgicalBlocks = surgicalBlocksByLocation;
+                            }
+                        };
+                        setOTView($rootScope.providerToggle);
+                        $scope.$on("event:providerView", function (event, providerToggle) {
+                            setOTView(providerToggle);
+                        });
                     });
             };
 

diff --git a/ui/app/ot/views/home.html b/ui/app/ot/views/home.html
@@ -60,41 +60,41 @@ <h4>{{'OT_APPOINTMENT_STATUS' | translate}}</h4>
                                              aria-hidden="true"></i> {{::'OT_FILTER_KEY' |translate}}
         </button>
     </p>
-    <p class="calendar-day-navigation" ng-if="weekOrDay === 'day'">
-        <button ng-click="goToPreviousDate(viewDate)"><i class="fa fa-angle-left"></i></button>
-        <button ng-click="goToCurrentDate()">{{'OT_TODAY_KEY' | translate}}</button>
-        <button type="button" ng-click="goToNextDate(viewDate)"><i class="fa fa-angle-right"></i></button>
-    </p>
-    <p class="calendar-day-navigation" ng-if="weekOrDay === 'week'">
-        <button ng-click="goToPreviousWeek()"><i class="fa fa-angle-left"></i></button>
-        <button ng-click="goToCurrentWeek()">{{'OT_THIS_WEEK_KEY' | translate}}</button>
-        <button type="button" ng-click="goToNextWeek()"><i class="fa fa-angle-right"></i></button>
-    </p>
 
     <p class="calendar-current-day" ng-if="weekOrDay === 'day'">
-        {{viewDate | date : 'dd MMM yyyy, EEE'}}
+        <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>
     </p>
 
     <p class="calendar-current-day" ng-if="weekOrDay === 'week'">
-        {{weekStartDate | date : 'dd MMM yyyy, EEE'}} to {{weekEndDate | date : 'dd MMM yyyy, EEE'}}
+        <button ng-click="goToPreviousWeek()"><i class="fa fa-angle-left"></i></button>
+        <span>
+            <label class="calendar-week-label" for="weeklyDate">{{weekStartDate | date : 'dd MMM'}} - {{weekEndDate | date : 'dd MMM'}}</label>
+            <input class="calendar-day-input" id="weeklyDate" type="date" ng-model="viewDate" required ng-change="goToSelectedWeek(viewDate)"/>
+        </span>
+        <button ng-click="goToNextWeek()"><i class="fa fa-angle-right"></i></button>
     </p>
 
-
     <p class="day-btn-container">
+        <button class="calendar-btn-label" ng-if="weekOrDay === 'day'" ng-click="goToCurrentDate()">{{'OT_TODAY_KEY' | translate}}</button>
+        <button class="calendar-btn-label" ng-if="weekOrDay === 'week'" ng-click="goToCurrentWeek()">{{'OT_THIS_WEEK_KEY' | translate}}</button>
         <input type="radio" name="weekOrDay" id="week-button" ng-model="weekOrDay" value="week"
                ng-click="goToCurrentWeek()" required/>
-        <label for="week-button">{{'OT_WEEK_KEY' | translate}}</label>
+        <label class="calendar-btn-label" for="week-button">{{'OT_WEEK_KEY' | translate}}</label>
         <input type="radio" name="weekOrDay" id="day-button" ng-model="weekOrDay" value="day"
                ng-click="goToCurrentDate()" required/>
-        <label for="day-button">{{'OT_DAY_KEY' | translate}}</label>
+        <label class="calendar-btn-label" for="day-button">{{'OT_DAY_KEY' | translate}}</label>
     </p>
     <p class="calendar-btn-container">
+        <input type="checkbox" ng-model="providerToggle" ng-change="providerView(providerToggle)" id="provider-toggle" name="provider-toggle"
+            class="switch-input">
+        <label for="provider-toggle" class="switch-label"> Provider View </label>
         <input type="radio" name="view" id="calendar-button" ng-model="view" value="Calendar"
                ng-click="calendarView()" required/>
-        <label for="calendar-button">{{'OT_CALENDAR_KEY' | translate}}</label>
-
+        <label class="calendar-btn-label" for="calendar-button">{{'OT_CALENDAR_KEY' | translate}}</label>
         <input type="radio" name="view" id="list-view-button" ng-model="view" value="List View" ng-click="listView()" required/>
-        <label for="list-view-button">{{'OT_LIST_VIEW_KEY' | translate}}</label>
+        <label class="calendar-btn-label" for="list-view-button">{{'OT_LIST_VIEW_KEY' | translate}}</label>
     </p>
 </div>
 

diff --git a/ui/app/ot/views/otCalendar.html b/ui/app/ot/views/otCalendar.html
@@ -1,9 +1,12 @@
-<div on-Scroll class="calendar">
+<div on-Scroll class="calendar" ng-switch="providerToggle">
     <!-- Please dont remove or alter the below class name -->
     <div class="calendar-location">
-        <p class="heading-cell" ng-repeat="location in locations">
+        <p ng-switch-default bindonce="locations" class="heading-cell" ng-repeat="location in locations">
             {{location.name}}
         </p>
+        <p ng-switch-when="true" bindonce="surgeons" class="heading-cell" ng-repeat="surgeon in surgeons">
+            {{surgeon.person.display}}
+        </p>
     </div>
     <div class="table-block">
         <!-- Please dont remove or alter the below class name -->
@@ -14,7 +17,7 @@
         </div>
         <div class="ot-block-container">
             <div class="ot-block-wrapper">
-            <div class="ot-block" ng-repeat="(blockIndex, blocks) in surgicalBlocksByLocation">
+            <div class="ot-block" ng-repeat="(blockIndex, blocks) in surgicalBlocks">
                 <div ng-repeat="row in ::rows" class="calendar-cell">
                 </div>
                 <div ng-repeat="block in blocks | surgicalBlock:filterParams">

diff --git a/ui/app/styles/ot/_ot.scss b/ui/app/styles/ot/_ot.scss
@@ -214,19 +214,119 @@ div[ng-app="ot"] {
     }
   }
   .calendar-current-day {
-    margin: auto;
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 0;
-    width: 250px;
+    width: 60%;
     text-align: center;
-    bottom: 0;
-    height: 20px;
     font-weight: 600;
+    span {
+      position: relative;
+    }
+    button {
+      background: #fff;
+      border: 1px solid #95989a;
+      outline: none;
+      padding: 5px 10px;
+      border-radius: 3px;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+      transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+      display: inline-block;
+      color: #000;
+    }
+  }
+  .calendar-week-label {
+    cursor: pointer;
+    position: absolute;
+    background: #fff;
+    left: 16px;
+    padding: 5px;
+    text-align: center;
+    padding-top: 8px;
+    margin-top: 2px;
+    height: 7px;
+  }
+  .calendar-day-input {
+    background: #fff;
+    border: 1px solid #95989a;
+    outline: none;
+    width: 155px;
+    font-size: 14px;
+    padding: 5px;
+    border-radius: 3px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+    display: inline-block;
+    color: #000;
+    margin-left: 10px;
+    margin-right: 10px;
   }
   .calendar-btn-container, .day-btn-container {
-    label {
+    .switch-input {
+      display: none;
+    }
+
+    .switch-label {
+      color: #000;
+      position: relative;
+      display: inline;
+      min-width: 112px;
+      width: 100%;
+      box-sizing: border-box;
+      cursor: pointer;
+      font-weight: 500;
+      text-align: left;
+      padding: 10px 44px 10px 0;
+      &:before, &:after {
+        content: "";
+        position: absolute;
+        margin: 0;
+        outline: 0;
+        top: 50%;
+        -ms-transform: translate(0, -50%);
+        -webkit-transform: translate(0, -50%);
+        transform: translate(0, -50%);
+        -webkit-transition: all 0.3s ease;
+        transition: all 0.3s ease;
+      }
+      &:before {
+        right: 2px;
+        width: 34px;
+        height: 14px;
+        background-color: #9E9E9E;
+        border-radius: 8px;
+      }
+      &:after {
+        right: 17px;
+        width: 20px;
+        height: 20px;
+        background-color: #FAFAFA;
+        border-radius: 50%;
+        box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.14), 0 2px 2px 0 rgba(0, 0, 0, 0.098), 0 1px 5px 0 rgba(0, 0, 0, 0.084);
+      }
+      .toggle--on {
+        display: none;
+      }
+      .toggle--off {
+        display: inline-block;
+      }
+    }
+
+    .switch-input:checked + .switch-label {
+      &:before {
+        background-color: #A5D6A7;
+      }
+      &:after {
+        background-color: #4CAF50;
+        -ms-transform: translate(80%, -50%);
+        -webkit-transform: translate(80%, -50%);
+        transform: translate(80%, -50%);
+      }
+      .toggle--on {
+        display: inline-block;
+      }
+      .toggle--off {
+        display: none;
+      }
+    }
+    .calendar-btn-label {
       -webkit-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.3);
       box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.3);
       padding: 6px 10px;
@@ -241,7 +341,7 @@ div[ng-app="ot"] {
         opacity: 1;
       }
     }
-    input:checked + label {
+    input:checked + .calendar-btn-label {
       background: #d6d6d6;
     }
     input[value = "List View"]:checked + label {
@@ -259,6 +359,7 @@ div[ng-app="ot"] {
   }
   .day-btn-container {
     float: left;
+    margin-left: 10px;
   }
 }
 

diff --git a/ui/app/styles/ot/_otCalendar.scss b/ui/app/styles/ot/_otCalendar.scss
@@ -75,6 +75,7 @@
         position: relative;
         padding-bottom: 20px;
         overflow: hidden;
+        border-right: 0.5px solid lightgrey;
         .surgical-block {
           width: calc(100% - 10px);
           position: absolute;