From cb4de2a6a1817af7c9f265073560c3f0b3ee1eff Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Thu, 24 Aug 2017 15:00:11 +0200
Subject: [PATCH] Add discard changes notification to rights/permissions dialog

---
 .../umbsetdirtyonchange.directive.js          |  21 +++-
 .../content/content.rights.controller.js      |  30 ++++-
 .../src/views/content/rights.html             | 110 +++++++++++-------
 3 files changed, 111 insertions(+), 50 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/validation/umbsetdirtyonchange.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/validation/umbsetdirtyonchange.directive.js
index 37a773ae97..0c2339dd5c 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/validation/umbsetdirtyonchange.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/validation/umbsetdirtyonchange.directive.js
@@ -5,13 +5,22 @@
 
         function link(scope, el, attr, ctrl) {
 
-            var initValue = attr.umbSetDirtyOnChange;
-
-            attr.$observe("umbSetDirtyOnChange", function (newValue) {
-                if(newValue !== initValue) {
+            if(attr.ngModel) {
+                scope.$watch(attr.ngModel, function(newValue, oldValue) {
+                    if (!newValue) {return;}
+                    if (newValue === oldValue) {return;}
                     ctrl.$setDirty();
-                }
-            });
+                }, true);
+
+            } else {
+                var initValue = attr.umbSetDirtyOnChange;
+                
+                attr.$observe("umbSetDirtyOnChange", function (newValue) {
+                    if(newValue !== initValue) {
+                        ctrl.$setDirty();
+                    }
+                });
+            }
 
         }
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/content/content.rights.controller.js b/src/Umbraco.Web.UI.Client/src/views/content/content.rights.controller.js
index 2fc0fe39d1..f8eea10c0b 100644
--- a/src/Umbraco.Web.UI.Client/src/views/content/content.rights.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/content/content.rights.controller.js
@@ -1,29 +1,35 @@
 (function () {
     "use strict";
 
-    function ContentRightsController($scope, contentResource, localizationService) {
+    function ContentRightsController($scope, contentResource, localizationService, angularHelper) {
 
         var vm = this;
+        var currentForm;
 
         vm.availableUserGroups = [];
         vm.selectedUserGroups = [];
         vm.removedUserGroups = [];
         vm.viewState = "manageGroups";
         vm.labels = {};
-
+        vm.showNotification = false;
+        
         vm.setViewSate = setViewSate;
         vm.editPermissions = editPermissions;
         vm.setPermissions = setPermissions;
         vm.save = save;
         vm.removePermissions = removePermissions;
         vm.cancelManagePermissions = cancelManagePermissions;
+        vm.closeDialog = closeDialog;
+        vm.stay = stay;
 
         function onInit() {
             vm.loading = true;
             contentResource.getDetailedPermissions($scope.currentNode.id).then(function (userGroups) {
                 initData(userGroups);                
                 vm.loading = false;
+                currentForm = angularHelper.getCurrentForm($scope);
             });
+
         }
 
         /**
@@ -139,6 +145,11 @@
                 //re-assign model from server since it could have changed
                 initData(userGroups);
 
+                // clear dirty state on the form so we don't see the discard changes notification
+                if(currentForm) {
+                  currentForm.$dirty = false;
+                }
+
                 vm.saveState = "success";
                 vm.saveSuccces = true;
             }, function(error){
@@ -147,6 +158,21 @@
             });
         }
 
+        function stay() {
+          vm.showNotification = false;
+        }
+
+        function closeDialog() {
+
+          // check if form has been changed. If it has show discard changes notification
+          if (currentForm && currentForm.$dirty) {
+            vm.showNotification = true;
+          } else {
+            $scope.nav.hideDialog();
+          }
+          
+        }
+
         onInit();
 
     }
diff --git a/src/Umbraco.Web.UI.Client/src/views/content/rights.html b/src/Umbraco.Web.UI.Client/src/views/content/rights.html
index c83054212f..faec86571f 100644
--- a/src/Umbraco.Web.UI.Client/src/views/content/rights.html
+++ b/src/Umbraco.Web.UI.Client/src/views/content/rights.html
@@ -3,64 +3,90 @@
     <!-- Manage groups -->
     <div ng-show="vm.viewState === 'manageGroups'">
         <div class="umb-dialog-body" ng-cloak>
-            <div class="umb-pane">
 
-                <div ng-show="vm.saveError">
-                    <div class="alert alert-error">
-                        <div><strong>{{vm.saveError.errorMsg}}</strong></div>
-                        <div>{{vm.saveError.data.message}}</div>
+            <umb-load-indicator ng-if="vm.loading"></umb-load-indicator>    
+
+            <div class="umb-pane" ng-show="!vm.loading">
+                
+                <form name="permissionsForm">
+
+                    <div ng-show="vm.saveError">
+                        <div class="alert alert-error">
+                            <div><strong>{{vm.saveError.errorMsg}}</strong></div>
+                            <div>{{vm.saveError.data.message}}</div>
+                        </div>
                     </div>
-                </div>
 
-                <div ng-show="vm.saveSuccces">
-                    <div class="alert alert-success">
-                        <localize key="speechBubbles_permissionsSavedFor"></localize><strong> {{currentNode.name}}</strong>
+                    <div ng-show="vm.saveSuccces">
+                        <div class="alert alert-success">
+                            <localize key="speechBubbles_permissionsSavedFor"></localize><strong> {{currentNode.name}}</strong>
+                        </div>
                     </div>
-                </div>
 
-                <h5><localize key="defaultdialogs_permissionsSet">Set permissions for</localize> {{ currentNode.name }}</h5>
-                <p class="abstract" style="margin-bottom: 20px;"><localize key="defaultdialogs_permissionsHelp"></localize></p>
+                    <h5><localize key="defaultdialogs_permissionsSet">Set permissions for</localize> {{ currentNode.name }}</h5>
+                    <p class="abstract" style="margin-bottom: 20px;"><localize key="defaultdialogs_permissionsHelp"></localize></p>
 
-                <div style="position: relative; display: inline-block; margin-bottom: 20px;">
+                    <div style="position: relative; display: inline-block; margin-bottom: 20px;">
+                        
+                        <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#">
+                            <localize key="defaultdialogs_permissionsSet">Set permissions for</localize>...
+                            <span class="caret" style="margin-left: 10px;"></span>
+                        </a>
                     
-                    <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#">
-                        <localize key="defaultdialogs_permissionsSet">Set permissions for</localize>...
-                        <span class="caret" style="margin-left: 10px;"></span>
-                    </a>
-                  
-                    <ul class="dropdown-menu">
-                        <li ng-repeat="group in vm.availableUserGroups | filter:{selected: '!true'}">
-                            <a href="" ng-click="vm.editPermissions(group)" prevent-default>
-                                <i class="{{group.icon}}"></i>
-                                {{group.name}}
-                            </a>
-                        </li>
-                    </ul>
-                </div>
+                        <ul class="dropdown-menu">
+                            <li ng-repeat="group in vm.availableUserGroups | filter:{selected: '!true'}">
+                                <a href="" ng-click="vm.editPermissions(group)" prevent-default>
+                                    <i class="{{group.icon}}"></i>
+                                    {{group.name}}
+                                </a>
+                            </li>
+                        </ul>
+                    </div>
 
-                <div>
-                    <umb-user-group-preview
-                        ng-repeat="group in vm.selectedUserGroups"
-                        icon="group.icon"
-                        name="group.name"
-                        hide-content-start-node="true"
-                        hide-media-start-node="true"
-                        permissions="group.allowedPermissions"
-                        allow-remove="true"
-                        allow-edit="true"
-                        on-remove="vm.removePermissions($index, vm.selectedUserGroups)"
-                        on-edit="vm.editPermissions(group)">
-                    </umb-user-group-preview>
-                </div>
+                    <div ng-model="vm.selectedUserGroups" umb-set-dirty-on-change>
+                        <umb-user-group-preview
+                            ng-repeat="group in vm.selectedUserGroups"
+                            icon="group.icon"
+                            name="group.name"
+                            hide-content-start-node="true"
+                            hide-media-start-node="true"
+                            permissions="group.allowedPermissions"
+                            allow-remove="true"
+                            allow-edit="true"
+                            on-remove="vm.removePermissions($index, vm.selectedUserGroups)"
+                            on-edit="vm.editPermissions(group)">
+                        </umb-user-group-preview>
+                    </div>
+        
+                    <div class="umb-notifications" style="bottom: 0;" ng-if="vm.showNotification">
+                        <div class="umb-notification alert alert-block alert-form umb-notifications__notification animated -half-second fadeIn -no-border -extra-padding">
+                            <h4 style="font-size: 16px;">You have unsaved changes</h4>
+                            <p style="line-height: 1.6em; margin-bottom: 10px;">Are you sure you want to navigate away from this dialog? - you have unsaved changes</p>
+                            <umb-button
+                                label-key="prompt_discardChanges"
+                                action="nav.hideDialog();"
+                                type="button">
+                            </umb-button>
+                            <umb-button
+                                label-key="prompt_stay"
+                                action="vm.stay()"
+                                type="button"
+                                button-style="success">
+                            </umb-button>
+                        </div>
+                    </div>
+
+                </form>
 
             </div>
+
         </div>
 
         <div class="umb-dialog-footer btn-toolbar umb-btn-toolbar">
             <umb-button
                 label-key="general_close"
                 disabled="vm.saveState === 'busy'"
-                action="nav.hideDialog()"
+                action="vm.closeDialog()"
                 type="button"
                 button-style="link">
             </umb-button>