Role = function(name,description,assignable,childRoleNames,parentRoleNames,users,parentsRolesUsers,permissions,otherUsers){
this.name = ko.observable(name);
+ this.name.subscribe(function(newValue){self.modified(true)});
+
this.description = ko.observable(description);
+ this.description.subscribe(function(newValue){self.modified(true)});
+
this.assignable = ko.observable(assignable);
+ this.assignable.subscribe(function(newValue){self.modified(true)});
+
this.childRoleNames = ko.observableArray(childRoleNames);//read only
+ this.childRoleNames.subscribe(function(newValue){self.modified(true)});
+
this.parentRoleNames = ko.observableArray(parentRoleNames);//read only
+ this.parentRoleNames.subscribe(function(newValue){self.modified(true)});
+
this.users = ko.observableArray(users?users:new Array());
+ this.users.subscribe(function(newValue){self.modified(true)});
+
this.parentsRolesUsers = ko.observableArray(parentsRolesUsers);//read only
+ this.parentsRolesUsers.subscribe(function(newValue){self.modified(true)});
+
this.permissions = ko.observableArray(permissions);//read only
+ this.permissions.subscribe(function(newValue){self.modified(true)});
+
// when editing a role other users not assign to this role are populated
this.otherUsers = ko.observableArray(otherUsers?otherUsers:new Array());
+ this.otherUsers.subscribe(function(newValue){self.modified(true)});
+
this.removedUsers= ko.observableArray(new Array());
+ this.removedUsers.subscribe(function(newValue){self.modified(true)});
+
+ this.modified=ko.observable(false);
this.updateDescription=function(){
var url = "restServices/redbackServices/roleManagementService/updateRoleDescription?";
this.roles = ko.observableArray([]);
var self = this;
- this.loadRoles = function() {
- $.ajax("restServices/redbackServices/roleManagementService/allRoles", {
- type: "GET",
- async: false,
- dataType: 'json',
- success: function(data) {
- var mappedRoles = $.map(data.role, function(item) {
- return mapRole(item);
- });
- self.roles(mappedRoles);
- }
- }
- );
- };
this.gridViewModel = new ko.simpleGrid.viewModel({
pageSize: 10
});
- this.editRole=function(role){
- $("#main-content #roles-view-tabs-content #role-edit").html(mediumSpinnerImg());
+ editRole=function(role){
+ var mainContent = $("#main-content");
+ mainContent.find("#roles-view-tabs-content #role-edit").html(mediumSpinnerImg());
// load missing attributes
$.ajax("restServices/redbackServices/roleManagementService/getRole/"+encodeURIComponent(role.name()),
{
dataType: 'json',
success: function(data) {
var mappedRole = mapRole(data.role);
- $("#main-content #roles-view-tabs-content #role-edit").attr("data-bind",'template: {name:"editRoleTab",data: currentRole}');
role.parentRoleNames=mappedRole.parentRoleNames;
role.parentsRolesUsers=mappedRole.parentsRolesUsers;
role.users=mappedRole.users;
role.otherUsers=mappedRole.otherUsers;
var viewModel = new RoleViewModel(role);
- ko.applyBindings(viewModel,$("#main-content #roles-view-tabs-content #role-edit").get(0));
+ ko.applyBindings(viewModel,mainContent.find("#roles-view-tabs-content #role-edit").get(0));
activateRoleEditTab();
- $("#role-edit-users-tabs").tabs();
- $("#role-edit-users-tabs-content #role-view-users").addClass("active");
+ mainContent.find("#role-view-users ").tabs("show");
+ mainContent.find("#role-edit-users-tabs-content #role-view-users").addClass("active");
}
}
);
displayRolesGrid = function(){
screenChange();
- $("#main-content").html(mediumSpinnerImg());
- window.redbackModel.rolesViewModel = new RolesViewModel();
- window.redbackModel.rolesViewModel.loadRoles();
- $("#main-content").html($("#rolesTabs").tmpl());
- ko.applyBindings(window.redbackModel.rolesViewModel,jQuery("#main-content").get(0));
- $("#main-content #roles-view-tabs a:first").tab("show");
- activateRolesGridTab();
- removeMediumSpinnerImg();
+ var mainContent = $("#main-content");
+ mainContent.html(mediumSpinnerImg());
+
+ $.ajax("restServices/redbackServices/roleManagementService/allRoles", {
+ type: "GET",
+ dataType: 'json',
+ success: function(data) {
+ var mappedRoles = $.map(data.role, function(item) {
+ return mapRole(item);
+ });
+ var rolesViewModel = new RolesViewModel();
+ rolesViewModel.roles(mappedRoles);
+ mainContent.html($("#rolesTabs").tmpl());
+ ko.applyBindings(rolesViewModel,mainContent.find("#rolesTable").get(0));
+ mainContent.find("#roles-view-tabs #roles-view-tabs-a-roles-grid").tab("show");
+ activateRolesGridTab();
+ removeMediumSpinnerImg();
+
+ }
+ }
+ );
+
+
}
RoleViewModel=function(role){
for (var i = 0; i < removed.length; i++) {
$.log("add user:"+removed[i].username());
currentRole.users.push(removed[i]);
+ role.modified(true);
}
selectedOtherUsers([]);
activateRoleUsersEditTab();
for (var i = 0; i < added.length; i++) {
currentRole.otherUsers.push(added[i]);
currentRole.removedUsers.push(added[i]);
+ role.modified(true);
}
selectedUsers([]);
activateRoleUsersEditTab()
}
updateMode=function(){
- $("#main-content #role-list-users").hide();
- $("#main-content #role-edit-users").show();
+ var mainContent = $("#main-content");
+ mainContent.find("#role-list-users").hide();
+ mainContent.find("#role-edit-users").show();
}
viewMode=function(){
- $("#main-content #role-edit-users").hide();
- $("#main-content #role-list-users").show();
+ var mainContent = $("#main-content");
+ mainContent.find("#role-edit-users").hide();
+ mainContent.find("#role-list-users").show();
}
}
<a data-toggle="tab" href="#role-edit">${$.i18n.prop('edit')}</a>
</li>
</ul>
- <div id="roles-view-tabs-content" class="pill-content">
- <div id="roles-view" class="pill-pane">
- <table class="table table-striped table-bordered" id="usersTable"
+ <div id="roles-view-tabs-content" class="tab-content">
+ <div id="roles-view" class="tab-pane">
+ <table class="table table-striped table-bordered" id="rolesTable"
data-bind="simpleGrid: gridViewModel,simpleGridTemplate:'ko_rolesGrid',pageLinksId:'rolesPagination'">
</table>
<div id="rolesPagination"></div>
</div>
- <div id="role-edit" class="pill-pane"></div>
+ <div id="role-edit" class="tab-pane" data-bind="template: {name:'editRoleTab',data: currentRole}"></div>
</div>
</script>
</ul>
{{/if}}
- <ul id="role-edit-users-tabs" class="pills">
+ <ul id="role-edit-users-tabs" class="nav nav-tabs">
<li class="active" id="role-view-users-li">
- <a href="#role-view-users">${$.i18n.prop('role.edit.users.list')}</a>
+ <a data-toggle="tab" href="#role-view-users">${$.i18n.prop('role.edit.users.list')}</a>
</li>
<li id="role-edit-users-li">
- <a href="#role-edit-users">${$.i18n.prop('edit')}</a>
+ <a data-toggle="tab" href="#role-edit-users">${$.i18n.prop('edit')}</a>
</li>
</ul>
<div class="pill-content" id="role-edit-users-tabs-content">
- <div id="role-view-users" class="active">
+ <div id="role-view-users" class="active pill-pane">
<div class="page-header">
<h3>${$.i18n.prop('role.edit.users.defined.in.current.role')}</h3>
</div>
</div>
</div>
- <div id="role-edit-users" class="clearfix ar-multiselect">
+ <div id="role-edit-users" class="clearfix ar-multiselect pill-pane">
<div class="ar-multiselect-column ar-multiselect-left">
<select data-bind="options: otherUsers ,optionsText: 'username',selectedOptions:selectedOtherUsers" multiple="true" id="role-edit-available-users"></select>
</thead>
<tbody>
{{each(i, row) itemsOnCurrentPage()}}
- <tr>
+ <tr data-bind="css:{ 'modified': row.modified()}">
{{each(j, columnDefinition) columns}}
{{var val = (typeof columnDefinition.rowText == 'function' ? columnDefinition.rowText(row) : row[columnDefinition.rowText])}}
<td id="role-${columnDefinition.rowText}-${row.name()}">
</td>
{{/each}}
<td>
- <a id="edit-role-${row.name()}" href="#" data-bind="click: function(){ window.redbackModel.rolesViewModel.editRole(row) }">${$.i18n.prop('edit')}</a>
+ <a id="edit-role-${row.name()}" href="#" data-bind="click: function(){ editRole(row) }">${$.i18n.prop('edit')}</a>
</td>
</tr>
{{/each}}