From 216591f7d55ad758f0d076b94ad4e76686858025 Mon Sep 17 00:00:00 2001
From: Olivier Lamy <olamy@apache.org>
Date: Sun, 1 Jan 2012 00:45:53 +0000
Subject: [PATCH] role edit detail with knockout

git-svn-id: https://svn.apache.org/repos/asf/archiva/trunk@1226203 13f79535-47bb-0310-9956-ffa450edef68
---
 .../src/main/webapp/index.html                |  1 +
 .../src/main/webapp/js/archiva/utils.js       | 18 ++---
 .../src/main/webapp/js/redback/roles.js       | 74 +++++++------------
 .../js/redback/templates/roles-tmpl.html      | 63 ++++++----------
 4 files changed, 58 insertions(+), 98 deletions(-)

diff --git a/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/index.html b/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/index.html
index a67029133..e55b96373 100644
--- a/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/index.html
+++ b/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/index.html
@@ -60,6 +60,7 @@
        .script("bootstrap-alerts.js").wait()
        .script("bootstrap-dropdown.js").wait()
        .script("knockout.simpleGrid.js").wait()
+       .script("knockout.mapping-latest.debug.js").wait()
        .script("redback/user.js").wait()
        .script("redback/users.js").wait()
        .script("redback/redback.js").wait()
diff --git 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
index 6dd46900b..223968d1b 100644
--- 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
@@ -191,14 +191,14 @@ openDialogConfirmui=function(okFn, okMessage, cancelMessage, title){
 }
 
 mapStringArray=function(data){
-  if ($.isArray(data)){
-    //$.log("isArray");
-    return $.map(data,function(item){
-      return item;
-    });
-  } else {
-    //$.log("not Array");
-    return [data];
+  if (data) {
+    if ($.isArray(data)){
+      return $.map(data,function(item){
+        return item;
+     });
+    } else {
+      return new Array(data);
+    }
   }
-
+  return null;
 }
\ No newline at end of file
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 bc61a5a40..c68276880 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
@@ -28,11 +28,6 @@ $(function() {
     this.parentsRolesUsers = ko.observableArray(parentsRolesUsers);//read only
     this.permissions = ko.observableArray(permissions);//read only
 
-
-
-
-
-
     this.updateDescription=function(){
       var url = "restServices/redbackServices/roleManagementService/updateRoleDescription?";
       var roleName = this.name();
@@ -93,10 +88,30 @@ $(function() {
     });
 
     this.editRole=function(role){
-      $("#main-content #roles-view-tabs-content #role-edit").attr("data-bind",'template: {name:"editRoleTab",data: role}');
+      $("#main-content #roles-view-tabs-content #role-edit").html(mediumSpinnerImg());
+      // load missing attributes
+      $.ajax("restServices/redbackServices/roleManagementService/getRole/"+role.name(),
+        {
+         type: "GET",
+         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: role}');
+           role.parentRoleNames=mappedRole.parentRoleNames;
+           role.parentsRolesUsers=mappedRole.parentsRolesUsers;
+           role.users=mappedRole.users;
+           var viewModel = new roleViewModel(role);
+           ko.applyBindings(viewModel,$("#main-content #roles-view-tabs-content #role-edit").get(0));
+           activateRoleEditTab();
+         }
+        }
+      );
+
+
+    }
 
-      var viewModel = new roleViewModel(role);
-      ko.applyBindings(viewModel,$("#main-content #roles-view-tabs-content #role-edit").get(0));
+    this.saveRoleDescription=function(role){
+      $.log("saveRoleDescription:"+role.description);
     }
 
   }
@@ -113,43 +128,6 @@ $(function() {
     $("#roles-view-tabs").tabs();
     activateRolesGridTab();
     removeMediumSpinnerImg();
-    /*
-    $.ajax("restServices/redbackServices/roleManagementService/detailledAllRoles",
-      {
-       type: "GET",
-       dataType: 'json',
-       success: function(data) {
-         var roles = $.map(data.role, function(item) {
-           return mapRole(item);
-         });
-         //$.log(ko.toJSON(roles));
-         $("#main-content").html($("#rolesTabs").tmpl());
-         var data = {roles: roles};
-         $("#main-content #roles-view-tabs-content #roles-view").html($("#rolesGrid").tmpl(data));
-         $("#roles-view-tabs").tabs();
-         activateRolesGridTab();
-       },
-       complete: function(){
-         removeMediumSpinnerImg();
-       }
-      }
-    );
-    */
-  }
-
-  editRole = function(roleName){
-    $.log("edit role:"+roleName);
-    $.ajax("restServices/redbackServices/roleManagementService/getRole/"+roleName,
-      {
-       type: "GET",
-       dataType: 'json',
-       success: function(data) {
-         var role = mapRole(data.role);
-         $("#main-content #roles-view-tabs-content #role-edit").html($("#editRoleTab").tmpl(data.role));
-         activateRoleEditTab();
-       }
-      }
-    );
   }
 
   saveRoleDescription=function(){
@@ -174,15 +152,15 @@ $(function() {
     var parentRoleNames = mapStringArray(data.parentRoleNames);
     var users = data.users ? $.isArray(data.users) ? $.map(data.users, function(item) {
       return mapUser(item);
-    }):[mapUser(data.users)]:null;
+    }):new Array(mapUser(data.users)):null;
 
     var parentsRolesUsers = data.parentsRolesUsers ? $.isArray(data.parentsRolesUsers)? $.map(data.parentsRolesUsers, function(item) {
       return mapUser(item);
-    }):[mapUser(data.parentsRolesUsers)]:null;
+    }):new Array(mapUser(data.parentsRolesUsers)):null;
 
     var permissions = data.permissions? $.isArray(data.permissions) ? $.map(data.permissions, function(item){
       return mapPermission(item);
-    }): [mapPermission(data.permissions)] :null;
+    }): new Array(mapPermission(data.permissions)) :null;
 
     return new role(data.name, data.description,data.assignable,childRoleNames,parentRoleNames,users,parentsRolesUsers,permissions);
   }
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 90e25d91b..b5d2ce7b7 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
@@ -31,16 +31,16 @@
     <tbody>
       <tr>
         <td>${$.i18n.prop('name')}:</td>
