From 747efcd9371118c2db9c265c13ce399fc4b6c96b Mon Sep 17 00:00:00 2001
From: Tom Clegg <tom@curoverse.com>
Date: Tue, 3 Jun 2014 01:00:39 -0400
Subject: [PATCH] 2872: Add free text search in chooser.

---
 .../javascripts/{folders.js => filterable.js} | 20 +++++++++----------
 .../assets/stylesheets/select_modal.css.scss  |  4 ++--
 .../app/views/application/_choose.html.erb    | 17 +++++++++++-----
 .../views/collections/_choose_rows.html.erb   |  6 +++---
 .../app/views/folders/_show_contents.html.erb |  4 ++--
 .../pipeline_templates/_choose_rows.html.erb  |  2 +-
 6 files changed, 30 insertions(+), 23 deletions(-)
 rename apps/workbench/app/assets/javascripts/{folders.js => filterable.js} (65%)

diff --git a/apps/workbench/app/assets/javascripts/folders.js b/apps/workbench/app/assets/javascripts/filterable.js
similarity index 65%
rename from apps/workbench/app/assets/javascripts/folders.js
rename to apps/workbench/app/assets/javascripts/filterable.js
index 73dcfbb1a1..8bb8085db5 100644
--- a/apps/workbench/app/assets/javascripts/folders.js
+++ b/apps/workbench/app/assets/javascripts/filterable.js
@@ -1,14 +1,14 @@
 $(document).
