Search in abstract with a better code structure (separate from the lib)

static/css/gargantext/tables.css

@@ -26,6 +26,10 @@ th a {
     min-width: 20em;
 }
 
+#doubleSearch {
+    min-width: 25em;
+}
+
 .dynatable-search {
     margin-left: 2em;
     font-size: 16px;

static/js/gargantext/Docs_dyna_chart_and_table.js

@@ -435,11 +435,14 @@ function Main_test( Data , SearchFilter ) {
               },
               features: {
                 pushState: false,
+                // prevent default title search which can't do title vs abstract
+                search: false,
                 // sort: false //i need to fix the sorting function... the current one just sucks
               },
-              // inputs: {
-              //   queries: $('#searchAB')
-              // },
+              inputs: {
+                // our own search which differentiates title vs abstract queries
+                queries: $('#doubleSearch')
+              },
               writers: {
                 _rowWriter: ulWriter
                 // _cellWriter: customCellWriter
@@ -454,26 +457,53 @@ function Main_test( Data , SearchFilter ) {
   $(".dynatable-record-count").insertAfter(".imadiv")
   $(".dynatable-pagination-links").insertAfter(".imadiv")
 
+  // make filter checkboxes appear in the right place (ie after search box)
   $("#filter_search").html( $("#filter_search").html().replace('selected="selected"') );
   $("#"+SearchFilter).attr( "selected" , "selected" )
 
   var the_content = $("#filter_search").html();
-  $(""+the_content).insertAfter("#dynatable-query-search-my-ajax-table")
-
-
-  // $('#searchAB').click( function() {
-  //   if($(this).is(':checked')) {
-  //       console.log( "Do stuff")
-  //       $("#dynatable-query-search-my-ajax-table").keyup(function (e) {
-  //         if (e.keyCode == 13) {
-  //           console.log("Do stuff: Just pressed ENTER")
-  //         }
-  //       })
-  //   }
-  // });
-    // MyTable.data('dynatable').settings.inputs.queries = { $('#searchAB') }
-
-  // .insertAfter("#dynatable-query-search-my-ajax-table")
+  $(""+the_content).insertAfter("#doubleSearch")
+
+  // binds a custom filter to our 'doubleSearch' via dynatable.queries.functions
+  MyTable.data('dynatable').queries
+      .functions['doubleSearch'] = function(record,searchString) {
+          // NB searchString == $("#doubleSearch").val()
+
+          // by default we always decide to search in the title
+          matchInTexts = [record.title]
+
+          // if box is checked we'll also search in the abstracts
+          if ($("#searchAB").is(':checked')) {
+              matchInTexts.push(record.hyperdata.abstract)
+          }
+
+          // inspired from the default cf. dynatable.queries.functions['search']
+          var contains = false;
+          for (i in matchInTexts) {
+              matchInText = matchInTexts[i]
+              contains = (
+                  matchInText.toLowerCase().indexOf(
+                      searchString.toLowerCase()
+                  ) !== -1
+              )
+              if (contains) { break; } else { continue; }
+          }
+          return contains;
+        }
+
+  MyTable.data('dynatable').process
+
+  // re-apply search function on click
+  $('#searchAB').click( function() {
+    MyTable.data('dynatable').process();
+  });
+
+  // re-apply search function on ENTER
+  $("#doubleSearch").keyup(function (e) {
+    if (e.keyCode == 13) {
+      MyTable.data('dynatable').process();
+    }
+  })
 
   return "OK"
 }

templates/pages/corpora/titles.html

@@ -61,6 +61,14 @@
                         <p id="corpusdisplayer" onclick='Final_UpdateTable("click")' class="btn btn-primary btn-lg" style="width:200px; margin:0 auto; display:block;">Titles</h2></p>
                         </a>
                     </h4>
+
+                    <!-- search box with custom function in Docs_dyna_chart_and_tables.js -->
+                    <div class="pull-left" style="margin-top:1.85em; font-size: 16px;">
+                        Search:
+                        <input type="search" id="doubleSearch"/>
+                    </div>
+
+
                 </div>
                 <div id="collapseOne" class="panel-collapse collapse no-transition" role="tabpanel">
                   <div class="panel-body">
@@ -78,6 +86,7 @@
 
 <div id="filter_search" style="visibility:hidden">
     <span style="font-size:70%;">
+      <!-- Used by the #doubleSearch associated function -->
       <input title="Search in Titles" id="searchTI" name="searchTI" type="checkbox" checked onclick="return false">TI&nbsp;
       <input title="Search in Abstracts" id="searchAB" name="searchAB" type="checkbox">AB
     </span>&nbsp;&nbsp;
@@ -90,7 +99,10 @@
         <!-- </optgroup> -->
         <!-- <optgroup label="Duplicates"> -->
             <!-- <option value="filter_doi">By DOI</option> -->
-            <option id="filter_dupl-titles" value="filter_dupl-titles">Duplicates by Title</option>
+
+            <!-- TODO
+            <option id="filter_dupl-titles" value="filter_dupl-titles">Duplicates by Title</option> -->
+
         <!-- </optgroup> -->
     </select>