added sorting for users view

js/apps/system/aardvark/frontend/js/collections/arangoUsers.js

@@ -11,10 +11,26 @@ window.ArangoUsers = Backbone.Collection.extend({
     "testing": true
   },
 
+  sortOptions: {
+    desc: false
+  },
+
   url: "/_api/user",
 
-  comparator : function(obj) {
-    return obj.get("user").toLowerCase();
+  //comparator : function(obj) {
+  //  return obj.get("user").toLowerCase();
+  //},
+
+  comparator: function(item, item2) {
+    var a, b;
+    if (this.sortOptions.desc === true) {
+      a = item.get('user');
+      b = item2.get('user');
+      return a < b ? 1 : a > b ? -1 : 0;
+    }
+    a = item.get('user');
+    b = item2.get('user');
+    return a > b ? 1 : a < b ? -1 : 0;
   },
 
   login: function (username, password) {
@@ -22,6 +38,10 @@ window.ArangoUsers = Backbone.Collection.extend({
     return true;
   },
 
+  setSortingDesc: function(yesno) {
+    this.sortOptions.desc = yesno;
+  },
+
   logout: function () {
     this.activeUser = undefined;
     this.reset();

js/apps/system/aardvark/frontend/js/templates/userManagementView.ejs

@@ -1,12 +1,22 @@
 <script id="userManagementView.ejs" type="text/template">
-<div class="headerBar">
-  <div class="pull-left">
-    <a class="arangoHeader">User Management</a>
+  <div class="headerBar">
+    <div class="headerButtonBar">
+      <ul class="headerButtonList">
+        <li class="enabled">
+        <a id="userManagementToggle" class="headerButton">
+          <span class="icon_arangodb_settings2" title="Settings"></span>
+        </a>
+        </li>
+      </ul>
+    </div>
+
+    <div class="pull-left">
+      <a class="arangoHeader">User Management</a>
+    </div>
+    <div class="search-field">
+      <input type="text" value="<%=searchString%>" id="userManagementSearchInput" class="search-input" placeholder="Search..."/><img id="userManagementSearchSubmit" class="search-submit-icon">
+    </div>
   </div>
-  <div class="search-field">
-    <input type="text" value="<%=searchString%>" id="userManagementSearchInput" class="search-input" placeholder="Search..."/><img id="userManagementSearchSubmit" class="search-submit-icon">
-  </div>
-</div>
 
 
 <div id="userManagementDropdown2" class="headerDropdown">
@@ -15,7 +25,7 @@
     <ul>
       <li class="nav-header">Sorting</li>
 
-      <li><a href="#">
+      <!--<li><a href="#">
         <label class="checkbox checkboxLabel">
           <input class="css-checkbox" type="checkbox" id="sortName">
           <label class="css-label css-label-round"></label>Sort by username
@@ -27,11 +37,11 @@
           <input class="css-checkbox" type="checkbox" id="sortType">
           <label class="css-label css-label-round"></label>Sort by status
         </label>
-      </a></li>
+      </a></li>-->
 
       <li><a href="#">
         <label class="checkbox checkboxLabel">
-          <input class="css-checkbox" type="checkbox" id="sortOrder">
+          <input class="css-checkbox" type="checkbox" id="userSortDesc">
           <label class="css-label"></label>Sort descending
         </label>
       </a></li>

js/apps/system/aardvark/frontend/js/views/userManagementView.js

@@ -25,7 +25,9 @@
       "click #userManagementSearchSubmit"   : "search",
       "click #callEditUserPassword"         : "editUserPassword",
       "click #submitEditUserPassword"       : "submitEditUserPassword",
-      "click #submitEditCurrentUserProfile" : "submitEditCurrentUserProfile"
+      "click #submitEditCurrentUserProfile" : "submitEditCurrentUserProfile",
+      "click .css-label"                    : "checkBoxes",
+      "change #userSortDesc"                : "sorting"
 
     },
 
@@ -35,6 +37,23 @@
       this.currentUser = this.collection.findWhere({user: this.collection.whoAmI()});
     },
 
+    checkBoxes: function (e) {
+      //chrome bugfix
+      var clicked = e.currentTarget.id;
+      $('#'+clicked).click();
+    },
+
+    sorting: function() {
+      if ($('#userSortDesc').is(":checked")) {
+        this.collection.setSortingDesc(true);
+      }
+      else {
+        this.collection.setSortingDesc(false);
+      }
+
+      this.render();
+    },
+
     render: function (isProfile) {
       var dropdownVisible = false;
       if ($('#userManagementDropdown').is(':visible')) {
@@ -50,6 +69,7 @@
 
       if (dropdownVisible === true) {
         $('#userManagementDropdown2').show();
+        $('#userSortDesc').attr('checked', this.collection.sortOptions.desc);
       }
 
 //      var searchOptions = this.collection.searchOptions;
@@ -255,6 +275,9 @@
     },
 
     toggleView: function() {
+      //apply sorting to checkboxes
+      $('#userSortDesc').attr('checked', this.collection.sortOptions.desc);
+
       $('#userManagementDropdown2').slideToggle(200);
     },