]> source.dussan.org Git - archiva.git/commitdiff
assigned/unassigned user(s) to a role: double multiselect view
authorOlivier Lamy <olamy@apache.org>
Wed, 4 Jan 2012 08:50:10 +0000 (08:50 +0000)
committerOlivier Lamy <olamy@apache.org>
Wed, 4 Jan 2012 08:50:10 +0000 (08:50 +0000)
git-svn-id: https://svn.apache.org/repos/asf/archiva/trunk@1227080 13f79535-47bb-0310-9956-ffa450edef68

archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/css/archiva.css
archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/index.html
archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/redback/roles.js
archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/redback/templates/roles-tmpl.html

index 1c090026fba9971c5c0fee4b96683ba1c6d965c2..945a119ff63d8a0f3f44d9e75e38e21359b25542 100644 (file)
 /* 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
 }
\ No newline at end of file
index a7d4fcca15671528ba4c515afbe3dc09944bb83c..83e3d146e0b5060f000bf7900a3b0de85d9299c5 100644 (file)
@@ -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>
   <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>
 
index daabae10aea9f69ebe54db84023b5acf8892af50..c72a93a0ed35ef32131492820292b33392fc11e0 100644 (file)
@@ -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(){
index 8ec37303f70ccfb1a5862ecadd557e2e8a0bb8eb..103443ba899edb770124eab688a1b1e447c620df 100644 (file)
     ${$.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>