From ef4558159ba48175bade8d820709ccd564afcd41 Mon Sep 17 00:00:00 2001
From: Olivier Lamy <olamy@apache.org>
Date: Sat, 11 Feb 2012 22:17:07 +0000
Subject: [PATCH] some cleanup on roles management screen prepare for bulk save

git-svn-id: https://svn.apache.org/repos/asf/archiva/trunk@1243169 13f79535-47bb-0310-9956-ffa450edef68
---
 .../src/main/webapp/js/archiva/main.js        |  1 -
 .../src/main/webapp/js/redback/redback.js     |  2 +-
 .../src/main/webapp/js/redback/roles.js       | 90 ++++++++++++-------
 .../js/redback/templates/roles-tmpl.html      | 22 ++---
 4 files changed, 70 insertions(+), 45 deletions(-)

diff --git a/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/archiva/main.js b/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/archiva/main.js
index 7e2719b00..a4d238cb3 100644
--- a/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/archiva/main.js
+++ b/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/archiva/main.js
@@ -176,7 +176,6 @@ $(function() {
 
     // create handlers on menu entries to add class active on click
     var alinkNodes=$("#sidebar-content #main-menu").find("li a");
-    $.log("alinkNodes:"+alinkNodes.length);
     alinkNodes.on("click",function(){
       alinkNodes.parent("li").removeClass("active");
       $(this).parent("li").addClass("active");
diff --git a/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/redback/redback.js b/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/redback/redback.js
index eff82689a..4303569a9 100644
--- a/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/redback/redback.js
+++ b/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/redback/redback.js
@@ -19,7 +19,7 @@
 $(function() {
 
   // define a container object with various datas
-  window.redbackModel = {userOperationNames:null,key:null,i18n:$.i18n.map,rolesViewModel:null};
+  window.redbackModel = {userOperationNames:null,key:null,i18n:$.i18n.map};
 
   // unbinding
   $("#user-create-form-cancel-button").on("click", function(){
diff --git a/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/redback/roles.js b/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/redback/roles.js
index aeadba4d4..9877fedad 100644
--- a/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/redback/roles.js
+++ b/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/redback/roles.js
@@ -20,16 +20,37 @@ $(function() {
 
   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?";
@@ -81,20 +102,6 @@ $(function() {
     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({
@@ -113,8 +120,9 @@ $(function() {
       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()),
         {
@@ -122,16 +130,15 @@ $(function() {
          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");
          }
         }
       );
@@ -141,14 +148,29 @@ $(function() {
 
   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){
@@ -162,6 +184,7 @@ $(function() {
       for (var i = 0; i < removed.length; i++) {
         $.log("add user:"+removed[i].username());
         currentRole.users.push(removed[i]);
+        role.modified(true);
       }
       selectedOtherUsers([]);
       activateRoleUsersEditTab();
@@ -172,6 +195,7 @@ $(function() {
       for (var i = 0; i < added.length; i++) {
         currentRole.otherUsers.push(added[i]);
         currentRole.removedUsers.push(added[i]);
+        role.modified(true);
       }
       selectedUsers([]);
       activateRoleUsersEditTab()
@@ -185,12 +209,14 @@ $(function() {
     }
 
     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();
     }
   }
 
diff --git a/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/redback/templates/roles-tmpl.html b/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/redback/templates/roles-tmpl.html
index 9664890fc..608f29525 100644
--- a/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/redback/templates/roles-tmpl.html
+++ b/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/redback/templates/roles-tmpl.html
@@ -29,14 +29,14 @@
       <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>
@@ -134,17 +134,17 @@
       </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>
@@ -161,7 +161,7 @@
         </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>
@@ -191,7 +191,7 @@
   </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()}">
@@ -199,7 +199,7 @@
               </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}}
-- 
2.39.5