move roles grid to use knockout

git-svn-id: https://svn.apache.org/repos/asf/archiva/trunk@1226202 13f79535-47bb-0310-9956-ffa450edef68
2012-01-01 00:45:36 +00:00 · 2012-01-01 00:45:36 +00:00 · 60162c52cc
parent b83441fec2
commit 60162c52cc
10 changed files with 122 additions and 47 deletions
--- a/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/css/archiva.css
+++ b/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/css/archiva.css
@ -15,4 +15,9 @@
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
- */
+ */
+
+/* medium-spinner */
+#medium-spinner {
+ z-index: 20001;
+}
--- a/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/archiva/utils.js
+++ b/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/archiva/utils.js
@ -142,9 +142,21 @@ openDialogConfirm=function(okFn, okMessage, cancelMessage, title,bodyText){
 * return a small spinner html img element
 */
 smallSpinnerImg=function(){
-  return "<img id=\"login-spinner\" src=\"images/small-spinner.gif\"/>";
+  return "<img id=\"small-spinner\" src=\"images/small-spinner.gif\"/>";
 };

+removeSmallSpinnerImg=function(){
+  $("#small-spinner").remove();
+}
+
+mediumSpinnerImg=function(){
+  return "<img id=\"medium-spinner\" src=\"images/medium-spinner.gif\"/>";
+};
+
+removeMediumSpinnerImg=function(){
+  $("#small-spinner").remove();
+}
+
 closeDialogConfirm=function(){
  window.modalConfirmDialog.modal('hide');
 }
--- a/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/knockout.simpleGrid.js
+++ b/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/knockout.simpleGrid.js
@ -18,15 +18,14 @@
        this.data = configuration.data;
        this.currentPageIndex = ko.observable(0);
        this.pageSize = configuration.pageSize || 5;
-        this.pageLinksId = configuration.pageLinksId;
        this.columns = configuration.columns;

-        this.itemsOnCurrentPage = ko.dependentObservable(function () {
+        this.itemsOnCurrentPage = ko.computed(function () {
            var startIndex = this.pageSize * this.currentPageIndex();
            return this.data.slice(startIndex, startIndex + this.pageSize);
        }, this);

-        this.maxPageIndex = ko.dependentObservable(function () {
+        this.maxPageIndex = ko.computed(function () {
            return Math.ceil(ko.utils.unwrapObservable(this.data).length / this.pageSize);
        }, this);
        this.i18n=function(key){
@ -58,7 +57,7 @@
          ko.renderTemplate(gridTemplateName, viewModel, { templateEngine: templateEngine }, gridContainer, "replaceNode");

          // Render the page links
-          var pageLinksContainer = $("#"+viewModel.pageLinksId).get(0);//.appendChild(document.createElement("DIV"));
+          var pageLinksContainer = $("#"+allBindings.pageLinksId).get(0);
          ko.renderTemplate(pageLinksTemplateName, viewModel, { templateEngine: templateEngine }, pageLinksContainer, "replaceNode");
        }
    };
--- 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 = {usersViewModel:null,userOperationNames:null,key:null,userCreate:false,i18n:$.i18n.map};
+  window.redbackModel = {usersViewModel:null,userOperationNames:null,key:null,userCreate:false,i18n:$.i18n.map,rolesViewModel:null};

  /**
   * display redback error from redback json error response
--- a/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/redback/register.js
+++ b/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/redback/register.js
@ -80,7 +80,7 @@ $(function() {
      },
      complete: function(){
        $("#modal-register-ok").removeAttr("disabled");
-        $("#login-spinner").remove();
+        removeSmallSpinnerImg();
      },
      error: function(result) {
        var obj = jQuery.parseJSON(result.responseText);
--- 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
@ -57,9 +57,9 @@ $(function() {
  /**
   * view model used for roles grid
   */
-  rolesViewModel=function() {
+  RolesViewModel=function() {
    this.roles = ko.observableArray([]);
-
+    var self = this;
    this.loadRoles = function() {
      $.ajax("restServices/redbackServices/roleManagementService/allRoles", {
          type: "GET",
@ -75,12 +75,45 @@ $(function() {
      );
    };

+
+    this.gridViewModel = new ko.simpleGrid.viewModel({
+      data: this.roles,
+      viewModel: this,
+      columns: [
+        {
+          headerText: $.i18n.prop('name'),
+          rowText: "name"
+        },
+        {
+          headerText: $.i18n.prop('description'),
+          rowText: "description"
+        }
+      ],
+      pageSize: 10
+    });
+
+    this.editRole=function(role){
+      $("#main-content #roles-view-tabs-content #role-edit").attr("data-bind",'template: {name:"editRoleTab",data: role}');
+
+      var viewModel = new roleViewModel(role);
+      ko.applyBindings(viewModel,$("#main-content #roles-view-tabs-content #role-edit").get(0));
+    }
+
  }


+
  displayRolesGrid = function(){
    $("#user-messages").html("");
-    $("#main-content").html("");
+    $("#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));
+    $("#roles-view-tabs").tabs();
+    activateRolesGridTab();
+    removeMediumSpinnerImg();
+    /*
    $.ajax("restServices/redbackServices/roleManagementService/detailledAllRoles",
      {
       type: "GET",
@ -95,9 +128,13 @@ $(function() {
         $("#main-content #roles-view-tabs-content #roles-view").html($("#rolesGrid").tmpl(data));
         $("#roles-view-tabs").tabs();
         activateRolesGridTab();
+       },
+       complete: function(){
+         removeMediumSpinnerImg();
       }
      }
    );
+    */
  }

  editRole = function(roleName){
@ -123,6 +160,10 @@ $(function() {

  }

+  roleViewModel=function(role){
+    this.role=role;
+  }
+
  /**
   * @param data Role response from redback rest api
   */
--- 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
@ -1,26 +1,3 @@
-<script id="rolesGrid"  type="text/x-jquery-tmpl">
-  <table class="bordered-table zebra-striped" id="rolesTable">
-    <thead>
-      <tr>
-        <th>${$.i18n.prop('name')}</th>
-        <th>${$.i18n.prop('description')}</th>
-        <th>${$.i18n.prop('edit')}</th>
-      </tr>
-    </thead>
-    <tbody>
-      {{each roles}}
-        <tr>
-          <td>${$value.name}</td>
-          <td>${$value.description}</td>
-          <td>
-            <a href="#" onclick="javascript:editRole(encodeURI('${$value.name}'));">${$.i18n.prop('edit')}</a>
-          </td>
-        </tr>
-      {{/each}}
-    </tbody>
-  </table>
-</script>
-
 <script id="rolesTabs" type="text/x-jquery-tmpl">
  <div class="page-header">
    <h2>${$.i18n.prop('roles.list')}</h2>
@ -36,6 +13,10 @@
  </ul>
  <div id="roles-view-tabs-content" class="tab-content">
    <div id="roles-view">
+        <table class="bordered-table zebra-striped" id="usersTable"
+               data-bind="simpleGrid: gridViewModel,simpleGridTemplate:'ko_rolesGrid',simpleGridPagerTemplate:'ko_rolesGrid_pageLinks',pageLinksId:'rolesPagination'">
+        </table>
+        <div id="rolesPagination"></div>
    </div>
    <div id="role-edit"></div>
  </div>
@ -169,3 +150,41 @@
  {{/if}}

 </script>
+
+
+<script id='ko_rolesGrid' type='text/x-jquery-tmpl'>
+  <thead>
+      <tr>
+        {{each(i, columnDefinition) columns}}
+          <th>${ columnDefinition.headerText }</th>
+        {{/each}}
+        <th>${$.i18n.prop('edit')}</th>
+
+      </tr>
+  </thead>
+  <tbody>
+      {{each(i, row) itemsOnCurrentPage()}}
+          <tr>
+              {{each(j, columnDefinition) columns}}
+              <td>${ typeof columnDefinition.rowText == 'function' ? columnDefinition.rowText(row) : row[columnDefinition.rowText] }</td>
+              {{/each}}
+              <td><a href="#" data-bind="click: function(){ window.redbackModel.rolesViewModel.editRole(row) }">Edit</a></td>
+          </tr>
+      {{/each}}
+  </tbody>
+
+</script>
+
+<script id="ko_rolesGrid_pageLinks" type="text/x-jquery-tmpl">
+  <div class="pagination">
+      <ul>
+      {{each(i) ko.utils.range(1, maxPageIndex)}}
+          <li data-bind="css: { active: i == currentPageIndex() }">
+            <a href="#" data-bind="click: function() { currentPageIndex(i) }">
+              ${ i + 1 }
+            </a>
+          </li>
+      {{/each}}
+      </ul>
+  </div>
+</script>
--- 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
@ -1,13 +1,13 @@
 <script id='ko_usersGrid_grid' type='text/x-jquery-tmpl'>
  <thead>
      <tr>
-          {{each(i, columnDefinition) columns}}
-              <th>${ columnDefinition.headerText }</th>
-          {{/each}}
-          <th>${$.i18n.prop('edit')}</th>
-          <th>${$.i18n.prop('delete')}</th>
-          <th>${$.i18n.prop('user.list.locked')}</th>
-          <th>${$.i18n.prop('user.change.password.required')}</th>
+        {{each(i, columnDefinition) columns}}
+          <th>${ columnDefinition.headerText }</th>
+        {{/each}}
+        <th>${$.i18n.prop('edit')}</th>
+        <th>${$.i18n.prop('delete')}</th>
+        <th>${$.i18n.prop('user.list.locked')}</th>
+        <th>${$.i18n.prop('user.change.password.required')}</th>
      </tr>
  </thead>
  <tbody>
@ -103,7 +103,9 @@
        <button data-bind='click: sortByName'  class="btn">
            ${$.i18n.prop('users.sort.byname')}
        </button>
-        <table class="bordered-table zebra-striped" data-bind="simpleGrid: gridViewModel" id="usersTable"></table>
+        <table class="bordered-table zebra-striped" id="usersTable"
+               data-bind="simpleGrid: gridViewModel,simpleGridTemplate:'ko_usersGrid_grid',simpleGridPagerTemplate:'ko_usersGrid_pageLinks',pageLinksId:'usersPagination'">
+        </table>
        <div id="usersPagination"></div>
      </div>
      <div id="createUserForm"></div>
--- 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
@ -316,7 +316,7 @@ $(function() {
   */
  var completeLoginCallbackFn=function(){
    $("#modal-login-ok").removeAttr("disabled");
-    $("#login-spinner").remove();
+    $("#small-spinner").remove();
  }

  /**
@ -532,7 +532,7 @@ $(function() {

      },
      complete: function(){
-        $("#login-spinner").remove();
+        $("#small-spinner").remove();
        window.modalChangePasswordBox.modal('hide');
      },
      error: function(result) {
--- 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
@ -42,7 +42,6 @@ $(function() {
    this.gridViewModel = new ko.simpleGrid.viewModel({
      data: this.users,
      viewModel: this,
-      pageLinksId: "usersPagination",
      columns: [
        {
          headerText: "User Name",
@ -166,8 +165,6 @@ $(function() {
    */
  displayUsersGrid=function() {
    screenChange();
-    jQuery("#main-content").attr("data-bind","");
-    jQuery("#main-content").html($("#usersGrid").html());
    jQuery("#main-content").attr("data-bind",'template: {name:"usersGrid"}');
    window.redbackModel.usersViewModel = new usersViewModel();
    window.redbackModel.usersViewModel.loadUsers();