BAH-2359 | Alert for unsaved observations while navigating out of pat…

…ient dashboard (#665) * Parvathy | BAH-2359 | Add. Alert for unsaved observation under consultation * Parvathy | BAH-2359 | Add. Alert box with review and discard button * Parvathy | BAH-2359 | Fix. Separated alert message from error messages * Parvathy | BAH-2359 | Refactor. Removed unwanted lines of code * Parvathy | BAH-2359 | Fix. New variable to record state of changes when discarded * Parvathy | BAH-2359 | Refactor. Improvements to code * Parvathy | BAH-2359 | Refactor. Removed code duplicacy by extracting logic to new service * Parvathy | BAH-2359 | Add. Alert when trying to navigate to new patient dashboard * Parvathy | BAH-2359 | Fix. eslint issues * Parvathy | BAH-2359 | Fix. failing tests * Parvathy | BAH-2359 | Add. Tests for showing alert * Parvathy | BAH-2359 | Fix. Check for unsaved observations * Parvathy | BAH-2359 | Fix. Eslint issues and test cases * Parvathy | BAH-2359 | Fix. checking for group members * Parvathy | BAH-2359 | Add. Handle unsaved observations in bahmni standard * Parvathy | BAH-2359 | Refactor. Changed alert message and button alignment * Parvathy | BAH-2359 | Refactor. Alignment of text message and buttons * Parvathy | BAH-2359 | Fix. failing test * Parvathy | BAH-2359 | Refactor. Button alignment * Parvathy | BAH-2359 | Revert changes for observations tab * Parvathy | BAH-2359 | Add. Handle changes when clicked on clear button in medication tab * Parvathy | BAH-2359 | Refactor. Handle unsaved observations in bacteriology tab
Bahmni · Aug 16, 2023 · adb0b99 · adb0b99
1 parent a264d7f
commit adb0b99
Show file tree

Hide file tree

Showing 33 changed files with 328 additions and 46 deletions.
diff --git a/ui/app/clinical/app.js b/ui/app/clinical/app.js
@@ -104,7 +104,7 @@ angular.module('consultation')
                 abstract: true,
                 views: {
                     'content': {
-                        template: '<div ui-view="dashboard-header"></div> <div ui-view="dashboard-content"></div>' +
+                        template: '<div ui-view="dashboard-header"></div> <div ui-view="dashboard-content" alert-on-exit></div>' +
                         '<patient-control-panel patient="patient" visit-history="visitHistory" visit="visit" show="showControlPanel" consultation="consultation"/>',
                         controller: function ($scope, visitHistory, consultationContext, followUpConditionConcept) {
                             $scope.visitHistory = visitHistory;

diff --git a/ui/app/clinical/consultation/controllers/addTreatmentController.js b/ui/app/clinical/consultation/controllers/addTreatmentController.js
@@ -3,10 +3,10 @@
 angular.module('bahmni.clinical')
     .controller('AddTreatmentController', ['$scope', '$rootScope', 'contextChangeHandler', 'treatmentConfig', 'drugService',
         '$timeout', 'clinicalAppConfigService', 'ngDialog', '$window', 'messagingService', 'appService', 'activeDrugOrders',
-        'orderSetService', '$q', 'locationService', 'spinner', '$translate',
+        'orderSetService', '$q', 'locationService', 'spinner', '$translate', '$state',
         function ($scope, $rootScope, contextChangeHandler, treatmentConfig, drugService, $timeout,
                   clinicalAppConfigService, ngDialog, $window, messagingService, appService, activeDrugOrders,
-                  orderSetService, $q, locationService, spinner, $translate) {
+                  orderSetService, $q, locationService, spinner, $translate, $state) {
             var DateUtil = Bahmni.Common.Util.DateUtil;
             var DrugOrderViewModel = Bahmni.Clinical.DrugOrderViewModel;
             var scrollTop = _.partial($window.scrollTo, 0, 0);
@@ -16,6 +16,7 @@ angular.module('bahmni.clinical')
             $scope.canOrderSetBeAdded = true;
             $scope.isSearchDisabled = false;
             $scope.cdssEnabled = false;
+            $scope.clearButtonClicked = false;
             $scope.conceptSource = localStorage.getItem("conceptSource") || "";
 
             $scope.getFilteredOrderSets = function (searchTerm) {
@@ -88,6 +89,16 @@ angular.module('bahmni.clinical')
                 });
             };
 
+            $scope.$on('$stateChangeStart', function () {
+                if ($scope.addForm.$dirty && !$scope.clearButtonClicked) {
+                    $state.dirtyConsultationForm = true;
+                }
+            });
+
+            $scope.$on("event:changes-saved", function () {
+                $scope.addForm.$dirty = false;
+            });
+
             var markVariable = function (variable) {
                 $scope[variable] = true;
                 $timeout(function () {

diff --git a/ui/app/clinical/consultation/controllers/bacteriologyController.js b/ui/app/clinical/consultation/controllers/bacteriologyController.js
@@ -1,9 +1,9 @@
 'use strict';
 
 angular.module('bahmni.clinical')
-    .controller('BacteriologyController', ['$scope', '$rootScope', 'contextChangeHandler', 'spinner', 'conceptSetService',
+    .controller('BacteriologyController', ['$scope', '$state', '$rootScope', 'contextChangeHandler', 'spinner', 'conceptSetService',
         'messagingService', 'bacteriologyConceptSet', 'appService', 'retrospectiveEntryService',
-        function ($scope, $rootScope, contextChangeHandler, spinner, conceptSetService, messagingService, bacteriologyConceptSet,
+        function ($scope, $state, $rootScope, contextChangeHandler, spinner, conceptSetService, messagingService, bacteriologyConceptSet,
                   appService, retrospectiveEntryService) {
             $scope.consultation.extensions = $scope.consultation.extensions ? $scope.consultation.extensions : {mdrtbSpecimen: []};
             var initializeBacteriologyScope = function () {
@@ -54,6 +54,16 @@ angular.module('bahmni.clinical')
                 $scope.newSpecimens.push(newSpecimen);
             };
 
+            $scope.$on('$stateChangeStart', function () {
+                if ($scope.bacteriologyForm.$dirty) {
+                    $state.dirtyConsultationForm = true;
+                }
+            });
+
+            $scope.$on("event:changes-saved", function () {
+                $scope.bacteriologyForm.$dirty = false;
+            });
+
             var contextChange = function () {
                 $scope.consultation.newlyAddedSpecimens = $scope.newSpecimens;
                 $scope.consultation.deletedSpecimens = $scope.deletedSpecimens;

diff --git a/ui/app/clinical/consultation/controllers/consultationController.js b/ui/app/clinical/consultation/controllers/consultationController.js
@@ -524,6 +524,8 @@ angular.module('bahmni.clinical').controller('ConsultationController',
                             params.cachebuster = Math.random();
                             return encounterService.create(encounterData)
                             .then(function (saveResponse) {
+                                $state.dirtyConsultationForm = false;
+                                $scope.$parent.$broadcast("event:changes-saved");
                                 var messageParams = {
                                     encounterUuid: saveResponse.data.encounterUuid,
                                     encounterType: saveResponse.data.encounterType

diff --git a/ui/app/clinical/consultation/controllers/consultationSummaryController.js b/ui/app/clinical/consultation/controllers/consultationSummaryController.js
@@ -1,7 +1,7 @@
 'use strict';
 
 angular.module('bahmni.clinical')
-    .controller('ConsultationSummaryController', ['$scope', '$translate', 'conceptSetUiConfigService', function ($scope, $translate, conceptSetUiConfigService) {
+    .controller('ConsultationSummaryController', ['$scope', '$state', '$translate', 'conceptSetUiConfigService', function ($scope, $state, $translate, conceptSetUiConfigService) {
         var geEditedDiagnosesFromPastEncounters = function () {
             var editedDiagnosesFromPastEncounters = [];
             $scope.consultation.pastDiagnoses.forEach(function (pastDiagnosis) {
@@ -18,6 +18,16 @@ angular.module('bahmni.clinical')
             $scope.consultation.consultationNote.observationDateTime = null;
         };
 
+        $scope.$on('$stateChangeStart', function () {
+            if ($scope.consultationForm.$dirty) {
+                $state.dirtyConsultationForm = true;
+            }
+        });
+
+        $scope.$on("event:changes-saved", function (event) {
+            $scope.consultationForm.$dirty = false;
+        });
+
         var groupObservations = function () {
             var allObservations = $scope.consultation.observations;
             allObservations = _.filter(allObservations, function (obs) {

diff --git a/ui/app/clinical/consultation/controllers/diagnosisController.js b/ui/app/clinical/consultation/controllers/diagnosisController.js
@@ -1,8 +1,8 @@
 'use strict';
 
 angular.module('bahmni.clinical')
-    .controller('DiagnosisController', ['$scope', '$rootScope', 'diagnosisService', 'messagingService', 'contextChangeHandler', 'spinner', 'appService', '$translate', 'retrospectiveEntryService',
-        function ($scope, $rootScope, diagnosisService, messagingService, contextChangeHandler, spinner, appService, $translate, retrospectiveEntryService) {
+    .controller('DiagnosisController', ['$scope', '$rootScope', 'diagnosisService', 'messagingService', 'contextChangeHandler', 'spinner', 'appService', '$translate', 'retrospectiveEntryService', '$state',
+        function ($scope, $rootScope, diagnosisService, messagingService, contextChangeHandler, spinner, appService, $translate, retrospectiveEntryService, $state) {
             var DateUtil = Bahmni.Common.Util.DateUtil;
             $scope.todayWithoutTime = DateUtil.getDateWithoutTime(DateUtil.today());
             $scope.toggles = {
@@ -56,6 +56,16 @@ angular.module('bahmni.clinical')
                 return canAdd;
             };
 
+            $scope.$on('$stateChangeStart', function () {
+                if ($scope.diagnosisForm.$dirty) {
+                    $state.dirtyConsultationForm = true;
+                }
+            });
+
+            $scope.$on("event:changes-saved", function () {
+                $scope.diagnosisForm.$dirty = false;
+            });
+
             $scope.getAddNewDiagnosisMethod = function (diagnosisAtIndex) {
                 return function (item) {
                     var concept = item.lookup;

diff --git a/ui/app/clinical/consultation/controllers/dispositionController.js b/ui/app/clinical/consultation/controllers/dispositionController.js
@@ -1,7 +1,7 @@
 'use strict';
 
 angular.module('bahmni.clinical')
-    .controller('DispositionController', ['$scope', '$q', 'dispositionService', 'appService', 'retrospectiveEntryService', 'spinner', '$rootScope', '$translate', function ($scope, $q, dispositionService, appService, retrospectiveEntryService, spinner, $rootScope, $translate) {
+    .controller('DispositionController', ['$scope', '$state', '$q', 'dispositionService', 'appService', 'retrospectiveEntryService', 'spinner', '$rootScope', '$translate', function ($scope, $state, $q, dispositionService, appService, retrospectiveEntryService, spinner, $rootScope, $translate) {
         var consultation = $scope.consultation;
         var allDispositions = [];
         var getPreviousDispositionNote = function () {
@@ -120,6 +120,16 @@ angular.module('bahmni.clinical')
             }
         };
 
+        $scope.$on('$stateChangeStart', function () {
+            if ($scope.dispositionForm.$dirty) {
+                $state.dirtyConsultationForm = true;
+            }
+        });
+
+        $scope.$on("event:changes-saved", function () {
+            $scope.dispositionForm.$dirty = false;
+        });
+
         $scope.consultation.preSaveHandler.register("dispositionSaveHandlerKey", saveDispositions);
         $scope.$on('$destroy', saveDispositions);
     }]);
diff --git a/ui/app/clinical/consultation/controllers/orderController.js b/ui/app/clinical/consultation/controllers/orderController.js
@@ -1,8 +1,8 @@
 'use strict';
 
 angular.module('bahmni.clinical')
-    .controller('OrderController', ['$scope', 'allOrderables', 'ngDialog', 'retrospectiveEntryService', 'appService', '$translate',
-        function ($scope, allOrderables, ngDialog, retrospectiveEntryService, appService, $translate) {
+    .controller('OrderController', ['$scope', '$state', 'allOrderables', 'ngDialog', 'retrospectiveEntryService', 'appService', '$translate',
+        function ($scope, $state, allOrderables, ngDialog, retrospectiveEntryService, appService, $translate) {
             $scope.consultation.orders = $scope.consultation.orders || [];
             $scope.consultation.childOrders = $scope.consultation.childOrders || [];
             $scope.allOrdersTemplates = allOrderables;
@@ -132,6 +132,12 @@ angular.module('bahmni.clinical')
                 });
             };
 
+            $scope.$on('$stateChangeStart', function () {
+                if ($scope.consultation.orders.length !== $scope.consultation.investigations.length) {
+                    $state.dirtyConsultationForm = true;
+                }
+            });
+
             $scope.getOrderTemplate = function (templateName) {
                 var key = '\'' + templateName + '\'';
                 return $scope.allOrdersTemplates[key];

diff --git a/ui/app/clinical/consultation/directives/alertOnExit.js b/ui/app/clinical/consultation/directives/alertOnExit.js
@@ -0,0 +1,18 @@
+"use strict";
+
+angular.module('bahmni.clinical')
+    .directive('alertOnExit', ['exitAlertService', '$state',
+        function (exitAlertService, $state) {
+            return {
+                link: function ($scope) {
+                    $scope.$on('$stateChangeStart', function (event, next, current) {
+                        var uuid = $state.params.patientUuid;
+                        var currentUuid = current.patientUuid;
+                        var isNavigating = exitAlertService.setIsNavigating(next, uuid, currentUuid);
+                        $state.dirtyConsultationForm = $state.discardChanges ? false : $state.dirtyConsultationForm;
+                        exitAlertService.showExitAlert(isNavigating, $state.dirtyConsultationForm, event, next.spinnerToken);
+                    });
+                }
+            };
+        }
+    ]);
diff --git a/ui/app/clinical/consultation/services/exitAlertService.js b/ui/app/clinical/consultation/services/exitAlertService.js
@@ -0,0 +1,23 @@
+angular.module('bahmni.clinical')
+    .factory('exitAlertService', ['messagingService', 'spinner', '$state', '$location',
+        function (messagingService, spinner, $state, $location) {
+            return {
+                showExitAlert: function (isNavigating, dirtyConsultationForm, event, spinnerToken) {
+                    if (isNavigating && dirtyConsultationForm) {
+                        messagingService.showMessage('alert', "{{'ALERT_MESSAGE_ON_EXIT' | translate }}");
+                        $state.reviewButtonFocused = true;
+                        event.preventDefault();
+                        spinner.hide(spinnerToken);
+                    }
+                },
+                setIsNavigating: function (next, uuid, currentUuid) {
+                    $state.newPatientUuid = currentUuid;
+                    next.url.includes("/patient/search") ? $state.isPatientSearch = true : $state.isPatientSearch = false;
+                    return (next.url.includes("/patient/search") || (uuid !== currentUuid));
+                },
+                redirectUrl: function () {
+                    return $state.isPatientSearch ? $location.path('/default/patient/search') : $location.path('/default/patient/' + $state.newPatientUuid + "/dashboard");
+                }
+            };
+        }
+    ]);
diff --git a/ui/app/clinical/consultation/views/bacteriology.html b/ui/app/clinical/consultation/views/bacteriology.html
@@ -5,7 +5,7 @@
             <span ng-bind-html="'BACTERIOLOGY_NOT_ALLOWED_IN_RETROSPECTIVE_MESSAGE'|translate"></span>
         </div>
         <div ng-repeat="newSpecimen in newSpecimens track by $id(newSpecimen)" class="sample-container">
-            <form class="form">
+            <form class="form" name="bacteriologyForm" alert-on-exit>
                 <section class="section-grid">
                     <div class="section-title-wrapper clearfix">
                         <h2 class="section-title fl">{{'BACTERIOLOGY_TAB_TITLE_KEY' | translate}}</h2>

diff --git a/ui/app/clinical/consultation/views/consultation.html b/ui/app/clinical/consultation/views/consultation.html
@@ -260,9 +260,11 @@ <h2 class="section-title">{{ 'CONSULTATION_TAB_DISPOSITION_HEADER_LABEL'|transla
         </section>
     </div>
     <section class="block consultation-notes section-grid">
-        <h2 class="section-title">{{ 'CONSULTATION_TAB_CONSULTATION_NOTES_LABEL'|translate }}</h2>
-        <textarea ng-model="consultation.consultationNote.value" ng-change="onNoteChanged()"
+        <form name="consultationForm" alert-on-exit>
+            <h2 class="section-title">{{ 'CONSULTATION_TAB_CONSULTATION_NOTES_LABEL'|translate }}</h2>
+            <textarea ng-model="consultation.consultationNote.value" ng-change="onNoteChanged()"
                   placeholder="{{ 'CLINICAL_ENTER_NOTES_PLACEHOLDER'|translate }} " rows="6" msd-elastic></textarea>
+        </form> 
     </section>
 
 </article>

diff --git a/ui/app/clinical/consultation/views/diagnosis.html b/ui/app/clinical/consultation/views/diagnosis.html
@@ -1,4 +1,4 @@
-<form>
+<form name="diagnosisForm" alert-on-exit>
     <fieldset>
         <div class="diagnosis" focus-on-input-errors>
             <div id="selectedNodesArea">

diff --git a/ui/app/clinical/consultation/views/disposition.html b/ui/app/clinical/consultation/views/disposition.html
@@ -4,7 +4,7 @@
         <span ng-bind-html="'DISPOSITION_NOT_ALLOWED_IN_RETROSPECTIVE_MESSAGE'|translate"></span>
     </div>
     <div class="box disposition-tab">
-        <form ng-submit="submit()">
+        <form name="dispositionForm" ng-submit="submit()" alert-on-exit>
             <label for="dispositionAction">{{ 'DISPOSITION_TYPE_LABEL'|translate }}: </label>
             <select id="dispositionAction" ng-model="dispositionCode" ng-options="d.code as ::getTranslatedDisposition(d.name) for d in dispositionActions" ng-change="clearDispositionNote();"  ng-disabled="isRetrospectiveMode()">
                 <option value=""></option>

diff --git a/ui/app/clinical/consultation/views/orders.html b/ui/app/clinical/consultation/views/orders.html
@@ -1,4 +1,4 @@
-<div class="order-list">
+<div class="order-list" alert-on-exit>
     <div ng-class="{'disableOrdersInRetroMode':isRetrospectiveMode()}">
         <div class="infoMsgRetrospectiveModeEnabled" ng-if="isRetrospectiveMode()">
             <i class="fa fa-info-circle"></i>

diff --git a/ui/app/clinical/consultation/views/treatmentSections/addTreatment.html b/ui/app/clinical/consultation/views/treatmentSections/addTreatment.html
@@ -6,7 +6,7 @@ <h2 class="section-title has-toggle" toggle="addTreatment">
     </h2>
     <div class="order-section-container"  ng-show="addTreatment">
         <div class="Order-section-orderDrug clearfix">
-            <form name="addForm" ng-class="{ 'show-invalid': formInvalid}"  ng-submit="add()" bm-form class="edit-drug-order-container">
+            <form name="addForm" ng-class="{ 'show-invalid': formInvalid}"  ng-submit="add()" bm-form class="edit-drug-order-container" alert-on-exit>
                 <article class="form-field">
                     <div class="field-attribute">
                         <label>{{ ::treatmentConfig.translate('drugName', 'MEDICATION_DRUG_NAME_TITLE') }} </label>
@@ -310,7 +310,7 @@ <h3 ng-show="cdssaAlerts && cdssaAlerts.length > 0" class="cdss-alerts">
                              <span ng-bind-html="::treatmentConfig.translate('add', 'MEDICATION_ADD_BUTTON_LABEL')">
                         </span>
                     </button>
-                    <button type="button" class="icon-button showInfo-btn fr reset-drug-form" tabindex="-1" ng-click="clearForm()" title="Clear">
+                    <button type="button" class="icon-button showInfo-btn fr reset-drug-form" tabindex="-1" ng-click="clearForm(); clearButtonClicked='true'" title="Clear">
                         {{'MEDICATION_CLEAR_BUTTON_LABEL'|translate}}
                     </button>
                 </div>

diff --git a/ui/app/clinical/dashboard/controllers/patientDashboardController.js b/ui/app/clinical/dashboard/controllers/patientDashboardController.js
@@ -14,6 +14,7 @@ angular.module('bahmni.clinical')
             $scope.enrollment = $stateParams.enrollment;
             $scope.isDashboardPrinting = false;
             var programConfig = appService.getAppDescriptor().getConfigValue("program") || {};
+            $state.discardChanges = false;
 
             $scope.stateChange = function () {
                 return $state.current.name === 'patient.dashboard.show';

diff --git a/ui/app/clinical/index.html b/ui/app/clinical/index.html
@@ -401,10 +401,12 @@ <h3 class="close" ng-click="closeTeleConsultation()">
         <script src="consultation/services/otherTestsProvider.js"></script>
         <script src="consultation/services/Notifier.js"></script>
         <script src="consultation/services/adhocTeleconsultationService.js"></script>
+        <script src="consultation/services/exitAlertService.js"></script>
 
         <script src="consultation/services/treatmentConfig.js"></script>
         <script src="consultation/filters/observationValue.js"></script>
         <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/diagnosisAutoComplete.js"></script>
         <script src="consultation/directives/newDrugOrders.js"></script>

diff --git a/ui/app/common/ui-helper/controllers/messageController.js b/ui/app/common/ui-helper/controllers/messageController.js
@@ -1,10 +1,7 @@
 "use strict";
 
-angular.module("bahmni.common.uiHelper").controller("MessageController", [
-    "$scope",
-    "messagingService",
-    "$translate",
-    function ($scope, messagingService, $translate) {
+angular.module("bahmni.common.uiHelper").controller("MessageController", [ "$scope", "messagingService", "$translate", "$state", "exitAlertService",
+    function ($scope, messagingService, $translate, $state, exitAlertService) {
         $scope.messages = messagingService.messages;
 
         $scope.getMessageText = function (level) {
@@ -30,5 +27,15 @@ angular.module("bahmni.common.uiHelper").controller("MessageController", [
         $scope.isInfoMessagePresent = function () {
             return $scope.messages.info.length > 0;
         };
+
+        $scope.isAlertMessagePresent = function () {
+            return $scope.messages.alert.length > 0;
+        };
+
+        $scope.discardChanges = function (level) {
+            $state.discardChanges = true;
+            $scope.hideMessage(level);
+            exitAlertService.redirectUrl();
+        };
     }
 ]);