Add discard changes notification to rights/permissions dialog
This commit is contained in:
Mads Rasmussen
@@ -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();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@@ -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();
|
||||
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user