admin/plugins: Allow people to sort search results

src/node/hooks/express/adminplugins.js

@@ -70,10 +70,11 @@ exports.socketio = function (hook_name, args, cb) {
           results = {}
         }
         var res = Object.keys(results)
-          .slice(query.offset, query.offset+query.length)
           .map(function(pluginName) {
             return results[pluginName]
           });
+        res = sortPluginList(res, query.sortBy, query.sortDir)
+          .slice(query.offset, query.offset+query.limit);
         socket.emit("results:search", {results: res, query: query});
       });
     });
@@ -91,3 +92,14 @@ exports.socketio = function (hook_name, args, cb) {
     });
   });
 }
+
+function sortPluginList(plugins, property, /*ASC?*/dir) {
+  return plugins.sort(function(a, b) {
+    if (a[property] < b[property])
+       return dir? -1 : 1;
+    if (a[property] > b[property])
+       return dir? 1 : -1;
+    // a must be equal to b
+    return 0;
+  })
+}

src/static/css/admin.css

@@ -102,6 +102,19 @@ input[type="text"] {
   max-width: 500px;
 }
 
+.sort {
+  cursor: pointer;
+}
+.sort:after {
+  content: '▲▼'
+}
+.sort.up:after {
+  content:'▲'
+}
+.sort.down:after {
+  content:'▼'
+}
+
 table {
   border: 1px solid #ddd;
   border-radius: 3px;

src/static/js/admin/plugins.js

@@ -12,20 +12,23 @@ $(document).ready(function () {
   //connect
   socket = io.connect(url, {resource : resource}).of("/pluginfw/installer");
 
-  function search(searchTerm) {
+  function search(searchTerm, limit) {
     if(search.searchTerm != searchTerm) {
       search.offset = 0
       search.results = []
       search.end = false
     }
+    limit = limit? limit : search.limit
     search.searchTerm = searchTerm;
-    socket.emit("search", {searchTerm: searchTerm, offset:search.offset, length: search.limit});
-    search.offset += search.limit;
+    socket.emit("search", {searchTerm: searchTerm, offset:search.offset, limit: limit, sortBy: search.sortBy, sortDir: search.sortDir});
+    search.offset += limit;
   }
-  search.offset = 0
-  search.limit = 12
-  search.results = []
-  search.end = true// have we received all results already?
+  search.offset = 0;
+  search.limit = 12;
+  search.results = [];
+  search.sortBy = 'name';
+  search.sortDir = /*DESC?*/true;
+  search.end = true;// have we received all results already?
 
   function displayPluginList(plugins, container, template) {
     plugins.forEach(function(plugin) {
@@ -44,6 +47,17 @@ $(document).ready(function () {
     })
     updateHandlers();
   }
+  
+  function sortPluginList(plugins, property, /*ASC?*/dir) {
+    return plugins.sort(function(a, b) {
+      if (a[property] < b[property])
+         return dir? -1 : 1;
+      if (a[property] > b[property])
+         return dir? 1 : -1;
+      // a must be equal to b
+      return 0;
+    })
+  }
 
   function updateHandlers() {
     // Search
@@ -66,24 +80,54 @@ $(document).ready(function () {
     // Infinite scroll
     $(window).unbind('scroll').scroll(function() {
       if(search.end) return;// don't keep requesting if there are no more results
-      var top = $('.search-results .results > tr').last().offset().top
+      var top = $('.search-results .results > tr:last').offset().top
       if($(window).scrollTop()+$(window).height() > top) search(search.searchTerm)
     })
+
+    // Sort
+    $('.sort.up').unbind('click').click(function() {
+      search.sortBy = $(this).text().toLowerCase();
+      search.sortDir = false;
+      search.offset = 0;
+      search.results = [];
+      search(search.searchTerm, search.results.length);
+    })
+    $('.sort.down, .sort.none').unbind('click').click(function() {
+      search.sortBy = $(this).text().toLowerCase();
+      search.sortDir = true;
+      search.offset = 0;
+      search.results = [];
+      search(search.searchTerm);
+    })
   }
 
   socket.on('results:search', function (data) {
-    console.log('got search results', data)
-    search.results = search.results.concat(data.results);
     if(!data.results.length) search.end = true;
     
+    console.log('got search results', data)
+
+    // add to results
+    search.results = search.results.concat(data.results);
+
+    // Update sorting head
+    $('.sort')
+      .removeClass('up down')
+      .addClass('none');
+    $('.search-results thead th[data-label='+data.query.sortBy+']')
+      .removeClass('none')
+      .addClass(data.query.sortDir? 'up' : 'down');
+
+    // re-render search results
     var searchWidget = $(".search-results");
     searchWidget.find(".results *").remove();
     displayPluginList(search.results, searchWidget.find(".results"), searchWidget.find(".template tr"))
   });
 
   socket.on('results:installed', function (data) {
+    sortPluginList(data.installed, 'name', /*ASC?*/true);
+
     $("#installed-plugins *").remove();
-    displayPluginList(data.installed, $("#installed-plugins"), $("#installed-plugin-template"))
+    displayPluginList(data.installed, $("#installed-plugins"), $("#installed-plugin-template"));
 
     setTimeout(function() {
       socket.emit('checkUpdates');

src/templates/admin/plugins.html

@@ -67,9 +67,9 @@
         <table>
           <thead>
             <tr>
-              <th>Name</th>
-              <th>Description</th>
-              <th>Version</th>
+              <th class="sort up"   data-label="name">Name</th>
+              <th class="sort none" data-label="description">Description</th>
+              <th class="sort none" data-label="Version">Version</th>
               <td></td>
             </tr>
           </thead>