From 8bd979e3e56abcffcf4a987967979e3dfc64ada6 Mon Sep 17 00:00:00 2001
From: Heiko Kernbach <heiko@arangodb.com>
Date: Wed, 20 Aug 2014 19:18:47 +0200
Subject: [PATCH] addad desc sorting for graphs view

---
 .../js/collections/graphCollection.js         | 24 ++++++++++++--
 .../js/templates/graphManagementView.ejs      | 25 +++-----------
 .../frontend/js/views/databaseView.js         |  1 -
 .../frontend/js/views/graphManagementView.js  | 33 ++++++++++++++++++-
 4 files changed, 59 insertions(+), 24 deletions(-)

diff --git a/js/apps/system/aardvark/frontend/js/collections/graphCollection.js b/js/apps/system/aardvark/frontend/js/collections/graphCollection.js
index 9bde0e8f58..da89a25272 100644
--- a/js/apps/system/aardvark/frontend/js/collections/graphCollection.js
+++ b/js/apps/system/aardvark/frontend/js/collections/graphCollection.js
@@ -5,10 +5,30 @@
 
   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) {
diff --git a/js/apps/system/aardvark/frontend/js/templates/graphManagementView.ejs b/js/apps/system/aardvark/frontend/js/templates/graphManagementView.ejs
index 1bc03c3416..9d9e450675 100644
--- a/js/apps/system/aardvark/frontend/js/templates/graphManagementView.ejs
+++ b/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 href="#">
+        <li><a>
           <label class="checkbox checkboxLabel">
-            <input class="css-checkbox" type="checkbox" id="sortName">
-            <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="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
+            <input class="css-checkbox" type="checkbox" id="graphSortDesc">
+            <label class="css-label" id="graphSortDesc"></label>Sort descending
           </label>
         </a></li>
       </ul>
diff --git a/js/apps/system/aardvark/frontend/js/views/databaseView.js b/js/apps/system/aardvark/frontend/js/views/databaseView.js
index 3213827173..9c428c0880 100644
--- a/js/apps/system/aardvark/frontend/js/views/databaseView.js
+++ b/js/apps/system/aardvark/frontend/js/views/databaseView.js
@@ -50,7 +50,6 @@
     render: function(){
       this.currentDatabase();
 
-
       //sorting
       this.collection.sort();
 
diff --git a/js/apps/system/aardvark/frontend/js/views/graphManagementView.js b/js/apps/system/aardvark/frontend/js/views/graphManagementView.js
index 0f0f68216f..79738edea6 100644
--- a/js/apps/system/aardvark/frontend/js/views/graphManagementView.js
+++ b/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);