add search-field and searching to users panel

3 files changed, 124 insertions, 0 deletions

diff --git a/data/stuff/js/search-field.js b/data/stuff/js/search-field.js
new file mode 100644
index 0000000..42bec10
--- /dev/null
+++ b/data/stuff/js/search-field.js
@@ -0,0 +1,79 @@
+jQuery(function($) {
+  "use strict";
+
+  function clear_delay(el) {
+    var ival = el.data('search-interval');
+
+    if (ival) {
+      // clear interval
+      clearInterval(ival);
+      el.data('search-interval', null);
+    }
+  }
+
+  function trigger_search(el, q) {
+    if (q == el.data('q'))
+      return;
+
+    // cache search
+    el.data('q', q);
+
+    // trigger search
+    el.trigger({
+      type: "search-update",
+      query: "",
+    });
+  }
+
+  $('.btn.search-toggle').click(function() {
+    var btn = $(this),
+        bar = btn.parents('.panel').find('.panel-heading.search-toggle'),
+        field = bar.find('input');
+
+    // toggle button highlight
+    btn.toggleClass('btn-primary btn-default')
+    var active = btn.hasClass('btn-primary');
+
+    // clear field
+    field.val('');
+
+    // toggle bar visibility
+    bar.toggleClass('hidden', !active);
+
+    if (active) {
+      setTimeout(function() {
+        // focus text field
+        field.focus();
+      }, 10);
+    } else {
+      // trigger search
+      trigger_search(field, '');
+    }
+  });
+
+  $('.panel-heading.search-toggle input').keydown(function(ev) {
+    var me = $(this),
+        trigger = me.data('search-trigger') || 'delay';
+
+    if (trigger == 'delay') {
+      clear_delay(me);
+
+      setTimeout(function() {
+        clear_delay(me);
+        trigger_search(me, me.val());
+      }, me.data('search-delay') || 100);
+    } else if (trigger == 'enter') {
+      if (ev.which == 13) {
+        setTimeout(function() {
+          trigger_search(me, me.val());
+        }, 10);
+
+        // stop event
+        return false;
+      }
+    } else {
+      // unknown trigger type
+      throw new Error('unknown search trigger: ' + trigger);
+    }
+  });
+});
diff --git a/data/stuff/js/util.js b/data/stuff/js/util.js
index c021499..ed048ec 100644
--- a/data/stuff/js/util.js
+++ b/data/stuff/js/util.js
@@ -1,3 +1,18 @@
+$.fn.reduce = (function() {
+  if (Array.prototype.reduce) {
+    return Array.prototype.reduce;
+  } else {
+    return function(a, cb, r) {
+      a = [].concat(a);
+
+      for (var i = 0, l = a.length; i < l; i++)
+        r = cb(r, a[i]);
+
+      return r;
+    };
+  }
+})();
+
 jQuery(function($) {
   "use strict";
 
diff --git a/data/stuff/test/auth.js b/data/stuff/test/auth.js
index 0776bfd..3960da6 100644
--- a/data/stuff/test/auth.js
+++ b/data/stuff/test/auth.js
@@ -7,6 +7,7 @@ jQuery(function($) {
         "class='list-group-item %{css|h}' ",
         "title='Edit user \"%{user_name|h}\".' ",
         "data-row='%{row|json|h}' ",
+        "data-q='%{q|h}' ",
       ">",
         "<i class='fa fa-fw fa-spinner fa-spin hidden loading'></i>",
         "<i class='fa fa-fw fa-user loading'></i>",
@@ -34,6 +35,27 @@ jQuery(function($) {
     ],
   });
 
+  function filter() {
+    var qs = $('#filter-q').val().replace(/^\s+|\s+$/g, '').toLowerCase().split(/\s+/);
+
+    if (qs.length > 0) {
+      // hide all users
+      $('#users .list-group-item').addClass('hidden');
+
+      // show matching users
+      $($.grep($('#users .list-group-item'), function(el) {
+        var eq = $(el).data('q');
+
+        return ($.grep(qs, function(q) {
+          return eq.indexOf(q) !== -1;
+        }).length == qs.length);
+      })).removeClass('hidden');
+    } else {
+      // show all users
+      $('#users .list-group-item').removeClass('hidden');
+    }
+  }
+
   function reload() {
     var btn = $('#reload'),
         list = $('#users');
@@ -51,9 +73,13 @@ jQuery(function($) {
     }).done(function(r) {
       list.html($.map(r.users, function(row) {
         return TEMPLATES.run('user', $.extend({}, row, {
+          q:   [row.user_id, row.user_name, row.email, row.role_name].join('  ').toLowerCase(),
           row: row,
         }));
       }).join(''));
+
+      // refresh filters
+      filter();
     });
 
     // stop event
@@ -70,6 +96,10 @@ jQuery(function($) {
     });
   }
 
+  $('#filter-q').on('search-update', function() {
+    filter();
+  });
+
   $('#users').on('click', 'a.list-group-item', function() {
     var me = $(this);