From 1d32d8bf6a5d053a9856c9c95a3f3c5f2e4d26a6 Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
Date: Fri, 12 Feb 2021 12:57:56 +0000
Subject: [PATCH] Bug 27682: Add a floating table header for Search engine
 configuration

This patch adds DataTables options to the tables on the search engine
configuration pages. The table on the "Search fields" tab will be
sortable, all tables will be searchable, and all tables will have
floating headers.

To test you should have the SearchEngine preference set to
"Elasticsearch."

- Apply the patch and go to Administration -> Search engine
  configuration (Elasticsearch)
- Test the tables under each tab, "Search fields," "Bibliographic
  records," and "Authorities," the table has a search filter and the
  header row "sticks" to the top of the browser window as you scroll
  down.
- The "Search fields" table should be sortable, but the other two should
  not--they have drag-and-drop row reordering.
---
 .../admin/searchengine/elasticsearch/mappings.tt   | 41 +++++++++++-----------
 .../prog/js/elasticsearch-mappings.js              | 27 +++++++++++++-
 2 files changed, 47 insertions(+), 21 deletions(-)

diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/searchengine/elasticsearch/mappings.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/searchengine/elasticsearch/mappings.tt
index 81beb1d311..20052763b0 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/searchengine/elasticsearch/mappings.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/searchengine/elasticsearch/mappings.tt
@@ -108,27 +108,26 @@ a.add, a.delete {
                 [% END %]
             </ul>
             <div id="search_fields">
-              <table class="search_fields">
+              <table class="search_fields" id="search_fields_table">
                 <thead>
                   <tr>
                     <th>Name</th>
                     <th>Aliases</th>
                     <th>Label</th>
                     <th>Type</th>
-                    <th colspan="2">Searchable</th>
                     <th>Weight</th>
+                    <th colspan="2">Searchable</th>
                   </tr>
                   <tr>
-                    <th colspan=4>&nbsp;</th>
-                    <th>Staff interface</th>
-                    <th>OPAC</th>
-                    <th>&nbsp;</th>
+                    <th colspan="5" class="NoSort">&nbsp;</th>
+                    <th class="NoSort">Staff interface</th>
+                    <th class="NoSort">OPAC</th>
                   </tr>
                 </thead>
                 <tbody>
                   [% FOREACH search_field IN all_search_fields %]
                     <tr>
-                      <td>
+                      <td data-order="[% search_field.name | html %]">
                         [% IF search_field.mandatory %]
                             <input type="text" name="search_field_name" value="[% search_field.name | html %]" readonly />
                         [% ELSE %]
@@ -138,14 +137,14 @@ a.add, a.delete {
                       <td>
                           [% search_field.aliases.join(', ') | html %]
                       </td>
-                      <td>
+                      <td data-order="[% search_field.label | html %]">
                         [% IF search_field.mandatory %]
                             <input type="text" name="search_field_label" value="[% search_field.label | html %]" readonly />
                         [% ELSE %]
                             <input type="text" name="search_field_label" value="[% search_field.label | html %]" />
                         [% END %]
                       </td>
-                      <td>
+                      <td data-order="[% search_field.type | html %]">
                         [% IF search_field.mandatory %]
                             <input type="hidden" name="search_field_type" value="[% search_field.type | html %]" />
                             <select name="search_field_type" disabled>
@@ -195,6 +194,13 @@ a.add, a.delete {
                               [% END %]
                             </select>
                       </td>
+                        <td data-order="[% search_field.weight | html %]">
+                            [% IF search_field.mapped_biblios %]
+                                <input type="text" inputmode="numeric" pattern="[0-9]*" name="search_field_weight" value="[% search_field.weight | html %]" />
+                            [% ELSE %]
+                                <input type="text" name="search_field_weight" value="">
+                            [% END %]
+                        </td>
                       <td>
                         <select name="search_field_staff_client">
                           [% IF search_field.staff_client %]
@@ -217,13 +223,6 @@ a.add, a.delete {
                           [% END %]
                         </select>
                       </td>
-                      <td>
-                        [% IF search_field.mapped_biblios %]
-                            <input type="text" inputmode="numeric" pattern="[0-9]*" name="search_field_weight" value="[% search_field.weight | html %]" />
-                        [% ELSE %]
-                            <input type="hidden" name="search_field_weight" value="">
-                        [% END %]
-                      </td>
                     </tr>
                   [% END %]
                 </tbody>
@@ -231,7 +230,7 @@ a.add, a.delete {
             </div>
             [% FOREACH index IN indexes %]
                 <div id="mapping_[% index.index_name | html %]">
-                    <table class="mappings" data-index_name="[% index.index_name | html %]">
+                    <table class="mappings" data-index_name="[% index.index_name | html %]" data-ordering="false" id="mapping_[% index.index_name | html %]_table">
                       <thead>
                         <tr class="nodrag nodrop">
                           <th>Search field</th>
@@ -240,7 +239,7 @@ a.add, a.delete {
                           <th>Suggestible</th>
                           <th>Searchable</th>
                           <th>Mapping</th>
-                          <th></th>
+                          <th>&nbsp;</th>
                         </tr>
                       </thead>
                       <tbody>
@@ -267,6 +266,7 @@ a.add, a.delete {
                                 <td>
                                     <input name="mapping_marc_field" type="text" value="[% mapping.marc_field | html %]" />
                                 </td>
+                                <td>&nbsp;</td>
                               </tr>
                             [% ELSE %]
                               <tr>
@@ -448,10 +448,10 @@ a.add, a.delete {
                 </div>
             [% END %]
         </div>
-        <p>
+        <fieldset class="action">
             <button class="btn btn-default" type="submit" name="op" value="edit"><i class="fa fa-hdd-o" aria-hidden="true"></i> Save</button>
             <button class="btn btn-default" type="submit" name="op" value="reset_confirm"><i class="fa fa-refresh" aria-hidden="true"></i> Reset Mappings</button>
-        </p>
+        </fieldset>
     </form>
 
             </main>
@@ -465,6 +465,7 @@ a.add, a.delete {
      </div> <!-- /.row -->
 
 [% MACRO jsinclude BLOCK %]
+    [% INCLUDE 'datatables.inc' %]
     [% Asset.js("lib/jquery/plugins/jquery.tablednd.js") | $raw %]
     [% Asset.js("js/elasticsearch-mappings.js") | $raw %]
 [% END %]
diff --git a/koha-tmpl/intranet-tmpl/prog/js/elasticsearch-mappings.js b/koha-tmpl/intranet-tmpl/prog/js/elasticsearch-mappings.js
index 3ebd600d7c..99d9185a4b 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/elasticsearch-mappings.js
+++ b/koha-tmpl/intranet-tmpl/prog/js/elasticsearch-mappings.js
@@ -20,8 +20,32 @@ function clone_line(line) {
     return new_line;
 }
 
+function tableInit( oldtabid, newtabid ) {
+
+    var oldTableId = $("#" + oldtabid + "_table");
+    var newTableId = $("#" + newtabid + "_table");
+
+    oldTableId.DataTable().destroy();
+    newTableId.DataTable(
+        $.extend(true, {}, dataTablesDefaults, {
+            "columnDefs": [
+                { "orderable": false, "searchable": false, 'targets': ['NoSort'] },
+            ],
+            "paging": false,
+            "autoWidth": false
+        }));
+}
+
 $(document).ready(function () {
-    $("#tabs").tabs();
+
+    tableInit( "", "search_fields");
+
+    $("#tabs").tabs({
+        activate: function( event, ui ){
+            tableInit( ui.oldPanel.attr('id'), ui.newPanel.attr('id') );
+        },
+    });
+
     $('.delete').click(function () {
         if ($(this).hasClass('mandatory') && $(".mandatory[data-field_name=" + $(this).attr('data-field_name') + "]").length < 2) {
             alert( __("This field is mandatory and must have at least one mapping") );
@@ -34,6 +58,7 @@ $(document).ready(function () {
     $("table.mappings").tableDnD({
         onDragClass: "dragClass",
     });
+
     $('.add').click(function () {
         var table = $(this).closest('table');
         var index_name = $(table).attr('data-index_name');
-- 
2.11.0