X-Git-Url: https://git.arvados.org/arvados.git/blobdiff_plain/747efcd9371118c2db9c265c13ce399fc4b6c96b..8dcb4daaa7e740f5957043321ccf2c1a7bd2ccb6:/apps/workbench/app/assets/javascripts/filterable.js?ds=sidebyside

diff --git a/apps/workbench/app/assets/javascripts/filterable.js b/apps/workbench/app/assets/javascripts/filterable.js
index 8bb8085db5..51a1060f18 100644
--- a/apps/workbench/app/assets/javascripts/filterable.js
+++ b/apps/workbench/app/assets/javascripts/filterable.js
@@ -1,11 +1,45 @@
 $(document).
-    on('paste keyup change', 'input[type=text].filterable-control', function() {
-        var q = new RegExp($(this).val(), 'i');
-        $($(this).attr('data-filterable-target')).
-            addClass('filterable-container').
-            data('q', q).
-            trigger('refresh');
+    on('paste keyup input', 'input[type=text].filterable-control', function() {
+        var $target = $($(this).attr('data-filterable-target'));
+        var currentquery = $target.data('filterable-query');
+        if (currentquery === undefined) currentquery = '';
+        if ($target.is('[data-infinite-scroller]')) {
+            // We already know how to load content dynamically, so we
+            // can do all filtering on the server side.
+
+            if ($target.data('infinite-cooloff-timer') > 0) {
+                // Clear a stale refresh-after-delay timer.
+                clearTimeout($target.data('infinite-cooloff-timer'));
+            }
+            // Stash the new query string in the filterable container.
+            $target.data('filterable-query-new', $(this).val());
+            if (currentquery == $(this).val()) {
+                // Don't mess with existing results or queries in
+                // progress.
+                return;
+            }
+            $target.data('infinite-cooloff-timer', setTimeout(function() {
+                // If the user doesn't do any query-changing actions
+                // in the next 1/4 second (like type or erase
+                // characters in the search box), hide the stale
+                // content and ask the server for new results.
+                var newquery = $target.data('filterable-query-new');
+                var params = $target.data('infiniteContentParamsFilterable') || {};
+                params.filters = [['any', 'ilike', '%' + newquery + '%']];
+                $target.data('infiniteContentParamsFilterable', params);
+                $target.data('filterable-query', newquery);
+                $target.trigger('refresh-content');
+            }, 250));
+        } else {
+            // Target does not have infinite-scroll capability. Just
+            // filter the rows in the browser using a RegExp.
+            $target.
+                addClass('filterable-container').
+                data('q', new RegExp($(this).val(), 'i')).
+                trigger('refresh');
+        }
     }).on('refresh', '.filterable-container', function() {
+        var $container = $(this);
         var q = $(this).data('q');
         var filters = $(this).data('filters');
         $('.filterable', this).hide().filter(function() {
@@ -26,7 +60,17 @@ $(document).
             }
             return pass;
         }).show();
-        $('.infinite-scroller').trigger('scroll');
+
+        // Show/hide each section heading depending on whether any
+        // content rows are visible in that section.
+        $('.row[data-section-heading]', this).each(function(){
+            $(this).toggle($('.row.filterable[data-section-name="' +
+                             $(this).attr('data-section-name') +
+                             '"]:visible').length > 0);
+        });
+
+        // Load more content if the last result is showing.
+        $('.infinite-scroller').add(window).trigger('scroll');
     }).on('change', 'select.filterable-control', function() {
         var val = $(this).val();
         var filterby = $(this).attr('data-filterable-attribute');
@@ -38,5 +82,5 @@ $(document).
             data('filters', filters).
             trigger('refresh');
     }).on('ajax:complete', function() {
-        $('.filterable-control').trigger('change');
+        $('.filterable-control').trigger('input');
     });