Plugin admin fixes

src/static/js/admin/plugins.js

@@ -9,8 +9,10 @@ $(document).ready(function () {
     });
 
     $("#do-search").unbind('click').click(function () {
-      if ($("#search-query")[0].value != "")
-        socket.emit("search", $("#search-query")[0].value);
+        socket.emit("search", {
+          pattern: $("#search-query")[0].value,
+          offset: $('#search-results').data('offset') || 0,
+          limit: 4});
     });
 
     $(".do-install").unbind('click').click(function (e) {
@@ -29,8 +31,13 @@ $(document).ready(function () {
   updateHandlers();
 
   socket.on('progress', function (data) {
+    if ($('#progress.dialog').data('progress') > data.progress) return;
+
     $("#progress.dialog .close").hide();
     $("#progress.dialog").show();
+
+    $('#progress.dialog').data('progress', data.progress);
+
     var message = "Unknown status";
     if (data.message) {
       message = "<span class='status'>" + data.message.toString() + "</span>";
@@ -55,16 +62,26 @@ $(document).ready(function () {
   });
 
   socket.on('search-result', function (data) {
-    $("#search-results *").remove();
+    var widget=$(".search-results");
+
+    widget.data('query', data.query);
+    widget.data('total', data.total);
+
+    widget.find('.offset').html(data.qyery.offset);
+    widget.find('.limit').html(data.qyery.offset + data.qyery.offset.limit);
+    widget.find('.total').html(data.total);
+
+    widget.find(".results *").remove();
     for (plugin_name in data.results) {
       var plugin = data.results[plugin_name];
-      var row = $("#search-result-template").clone();
+      var row = widget.find(".template tr").clone();
 
       for (attr in plugin) {
         row.find("." + attr).html(plugin[attr]);
       }
-      $("#search-results").append(row);
+      widget.find(".results").append(row);
     }
+
     updateHandlers();
   });
 

src/static/js/pluginfw/installer.js

@@ -55,7 +55,7 @@ exports.install = function(plugin_name, cb) {
   );
 };
 
-exports.search = function(pattern, cb) {
+exports.search = function(query, cb) {
   withNpm(
     function (cb) {
       registry.get(
@@ -63,11 +63,18 @@ exports.search = function(pattern, cb) {
         function (er, data) {
           if (er) return cb(er);
           var res = {};
+          var i = 0;
           for (key in data) {
-            if (key.indexOf(plugins.prefix) == 0 && key.indexOf(pattern) != -1)
-              res[key] = data[key];
+            if (/* && key.indexOf(plugins.prefix) == 0 */ 
+                key.indexOf(query.pattern) != -1) {
+              i++;
+              if (i > query.offset
+                  && i <= query.offset + query.limit) {
+                res[key] = data[key];
+              }
+            }
           }
-          cb(null, {results:res});
+          cb(null, {results:res, query: query, total:i});
         }
       );
     },

src/templates/admin/plugins.html

@@ -40,31 +40,37 @@
         </tbody>
       </table>
   
-      <h1>Search for plugins to install</h1>
-      <form>
-        <input type="text" name="search" value="" id="search-query">
-        <input type="button" value="Search" id="do-search">
-      </form>
-      <table>
-        <thead>
-          <tr>
-            <th>Name</th>
-            <th>Description</th>
-            <td></td>
-          </tr>
-        </thead>
-        <tbody class="template">
-          <tr id="search-result-template">
-            <td class="name"></td>
-            <td class="description"></td>
-            <td class="actions">
-              <input type="button" value="Install" class="do-install">
-           </td>
-          </tr>
-        </tbody>
-        <tbody id="search-results">
-        </tbody>
-      </table>
+      <div class="paged listing search-results">
+        <h1>Search for plugins to install</h1>
+        <form>
+          <input type="text" name="search" value="" id="search-query">
+          <input type="button" value="Search" id="do-search">
+        </form>
+        <table>
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>Description</th>
+              <td></td>
+            </tr>
+          </thead>
+          <tbody class="template">
+            <tr>
+              <td class="name"></td>
+              <td class="description"></td>
+              <td class="actions">
+                <input type="button" value="Install" class="do-install">
+             </td>
+            </tr>
+          </tbody>
+          <tbody class="results">
+          </tbody>
+        </table>
+        <input type="button" value="<<" class="do-prev-page">
+        <span class="offset"></span>..<span class="limit"></span> of <span class="total"></span>.
+        <input type="button" value=">>" class="do-next-page">
+      </div>
+
 
       <div id="progress" class="dialog">
         <h1 class="title">