-    on('paste keyup change', 'input.search-folder-contents', function() {
+    on('paste keyup change', 'input[type=text].filterable-control', function() {
         var q = new RegExp($(this).val(), 'i');
-        $($(this).attr('data-search-target')).find('tbody').
+        $($(this).attr('data-filterable-target')).
+            addClass('filterable-container').
             data('q', q).
             trigger('refresh');
-    }).on('refresh', 'tbody', function() {
+    }).on('refresh', '.filterable-container', function() {
         var q = $(this).data('q');
         var filters = $(this).data('filters');
-        $('tr', this).hide();
-        $('tr', this).filter(function() {
+        $('.filterable', this).hide().filter(function() {
             var $row = $(this);
             var pass = true;
             if (q && !$row.text().match(q))
@@ -27,16 +27,16 @@ $(document).
             return pass;
         }).show();
         $('.infinite-scroller').trigger('scroll');
-    }).on('change', 'select[data-filter-rows-by]', function() {
+    }).on('change', 'select.filterable-control', function() {
         var val = $(this).val();
-        var filterby = $(this).attr('data-filter-rows-by');
-        var $target = $($(this).attr('data-filter-target'));
+        var filterby = $(this).attr('data-filterable-attribute');
+        var $target = $($(this).attr('data-filterable-target')).
+            addClass('filterable-container');
         var filters = $target.data('filters') || {};
         filters[filterby] = val;
         $target.
             data('filters', filters).
             trigger('refresh');
     }).on('ajax:complete', function() {
-        $('input.search-folder-contents').trigger('change');
-        $('select[data-filter-rows-by]').trigger('change');
+        $('.filterable-control').trigger('change');
     });
diff --git a/apps/workbench/app/assets/stylesheets/select_modal.css.scss b/apps/workbench/app/assets/stylesheets/select_modal.css.scss
index f97110a2b7..5aab669825 100644
--- a/apps/workbench/app/assets/stylesheets/select_modal.css.scss
+++ b/apps/workbench/app/assets/stylesheets/select_modal.css.scss
@@ -7,9 +7,9 @@
     background: #d9edf7;
 }
 .selectable.active,
-.selectable.active a,
+.selectable.active *,
 .selectable.active:hover,
-.selectable.active:hover a {
+.selectable.active:hover * {
     background: #428bca;
     color: #fff;
 }
diff --git a/apps/workbench/app/views/application/_choose.html.erb b/apps/workbench/app/views/application/_choose.html.erb
index 94ed8e6f39..4708ac51e5 100644
--- a/apps/workbench/app/views/application/_choose.html.erb
+++ b/apps/workbench/app/views/application/_choose.html.erb
@@ -1,14 +1,21 @@
-<div class="modal">
-  <div class="modal-dialog">
+<div class="modal arv-choose">
+  <div class="modal-dialog" style="width:80%">
     <div class="modal-content">
-
       <div class="modal-header">
         <button type="button" class="close" onClick="reset_form()" data-dismiss="modal" aria-hidden="true">&times;</button>
         <h4 class="modal-title"><%= params[:title] || "Choose #{@objects.first.class_for_display}" %></h4>
       </div>
-
       <div class="modal-body">
-        <div class="container-fluid arv-folder-list selectable-container" style="height: 15em; overflow-y: scroll" data-infinite-scroller="#choose-scroll" id="choose-scroll" data-infinite-content-href="<%= @next_page_href %>">
+        <div class="container-fluid">
+          <div class="row">
+            <div class="col-sm-6">
+            </div>
+            <div class="col-sm-6">
+              <input type="text" class="form-control filterable-control" placeholder="Search" data-filterable-target=".modal.arv-choose .selectable-container"/>
+            </div>
+          </div>
+        </div>
+        <div class="container-fluid arv-filterable-list selectable-container" style="height: 20em; overflow-y: scroll" data-infinite-scroller="#choose-scroll" id="choose-scroll" data-infinite-content-href="<%= @next_page_href %>">
           <%= render partial: 'choose_rows', locals: {multiple: multiple} %>
         </div>
       </div>
diff --git a/apps/workbench/app/views/collections/_choose_rows.html.erb b/apps/workbench/app/views/collections/_choose_rows.html.erb
index 55e64515a4..88d71d2ff7 100644
--- a/apps/workbench/app/views/collections/_choose_rows.html.erb
+++ b/apps/workbench/app/views/collections/_choose_rows.html.erb
@@ -1,10 +1,10 @@
 <% @name_links.each do |name_link| %>
-  <div class="row selectable <%= 'multiple' if multiple %>" data-object-uuid="<%= name_link.uuid %>">
-    <div class="col-lg-12" style="overflow-x:hidden">
+  <div class="row filterable selectable <%= 'multiple' if multiple %>" data-object-uuid="<%= name_link.uuid %>">
+    <div class="col-sm-12" style="overflow-x:hidden">
       <i class="fa fa-fw fa-archive"></i>
       <%= name_link.name %>
     </div>
-    <div class="col-lg-12 arv-description-in-table">
+    <div class="col-sm-11 col-sm-push-1 arv-description-in-table">
       <%= render_controller_partial(
           'show_object_description_cell.html',
           controller_name: 'collections',
diff --git a/apps/workbench/app/views/folders/_show_contents.html.erb b/apps/workbench/app/views/folders/_show_contents.html.erb
index 450ba29919..68237f8485 100644
--- a/apps/workbench/app/views/folders/_show_contents.html.erb
+++ b/apps/workbench/app/views/folders/_show_contents.html.erb
@@ -48,7 +48,7 @@
     <div class="col-md-4">
       <form class="form-inline" role="form">
         Show:
-        <select class="form-control" data-filter-rows-by="data-kind" data-filter-target="table.arv-index.arv-folder-contents tbody">
+        <select class="form-control filterable-control" data-filterable-attribute="data-kind" data-filterable-target="table.arv-index.arv-folder-contents tbody">
           <option value="">Everything</option>
           <option value="arvados#collection">Data</option>
           <option value="arvados#pipelineInstance arvados#job">Compute jobs</option>
@@ -62,7 +62,7 @@
       </form>
     </div>
     <div class="col-md-4">
-      <input type="text" class="form-control search-folder-contents" placeholder="Search folder contents" data-search-target=".arv-index.arv-folder-contents"/>
+      <input type="text" class="form-control filterable-control" placeholder="Search folder contents" data-filterable-target="table.arv-index.arv-folder-contents tbody"/>
     </div>
   </div>
 </div>
diff --git a/apps/workbench/app/views/pipeline_templates/_choose_rows.html.erb b/apps/workbench/app/views/pipeline_templates/_choose_rows.html.erb
index 0e8c32f5b7..2f51d5a3fa 100644
--- a/apps/workbench/app/views/pipeline_templates/_choose_rows.html.erb
+++ b/apps/workbench/app/views/pipeline_templates/_choose_rows.html.erb
@@ -1,5 +1,5 @@
 <% @objects.each do |object| %>
-  <div class="row selectable <%= 'multiple' if multiple %>" data-object-uuid="<%= object.uuid %>">
+  <div class="row filterable selectable <%= 'multiple' if multiple %>" data-object-uuid="<%= object.uuid %>">
     <div class="col-md-6" style="overflow-x:hidden">
       <i class="fa fa-fw fa-gear"></i>
       <%= object.name %>
-- 
2.30.2