From 6ceae6b02d89bfebbb3bec13ce9525014cbdd2a7 Mon Sep 17 00:00:00 2001 From: Paul Duncan Date: Sat, 2 Apr 2016 02:06:31 -0400 Subject: add search-field and searching to users panel --- data/stuff/js/search-field.js | 79 ++++++++++++++++++++++++++++++++++++++ data/stuff/js/util.js | 15 ++++++++ data/stuff/test/auth.js | 30 +++++++++++++++ src/guff/views/ecrs/test/auth.ecr | 80 ++++++++++++++++++++++++++++++--------- src/guff/views/html/test/auth.cr | 6 ++- 5 files changed, 191 insertions(+), 19 deletions(-) create mode 100644 data/stuff/js/search-field.js 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}' ", ">", "", "", @@ -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); diff --git a/src/guff/views/ecrs/test/auth.ecr b/src/guff/views/ecrs/test/auth.ecr index ab9f552..00cc918 100644 --- a/src/guff/views/ecrs/test/auth.ecr +++ b/src/guff/views/ecrs/test/auth.ecr @@ -24,28 +24,11 @@ Users -
- - - - - - - -
-
@@ -55,6 +38,67 @@
+
+
+
+ + Role: + + + + +
+ +
+ + + + + + + +
+ +
+ + + +
+
+
+ + +
diff --git a/src/guff/views/html/test/auth.cr b/src/guff/views/html/test/auth.cr index 1baa7de..528b652 100644 --- a/src/guff/views/html/test/auth.cr +++ b/src/guff/views/html/test/auth.cr @@ -4,6 +4,10 @@ require "../page" class Guff::TestAuthHTMLView TITLE = "Guff Auth Test" FEATURES = %w{bootstrap font-awesome guff/util} + SCRIPTS = %w{ + /guff-stuff/js/search-field.js + /guff-stuff/test/auth.js + } TEMPLATES = TemplateCache.new({ role: " @@ -27,7 +31,7 @@ class Guff::TestAuthHTMLView def run(context) page = PageHTMLView.new(TITLE, self.to_s) page.add_features(FEATURES) - page.scripts << "/guff-stuff/test/auth.js" + page.scripts.concat(SCRIPTS) context.response.content_type = page.content_type context.response.puts page end -- cgit v1.2.3