Bug 32447: Fix DataTable filtering when hidden columns are in place

The bibliographic record's details page in the Staff interface
includes a 'Holdings' table at the bottom with information for
each item attached to the record. When activating the filters
in this table, there is no input field for the barcode column
but just bold text.

This broke in v22.11.00, the related commit being 018a981b9b
from Bug 29282 where two new hidden columns were added to that
table.

We can fix this by taking advantage of the existing code in
koha-tmpl/intranet-tmpl/prog/en/includes/columns_settings.inc
(introduced by commit dfb7af91af6 from Bug 23307) which allows
us to create and hook our own custom columnsInit() function in
koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/detail.tt
to redraw the DataTable filters upon page load if a column is
marked as 'is_hidden: 1' in admin/columns_settings.yml, or if
a column is added/removed via the "⚙ Columns" button (both
are handled by the DataTables column-visibility.dt event).

Redrawing the filters via the above method also fixes the
issue described in Bug 32448.

Test plan:

1) Confirm the erratic DataTable behaviour outlined above
2) Apply this patch and reload all JS assets (hit CTRL-F5)
3) Confirm that you now see the correct input text field
   for the 'Barcode' column
4) Confirm that you can search for barcodes or in any other
   column successfully
5) Try toggling the visibility of the columns and making as
   many search variations as possible -- it should all now
   work without any glitches!

For extra credit ;-) you can also test the 'Other holdings'
table by setting the SeparateHoldings SysPref to 'Separate'.

Signed-off-by: Julian Maurice <julian.maurice@biblibre.com>
Signed-off-by: Nick Clemens <nick@bywatersolutions.com>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>

