Phani, Bindu | BAH-3117 | Ability to add, display and update Notes section in OT Scheduling

ui/app/i18n/ot/locale_en.json

@@ -14,6 +14,7 @@
     "DATE": "Date",
     "DISCARD": "Discard",
     "SAVE": "Save",
+    "UPDATE": "Update",
 
     "ADD_SURGICAL_APPOINTMENT": "Add Surgery",
     "EDIT_SURGICAL_APPOINTMENT": "Edit Surgery",
@@ -114,5 +115,11 @@
     "ACTUAL_TIME_ADDED_TO_KEY":"Actual time added to ",
     "OT_SURGICAL_BLOCK_ACROSS_MULTIPLE_DAYS_CONFIRMATION_MESSAGE": "Are you sure you want to create a surgical block across days?",
     "MOVING_KEY": "Moving",
-    "FROM_KEY": "from"
+    "FROM_KEY": "from",
+    "EMPTY_NOTES_ERROR": "Note cannot be empty",
+    "NOTE_TITLE": "Note",
+    "FROM": "From",
+    "TO": "To",
+    "FROM_DATE_BEFORE_TO_DATE_ERROR": "From date should be before To date.",
+    "DATE_OUT_OF_RANGE_ERROR": "Please select date within the valid range"
 }

ui/app/ot/constants.js

@@ -17,7 +17,8 @@ Bahmni.OT.Constants = (function () {
         defaultCalendarStartTime: '00:00',
         weekDays: {"Monday": 1, "Tuesday": 2, "Wednesday": 3, "Thursday": 4, "Friday": 5, "Saturday": 6, "Sunday": 7 },
         defaultWeekStartDayName: 'Sunday',
-        providerSurgicalAttributeFormat: 'org.openmrs.Provider'
+        providerSurgicalAttributeFormat: 'org.openmrs.Provider',
+        notesUrl: RESTWS_V1 + '/note'
     };
 })();
 

ui/app/ot/controller/otCalendarController.js

@@ -1,17 +1,146 @@
 'use strict';
 
 angular.module('bahmni.ot')
