From f71272cd55a3f54690ef387b7c0aa9b4081c3d17 Mon Sep 17 00:00:00 2001
From: Olivier Lamy <olamy@apache.org>
Date: Sat, 7 Jan 2012 22:57:02 +0000
Subject: [PATCH] user edit view add a pill for user roles assignation

git-svn-id: https://svn.apache.org/repos/asf/archiva/trunk@1228753 13f79535-47bb-0310-9956-ffa450edef68
---
 .../js/redback/templates/user-edit.html       | 155 ++++++++++--------
 .../js/redback/templates/user-grids.html      |   8 +-
 .../src/main/webapp/js/redback/user.js        |   5 +-
 .../src/main/webapp/js/redback/users.js       |  35 ++--
 4 files changed, 115 insertions(+), 88 deletions(-)

diff --git a/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/redback/templates/user-edit.html b/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/redback/templates/user-edit.html
index 4406ac41e..6a819b0d9 100644
--- a/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/redback/templates/user-edit.html
+++ b/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/redback/templates/user-edit.html
@@ -1,74 +1,99 @@
 <script id='redback/user-edit-tmpl' type='text/x-jquery-tmpl'>
-
-  <div class="row">
-    <div class="span10 columns">
-    <form id="user-create">
-      <fieldset id="user-create-fieldset">
-        <div class="clearfix">
-          <label for="username">${i18n('username')}</label>
-          <div class="input" id="username-div">
-            {{if $data.username.length>0}}
-              <span class="uneditable-input">${$data.username}</span>
-            {{else}}
-              <input type="text" id="username" name="username" size="30" class="required" data-bind="value: username"/>
-            {{/if}}
-          </div>
-        </div>
-        <div class="clearfix">
-          <label for="fullname">${i18n('full.name')}</label>
-          <div class="input">
-            <input type="text" id="fullname" name="fullname" size="30" class="required" data-bind="value: fullName"/>
-          </div>
-        </div>
-        <div class="clearfix">
-          <label for="password">${i18n('password')}</label>
-          <div class="input">
-            <input type="password" id="password" name="password" class="required" data-bind="value: password"/>
-          </div>
-        </div>
-        <div class="clearfix">
-          <label for="confirmPassword">${i18n('confirm.password')}</label>
-          <div class="input">
-            <input type="password" id="confirmPassword" name="confirmPassword" data-bind="value: confirmPassword"/>
-          </div>
-        </div>
-        <div class="clearfix">
-          <label for="email">${i18n('email.address')}</label>
-          <div class="input">
-            <input type="text" id="email" name="email" class="required email" data-bind="value: email"/>
-          </div>
-        </div>
-        <div class="clearfix">
-          <label for="validated">${i18n('validated')}</label>
-          <div class="input">
-            <input type="checkbox" id="validated" name="validated" data-bind="checked: validated"/>
-          </div>
-        </div>
-        <div class="clearfix">
-          <label for="locked">${i18n('locked')}</label>
-          <div class="input">
-            <input type="checkbox" id="locked" name="locked" data-bind="checked: locked"/>
-          </div>
+<div id="edit-user-details-pills">
+  <ul id="edit_user_details_pills_headers" class="pills">
+    <li class="active" id="user-view-detail-li">
+      <a href="#user-create-div">${$.i18n.prop('user.details.edit')}</a>
+    </li>
+    <li id="user-edit-roles-edit-li">
+      <a href="#user-edit-roles-edit">${$.i18n.prop('effective.roles.edit')}</a>
+    </li>
+  </ul>
+  <div class="pill-content" id="edit-user-details-pills-content">
+    <div id="user-create-div" class="active">
+      <div class="row">
+        <div class="span8 columns">
+          <form id="user-create">
+            <fieldset id="user-create-fieldset">
+              <div class="clearfix">
+                <label for="username">${i18n('username')}</label>
+                <div class="input" id="username-div">
+                  {{if $data.username.length>0}}
+                    <span class="uneditable-input">${$data.username}</span>
+                  {{else}}
+                    <input type="text" id="username" name="username" size="30" class="required" data-bind="value: username"/>
+                  {{/if}}
+                </div>
+              </div>
+              <div class="clearfix">
+                <label for="fullname">${i18n('full.name')}</label>
+                <div class="input">
+                  <input type="text" id="fullname" name="fullname" size="30" class="required" data-bind="value: fullName"/>
+                </div>
+              </div>
+              <div class="clearfix">
+                <label for="password">${i18n('password')}</label>
+                <div class="input">
+                  <input type="password" id="password" name="password" class="required" data-bind="value: password"/>
+                </div>
+              </div>
+              <div class="clearfix">
+                <label for="confirmPassword">${i18n('confirm.password')}</label>
+                <div class="input">
+                  <input type="password" id="confirmPassword" name="confirmPassword" data-bind="value: confirmPassword"/>
+                </div>
+              </div>
+              <div class="clearfix">
+                <label for="email">${i18n('email.address')}</label>
+                <div class="input">
+                  <input type="text" id="email" name="email" class="required email" data-bind="value: email"/>
+                </div>
+              </div>
+              <div class="clearfix">
+                <label for="validated">${i18n('validated')}</label>
+                <div class="input">
+                  <input type="checkbox" id="validated" name="validated" data-bind="checked: validated"/>
+                </div>
+              </div>
+              <div class="clearfix">
+                <label for="locked">${i18n('locked')}</label>
+                <div class="input">
+                  <input type="checkbox" id="locked" name="locked" data-bind="checked: locked"/>
+                </div>
+              </div>
+              <div class="clearfix">
+                <label for="passwordChangeRequired">${i18n('passwordChangeRequired')}</label>
+                <div class="input">
+                  <input type="checkbox" id="passwordChangeRequired" name="passwordChangeRequired" data-bind="checked: passwordChangeRequired"/>
+                </div>
+              </div>
+            </fieldset>
+            <button data-bind="click: save" class="btn" id="user-create-form-register-button">${i18n('save')}</button>
+            <button class="btn" id="user-create-form-cancel-button">${i18n('cancel')}</button>
+          </form>
         </div>
