apps/workbench/app/assets/javascripts/filterable.js

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 // filterable.js shows/hides content when the user operates
   6 // search/select widgets. For "infinite scroll" content, it passes the
   7 // filters to the server and retrieves new content. For other content,
   8 // it filters the existing DOM elements using jQuery show/hide.
   9 //
  10 // Usage:
  11 //
  12 // 1. Add the "filterable" class to each filterable content item.
  13 // Typically, each item is a 'tr' or a 'div class="row"'.
  14 //
  15 // <div id="results">
  16 //   <div class="filterable row">First row</div>
  17 //   <div class="filterable row">Second row</div>
  18 // </div>
  19 //
  20 // 2. Add the "filterable-control" class to each search/select widget.
  21 // Also add a data-filterable-target attribute with a jQuery selector
  22 // for an ancestor of the filterable items, i.e., the container in
  23 // which this widget should apply filtering.
  24 //
  25 // <input class="filterable-control" data-filterable-target="#results"
  26 //        type="text" />
  27 //
  28 // Supported widgets:
  29 //
  30 // <input type="text" ... />
  31 //
  32 // The input value is used as a regular expression. Rows with content
  33 // matching the regular expression are shown.
  34 //
  35 // <select ... data-filterable-attribute="data-example-attr">
  36 //  <option value="foo">Foo</option>
  37 //  <option value="">Show all</option>
  38 // </select>
  39 //
  40 // When the user selects the "Foo" option, rows with
  41 // data-example-attr="foo" are shown, and all others are hidden. When
  42 // the user selects the "Show all" option, all rows are shown.
  43 //
  44 // <input type="checkbox" data-on-value="{}" data-off-value="{}" ... />
  45 //
  46 // Merges on- or off-value with other params in query. Only works with
  47 // infinite-scroll.
  48 //
  49 // Notes:
  50 //
  51 // When multiple filterable-control widgets operate on the same
  52 // data-filterable-target, items must pass _all_ filters in order to
  53 // be shown.
  54 //
  55 // If one data-filterable-target is the parent of another
  56 // data-filterable-target, results are undefined. Don't do this.
  57 //
  58 // Combining "select" filterable-controls with infinite-scroll is not
  59 // yet supported.
  60
  61 function updateFilterableQueryNow($target) {
  62     var newquery = $target.data('filterable-query-new');
  63     var params = $target.data('infinite-content-params-filterable') || {};
  64     var tsquery = to_tsquery(newquery);
  65     if (tsquery == null) {
  66         params.filters = [];
  67     } else {
  68         params.filters = [['any', '@@', tsquery]];
  69     }
  70     $(".modal-dialog-preview-pane").html("");
  71     $target.data('infinite-content-params-filterable', params);
  72     $target.data('filterable-query', newquery);
  73 }
  74
  75 $(document).
  76     on('ready ajax:success', function() {
  77         // Copy any initial input values into
  78         // data-filterable-query[-new].
  79         $('input[type=text].filterable-control').each(function() {
  80             var $this = $(this);
  81             var $target = $($this.attr('data-filterable-target'));
  82             if ($target.data('filterable-query-new') === undefined) {
  83                 $target.data('filterable-query', $this.val());
  84                 $target.data('filterable-query-new', $this.val());
  85                 updateFilterableQueryNow($target);
  86             }
  87         });
  88         $('[data-infinite-scroller]').on('refresh-content', '[data-filterable-query]', function(e) {
  89             // If some other event causes a refresh-content event while there
  90             // is a new query waiting to cooloff, we should use the new query
  91             // right away -- otherwise we'd launch an extra ajax request that
  92             // would have to be reloaded as soon as the cooloff period ends.
  93             if (this != e.target)
  94                 return;
  95             if ($(this).data('filterable-query') == $(this).data('filterable-query-new'))
  96                 return;
  97             updateFilterableQueryNow($(this));
  98         });
  99     }).
 100     on('change', 'input[type=checkbox].filterable-control', function(e) {
 101         if (this != e.target) return;
 102         var $target = $($(this).attr('data-filterable-target'));
 103         var currentquery = $target.data('filterable-query');
 104         if (currentquery === undefined) currentquery = '';
 105         if ($target.is('[data-infinite-scroller]')) {
 106             var datakey = 'infiniteContentParamsFrom'+this.id;
 107             var whichvalue = $(this).is(':checked') ? 'on-value' : 'off-value';
 108             if (JSON.stringify($target.data(datakey)) == JSON.stringify($(this).data(whichvalue)))
 109                 return;
 110             $target.data(datakey, $(this).data(whichvalue));
 111             updateFilterableQueryNow($target);
 112             $target.trigger('refresh-content');
 113         }
 114     }).
 115     on('paste keyup input', 'input[type=text].filterable-control', function(e) {
 116         var regexp;
 117         if (this != e.target) return;
 118         var $target = $($(this).attr('data-filterable-target'));
 119         var currentquery = $target.data('filterable-query');
 120         if (currentquery === undefined) currentquery = '';
 121         if ($target.is('[data-infinite-scroller]')) {
 122             // We already know how to load content dynamically, so we
 123             // can do all filtering on the server side.
 124
 125             if ($target.data('infinite-cooloff-timer') > 0) {
 126                 // Clear a stale refresh-after-delay timer.
 127                 clearTimeout($target.data('infinite-cooloff-timer'));
 128             }
 129             // Stash the new query string in the filterable container.
 130             $target.data('filterable-query-new', $(this).val());
 131             if (currentquery == $(this).val()) {
 132                 // Don't mess with existing results or queries in
 133                 // progress.
 134                 return;
 135             }
 136             $target.data('infinite-cooloff-timer', setTimeout(function() {
 137                 // If the user doesn't do any query-changing actions
 138                 // in the next 1/4 second (like type or erase
 139                 // characters in the search box), hide the stale
 140                 // content and ask the server for new results.
 141                 updateFilterableQueryNow($target);
 142                 $target.trigger('refresh-content');
 143             }, 250));
 144         } else {
 145             // Target does not have infinite-scroll capability. Just
 146             // filter the rows in the browser using a RegExp.
 147             regexp = undefined;
 148             try {
 149                 regexp = new RegExp($(this).val(), 'i');
 150             } catch(e) {
 151                 if (e instanceof SyntaxError) {
 152                     // Invalid/partial regexp. See 'has-error' below.
 153                 } else {
 154                     throw e;
 155                 }
 156             }
 157             $target.
 158                 toggleClass('has-error', regexp === undefined).
 159                 addClass('filterable-container').
 160                 data('q', regexp).
 161                 trigger('refresh');
 162         }
 163     }).on('refresh', '.filterable-container', function() {
 164         var $container = $(this);
 165         var q = $(this).data('q');
 166         var filters = $(this).data('filters');
 167         $('.filterable', this).hide().filter(function() {
 168             var $row = $(this);
 169             var pass = true;
 170             if (q && !$row.text().match(q))
 171                 return false;
 172             if (filters) {
 173                 $.each(filters, function(filterby, val) {
 174                     if (!val) return;
 175                     if (!pass) return;
 176                     pass = false;
 177                     $.each(val.split(" "), function(i, e) {
 178                         if ($row.attr(filterby) == e)
 179                             pass = true;
 180                     });
 181                 });
 182             }
 183             return pass;
 184         }).show();
 185
 186         // Show/hide each section heading depending on whether any
 187         // content rows are visible in that section.
 188         $('.row[data-section-heading]', this).each(function(){
 189             $(this).toggle($('.row.filterable[data-section-name="' +
 190                              $(this).attr('data-section-name') +
 191                              '"]:visible').length > 0);
 192         });
 193
 194         // Load more content if the last result is showing.
 195         $('.infinite-scroller').add(window).trigger('scroll');
 196     }).on('change', 'select.filterable-control', function() {
 197         var val = $(this).val();
 198         var filterby = $(this).attr('data-filterable-attribute');
 199         var $target = $($(this).attr('data-filterable-target')).
 200             addClass('filterable-container');
 201         var filters = $target.data('filters') || {};
 202         filters[filterby] = val;
 203         $target.
 204             data('filters', filters).
 205             trigger('refresh');
 206     }).on('ajax:complete', function() {
 207         $('.filterable-control').trigger('input');
 208     });