diff --git a/koha-tmpl/intranet-tmpl/lib/jquery/plugins/jquery.dataTables.columnFilter.js b/koha-tmpl/intranet-tmpl/lib/jquery/plugins/jquery.dataTables.columnFilter.js
index 5437889..f3d7d77 100644 (file)
--- a/koha-tmpl/intranet-tmpl/lib/jquery/plugins/jquery.dataTables.columnFilter.js
+++ b/koha-tmpl/intranet-tmpl/lib/jquery/plugins/jquery.dataTables.columnFilter.js
@@ -523,17 +523,20 @@
             var sFilterRow = "tr"; //Before fix for ColVis
 
             if (properties.sPlaceHolder == "head:after") {
-                var tr = $("tr:first", oTable.fnSettings().nTHead).detach();
-                //tr.appendTo($(oTable.fnSettings().nTHead));
-                if (oTable.fnSettings().bSortCellsTop) {
-                    tr.prependTo($(oTable.fnSettings().nTHead));
-                    //tr.appendTo($("thead", oTable));
-                    aoFilterCells = oTable.fnSettings().aoHeader[1];
-                }
-                else {
-                    tr.appendTo($(oTable.fnSettings().nTHead));
-                    //tr.prependTo($("thead", oTable));
-                    aoFilterCells = oTable.fnSettings().aoHeader[0];
+
+                if (!properties.bFiltersAlreadyActivated) {
+                    var tr = $("tr:first", oTable.fnSettings().nTHead).detach();
+                    //tr.appendTo($(oTable.fnSettings().nTHead));
+                    if (oTable.fnSettings().bSortCellsTop) {
+                        tr.prependTo($(oTable.fnSettings().nTHead));
+                        //tr.appendTo($("thead", oTable));
+                        aoFilterCells = oTable.fnSettings().aoHeader[1];
+                    }
+                    else {
+                        tr.appendTo($(oTable.fnSettings().nTHead));
+                        //tr.prependTo($("thead", oTable));
+                        aoFilterCells = oTable.fnSettings().aoHeader[0];
+                    }
                 }
 
                 sFilterRow = "tr:last";
@@ -541,27 +544,30 @@
 
             } else if (properties.sPlaceHolder == "head:before") {
 
-                if (oTable.fnSettings().bSortCellsTop) {
-                    var tr = $("tr:first", oTable.fnSettings().nTHead).detach();
-                    tr.appendTo($(oTable.fnSettings().nTHead));
-                    aoFilterCells = oTable.fnSettings().aoHeader[1];
-                } else {
-                    aoFilterCells = oTable.fnSettings().aoHeader[0];
+                if (!properties.bFiltersAlreadyActivated) {
+                    if (oTable.fnSettings().bSortCellsTop) {
+                        var tr = $("tr:first", oTable.fnSettings().nTHead).detach();
+                        tr.appendTo($(oTable.fnSettings().nTHead));
+                        aoFilterCells = oTable.fnSettings().aoHeader[1];
+                    } else {
+                        aoFilterCells = oTable.fnSettings().aoHeader[0];
+                    }
+                    /*else {
+                    //tr.prependTo($("thead", oTable));
+                    sFilterRow = "tr:first";
+                    }*/
                 }
-                /*else {
-                //tr.prependTo($("thead", oTable));
-                sFilterRow = "tr:first";
-                }*/
 
                 sFilterRow = "tr:first";
-
                 oHost = oTable.fnSettings().nTHead;
 
-
             }
 
-            //$(sFilterRow + " th", oHost).each(function (index) {//bug with ColVis
-            $(aoFilterCells).each(function (index) {//fix for ColVis
+            $(sFilterRow + " th", oHost).each(function (index) {
+            //$(aoFilterCells).each(function (index) {//fix for ColVis
+
+                var bHeaderHasInput = $(this).find('input').length;
+
                 i = index;
                 var aoColumn = { type: "text",
                     bRegex: false,
@@ -569,16 +575,20 @@
                     iMaxLenght: -1,
                     iFilterLength: 0
                 };
+
                 if (properties.aoColumns != null) {
                     if (properties.aoColumns.length < i || properties.aoColumns[i] == null)
                         return;
                     aoColumn = properties.aoColumns[i];
                 }
-                //label = $(this).text(); //Before fix for ColVis
-                label = $($(this)[0].cell).text(); //Fix for ColVis
+                if (bHeaderHasInput)
+                    label = $(this).find('input').val();
+                else
+                    label = $(this).text();
+                //label = $($(this)[0].cell).text(); //Fix for ColVis
                 if (aoColumn.sSelector == null) {
-                    //th = $($(this)[0]);//Before fix for ColVis
-                    th = $($(this)[0].cell); //Fix for ColVis
+                    th = $($(this)[0]);
+                    //th = $($(this)[0].cell); //Fix for ColVis
                 }
                 else {
                     th = $(aoColumn.sSelector);

diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/columns_settings.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/columns_settings.inc
index d3f3b6e..32783ed 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/en/includes/columns_settings.inc
+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/columns_settings.inc
@@ -216,7 +216,7 @@ function KohaTable(id_selector, dt_parameters, table_settings, add_filters) {
             // This function can be created separately and used to trigger
             // an event after the DataTable has loaded AND column visibility
             // has been updated according to the table's configuration
-            columnsInit();
+            columnsInit(this);
         }
     }).columns( hidden_ids ).visible( false );
 

diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/detail.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/detail.tt
index cd1ebf2..5103e00 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/detail.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/detail.tt
@@ -2170,6 +2170,10 @@ Note that permanent location is a code, and location may be an authval.
 
         });
 
+        function columnsInit(table) {
+            activate_filters(table.id, false);
+        }
+
         [% IF found1 && Koha.Preference('RetainCatalogSearchTerms') %]
             $(document).ready(function() {
                 var search_index = localStorage.getItem("cat_search_pulldown_selection");

diff --git a/koha-tmpl/intranet-tmpl/prog/js/table_filters.js b/koha-tmpl/intranet-tmpl/prog/js/table_filters.js
index 85519b0..6cbe61d 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/js/table_filters.js
+++ b/koha-tmpl/intranet-tmpl/prog/js/table_filters.js
@@ -1,4 +1,4 @@
-function activate_filters(id) {
+function activate_filters(id, bShowFilters) {
     var table = $("#" + id );
     if (table.length == 1) {
         filters_row = table.find('thead tr.filters_row');
@@ -16,19 +16,29 @@ function activate_filters(id) {
             table.dataTable().columnFilter({
                 'sPlaceHolder': 'head:after'
                 ,   'aoColumns': aoColumns
+                ,'bFiltersAlreadyActivated': false
             });
             filters_row.addClass('columnFilter');
+        } else {
+            table.dataTable().columnFilter({
+                'sPlaceHolder': 'head:after'
+                ,   'aoColumns': aoColumns
+                ,'bFiltersAlreadyActivated': true
+            });
         }
-        filters_row.show();
-    }
 
-    $('#' + id + '_activate_filters')
-        .html('<i class="fa fa-filter"></i> ' + __('Deactivate filters') )
-        .unbind('click')
-        .click(function() {
-            deactivate_filters(id);
-            return false;
-        });
+        if (bShowFilters) {
+            filters_row.show();
+
+            $('#' + id + '_activate_filters')
+                .html('<i class="fa fa-filter"></i> ' + __('Deactivate filters') )
+                .unbind('click')
+                .click(function() {
+                    deactivate_filters(id);
+                    return false;
+                });
+        }
+    }
 }
 
 function deactivate_filters(id) {
@@ -44,7 +54,7 @@ function deactivate_filters(id) {
         .html('<i class="fa fa-filter"></i> ' + __('Activate filters') )
         .unbind('click')
         .click(function() {
-            activate_filters(id);
+            activate_filters(id, true);
             return false;
         });
 }