]> source.dussan.org Git - archiva.git/commitdiff
cleanup redback part to be more knockout based
authorOlivier Lamy <olamy@apache.org>
Thu, 2 Feb 2012 20:43:30 +0000 (20:43 +0000)
committerOlivier Lamy <olamy@apache.org>
Thu, 2 Feb 2012 20:43:30 +0000 (20:43 +0000)
git-svn-id: https://svn.apache.org/repos/asf/archiva/trunk@1239831 13f79535-47bb-0310-9956-ffa450edef68

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

index 186ddec26232f28b57de6f57861d8b64dbc4e4ab..eff82689a9ef5915938e967089eb001e8517b266 100644 (file)
@@ -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,rolesViewModel:null};
+  window.redbackModel = {userOperationNames:null,key:null,i18n:$.i18n.map,rolesViewModel:null};
 
   // unbinding
   $("#user-create-form-cancel-button").on("click", function(){
index 5bd61c45e43ff46a19d890e6c1beea4cd67e05ca..904bb2e65962da23c131c4a6b1b8f981ec5a4741 100644 (file)
@@ -29,8 +29,8 @@
   <div class="pill-content" id="edit-user-details-pills-content">
     <div id="user-create-div" class="active">
       <div class="row">
-        <div class="span8 columns">
-          <form id="user-create" class="form-horizontal">
+        <div class="span6 columns">
+          <form id="user-create" class="form-horizontal" data-bind="submit: save">
             <fieldset id="user-create-fieldset">
               <div class="control-group">
                 <label class="control-label" for="username">${$.i18n.prop('username')}</label>
                 </div>
               </div>
             </fieldset>
-            <button data-bind="click: save" class="btn" id="user-create-form-register-button">${$.i18n.prop('save')}</button>
+            <button data-bind="click: saveUser" class="btn" id="user-create-form-register-button">${$.i18n.prop('save')}</button>
             <button class="btn" id="user-create-form-cancel-button">${$.i18n.prop('cancel')}</button>
           </form>
         </div>
-        <div class="span8 columns" id="user-edit-roles">
+        <div class="span6 columns" id="user-edit-roles">
           <div id="user-edit-roles-view"></div>
         </div>
       </div>
index 9368620578e8034f4457550be783ccbf37aaafc7..8a38f604108dbbaad393a8411f4d727bf7c7f8a6 100644 (file)
@@ -34,7 +34,7 @@
               {{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.usersViewModel.editUserBox(row) }">Edit</a></td>
+              <td><a href="#" data-bind="click: function(){ editUserBox(row) }">Edit</a></td>
               {{if row.username()=="admin" || row.username()=="guest"}}
                 <td></td>
               {{else}}
@@ -49,7 +49,7 @@
                     {{if row.username()=="admin" || row.username()=="guest"}}
                       <img src="images/system-lock-screen.png"/>
                     {{else}}
-                      <a href="#" data-bind="click: function(){ window.redbackModel.usersViewModel.unlock(row) }"><img src="images/system-lock-screen.png"/></a>
+                      <a href="#" data-bind="click: function(){ unlock(row) }"><img src="images/system-lock-screen.png"/></a>
                     {{/if}}
                 </td>
               {{else}}
@@ -57,7 +57,7 @@
                     {{if row.username()=="admin" || row.username()=="guest"}}
                       <img src="images/weather-clear.png"/>
                     {{else}}
-                      <a href="#" data-bind="click: function(){ window.redbackModel.usersViewModel.lock(row) }"><img src="images/weather-clear.png"/></a>
+                      <a href="#" data-bind="click: function(){ lock(row) }"><img src="images/weather-clear.png"/></a>
                     {{/if}}
                 </td>
               {{/if}}
@@ -67,7 +67,7 @@
                     {{if row.username()=="admin" || row.username()=="guest"}}
                       <img src="images/dialog-error.png"/>
                     {{else}}
-                      <a href="#" data-bind="click: function(){ window.redbackModel.usersViewModel.passwordChangeRequire(row,false) }">
+                      <a href="#" data-bind="click: function(){ passwordChangeRequire(row,false) }">
                           <img src="images/dialog-error.png"/>
                       </a>
                     {{/if}}
@@ -77,7 +77,7 @@
                   {{if row.username()=="admin" || row.username()=="guest"}}
                     <img src="images/weather-clear.png"/>
                   {{else}}
-                    <a href="#" data-bind="click: function(){ window.redbackModel.usersViewModel.passwordChangeRequire(row,true) }">
+                    <a href="#" data-bind="click: function(){ passwordChangeRequire(row,true) }">
                         <img src="images/weather-clear.png"/>
                     </a>
                   {{/if}}
index 2a97aff5a5040d45d217d3b6289125010207bddc..c857b0a19f9b9a88e16be4586029f76582d52e9d 100644 (file)
@@ -53,19 +53,20 @@ $(function() {
       this.locked = ko.observable(locked);
       this.passwordChangeRequired = ko.observable(passwordChangeRequired);
       this.assignedRoles = ko.observableArray(new Array());
+
       this.remove = function() {
         if (ownerViewModel) {
           ownerViewModel.users.destroy(this);
         }
       };
-      this.create = function() {
+      this.create = function(successFnCallback) {
         if (username == 'admin') {
           this.createAdmin();
         } else {
-          this.createUser();
+          this.createUser(successFnCallback);
         }
       };
-      this.createUser = function() {
+      this.createUser = function(successFnCallback) {
         $.log("user#createUser");
         var valid = $("#user-create").valid();
         if (!valid) {
@@ -81,7 +82,9 @@ $(function() {
               var created = JSON.parse(result);
               if (created == true) {
                 displaySuccessMessage("user created:"+currentUser.username());
-                window.redbackModel.usersViewModel.users.push(currentUser);
+                if (successFnCallback){
+                  successFnCallback(currentUser);
+                }
                 clearForm("#main-content #user-create");
                 $("#main-content #user-create").hide();
                 activateUsersGridTab();
@@ -239,43 +242,43 @@ $(function() {
           });
       }
 
-    this.unlock=function(){
-      this.locked(false);
-      var curUser = this;
-      clearUserMessages();
-      $.ajax("restServices/redbackServices/userService/unlockUser/"+encodeURIComponent(curUser.username()), {
-          type: "GET",
-          success: function(result) {
-            displaySuccessMessage($.i18n.prop("user.unlocked",curUser.username()));
-          },
-          error: function(result) {
-            var obj = jQuery.parseJSON(result.responseText);
-            displayRedbackError(obj);
-          }
-      });
-    }
-
-    // value is boolean
-    this.changePasswordChangeRequired=function(value){
-      this.passwordChangeRequired(value);
-      var curUser = this;
-      var url = "restServices/redbackServices/userService/passwordChangeRequired/"+encodeURIComponent(curUser.username());
-      if (value==false){
-        url = "restServices/redbackServices/userService/passwordChangeNotRequired/"+encodeURIComponent(curUser.username());
+      this.unlock=function(){
+        this.locked(false);
+        var curUser = this;
+        clearUserMessages();
+        $.ajax("restServices/redbackServices/userService/unlockUser/"+encodeURIComponent(curUser.username()), {
+            type: "GET",
+            success: function(result) {
+              displaySuccessMessage($.i18n.prop("user.unlocked",curUser.username()));
+            },
+            error: function(result) {
+              var obj = jQuery.parseJSON(result.responseText);
+              displayRedbackError(obj);
+            }
+        });
       }
-      $.ajax(url, {
-          type: "GET",
-          success: function(result) {
-            displaySuccessMessage($.i18n.prop("user.passwordChangeRequired.updated",curUser.username()));
-          },
-          error: function(result) {
-            var obj = jQuery.parseJSON(result.responseText);
-            displayRedbackError(obj);
-          }
-      });
-    };
 
-    this.i18n = $.i18n.prop;
+      // value is boolean
+      this.changePasswordChangeRequired=function(value){
+        this.passwordChangeRequired(value);
+        var curUser = this;
+        var url = "restServices/redbackServices/userService/passwordChangeRequired/"+encodeURIComponent(curUser.username());
+        if (value==false){
+          url = "restServices/redbackServices/userService/passwordChangeNotRequired/"+encodeURIComponent(curUser.username());
+        }
+        $.ajax(url, {
+            type: "GET",
+            success: function(result) {
+              displaySuccessMessage($.i18n.prop("user.passwordChangeRequired.updated",curUser.username()));
+            },
+            error: function(result) {
+              var obj = jQuery.parseJSON(result.responseText);
+              displayRedbackError(obj);
+            }
+        });
+      };
+
+      this.i18n = $.i18n.prop;
   }
 
   /**
index 75bbcf599091fb5d0e312528512b40421284fe77..c70e6819b58e6bf972a9da4f6db5613022b8983a 100644 (file)
@@ -25,20 +25,6 @@ $(function() {
     this.users = ko.observableArray([]);
     var self = this;
 
-    this.loadUsers = function() {
-      $.ajax("restServices/redbackServices/userService/getUsers", {
-          type: "GET",
-          async: false,
-          dataType: 'json',
-          success: function(data) {
-            var mappedUsers = $.map(data.user, function(item) {
-              return mapUser(item);
-            });
-            self.users(mappedUsers);
-          }
-        }
-      );
-    };
     this.gridViewModel = new ko.simpleGrid.viewModel({
       data: this.users,
       viewModel: this,
@@ -58,11 +44,15 @@ $(function() {
 
     this.addUser=function() {
       clearUserMessages();
-      window.redbackModel.createUser=true;
       $("#createUserForm").html("");
       $("#main-content #user-edit").remove();
       $('#main-content #user-create').show();
-      ko.renderTemplate("redback/user-edit-tmpl", new User(), null, $("#createUserForm").get(0),"replaceChildren");
+      var viewModel = new UserViewModel(new User(),false,self);
+      $.log("UsersViewModel#addUser");
+      var createUserForm = $("#main-content #createUserForm");
+      createUserForm.html(smallSpinnerImg());
+      createUserForm.attr("data-bind",'template: {name:"redback/user-edit-tmpl",data: user}');
+      ko.applyBindings(viewModel,createUserForm.get(0));
       $("#main-content #createUserForm #user-create-form-cancel-button").on( "click", function(e) {
         e.preventDefault();
         activateUsersGridTab();
@@ -77,26 +67,23 @@ $(function() {
           customShowError("#main-content #user-create",validator,errorMap,errorMap);
         }
       });
-      $("#main-content #createUserForm #user-create").delegate("#user-create-form-register-button", "click keydown", function(e) {
-        e.preventDefault();
-      });
 
       // desactivate roles pill when adding user
       $("#edit_user_details_pills_headers").hide();
 
     };
 
-    this.lock = function(user){
+    lock = function(user){
       clearUserMessages();
       user.lock();
     }
 
-    this.unlock = function(user){
+    unlock = function(user){
       clearUserMessages();
       user.unlock();
     }
 
-    this.passwordChangeRequire = function(user,forceChangedPassword){
+    passwordChangeRequire = function(user,forceChangedPassword){
       clearUserMessages();
       user.changePasswordChangeRequired(forceChangedPassword);
     }
@@ -107,49 +94,15 @@ $(function() {
       });
     };
 
-
-    this.editUserBox=function(user) {
-      window.redbackModel.createUser=false;
+    editUserBox=function(user) {
       clearUserMessages();
       activateUsersEditTab();
-      $("#main-content #createUserForm").html(smallSpinnerImg());
-      $("#main-content #createUserForm").attr("data-bind",'template: {name:"redback/user-edit-tmpl",data: user}');
 
-      var viewModel = new UserViewModel(user);
-
-      ko.applyBindings(viewModel,$("#main-content #createUserForm").get(0));
-
-      $("#main-content #users-view-tabs-li-user-edit a").html($.i18n.prop("edit"));
-
-      $("#main-content #user-create #user-create-form-cancel-button").on("click", function(e) {
-        e.preventDefault();
-        activateUsersGridTab();
-      });
-
-      $("#main-content #user-create").validate({
-        rules: {
-          confirmPassword: {
-            equalTo: "#password"
-          }
-        },
-        showErrors: function(validator, errorMap, errorList) {
-          customShowError("#main-content #user-create",validator,errorMap,errorMap);
-        }
-      });
-      $("#main-content #user-create").delegate("#user-create-form-save-button", "click keydown", function(e) {
-        e.preventDefault();
-        $.log("users.js#editUserBox");
-        var valid = $("#user-create").valid();
-        if (!valid) {
-            return;
-        }
-        user.update();
-      });
+      var viewModel = new UserViewModel(user,true,self);
 
       $( "#main-content #user-edit-roles-view" ).append(smallSpinnerImg());
       $.ajax("restServices/redbackServices/roleManagementService/getEffectivelyAssignedRoles/"+encodeURIComponent(user.username()), {
           type: "GET",
-          async: false,
           dataType: 'json',
           success: function(data) {
             var mappedRoles = $.map(data.role, function(item) {
@@ -157,13 +110,39 @@ $(function() {
             });
             user.assignedRoles = ko.observableArray(mappedRoles);
 
+            // user form binding
+            var createUserForm = $("#main-content #createUserForm");
+            createUserForm.html(smallSpinnerImg());
+            createUserForm.attr("data-bind",'template: {name:"redback/user-edit-tmpl",data: user}');
+            ko.applyBindings(viewModel,createUserForm.get(0));
+
+            $("#main-content #users-view-tabs-li-user-edit a").html($.i18n.prop("edit"));
+
+            $("#main-content #user-create #user-create-form-cancel-button").on("click", function(e) {
+              e.preventDefault();
+              activateUsersGridTab();
+            });
+
+            $("#main-content #user-create").validate({
+              rules: {
+                confirmPassword: {
+                  equalTo: "#password"
+                }
+              },
+              showErrors: function(validator, errorMap, errorList) {
+                customShowError("#main-content #user-create",validator,errorMap,errorMap);
+              }
+            });
+            $("#main-content #createUserForm #user-create #user-create-form-register-button").on("click", function(e) {
+              e.preventDefault();
+            });
+
+            // user roles binding
             $("#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").tabs();
 
             $("#main-content #edit_user_details_pills_headers").bind('change', function (e) {
-              //$.log( $(e.target).attr("href") ); // activated tab
-              //e.relatedTarget // previous tab
               if ($(e.target).attr("href")=="#user-edit-roles-edit") {
                 editUserRoles(user);
               }
@@ -174,6 +153,7 @@ $(function() {
       );
 
     }
+
   }
 
   editUserRoles=function(user){
@@ -196,14 +176,32 @@ $(function() {
     );
   }
 
-  UserViewModel=function(user) {
+  UserViewModel=function(user,updateMode,usersViewModel) {
     this.user=user;
     this.applicationRoles = ko.observableArray(new Array());
-
+    this.usersViewModel=usersViewModel;
+    this.updateMode=updateMode;
+    var self=this;
     updateUserRoles=function(){
       this.user.updateAssignedRoles();
     }
 
+    saveUser=function(){
+      $.log("UserViewModel#saveUser");
+      var valid = $("#main-content #user-create").valid();
+      if (valid==false) {
+        $.log("user#save valid:false");
+        return;
+      } else {
+        $.log("user#save valid:true,update:"+self.updateMode);
+      }
+      if (self.updateMode==false){
+        return user.create(function(){self.usersViewModel.users.push(user)});
+      } else {
+        return user.update();
+      }
+    }
+
   }
 
   /**
@@ -213,23 +211,35 @@ $(function() {
     screenChange();
     $("#main-content").html(mediumSpinnerImg());
     jQuery("#main-content").attr("data-bind",'template: {name:"usersGrid"}');
-    window.redbackModel.usersViewModel = new UsersViewModel();
-    window.redbackModel.usersViewModel.loadUsers();
-    ko.applyBindings(window.redbackModel.usersViewModel,jQuery("#main-content").get(0));
-    $("#main-content #users-view-tabs a:first").tab('show');
-    $("#main-content #users-view-tabs a[data-toggle='tab']").on('show', function (e) {
-      //$.log( $(e.target).attr("href") ); // activated tab
-      //e.relatedTarget // previous tab
-      $.log("tabs shown");
-      if ($(e.target).attr("href")=="#createUserForm") {
-        window.redbackModel.usersViewModel.addUser();
-      }
-      if ($(e.target).attr("href")=="#users-view") {
-        $("#main-content #users-view-tabs-li-user-edit a").html($.i18n.prop("add"));
+
+    $.ajax("restServices/redbackServices/userService/getUsers", {
+        type: "GET",
+        dataType: 'json',
+        success: function(data) {
+          var mappedUsers = $.map(data.user, function(item) {
+            return mapUser(item);
+          });
+          var usersViewModel = new UsersViewModel();
+          usersViewModel.users(mappedUsers);
+          ko.applyBindings(usersViewModel,jQuery("#main-content").get(0));
+          $("#main-content #users-view-tabs a:first").tab('show');
+          $("#main-content #users-view-tabs a[data-toggle='tab']").on('show', function (e) {
+            //$.log( $(e.target).attr("href") ); // activated tab
+            //e.relatedTarget // previous tab
+            $.log("tabs shown");
+            if ($(e.target).attr("href")=="#createUserForm") {
+              usersViewModel.addUser();
+            }
+            if ($(e.target).attr("href")=="#users-view") {
+              $("#main-content #users-view-tabs-li-user-edit a").html($.i18n.prop("add"));
+            }
+
+          })
+          $("#main-content #users-view-tabs-content #users-view").addClass("active");
+        }
       }
+    );
 
-    })
-    $("#main-content #users-view-tabs-content #users-view").addClass("active");
   }
 
   activateUsersGridTab=function(){