2872: Add free text search in chooser.
authorTom Clegg <tom@curoverse.com>
Tue, 3 Jun 2014 05:00:39 +0000 (01:00 -0400)
committerTom Clegg <tom@curoverse.com>
Tue, 3 Jun 2014 05:00:39 +0000 (01:00 -0400)
apps/workbench/app/assets/javascripts/filterable.js [moved from apps/workbench/app/assets/javascripts/folders.js with 65% similarity]
apps/workbench/app/assets/stylesheets/select_modal.css.scss
apps/workbench/app/views/application/_choose.html.erb
apps/workbench/app/views/collections/_choose_rows.html.erb
apps/workbench/app/views/folders/_show_contents.html.erb
apps/workbench/app/views/pipeline_templates/_choose_rows.html.erb

similarity index 65%
rename from apps/workbench/app/assets/javascripts/folders.js
rename to apps/workbench/app/assets/javascripts/filterable.js
index 73dcfbb1a1fac9c77144bcd53fcaf766a1619010..8bb8085db5add809a6a8cb7b1d22263beeb8a11a 100644 (file)
@@ -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');
     });
index f97110a2b7f9781559f201d40a9a478060f22028..5aab6698259afb271c0f1feac0782b58df3382ef 100644 (file)
@@ -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;
 }
index 94ed8e6f39e33177925a8fbd5c8f0f0de0889270..4708ac51e51d7ee89bb713158bbb0b46f6a3db9f 100644 (file)
@@ -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>
index 55e64515a4451cb4c6946e0f975eebbb1bb74f9c..88d71d2ff78a941817b898fc805766ef43b99c29 100644 (file)
@@ -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',
index 450ba29919093a949afa83fe5030320d1f0d99ea..68237f8485b4488f71b63546fe9b3abede867eae 100644 (file)
@@ -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>
index 0e8c32f5b7f0f4e75a2c8a65d82abcbbbed20608..2f51d5a3fabd6570e5091067d45129247e8781fa 100644 (file)
@@ -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 %>