[#138] alert-unsaved-changes directive

rd_ui/app/scripts/controllers/query_edit.js

@@ -1,51 +1,25 @@
 (function() {
   'use strict';
 
-  function QueryEditCtrl($controller, $scope, $window, $route, $location, growl, Query, Visualization) {
-    var pristineHash = "";
-    var leavingPageText = "You will lose your changes if you leave";
+  function QueryEditCtrl($controller, $scope, $route, $location, growl, Query, Visualization) {
     var isNewQuery = !$route.current.locals.query.id;
 
     // controller inheritance
     $controller('QueryViewCtrl', {$scope: $scope});
 
     $scope.sourceMode = true;
-    $scope.isDirty = undefined;
-
+    $scope.isDirty = false;
     $scope.canEdit = currentUser.canEdit($scope.query);
 
     $scope.newVisualization = undefined;
 
-    $window.onbeforeunload = function() {
-      if ($scope.canEdit && $scope.isDirty) {
-        return leavingPageText;
-      }
-    }
-
-    $scope.$on('$locationChangeStart', function(event, next, current) {
-      if (next.split("#")[0] == current.split("#")[0]) {
-        return;
-      }
-
-      if (!$scope.canEdit) {
-        return;
-      }
-
-      if ($scope.isDirty && !confirm(leavingPageText + "\n\nAre you sure you want to leave this page?")) {
-        event.preventDefault();
-      } else {
-        Mousetrap.unbind("meta+s");
-      }
-    });
-
     $scope.saveQuery = function(duplicate, oldId) {
       if (!oldId) {
         oldId = $scope.query.id;
       }
 
       delete $scope.query.latest_query_data;
-      $scope.query.$save(function(q) {
-        pristineHash = q.getHash();
+      $scope.query.$save(function(savedQuery) {
         $scope.isDirty = false;
 
         if (duplicate) {
@@ -54,15 +28,14 @@
           growl.addSuccessMessage("Query saved");
         }
 
-        if (oldId != q.id) {
-          $location.url($location.url().replace(oldId, q.id)).replace();
+        if (oldId != savedQuery.id) {
+          $location.url($location.url().replace(oldId, savedQuery.id)).replace();
         }
       }, function(httpResponse) {
         growl.addErrorMessage("Query could not be saved");
       });
     };
 
-
     $scope.deleteVisualization = function($e, vis) {
       $e.preventDefault();
       if (confirm('Are you sure you want to delete ' + vis.name + ' ?')) {
@@ -78,16 +51,11 @@
       }
     };
 
-
-    $scope.$watch(function() {
-      return $scope.query.getHash();
-    }, function(newHash) {
-      $scope.isDirty = (newHash !== pristineHash);
+    $scope.$watch('query.query', function(current, prev) {
+      $scope.isDirty = (current !== prev);
     });
 
     if (isNewQuery) {
-      // $scope.lockButton(false);
-
       // save new query when creating a visualization
       var unbind = $scope.$watch('selectedTab == "add"', function(newPanel) {
         if (newPanel && $route.current.params.queryId == undefined) {
@@ -100,7 +68,7 @@
   };
 
   angular.module('redash.controllers').controller('QueryEditCtrl', [
-    '$controller', '$scope', '$window', '$route', '$location', 'growl', 'Query',
+    '$controller', '$scope', '$route', '$location', 'growl', 'Query',
     'Visualization', QueryEditCtrl
     ]);
 })();

rd_ui/app/scripts/directives/directives.js

@@ -3,11 +3,47 @@
 
     var directives = angular.module('redash.directives', []);
 
+    directives.directive('alertUnsavedChanges', ['$window', function($window) {
+        return {
+            restrict: 'E',
+            replace: true,
+            scope: {
+                'isDirty': '='
+            },
+            link: function($scope) {
+                var
+
+                unloadMessage = "You will lose your changes if you leave",
+                confirmMessage = unloadMessage + "\n\nAre you sure you want to leave this page?",
+
+                // store original handler (if any)
+                _onbeforeunload = $window.onbeforeunload;
+
+                $window.onbeforeunload = function() {
+                    return $scope.isDirty ? unloadMessage : null;
+                }
+
+                $scope.$on('$locationChangeStart', function(event, next, current) {
+                  if (next.split("#")[0] == current.split("#")[0]) {
+                    return;
+                  }
+
+                  if ($scope.isDirty && !confirm(confirmMessage)) {
+                    event.preventDefault();
+                  }
+                });
+
+                $scope.$on('$destroy', function() {
+                    $window.onbeforeunload = _onbeforeunload;
+                });
+            }
+        }
+    }]);
+
     directives.directive('keyboardShortcut', function() {
         return {
             restrict: 'E',
             replace: true,
-            template: '<span>foo</span>',
             scope: {
                 key: '@',
                 action: '='
@@ -17,6 +53,10 @@
                     e.preventDefault();
                     $scope.action();
                 });
+
+                $scope.$on('$destroy', function() {
+                    Mousetrap.unbind($scope.key);
+                });
             }
         }
     });

rd_ui/app/scripts/services/services.js

@@ -321,10 +321,6 @@
             return queryResult;
         };
 
-        Query.prototype.getHash = function() {
-            return this.query;
-        };
-
         return Query;
     };
 

rd_ui/app/views/query.html

@@ -1,5 +1,7 @@
 
 <div class="container">
+
+    <alert-unsaved-changes ng-if="canEdit" is-dirty="isDirty"></alert-unsaved-changes>
     <keyboard-shortcut ng-if="canEdit" key="meta+s" action="saveQuery"></keyboard-shortcut>
 
     <div class="row">