From 598c7b19be294965cd3e45d121a6fef4b93153c8 Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
Date: Tue, 30 Apr 2019 14:57:59 +0000
Subject: [PATCH] Bug 22811: Add button to clear DataTables filtering

This patch adds a "clear filter" button to the global
DataTables configuration. The button will appear if:

 - There is no custom DOM configuration applied to the DataTable
   instance.
 - The DataTable has the search form enabled.

The new button should be disabled by default. Entering a search term in
the form should enable it.

To test, apply the patch and clear your browser cache if necessary. View
various pages with various DataTables configurations and confirm that
everything looks correct and the new "Clear filter" button doesn't
appear when there is no DataTable search field. For example:

 - Administration -> Libraries
 - Administration -> Currencies
 - Reports -> Saved reports
 - Circulation -> Check out
 - Tools -> News

Signed-off-by: Liz Rea <wizzyrea@gmail.com>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
---
 .../prog/en/includes/columns_settings.inc          | 13 ++++++-
 koha-tmpl/intranet-tmpl/prog/js/datatables.js      | 41 ++++++++++++++++++++--
 2 files changed, 51 insertions(+), 3 deletions(-)

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 6d1bf6acfe..abfe065afd 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/includes/columns_settings.inc
+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/columns_settings.inc
@@ -60,6 +60,17 @@ function KohaTable(id_selector, dt_parameters, columns_settings, add_filters) {
 
     dt_parameters[ "buttons" ] = [
         {
+            fade: 100,
+            className: "dt_button_clear_filter",
+            titleAttr: _("Clear filter"),
+            enabled: false,
+            text: '<i class="fa fa-lg fa-remove"></i> <span class="dt-button-text">' + _("Clear filter") + '</span>',
+            action: function ( e, dt, node, config ) {
+                dt.search( "" ).draw("page");
+                node.addClass("disabled");
+            }
+        },
+        {
             extend: 'colvis',
             fade: 100,
             columns: included_ids,
@@ -106,7 +117,7 @@ function KohaTable(id_selector, dt_parameters, columns_settings, add_filters) {
         deactivate_filters(id_selector);
     }
 
-    $(".columns_controls,.export_controls").tooltip();
+    $(".dt_button_clear_filter, .columns_controls, .export_controls").tooltip();
 
     return table;
 }
diff --git a/koha-tmpl/intranet-tmpl/prog/js/datatables.js b/koha-tmpl/intranet-tmpl/prog/js/datatables.js
index 0e95d1e2f0..dd07ddc04d 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/datatables.js
+++ b/koha-tmpl/intranet-tmpl/prog/js/datatables.js
@@ -32,9 +32,38 @@ var dataTablesDefaults = {
         }
     },
     "dom": '<"top pager"ilpfB>tr<"bottom pager"ip>',
-    "buttons": [],
+    "buttons": [{
+        fade: 100,
+        className: "dt_button_clear_filter",
+        titleAttr: _("Clear filter"),
+        enabled: false,
+        text: '<i class="fa fa-lg fa-remove"></i> <span class="dt-button-text">' + _("Clear filter") + '</span>',
+        available: function ( dt ) {
+            // The "clear filter" button is made available if this test returns true
+            if( dt.settings()[0].aanFeatures.f ){ // aanFeatures.f is null if there is no search form
+                return true;
+            }
+        },
+        action: function ( e, dt, node ) {
+            dt.search( "" ).draw("page");
+            node.addClass("disabled");
+        }
+    }],
     "aLengthMenu": [[10, 20, 50, 100, -1], [10, 20, 50, 100, window.MSG_DT_ALL || "All"]],
-    "iDisplayLength": 20
+    "iDisplayLength": 20,
+    initComplete: function( settings) {
+        var tableId = settings.nTable.id
+        // When the DataTables search function is triggered,
+        // enable or disable the "Clear filter" button based on
+        // the presence of a search string
+        $("#" + tableId ).on( 'search.dt', function ( e, settings ) {
+            if( settings.oPreviousSearch.sSearch == "" ){
+                $("#" + tableId + "_wrapper").find(".dt_button_clear_filter").addClass("disabled");
+            } else {
+                $("#" + tableId + "_wrapper").find(".dt_button_clear_filter").removeClass("disabled");
+            }
+        });
+    }
 };
 
 
@@ -567,3 +596,11 @@ function footer_column_sum( api, column_numbers ) {
         $( api.column( column_number ).footer() ).html(total.format_price());
     };
 }
+
+function filterDataTable( table, column, term ){
+    if( column ){
+        table.column( column ).search( term ).draw("page");
+    } else {
+        table.search( term ).draw("page");
+    }
+}
-- 
2.11.0