From c8ac02d78e89fa9f30b16876a73c57396a7d11fd Mon Sep 17 00:00:00 2001
From: Olivier Lamy <olamy@apache.org>
Date: Thu, 5 Jan 2012 22:23:03 +0000
Subject: [PATCH] use a pills/tabs mode to switch from users list to update
 mode

git-svn-id: https://svn.apache.org/repos/asf/archiva/trunk@1227874 13f79535-47bb-0310-9956-ffa450edef68
---
 .../src/main/webapp/js/redback/roles.js       |  6 +-
 .../js/redback/templates/roles-tmpl.html      | 72 +++++++++++--------
 2 files changed, 46 insertions(+), 32 deletions(-)

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 da7922d59..54eed7d79 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
@@ -113,7 +113,7 @@ $(function() {
     this.editRole=function(role){
       $("#main-content #roles-view-tabs-content #role-edit").html(mediumSpinnerImg());
       // load missing attributes
-      $.ajax("restServices/redbackServices/roleManagementService/getRole/"+role.name(),
+      $.ajax("restServices/redbackServices/roleManagementService/getRole/"+encodeURIComponent(role.name()),
         {
          type: "GET",
          dataType: 'json',
@@ -127,6 +127,8 @@ $(function() {
            var viewModel = new RoleViewModel(role);
            ko.applyBindings(viewModel,$("#main-content #roles-view-tabs-content #role-edit").get(0));
            activateRoleEditTab();
+           $("#role-edit-users-tabs").tabs();
+           $("#role-edit-users-tabs-content #role-view-users").addClass("active");
          }
         }
       );
@@ -143,7 +145,7 @@ $(function() {
     window.redbackModel.rolesViewModel.loadRoles();
     $("#main-content").html($("#rolesTabs").tmpl());
     ko.applyBindings(window.redbackModel.rolesViewModel,jQuery("#main-content").get(0));
-    $("#roles-view-tabs").tabs();
+    $("#roles-view-tabs").pills();
     activateRolesGridTab();
     removeMediumSpinnerImg();
   }
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 63dfdc29f..7f1ed50c3 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
@@ -116,38 +116,50 @@
       </ul>
   {{/if}}
 
-  <div class="page-header">
-    <h3>${$.i18n.prop('role.edit.users.defined.in.current.role')}</h3>
-  </div>
-  <div id="role-list-users">
-    {{if $data.users}}
-        <ul>
-        {{each users}}
-          <li>${$value.fullName} - ( ${$value.username} - ${$value.email} ) </li>
-        {{/each}}
+  <ul id="role-edit-users-tabs" class="pills">
+    <li class="active">
+      <a href="#role-view-users">${$.i18n.prop('role.edit.users.list')}</a>
+    </li>
+    <li>
+      <a 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 class="page-header">
+          <h3>${$.i18n.prop('role.edit.users.defined.in.current.role')}</h3>
+        </div>
+        <div id="role-list-users">
+          {{if $data.users}}
+              <ul>
+              {{each users}}
+                <li>${$value.fullName} - ( ${$value.username} - ${$value.email} ) </li>
+              {{/each}}
+              </ul>
+          {{else}}
+            ${$.i18n.prop('role.edit.no.user.defined')}
+          {{/if}}
+        </div>
+      </div>
+
+      <div id="role-edit-users" class="clearfix ar-multiselect">
+
+        <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>
+        </div>
+        <div class="ar-multiselect-column ar-multiselect-center">
+        <ul style="list-style: none">
+          <li><input class="btn" id="role-edit-users-add-user" type="button" data-bind="click: addUser" value="&gt;"/></li>
+          <li><input class="btn" id="role-edit-users-remove-user" type="button" data-bind="click: removeUser" value="&lt;"/></li>
         </ul>
-    {{else}}
-      ${$.i18n.prop('role.edit.no.user.defined')}
-    {{/if}}
-  </div>
-
-  <div id="role-edit-users" class="clearfix ar-multiselect">
-
-    <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>
-    </div>
-    <div class="ar-multiselect-column ar-multiselect-center">
-    <ul style="list-style: none">
-      <li><input class="btn" id="role-edit-users-add-user" type="button" data-bind="click: addUser" value="&gt;"/></li>
-      <li><input class="btn" id="role-edit-users-remove-user" type="button" data-bind="click: removeUser" value="&lt;"/></li>
-    </ul>
-    </div>
-    <div class="ar-multiselect-column ar-multiselect-right">
-      <select data-bind="options: users ,optionsText: 'username',selectedOptions:selectedUsers" multiple="true" id="role-edit-affected-users"></select>
-    </div>
-    <button class="btn" id="role-edit-users-save" data-bind="click: saveUsers">${$.i18n.prop('save')}</button>
+        </div>
+        <div class="ar-multiselect-column ar-multiselect-right">
+          <select data-bind="options: users ,optionsText: 'username',selectedOptions:selectedUsers" multiple="true" id="role-edit-affected-users"></select>
+        </div>
+        <button class="btn" id="role-edit-users-save" data-bind="click: saveUsers">${$.i18n.prop('save')}</button>
+      </div>
   </div>
-
 </script>
 
 
-- 
2.39.5