-        <td id="role-edit-name">${name}</td>
+        <td id="role-edit-name">${$data.name}</td>
       </tr>
       <tr>
         <td>${$.i18n.prop('description')}:</td>
-        <td><input type="text" id="role-edit-description" value="${description}"></td>
+        <td><input type="text" id="role-edit-description" data-bind="value: description"></td>
       </tr>
       <tr>
         <td colspan="2">
           <div class="pull-left">
-            <button class="btn" onclick="saveRoleDescription();">${$.i18n.prop('save')}</button>
+            <button class="btn" data-bind="click: saveRoleDescription">${$.i18n.prop('save')}</button>
           </div>
         </td>
       </tr>
@@ -50,37 +50,30 @@
   <div class="page-header">
     <h3>${$.i18n.prop('role.model.parent.roles')}</h3>
   </div>
-  {{if parentRoleNames}}
+  {{if $data.parentRoleNames}}
     <ul>
-      {{if $.isArray(parentRoleNames)}}
-        {{each parentRoleNames}}
+        {{each $data.parentRoleNames}}
           <li>${$value}</li>
         {{/each}}
-      {{else}}
-        <li>${parentRoleNames}</li>
-      {{/if}}
+
     </ul>
   {{/if}}
 
   <div class="page-header">
     <h3>${$.i18n.prop('role.model.child.roles')}</h3>
   </div>
-  {{if childRoleNames}}
+  {{if $data.childRoleNames}}
     <ul>
-      {{if $.isArray(childRoleNames)}}
-        {{each childRoleNames}}
+        {{each $data.childRoleNames}}
           <li>${$value}</li>
         {{/each}}
-      {{else}}
-        <li>${childRoleNames}</li>
-      {{/if}}
     </ul>
   {{/if}}
 
   <div class="page-header">
     <h3>${$.i18n.prop('permissions')}</h3>
   </div>
-  {{if permissions}}
+  {{if $data.permissions}}
     <table class="bordered-table zebra-striped" id="rolePermissionsTable">
       <thead>
         <tr>
@@ -90,21 +83,21 @@
         </tr>
       </thead>
       <tbody>
-        {{if $.isArray(permissions)}}
           {{each permissions}}
             <tr>
               <td>${$value.name}</td>
-              <td>${$value.operation.name}</td>
-              <td>${$value.resource.identifier}</td>
+              {{if $value.operation }}
+                <td>${$value.operation.name}</td>
+              {{else}}
+                <td></td>
+              {{/if}}
+              {{if $value.resource }}
+                <td>${$value.resource.identifier}</td>
+              {{else}}
+                <td></td>
+              {{/if}}
             </tr>
           {{/each}}
-        {{else}}
-          <tr>
-            <td>${permissions.name}</td>
-            <td>${permissions.operation.name}</td>
-            <td>${permissions.resource.identifier}</td>
-          </tr>
-        {{/if}}
       </tbody>
     </table>
   {{/if}}
@@ -112,39 +105,27 @@
   <div class="page-header">
     <h2>${$.i18n.prop('role.edit.section.users')}</h2>
   </div>
-  {{if parentsRolesUsers}}
+  {{if $data.parentsRolesUsers}}
     <div class="page-header">
       <h3>${$.i18n.prop('role.edit.users.defined.in.parent.roles')}</h3>
     </div>
-    {{if $.isArray(parentsRolesUsers)}}
       <ul>
-      {{each parentsRolesUsers}}
+      {{each $data.parentsRolesUsers}}
         <li>${$value.fullName} - ( ${$value.username} - ${$value.email} ) </li>
       {{/each}}
       </ul>
-    {{else}}
-      <ul>
-        <li>${parentsRolesUsers.fullName} - ( ${parentsRolesUsers.username} - ${parentsRolesUsers.email} ) </li>
-      </ul>
-    {{/if}}
   {{/if}}
 
   <div class="page-header">
     <h3>${$.i18n.prop('role.edit.users.defined.in.current.role')}</h3>
   </div>
 
-  {{if users}}
-    {{if $.isArray(users)}}
+  {{if $data.users}}
       <ul>
       {{each users}}
         <li>${$value.fullName} - ( ${$value.username} - ${$value.email} ) </li>
       {{/each}}
       </ul>
-    {{else}}
-      <ul>
-        <li>${users.fullName} - ( ${users.username} - ${users.email} ) </li>
-      </ul>
-    {{/if}}
   {{else}}
     ${$.i18n.prop('role.edit.no.user.defined')}
   {{/if}}
-- 
2.39.5