assigned/unassigned user(s) to a role: double multiselect view

git-svn-id: https://svn.apache.org/repos/asf/archiva/trunk@1227080 13f79535-47bb-0310-9956-ffa450edef68
2012-01-04 08:50:10 +00:00 · 2012-01-04 08:50:10 +00:00 · 10008c81a8
parent 1ddbb6ca58
commit 10008c81a8
4 changed files with 101 additions and 20 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
@ -20,4 +20,25 @@
 /* medium-spinner */
 #medium-spinner {
 z-index: 20001;
+}
+
+
+
+.ar-multiselect .ar-multiselect-column {
+    float: left;
+    width: 17em;
+}
+
+.ar-multiselect .ar-multiselect-center {
+    float: left;
+    width: 3em;
+}
+
+.ar-multiselect-center ul {
+    list-style: none;
+    margin: 3px 0 2px 6px
+}
+
+.ar-multiselect-right {
+    margin-left: 2em
 }
--- 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
@ -1,9 +1,11 @@
 <!DOCTYPE html>
 <html>
 <head>
+  <link rel="stylesheet" href="css/jquery-ui-1.8.16.custom.css"/>
  <link rel="stylesheet" href="css/bootstrap.min.1.4.0.css">
  <link rel="stylesheet" href="css/archiva.css">

+
  <script type="text/javascript" src="js/jquery-1.7.js"></script>

  <script type="text/javascript" src="js/lab.js"></script>
@ -22,7 +24,34 @@
  <div class="content">
    <div id="user-messages"></div>

-    <div id="main-content"></div>
+    <div id="main-content">
+
+<div id="role-edit-users" class="clearfix ar-multiselect" style="float: left">
+<div class="ar-multiselect-column ar-multiselect-left">
+<select id="role-edit-available-users" class="" multiple="true">
+<option value="">admin</option>
+</select>
+</div>
+<div class="ar-multiselect-column ar-multiselect-center">
+<ul>
+<li>
+<button class="btn">&gt;</button>
+</li>
+<li>
+<button class="btn">&lt;</button>
+</li>
+</ul>
+</div>
+<div class="ar-multiselect-column ar-multiselect-right">
+<select id="role-edit-affected-users" class="" multiple="true">
+<option value="">admin</option>
+</select>
+</div>
+</div>
+</div>
+
+
+    </div>
  </div>
 </div>

--- 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
@ -18,7 +18,7 @@
 */
 $(function() {

-  role = function(name,description,assignable,childRoleNames,parentRoleNames,users,parentsRolesUsers,permissions){
+  role = function(name,description,assignable,childRoleNames,parentRoleNames,users,parentsRolesUsers,permissions,otherUsers){
    this.name = ko.observable(name);
    this.description = ko.observable(description);
    this.assignable = ko.observable(assignable);
@ -27,6 +27,8 @@ $(function() {
    this.users = ko.observableArray(users);
    this.parentsRolesUsers = ko.observableArray(parentsRolesUsers);//read only
    this.permissions = ko.observableArray(permissions);//read only
+    // when editing a role other users not assign to this role are populated
+    this.otherUsers = ko.observableArray(otherUsers);

    this.updateDescription=function(){
      var url = "restServices/redbackServices/roleManagementService/updateRoleDescription?";
@ -54,6 +56,7 @@ $(function() {
   */
  RolesViewModel=function() {
    this.roles = ko.observableArray([]);
+
    var self = this;
    this.loadRoles = function() {
      $.ajax("restServices/redbackServices/roleManagementService/allRoles", {
@ -96,22 +99,17 @@ $(function() {
         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}');
+           $("#main-content #roles-view-tabs-content #role-edit").attr("data-bind",'template: {name:"editRoleTab",data: currentRole}');
           role.parentRoleNames=mappedRole.parentRoleNames;
           role.parentsRolesUsers=mappedRole.parentsRolesUsers;
           role.users=mappedRole.users;
-           var viewModel = new roleViewModel(role);
+           role.otherUsers=mappedRole.otherUsers;
+           var viewModel = new RoleViewModel(role);
           ko.applyBindings(viewModel,$("#main-content #roles-view-tabs-content #role-edit").get(0));
           activateRoleEditTab();
         }
        }
      );
-
-
-    }
-
-    this.saveRoleDescription=function(role){
-      $.log("saveRoleDescription:"+role.description);
    }

  }
@ -130,16 +128,30 @@ $(function() {
    removeMediumSpinnerImg();
  }

-  saveRoleDescription=function(){
-    var roleName = $("#editRoleTable #role-edit-name").html();
-    var description = $("#editRoleTable #role-edit-description").val();
-    clearUserMessages();
-    new role(roleName,description).updateDescription();
+  RoleViewModel=function(role){
+    selectedOtherUsers=new ko.observableArray();
+    selectedUsers=new ko.observableArray();
+    currentRole=role;
+    var self=this;
+    addUser=function(){
+      var removed = currentRole.otherUsers.removeAll(selectedOtherUsers());
+      for (var i = 0; i < removed.length; i++) {
+        currentRole.users.push(removed[i]);
+      }
+      selectedOtherUsers([]);
+    }

-  }
-
-  roleViewModel=function(role){
-    this.role=role;
+    removeUser=function(){
+      var added = currentRole.users.removeAll(selectedUsers());
+      for (var i = 0; i < added.length; i++) {
+        currentRole.otherUsers.push(added[i]);
+      }
+      selectedUsers([]);
+    }
+    saveRoleDescription=function(){
+      $.log("saveRoleDescription:"+currentRole.description());
+      currentRole.updateDescription();
+    }
  }

  /**
@ -164,7 +176,11 @@ $(function() {
      return mapPermission(item);
    }): new Array(mapPermission(data.permissions)) :null;

-    return new role(data.name, data.description?data.description:"",data.assignable,childRoleNames,parentRoleNames,users,parentsRolesUsers,permissions);
+    var otherUsers = data.otherUsers ? $.isArray(data.otherUsers)? $.map(data.otherUsers, function(item) {
+      return mapUser(item);
+    }):new Array(mapUser(data.otherUsers)):null;
+
+    return new role(data.name, data.description?data.description:"",data.assignable,childRoleNames,parentRoleNames,users,parentsRolesUsers,permissions,otherUsers);
  }

  activateRolesGridTab=function(){
--- 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
@ -130,6 +130,21 @@
    ${$.i18n.prop('role.edit.no.user.defined')}
  {{/if}}

+  <div id="role-edit-users" class="clearfix ar-multiselect">
+    <div class="ar-multiselect-column ar-multiselect-left">
+    <select data-bind="options: otherUsers ,optionsText: 'username',selectedOptions:selectedOtherUsers" multiple="true" id="role-edit-available-users"></select>
+    </div>
+    <div class="ar-multiselect-column ar-multiselect-center">
+    <ul style="list-style: none">
+      <li><button class="btn" data-bind="click: addUser">&gt;</button></li>
+      <li><button class="btn" data-bind="click: removeUser">&lt;</button></li>
+    </ul>
+    </div>
+    <div class="ar-multiselect-column ar-multiselect-right">
+      <select data-bind="options: users ,optionsText: 'username',selectedOptions:selectedUsers" multiple="true" id="role-edit-affected-users"></select>
+    </div>
+  </div>
+
 </script>