-    .controller('otCalendarController', ['$scope', '$rootScope', '$q', '$interval', 'spinner', 'locationService', 'surgicalAppointmentService', '$timeout', 'appService', 'surgicalAppointmentHelper',
-        function ($scope, $rootScope, $q, $interval, spinner, locationService, surgicalAppointmentService, $timeout, appService, surgicalAppointmentHelper) {
+    .controller('otCalendarController', ['$scope', '$rootScope', '$q', '$interval', '$state', 'spinner', 'locationService', 'surgicalAppointmentService', '$timeout', 'appService', 'surgicalAppointmentHelper',
+        function ($scope, $rootScope, $q, $interval, $state, spinner, locationService, surgicalAppointmentService, $timeout, appService, surgicalAppointmentHelper) {
             var updateCurrentDayTimeline = function () {
                 $scope.currentTimeLineHeight = heightPerMin * Bahmni.Common.Util.DateUtil.diffInMinutes($scope.calendarStartDatetime, new Date());
             };
             var updateBlocksStartDatetimeAndBlocksEndDatetime = function () {
                 $scope.blocksStartDatetime = $scope.weekOrDay === 'day' ? $scope.viewDate : moment($scope.weekStartDate).startOf('day');
                 $scope.blocksEndDatetime = $scope.weekOrDay === 'day' ? moment($scope.viewDate).endOf('day') : moment(Bahmni.Common.Util.DateUtil.getWeekEndDate($scope.weekStartDate)).endOf('day');
             };
+            $scope.isModalVisible = false;
+            $scope.notesStartDate = false;
+            $scope.notesEndDate = false;
+            $scope.isEdit = false;
+            $scope.styleForBlock = function (index) {
+                if (index === 6) {
+                    return { 'border-right': '.5px solid lightgrey'};
+                }
+            };
+            var setValidStartDate = function (viewDate) {
+                const currentDate = new Date(viewDate);
+                $scope.validStartDate = $scope.weekDates[0];
+                while (currentDate > new Date($scope.weekDates[0])) {
+                    const prev = new Date(currentDate);
+                    currentDate.setDate(currentDate.getDate() - 1);
+                    if ($scope.getNotesForWeek[currentDate.getDate()]) {
+                        $scope.validStartDate = prev;
+                        break;
+                    }
+                }
+            };
+            var setValidEndDate = function (viewDate) {
+                const currentDate = new Date(viewDate);
+                $scope.validEndDate = $scope.weekDates[6];
+                while (currentDate < new Date($scope.weekDates[6])) {
+                    const prev = new Date(currentDate);
+                    currentDate.setDate(currentDate.getDate() + 1);
+                    if ($scope.getNotesForWeek[currentDate.getDate()]) {
+                        $scope.validEndDate = prev;
+                        break;
+                    }
+                }
+            };
+
+            $scope.showNotesPopup = function (weekStartDate, addIndex) {
+                const currentDate = new Date(weekStartDate);
+                if (addIndex === undefined) {
+                    addIndex = 0;
+                }
+                currentDate.setDate(currentDate.getDate() + addIndex);
+                $scope.notesStartDate = currentDate;
+                $scope.notesEndDate = currentDate;
+                $scope.isModalVisible = true;
+                $scope.isDayView = $state.weekOrDay === 'day';
+                if (!$scope.isDayView) {
+                    setValidStartDate(currentDate);
+                    setValidEndDate(currentDate);
+                }
+            };
+            $scope.showNotesPopupEdit = function (weekStartDate, addIndex) {
+                const note = $scope.getNotesForDay(weekStartDate, addIndex);
+                const currentDate = new Date(weekStartDate);
+                $scope.otNotesField = note;
+                currentDate.setDate(currentDate.getDate() + addIndex);
+                $scope.notesStartDate = currentDate;
+                $scope.notesEndDate = currentDate;
+                $scope.isModalVisible = true;
+                $scope.isEdit = true;
+            };
+            $scope.closeNotes = function () {
+                $scope.isModalVisible = false;
+                $scope.startDateBeforeEndDateError = false;
+                $scope.notesStartDate = undefined;
+                $scope.notesEndDate = undefined;
+                $scope.otNotesField = '';
+                $scope.isEdit = false;
+            };
+            $scope.setNotesEndDate = function (date) {
+                $scope.dateOutOfRangeError = date === undefined;
+                $scope.startDateBeforeEndDateError = date < $scope.notesStartDate;
+                $scope.notesEndDate = date;
+            };
+
+            $scope.setNotesStartDate = function (date) {
+                $scope.dateOutOfRangeError = date === undefined;
+                $scope.startDateBeforeEndDateError = date > $scope.notesEndDate;
+                $scope.notesStartDate = date;
+            };
+
+            $scope.setNotes = function (notes) {
+                $scope.otNotesField = notes;
+                if (notes) {
+                    $scope.emptyNoteError = false;
+                }
+                if (notes.id) {
+                    $scope.notesId = notes.id;
+                }
+            };
+            var notesInputValidation = function () {
+                if ($scope.startDateBeforeEndDateError || $scope.dateOutOfRangeError) {
+                    return;
+                }
+                if (!$scope.otNotesField) {
+                    $scope.emptyNoteError = true;
+                    return;
+                }
+            };
+
+            $scope.saveNotes = function () {
+                notesInputValidation();
+                if ($scope.isDayView) {
+                    surgicalAppointmentService.saveNoteForADay($scope.viewDate, $scope.otNotesField);
+                } else {
+                    surgicalAppointmentService.saveNoteForADay($scope.notesStartDate, $scope.otNotesField, $scope.notesEndDate);
+                }
+                $state.go("otScheduling", {viewDate: $scope.viewDate}, {reload: true});
+            };
+
+            $scope.updateNotes = function () {
+                notesInputValidation();
+                surgicalAppointmentService.updateNoteForADay($scope.noteId, $scope.otNotesField);
+                $state.go("otScheduling", {viewDate: $scope.viewDate}, {reload: true});
+            };
 
             var heightPerMin = 120 / $scope.dayViewSplit;
+            var showToolTipForNotes = function () {
+                $('.notes-text').tooltip({
+                    content: function () {
+                        var vm = (this);
+                        return $(vm).prop('title');
+                    },
+                    track: true
+                });
+            };
+            const getNotes = function () {
+                if ($scope.weekOrDay === 'day') {
+                    return surgicalAppointmentService.getBulkNotes(new Date($scope.viewDate, null));
+                } else if ($scope.weekOrDay === 'week') {
+                    return surgicalAppointmentService.getBulkNotes($scope.weekStartDate, getWeekDate(7));
+                }
+            };
             var init = function () {
                 var dayStart = ($scope.dayViewStart || Bahmni.OT.Constants.defaultCalendarStartTime).split(':');
                 var dayEnd = ($scope.dayViewEnd || Bahmni.OT.Constants.defaultCalendarEndTime).split(':');
@@ -20,6 +149,8 @@ angular.module('bahmni.ot')
                 $scope.editDisabled = true;
                 $scope.cancelDisabled = true;
                 $scope.addActualTimeDisabled = true;
+                $scope.otNotes = "";
+                $scope.isModalVisible = false;
                 $scope.dayViewSplit = parseInt($scope.dayViewSplit) > 0 ? parseInt($scope.dayViewSplit) : 60;
                 $scope.calendarStartDatetime = Bahmni.Common.Util.DateUtil.addMinutes($scope.viewDate, (dayStart[0] * 60 + parseInt(dayStart[1])));
                 $scope.calendarEndDatetime = Bahmni.Common.Util.DateUtil.addMinutes($scope.viewDate, (dayEnd[0] * 60 + parseInt(dayEnd[1])));
@@ -28,14 +159,22 @@ angular.module('bahmni.ot')
                 $scope.rows = $scope.getRowsForCalendar();
                 return $q.all([locationService.getAllByTag('Operation Theater'),
                     surgicalAppointmentService.getSurgicalBlocksInDateRange($scope.blocksStartDatetime, $scope.blocksEndDatetime, false, true),
-                    surgicalAppointmentService.getSurgeons()]).then(function (response) {
+                    surgicalAppointmentService.getSurgeons(),
+                    getNotes()]).then(function (response) {
                         $scope.locations = response[0].data.results;
                         $scope.weekDates = $scope.getAllWeekDates();
                         var surgicalBlocksByLocation = _.map($scope.locations, function (location) {
                             return _.filter(response[1].data.results, function (surgicalBlock) {
                                 return surgicalBlock.location.uuid === location.uuid;
                             });
                         });
+                        if (response[3] && response[3].status === 200) {
+                            $scope.noteForTheDay = response[3].data.length > 0 ? response[3].data[0].noteText : '';
+                            $scope.noteId = response[3].data.length > 0 ? response[3].data[0].noteId : '';
+                        } else {
+                            $scope.noteForTheDay = '';
+                            $scope.noteId = '';
+                        }
                         var providerNames = appService.getAppDescriptor().getConfigValue("primarySurgeonsForOT");
                         $scope.surgeons = surgicalAppointmentHelper.filterProvidersByName(providerNames, response[2].data.results);
                         var surgicalBlocksBySurgeons = _.map($scope.surgeons, function (surgeon) {
@@ -48,7 +187,21 @@ angular.module('bahmni.ot')
                                 return $scope.isSurgicalBlockActiveOnGivenDate(surgicalBlock, weekDate);
                             });
                         });
+
+                        $scope.getNotesForWeek = function (weekStartDate, index) {
+                            const date = new Date(weekStartDate);
+                            return _.filter(response[3].data, function (note) {
+                                return new Date(note.noteDate).getDate() === (date.getDate() + index);
+                            });
+                        };
+
+                        $scope.getNotesForDay = function (weekStartDate, index) {
+                            var notes = $scope.getNotesForWeek(weekStartDate, index);
+                            return notes.length > 0 ? notes[0].noteText : '';
+                        };
+
                         $scope.blockedOtsOfTheWeek = getBlockedOtsOfTheWeek();
+                        showToolTipForNotes();
 
                         var setOTView = function (providerToggle) {
                             $scope.providerToggle = providerToggle;
@@ -66,8 +219,8 @@ angular.module('bahmni.ot')
             };
 
             $scope.isSurgicalBlockActiveOnGivenDate = function (surgicalBlock, weekDate) {
-                return Bahmni.Common.Util.DateUtil.isSameDate(moment(surgicalBlock.startDatetime).startOf('day').toDate(), weekDate)
-                    || moment(surgicalBlock.endDatetime).toDate() > weekDate;
+                return Bahmni.Common.Util.DateUtil.isSameDate(moment(surgicalBlock.startDatetime).startOf('day').toDate(), weekDate) ||
+                    moment(surgicalBlock.endDatetime).toDate() > weekDate;
             };
 
             $scope.intervals = function () {

ui/app/ot/directives/otNotes.js

@@ -0,0 +1,10 @@
+'use strict';
+
+angular.module('bahmni.ot')
+    .directive('otNotes', [function () {
+        return {
+            restrict: 'E',
+            require: '^otCalendar',
+            templateUrl: "../ot/views/notesModal.html"
+        };
+    }]);

ui/app/ot/index.html

@@ -246,6 +246,7 @@
     <script src="directives/otCalendar.js"></script>
     <script src="directives/otWeeklyCalendar.js"></script>
     <script src="directives/otCalendarSurgicalBlock.js"></script>
+    <script src="directives/otNotes.js"></script>
     <script src="directives/otCalendarSurgicalAppointment.js"></script>
     <script src="directives/multiSelectAutocomplete.js"></script>
     <script src="directives/stringToNumber.js"></script>

ui/app/ot/services/surgicalAppointmentService.js

@@ -61,9 +61,50 @@ angular.module('bahmni.ot')
                     v: "custom:(id,uuid," +
                     "provider:(uuid,person:(uuid,display),attributes:(attributeType:(display),value,voided))," +
                     "location:(uuid,name),startDatetime,endDatetime,surgicalAppointments:(id,uuid,patient:(uuid,display,person:(age))," +
-                    "actualStartDatetime,actualEndDatetime,status,notes,sortWeight,bedNumber,bedLocation,surgicalAppointmentAttributes,patientObservations))"
+                    "actualStartDatetime,actualEndDatetime,status,notes,sortWeight,bedNumber,bedLocation,surgicalAppointmentAttributes))"
                 },
                 withCredentials: true
             });
         };
+        this.getBulkNotes = function (startDate, endDate) {
+            return $http.get(Bahmni.OT.Constants.notesUrl, {
+                method: 'GET',
+                params: {
+                    noteType: 'OT Module',
+                    noteStartDate: startDate,
+                    noteEndDate: endDate
+                },
+                withCredentials: true
+            });
+        };
+
+        var constructPayload = function (noteDate, note, noteEndDate) {
+            const payload = [];
+            const currentDate = new Date(noteDate);
+            // eslint-disable-next-line no-unmodified-loop-condition
+            while (currentDate <= noteEndDate) {
+                payload.push({
+                    noteTypeName: "OT module",
+                    noteDate: new Date(currentDate),
+                    noteText: note
+                });
+                currentDate.setDate(currentDate.getDate() + 1);
+            }
+            return payload;
+        };
+
+        this.saveNoteForADay = function (noteDate, note, noteEndDate) {
+            const payload = noteEndDate != null ? constructPayload(noteDate, note, noteEndDate) : [{
+                noteTypeName: "OT module",
+                noteDate: noteDate,
+                noteText: note
+            }];
+            const headers = {"Accept": "application/json", "Content-Type": "application/json"};
+            return $http.post(Bahmni.OT.Constants.notesUrl, payload, headers);
+        };
+
+        this.updateNoteForADay = function (noteId, note) {
+            const headers = {"Accept": "application/json", "Content-Type": "application/json"};
+            return $http.post(Bahmni.OT.Constants.notesUrl + "/" + noteId, note, headers);
+        };
     }]);

ui/app/ot/views/notesModal.html

@@ -0,0 +1,33 @@
+<div class="identifier-ui" ng-if="isModalVisible">
+    <div class="identifier-iframe">
+        <a class="close" style="padding-right: 20px" ng-click="closeNotes()">&times;</a>
+        <div style="padding: 20px">
+            <h6>{{'NOTE_TITLE' | translate}}</h6>
+            <textarea rows="5" id="notesID" class="notes-text-area" ng-model="otNotesField" ng-blur="setNotes(otNotesField)"></textarea>
+            <div ng-if="emptyNoteError" class="error">
+                {{'EMPTY_NOTES_ERROR' | translate }}
+            </div>
+            <div style="display: inline-block; margin-right: 20px">
+                <h6 style="color: black">{{'FROM' | translate}}</h6>
+                <input class="calendar-day-input ng-pristine ng-untouched ng-valid ng-valid-required" id="notesStartDate" type="date"
+                       min="{{validStartDate | date:'yyyy-MM-dd'}}" max="{{validEndDate | date:'yyyy-MM-dd'}}"
+                       ng-model="notesStartDate" required="" ng-change="setNotesStartDate(notesStartDate)"  ng-disabled="isEdit || isDayView">
+            </div>
+            <div style="display: inline-block">
+                <h6 style="color: black">{{'TO' | translate}}</h6>
+                <input class="calendar-day-input ng-pristine ng-untouched ng-valid ng-valid-required" id="notesEndDate" type="date"
+                       min="{{validStartDate | date:'yyyy-MM-dd'}}" max="{{validEndDate | date:'yyyy-MM-dd'}}"
+                       ng-model="notesEndDate" required="true" ng-change="setNotesEndDate(notesEndDate)" ng-disabled="isEdit || isDayView">
+            </div>
+            <div ng-if="startDateBeforeEndDateError" class="error">
+                {{'FROM_DATE_BEFORE_TO_DATE_ERROR' | translate}}
+            </div>
+            <div ng-if="dateOutOfRangeError" class="error">
+                {{'DATE_OUT_OF_RANGE_ERROR' | translate}}
+            </div>
+        </div>
+        <button class="cancel-button" ng-click="closeNotes()">{{'OT_CANCEL_KEY' | translate}}</button>
+        <button ng-if="!noteId" class="save-button" ng-click="saveNotes()">{{'SAVE' | translate}}</button>
+        <button ng-if="noteId" class="save-button"  ng-click="updateNotes()">{{'UPDATE' | translate}}</button>
+    </div>
+</div>