knockout binding between available roles and user assigned roles

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

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

@@ -259,15 +259,15 @@ $(function() {
 
   ApplicationRoles = function(name,description,globalRoles,roleTemplates,resources){
     //private String name;
-    this.name = name;
+    this.name = ko.observable(name);
     //private String description;
-    this.description = description;
+    this.description = description? ko.observable(description):"";
     //private Collection<String> globalRoles;
-    this.globalRoles = globalRoles;
+    this.globalRoles = ko.observableArray(globalRoles);
     //private Collection<RoleTemplate> roleTemplates;
-    this.roleTemplates = roleTemplates;
+    this.roleTemplates = ko.observableArray(roleTemplates);
     //private Collection<String> resources;
-    this.resources = resources;
+    this.resources = ko.observableArray(resources);
   }
 
   mapApplicationRoles=function(data){
@@ -280,17 +280,17 @@ $(function() {
 
   RoleTemplate = function(id,namePrefix,delimiter,description,resource,roles){
     //private String id;
-    this.id = id;
+    this.id = ko.observable(id);
     //private String namePrefix;
-    this.namePrefix = namePrefix;
+    this.namePrefix = ko.observable(namePrefix);
     //private String delimiter = " - ";
-    this.delimiter = delimiter;
+    this.delimiter = ko.observable(delimiter);
     //private String description;
-    this.description = description;
+    this.description = description? ko.observable(description):"";
     //private String resource;
-    this.resource = resource;
+    this.resource = ko.observable(resource);
     //private List<String> roles;
-    this.roles = roles;
+    this.roles = ko.observableArray(roles);
   }
 
   mapRoleTemplate = function(data){

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

@@ -84,16 +84,38 @@
 </div>
 </script>
 
-<script id="user_edit_roles_tmpl" type="text/x-jquery-tmpl">
+<script id="user_view_roles_list_tmpl" type="text/x-jquery-tmpl">
   <div class="page-header">
     <h3>${$.i18n.prop('effective.roles')}</h3>
   </div>
   <div>
     <ul>
       {{each $data.user.assignedRoles}}
-        <li>${$value.name}</li>
+        <li>${$value}</li>
       {{/each}}
     </ul>
   </div>
 </script>
 
+<script id="user_edit_roles_tmpl" type="text/x-jquery-tmpl">
+
+  <div>
+    {{each $data.applicationRoles}}
+      <div class="page-header">
+        <h3>${$value.name}</h3>
+      </div>
+      <blockquote>
+        <p>${$value.description}</p>
+      </blockquote>
+      <ul>
+      {{each $value.globalRoles}}
+        <li><div><input type="checkbox" value="${$value}" data-bind="checked: user.assignedRoles" />&nbsp;${$value}</div></li>
+      {{/each}}
+      </ul>
+    {{/each}}
+
+    <button class="btn" data-bind="click:updateUserRoles">${$.i18n.prop('update')}</button>
+
+  </div>
+</script>
+

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

@@ -118,9 +118,7 @@ $(function() {
       window.redbackModel.createUser=false;
       clearUserMessages();
       activateUsersEditTab();
-      // if already created before
-      //$("#main-content #createUserForm").accordion("destroy");
-      $("#main-content #createUserForm").html("");
+      $("#main-content #createUserForm").html(smallSpinnerImg());
       $("#main-content #createUserForm").attr("data-bind",'template: {name:"redback/user-edit-tmpl",data: user}');
 
       var viewModel = new UserViewModel(user);
@@ -160,13 +158,11 @@ $(function() {
           dataType: 'json',
           success: function(data) {
             var mappedRoles = $.map(data.role, function(item) {
-              var r = mapRole(item);
-              viewModel.user.assignedRoles.push(r);
-              return r;
+              return item.name;
             });
-            viewModel.roles=mappedRoles;
+            user.assignedRoles = ko.observableArray(mappedRoles);
 
-            $("#main-content #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_view_roles_list_tmpl"}');
             ko.applyBindings(viewModel,$("#user-edit-roles-view").get(0));
             $("#main-content #edit_user_details_pills_headers").pills();
 
@@ -186,17 +182,20 @@ $(function() {
   }
 
   editUserRoles=function(user){
-    $.log("editUserRoles:"+user.username());
+    var viewModel = new UserViewModel(user);
     $("#user-edit-roles-edit").html(smallSpinnerImg());
     $.ajax("restServices/redbackServices/roleManagementService/getApplicationRoles/"+encodeURIComponent(user.username()), {
         type: "GET",
         dataType: 'json',
         success: function(data) {
-          $("#user-edit-roles-edit").html("loaded");
           var mappedApplicationRoles = $.map(data.applicationRole, function(item) {
             return mapApplicationRoles(item);
           });
+          viewModel.applicationRoles=ko.observableArray(mappedApplicationRoles);
           $.log("applicationRoles length:"+mappedApplicationRoles.length);
+          $("#main-content #user-edit-roles-edit").attr("data-bind",'template: {name:"user_edit_roles_tmpl"}');
+          ko.applyBindings(viewModel,$("#main-content #user-edit-roles-edit").get(0));
+          $.log("assignedRoles:"+user.assignedRoles().length);
         }
       }
     );
@@ -204,7 +203,13 @@ $(function() {
 
   UserViewModel=function(user) {
     this.user=user;
-    this.roles = ko.observableArray(new Array());
+    this.applicationRoles = ko.observableArray(new Array());
+
+    updateUserRoles=function(){
+      $.log("updateUserRoles assigned:"+this.user.assignedRoles().length);
+
+    }
+
   }
 
   /**