add notifications to content permissions dialog

src/Umbraco.Web.UI.Client/src/views/content/content.rights.controller.js

@@ -21,7 +21,7 @@
             vm.loading = true;
             contentResource.getDetailedPermissions($scope.currentNode.id).then(function (userGroups) {
                 vm.availableUserGroups = userGroups;
-                vm.loading = false;              
+                vm.loading = false;
             });
         }
 
@@ -40,15 +40,15 @@
             group.allowedPermissions = [];
 
             // get list of checked permissions
-            angular.forEach(group.permissions, function(permissionGroup) {
-                angular.forEach(permissionGroup, function(permission) {
-                    if(permission.checked) {
+            angular.forEach(group.permissions, function (permissionGroup) {
+                angular.forEach(permissionGroup, function (permission) {
+                    if (permission.checked) {
                         group.allowedPermissions.push(permission);
                     }
                 });
             });
 
-            if(!group.selected) {
+            if (!group.selected) {
                 // set to selected so we can remove from the dropdown easily
                 group.selected = true;
                 vm.selectedUserGroups.push(group);
@@ -70,23 +70,31 @@
 
         function save() {
 
-          //this is a dictionary that we need to format
-          var permissionsSave = {};
-          angular.forEach(vm.selectedUserGroups, function(g) {
-            permissionsSave[g.id] = [];
-            angular.forEach(g.allowedPermissions, function(p) {
-              permissionsSave[g.id].push(p.permissionCode);
+            vm.saveState = "busy";
+            vm.saveError = false;
+            vm.saveSuccces = false;
+
+            //this is a dictionary that we need to format
+            var permissionsSave = {};
+            angular.forEach(vm.selectedUserGroups, function (g) {
+                permissionsSave[g.id] = [];
+                angular.forEach(g.allowedPermissions, function (p) {
+                    permissionsSave[g.id].push(p.permissionCode);
+                });
             });
-          });
 
-          var saveModel = {
-            contentId: $scope.currentNode.id,
-            permissions: permissionsSave
-          };
+            var saveModel = {
+                contentId: $scope.currentNode.id,
+                permissions: permissionsSave
+            };
 
-          contentResource.savePermissions(saveModel).then(function() {
-            alert("hooray!");
-          });
+            contentResource.savePermissions(saveModel).then(function () {
+                vm.saveState = "success";
+                vm.saveSuccces = true;
+            }, function(error){
+                vm.saveState = "error";
+                vm.saveError = error;
+            });
         }
 
         onInit();

src/Umbraco.Web.UI.Client/src/views/content/rights.html

@@ -5,6 +5,19 @@
         <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>
+                    </div>
+                </div>
+
+                <div ng-show="vm.saveSuccces">
+                    <div class="alert alert-success">
+                        Permissions saved for <strong>{{currentNode.name}}</strong>
+                    </div>
+                </div>
+
                 <h5>Ut tempor dui nec consectetur efficitur.</h5>
                 <p class="abstract" style="margin-bottom: 20px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tellus purus, malesuada sed purus ut, semper sollicitudin odio.</p>
 
@@ -39,13 +52,23 @@
             </div>
         </div>
 
-        <div class="umb-dialog-footer btn-toolbar umb-btn-toolbar" ng-hide="success">
-            <a class="btn btn-link" ng-click="nav.hideDialog()" ng-if="!busy">
-                <localize key="general_cancel">Cancel</localize>
-            </a>
-            <button class="btn btn-primary" ng-click="vm.save()" ng-disabled="busy">
-                <localize key="buttons_save">Save</localize>
-            </button>
+        <div class="umb-dialog-footer btn-toolbar umb-btn-toolbar">
+            <umb-button
+                label-key="general_cancel"
+                disabled="vm.saveState === 'busy'"
+                action="nav.hideDialog()"
+                type="button"
+                button-style="link">
+            </umb-button>
+
+            <umb-button
+                label-key="buttons_save"
+                disabled="vm.saveState === 'busy'"
+                state="vm.saveState"
+                action="vm.save()"
+                type="button"
+                button-style="success">
+            </umb-button>
         </div>
 
     </div>
@@ -71,12 +94,21 @@
         </div>
 
         <div class="umb-dialog-footer btn-toolbar umb-btn-toolbar">
-            <a class="btn btn-link" ng-click="vm.cancelManagePermissions()">
-                <localize key="general_cancel">Cancel</localize>
-            </a>
-            <button class="btn btn-primary" type="button" ng-click="vm.setPermissions(vm.selectedUserGroup)">
-                Set permissions
-            </button>
+
+            <umb-button
+                label-key="general_cancel"
+                action="vm.cancelManagePermissions()"
+                type="button"
+                button-style="link">
+            </umb-button>
+
+            <umb-button
+                label="Set permissions"
+                action="vm.setPermissions(vm.selectedUserGroup)"
+                type="button"
+                button-style="success">
+            </umb-button>
+
         </div>
 
     </div>