addad desc sorting for graphs view

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

@@ -6,9 +6,29 @@
   window.GraphCollection = Backbone.Collection.extend({
     model: window.Graph,
 
+    sortOptions: {
+      desc: false
+    },
+
     url: "/_api/gharial",
 
-    comparator: "_key",
+    //comparator: "_key",
+
+    comparator: function(item, item2) {
+      var a, b;
+      if (this.sortOptions.desc === true) {
+        a = item.get('_key');
+        b = item2.get('_key');
+        return a < b ? 1 : a > b ? -1 : 0;
+      }
+      a = item.get('_key');
+      b = item2.get('_key');
+      return a > b ? 1 : a < b ? -1 : 0;
+    },
+
+    setSortingDesc: function(val) {
+      this.sortOptions.desc = val;
+    },
 
     parse: function(res) {
       if (!res.error) {

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

@@ -1,6 +1,6 @@
 <script id="graphManagementView.ejs" type="text/template">
   <div class="headerBar">
-    <!--  <div class="headerButtonBar">
+     <div class="headerButtonBar">
         <ul class="headerButtonList">
           <li class="enabled">
             <a id="graphManagementToggle" class="headerButton">
@@ -8,7 +8,7 @@
             </a>
           </li>
         </ul>
-      </div>-->
+      </div>
     <div class="pull-left">
       <a class="arangoHeader">Graphs</a>
     </div>
@@ -23,25 +23,10 @@
     <div id="graphManagementDropdown" class="dropdownInner">
       <ul>
         <li class="nav-header">Sorting</li>
-
+        <li><a>
-        <li><a href="#">
           <label class="checkbox checkboxLabel">
-            <input class="css-checkbox" type="checkbox" id="sortName">
+            <input class="css-checkbox" type="checkbox" id="graphSortDesc">
-            <label class="css-label css-label-round"></label>Sort by ?
+            <label class="css-label" id="graphSortDesc"></label>Sort descending
-          </label>
-        </a></li>
-
-        <li><a href="#">
-          <label class="checkbox checkboxLabel">
-            <input class="css-checkbox" type="checkbox" id="sortType">
-            <label class="css-label css-label-round"></label>Sort by ?
-          </label>
-        </a></li>
-
-        <li><a href="#">
-          <label class="checkbox checkboxLabel">
-            <input class="css-checkbox" type="checkbox" id="sortOrder">
-            <label class="css-label"></label>Sort descending
           </label>
         </a></li>
       </ul>

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

@@ -50,7 +50,6 @@
     render: function(){
       this.currentDatabase();
 
-
       //sorting
       this.collection.sort();
 

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

@@ -17,7 +17,10 @@
       "click #createGraph"                        : "addNewGraph",
       "keyup #graphManagementSearchInput"         : "search",
       "click #graphManagementSearchSubmit"        : "search",
-      "click .tile-graph"                         : "loadGraphViewer"
+      "click .tile-graph"                         : "loadGraphViewer",
+      "click #graphManagementToggle"              : "toggleGraphDropdown",
+      "click .css-label"                          : "checkBoxes",
+      "change #graphSortDesc"                     : "sorting"
     },
 
     loadGraphViewer: function(e) {
@@ -81,15 +84,43 @@
       });
     },
 
+    checkBoxes: function (e) {
+      //chrome bugfix
+      var clicked = e.currentTarget.id;
+      $('#'+clicked).click();
+    },
+
+    toggleGraphDropdown: function() {
+      //apply sorting to checkboxes
+      $('#graphSortDesc').attr('checked', this.collection.sortOptions.desc);
+
+      $('#graphManagementToggle').toggleClass('activated');
+      $('#graphManagementDropdown2').slideToggle(200);
+    },
+
+    sorting: function() {
+      if ($('#graphSortDesc').is(":checked")) {
+        this.collection.setSortingDesc(true);
+      }
+      else {
+        this.collection.setSortingDesc(false);
+      }
+
+      this.render();
+    },
+
     render: function() {
       this.collection.fetch({
         async: false
       });
 
+      this.collection.sort();
+
       $(this.el).html(this.template.render({
         graphs: this.collection,
         searchString : ''
       }));
+
       this.events["click .tableRow"] = this.showHideDefinition.bind(this);
       this.events['change tr[id*="newEdgeDefinitions"]'] = this.setFromAndTo.bind(this);
       this.events["click .graphViewer-icon-button"] = this.addRemoveDefinition.bind(this);