diff --git a/app/assets/javascripts/admin/enterprises/controllers/enterprise_controller.js.coffee b/app/assets/javascripts/admin/enterprises/controllers/enterprise_controller.js.coffee index e9a1bc077f..4c14a3b096 100644 --- a/app/assets/javascripts/admin/enterprises/controllers/enterprise_controller.js.coffee +++ b/app/assets/javascripts/admin/enterprises/controllers/enterprise_controller.js.coffee @@ -12,7 +12,8 @@ angular.module("admin.enterprises") # from a directive "nav-check" in the page - if we pass it here it will be called in the test suite, # and on all new uses of this contoller, and we might not want that . $scope.enterpriseNavCallback = -> - "You are editing an enterprise!" + if $scope.enterprise.$dirty + "Your changes to the enterprise are not saved yet." for payment_method in $scope.PaymentMethods payment_method.selected = payment_method.id in $scope.Enterprise.payment_method_ids diff --git a/app/assets/javascripts/admin/utils/directives/navigation_check.js.coffee b/app/assets/javascripts/admin/utils/directives/navigation_check.js.coffee index 95f52505eb..fee80e9acf 100644 --- a/app/assets/javascripts/admin/utils/directives/navigation_check.js.coffee +++ b/app/assets/javascripts/admin/utils/directives/navigation_check.js.coffee @@ -1,9 +1,10 @@ -angular.module("admin.utils").directive "navCheck", (NavigationCheck)-> +angular.module("admin.utils").directive "navCheckCallback", (NavigationCheck)-> restrict: 'A' scope: - navCallback: '&' + navCheckCallback: '&' link: (scope,element,attributes) -> - # Define navigationCallback on a controller in scope, otherwise this default will be used: - scope.navCallback ||= -> + # Provide a callback, otherwise this default will be used: + callback = scope.navCheckCallback() + callback ||= -> "You will lose any unsaved work!" - NavigationCheck.register(scope.navCallback) + NavigationCheck.register(callback) diff --git a/app/assets/javascripts/admin/utils/services/navigation_check.js.coffee b/app/assets/javascripts/admin/utils/services/navigation_check.js.coffee index ff1041474c..8bdab1bc9c 100644 --- a/app/assets/javascripts/admin/utils/services/navigation_check.js.coffee +++ b/app/assets/javascripts/admin/utils/services/navigation_check.js.coffee @@ -15,7 +15,8 @@ angular.module("admin.utils") onBeforeUnloadHandler: ($event) => message = @getMessage() if message - ($event or $window.event).preventDefault() + # following: https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload + ($event or $window.event).returnValue = message message # Action for angular navigation. diff --git a/app/views/admin/enterprises/_ng_form.html.haml b/app/views/admin/enterprises/_ng_form.html.haml index 86be5bb0be..e0a9bef86e 100644 --- a/app/views/admin/enterprises/_ng_form.html.haml +++ b/app/views/admin/enterprises/_ng_form.html.haml @@ -1,4 +1,14 @@ -= form_for [main_app, :admin, @enterprise], html: { name: "enterprise", "ng-app" => 'admin.enterprises', "ng-submit" => "navClear()", "ng-controller" => 'enterpriseCtrl' , "nav-check" => '', "nav-callback" => 'enterpriseNavCallback()' } do |f| +-# Not all inputs are ng inputs, they don't make the form dirty on change. +-# ng-change is only valid for inputs, not for a form. +-# So we use onchange and have to get the scope to access the ng controller +-# The nav-check-callback is warning on leave if the form is dirty. += form_for [main_app, :admin, @enterprise], html: { name: "enterprise", + "ng-app" => 'admin.enterprises', + "ng-submit" => "navClear()", + "ng-controller" => 'enterpriseCtrl', + "nav-check-callback" => 'enterpriseNavCallback', + 'onchange' => 'angular.element(enterprise).scope().enterprise.$setDirty()', + } do |f| .row .sixteen.columns.alpha .eleven.columns.alpha.fullwidth_inputs