-        <div class="clearfix">
-          <label for="passwordChangeRequired">${i18n('passwordChangeRequired')}</label>
-          <div class="input">
-            <input type="checkbox" id="passwordChangeRequired" name="passwordChangeRequired" data-bind="checked: passwordChangeRequired"/>
-          </div>
+        <div class="span8 columns" id="user-edit-roles">
+          <div id="user-edit-roles-view"></div>
         </div>
-      </fieldset>
-      <button data-bind="click: save" class="btn" id="user-create-form-register-button">${i18n('save')}</button>
-      <button class="btn" id="user-create-form-cancel-button">${i18n('cancel')}</button>
-    </form>
-    </div>
-    <div class="span6 columns" id="user-edit-roles" style="display:none">
-      <div class="page-header">
-        <h3>${$.i18n.prop('effective.roles')}</h3>
       </div>
-      <div id="user-edit-roles-view"></div>
     </div>
-  </div>
 
+    <div id="user-edit-roles-edit">
+      roles edit
+    </div>
+  </div>
+</div>
 </script>
 
+<script id="user_edit_roles_tmpl" type="text/x-jquery-tmpl">
+  <div class="page-header">
+    <h3>${$.i18n.prop('effective.roles')}</h3>
+  </div>
+  <div>
+    <ul>
+      {{each $data.roles}}
+        <li>${$value.name}</li>
+      {{/each}}
+    </ul>
+  </div>
+</script>
 
diff --git a/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/redback/templates/user-grids.html b/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/redback/templates/user-grids.html
index 34b824832..641cde4e7 100644
--- a/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/redback/templates/user-grids.html
+++ b/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/redback/templates/user-grids.html
@@ -97,10 +97,4 @@
     </div>
 </script>
 
