use a tabs model for the users view

git-svn-id: https://svn.apache.org/repos/asf/archiva/trunk@1215262 13f79535-47bb-0310-9956-ffa450edef68

archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/index.html

@@ -54,6 +54,7 @@
        .script("jquery.json-2.3.min.js").wait()
        .script("redback/operation.js").wait()
        .script("redback/redback-tmpl.js").wait()
+       .script("bootstrap-tabs.js")
        .script("bootstrap-modal.js").wait()
        .script("bootstrap-alerts.js").wait()
        .script("bootstrap-dropdown.js").wait()

archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/bootstrap-tabs.js

@@ -0,0 +1,80 @@
+/* ========================================================
+ * bootstrap-tabs.js v1.4.0
+ * http://twitter.github.com/bootstrap/javascript.html#tabs
+ * ========================================================
+ * Copyright 2011 Twitter, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ======================================================== */
+
+
+!function( $ ){
+
+  "use strict"
+
+  function activate ( element, container ) {
+    container
+      .find('> .active')
+      .removeClass('active')
+      .find('> .dropdown-menu > .active')
+      .removeClass('active')
+
+    element.addClass('active')
+
+    if ( element.parent('.dropdown-menu') ) {
+      element.closest('li.dropdown').addClass('active')
+    }
+  }
+
+  function tab( e ) {
+    var $this = $(this)
+      , $ul = $this.closest('ul:not(.dropdown-menu)')
+      , href = $this.attr('href')
+      , previous
+      , $href
+
+    if ( /^#\w+/.test(href) ) {
+      e.preventDefault()
+
+      if ( $this.parent('li').hasClass('active') ) {
+        return
+      }
+
+      previous = $ul.find('.active a').last()[0]
+      $href = $(href)
+
+      activate($this.parent('li'), $ul)
+      activate($href, $href.parent())
+
+      $this.trigger({
+        type: 'change'
+      , relatedTarget: previous
+      })
+    }
+  }
+
+
+ /* TABS/PILLS PLUGIN DEFINITION
+  * ============================ */
+
+  $.fn.tabs = $.fn.pills = function ( selector ) {
+    return this.each(function () {
+      $(this).delegate(selector || '.tabs li > a, .pills > li > a', 'click', tab)
+    })
+  }
+
+  $(document).ready(function () {
+    $('body').tabs('ul[data-tabs] li > a, ul[data-pills] > li > a')
+  })
+
+}( window.jQuery || window.ender );

archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/redback/templates/user-grids.html

@@ -89,17 +89,22 @@
 <script id="usersGrid"  type="text/x-jquery-tmpl">
     <h2>Users list</h2>
 
-    <button data-bind='click: addUser' class="btn">
-        Add User
-    </button>
-
     <button data-bind='click: sortByName'  class="btn">
         Sort by name
     </button>
-
+    <ul id="users-view-tabs" class="tabs">
-    <div id="usersPagination"></div>
+      <li class="active">
-
+        <a href="#users-view">Users</a>
-    <table class="bordered-table zebra-striped" data-bind="simpleGrid: gridViewModel" id="usersTable"></table>
+      </li>
-
+      <li>
-    <div id="createUserForm"></div>
+        <a href="#createUserForm">Add User</a>
+      </li>
+    </ul>
+    <div id="users-view-tabs-content" class="tab-content">
+      <div id="users-view">
+          <table class="bordered-table zebra-striped" data-bind="simpleGrid: gridViewModel" id="usersTable"></table>
+          <div id="usersPagination"></div>
+      </div>
+      <div id="createUserForm"></div>
+    </div>
 </script>

archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/redback/users.js

@@ -25,6 +25,7 @@ $(function() {
     this.loadUsers = function() {
       $.ajax("restServices/redbackServices/userService/getUsers", {
           type: "GET",
+          async: false,
           dataType: 'json',
           success: function(data) {
               var mappedUsers = $.map(data.user, function(item) {
@@ -152,8 +153,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) {
+      //$.log( $(e.target).attr("href") ); // activated tab
+      //e.relatedTarget // previous tab
+      if ($(e.target).attr("href")=="#createUserForm") {
+        window.redbackModel.usersViewModel.addUser();
+      }
+    })
+    $("#users-view-tabs-content #users-view").addClass("active");
   }
 
+
+
   userViewModel=function(user) {
       this.user=user;
   }