-<script id="user_edit_roles_tmpl" type="text/x-jquery-tmpl">
-  <ul>
-    {{each $data.roles}}
-      <li>${$value.name}</li>
-    {{/each}}
-  </ul>
-</script>
+
diff --git a/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/redback/user.js b/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/redback/user.js
index ea8433a46..188a14cbe 100644
--- a/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/redback/user.js
+++ b/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/redback/user.js
@@ -17,6 +17,7 @@
  * under the License.
  */
 $(function() {
+
   /**
    * object model for user with some function to create/update/delete users
    * @param username
@@ -227,8 +228,10 @@ $(function() {
       showErrors: function(validator, errorMap, errorList) {
         customShowError(validator,errorMap,errorMap);
       }
-    });
 
+    });
+    // desactivate roles pill when adding user
+    $("#edit_user_details_pills_headers").hide();
   }
 
   /**
diff --git a/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/redback/users.js b/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/redback/users.js
index 4ef9bfbbc..95ecfb826 100644
--- a/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/redback/users.js
+++ b/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/redback/users.js
@@ -59,6 +59,7 @@ $(function() {
     this.addUser=function() {
       clearUserMessages();
       window.redbackModel.createUser=true;
+      $("#createUserForm").html("");
       $("#main-content #user-edit").remove();
       $('#main-content #user-create').show();
       ko.renderTemplate("redback/user-edit-tmpl", new User(), null, $("#createUserForm").get(0),"replaceChildren");
@@ -79,6 +80,10 @@ $(function() {
       $("#main-content #createUserForm #user-create").delegate("#user-create-form-register-button", "click keydown", function(e) {
         e.preventDefault();
       });
+
+      // desactivate roles pill when adding user
+      $("#edit_user_details_pills_headers").hide();
+
     };
 
     this.lock = function(user){
@@ -112,15 +117,17 @@ $(function() {
     this.editUserBox=function(user) {
       window.redbackModel.createUser=false;
       clearUserMessages();
+      activateUsersEditTab();
+      // if already created before
+      //$("#main-content #createUserForm").accordion("destroy");
+      $("#main-content #createUserForm").html("");
       $("#main-content #createUserForm").attr("data-bind",'template: {name:"redback/user-edit-tmpl",data: user}');
 
-      var viewModel = new userViewModel(user);
+      var viewModel = new UserViewModel(user);
 
       ko.applyBindings(viewModel,$("#main-content #createUserForm").get(0));
 
-      activateUsersEditTab();
-
-      $("#users-view-tabs-li-user-edit a").html($.i18n.prop("user.edit"));
+      $("#main-content #users-view-tabs-li-user-edit a").html($.i18n.prop("user.edit"));
 
       $("#main-content #user-create").delegate("#user-create-form-cancel-button", "click keydown", function(e) {
         e.preventDefault();
@@ -146,22 +153,20 @@ $(function() {
         user.update();
       });
 
-      $("#user-edit-roles").show();
-      $( "#user-edit-roles-view" ).append(smallSpinnerImg());
+      $( "#main-content #user-edit-roles-view" ).append(smallSpinnerImg());
       $.ajax("restServices/redbackServices/roleManagementService/getEffectivelyAssignedRoles/"+encodeURIComponent(user.username()), {
           type: "GET",
           async: false,
           dataType: 'json',
           success: function(data) {
-            $("#user-edit-roles-view").show();
+            //$("#user-edit-roles-view").show();
             var mappedRoles = $.map(data.role, function(item) {
               return mapRole(item);
             });
-            //$( "#user-edit-roles-view" ).append( jQuery("#user_edit_roles_tmpl" ).tmpl( data.role ) );
             viewModel.roles=mappedRoles;
-            $( "#user-edit-roles-view").attr("data-bind",'template: {name:"user_edit_roles_tmpl"}');
+            $("#main-content #user-edit-roles-view").attr("data-bind",'template: {name:"user_edit_roles_tmpl"}');
             ko.applyBindings(viewModel,$("#user-edit-roles-view").get(0));
-            removeSmallSpinnerImg();
+            $("#main-content #edit-user-details-pills-headers").pills();
           }
         }
       );
@@ -169,7 +174,7 @@ $(function() {
     }
   }
 
-  userViewModel=function(user) {
+  UserViewModel=function(user) {
     this.user=user;
     this.roles = ko.observableArray(new Array());
   }
@@ -184,19 +189,19 @@ $(function() {
     window.redbackModel.usersViewModel = new usersViewModel();
     window.redbackModel.usersViewModel.loadUsers();
     ko.applyBindings(window.redbackModel.usersViewModel,jQuery("#main-content").get(0));
-    $("#users-view-tabs").tabs();
-    $("#users-view-tabs").bind('change', function (e) {
+    $("#main-content #users-view-tabs").tabs();
+    $("#main-content #users-view-tabs").bind('change', function (e) {
       //$.log( $(e.target).attr("href") ); // activated tab
       //e.relatedTarget // previous tab
       if ($(e.target).attr("href")=="#createUserForm") {
         window.redbackModel.usersViewModel.addUser();
       }
       if ($(e.target).attr("href")=="#users-view") {
-        $("#users-view-tabs-li-user-edit a").html($.i18n.prop("user.add"));
+        $("#main-content #users-view-tabs-li-user-edit a").html($.i18n.prop("user.add"));
       }
 
     })
-    $("#users-view-tabs-content #users-view").addClass("active");
+    $("#main-content #users-view-tabs-content #users-view").addClass("active");
   }
 
   activateUsersGridTab=function(){
-- 
2.39.5