From f31501b2f8ab67ff8181748a5668bcdfd3f4d34c Mon Sep 17 00:00:00 2001
From: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Date: Fri, 8 Jan 2021 12:10:22 +0100
Subject: [PATCH] Bug 27402: Add DT column filtering to the cities admin page

Bug 24561 added a wrapper to use easily all the DataTables functionalities when a REST API route was used within Koha.

The filtering method used is working for the global search filter, but not if we have a filter on top of each column.

This patchset is going to, first, add the filters on top of each column
of the cities table, then the code will be moved to the DT REST API wrapper to make it reusable easily.

Test plan:

Generate some cities:
  use Koha::Cities;
  for ( 1 .. 42 ) {
      Koha::City->new({city_name => "name_$_", city_state => "state_$_", city_country => "country_$_", city_zipcode => "zipcode_$_" })->store;
  }
Hit /admin/cities.pl
Use the filters

The general filter must do a OR query on each of the cities' attributes,
when column filters must use AND

Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
---
 .../prog/en/modules/admin/cities.tt           | 33 ++++++++++++++++++-
 1 file changed, 32 insertions(+), 1 deletion(-)

diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/cities.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/cities.tt
index 618e757773..3ea36ed876 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/cities.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/cities.tt
@@ -134,6 +134,7 @@
     [% END %]
 
     [% IF cities_count > 0 %]
+        <div class="table_cities_table_controls"></div>
         <table id="table_cities">
             <thead>
                 <tr>
@@ -167,8 +168,10 @@
     [% Asset.js("js/admin-menu.js") | $raw %]
     [% INCLUDE 'datatables.inc' %]
     <script>
+
         $(document).ready(function() {
             var cities_table_url = '/api/v1/cities?';
+
         [% IF city_name_filter %]
             var city_name_filter = {
                 'name': {
@@ -177,10 +180,15 @@
             };
             cities_table_url += 'q='+ encodeURIComponent(JSON.stringify(city_name_filter));
         [% END %]
+
+            $('#table_cities thead tr').clone(true).appendTo( '#table_cities thead' );
+
+
             var cities_table = $("#table_cities").api({
                 "ajax": {
                     "url": cities_table_url
                 },
+                orderCellsTop: true,
                 "order": [[ 1, "asc" ]],
                 "columnDefs": [ {
                     "targets": [0,1,2,3,4],
@@ -229,7 +237,30 @@
                         "orderable": false
                     }
                 ]
-            });
+            }, [], 1);
+
+
+            var table = cities_table.DataTable();
+            $('#table_cities thead tr:eq(1) th').each( function (i) {
+                var is_searchable = table.settings()[0].aoColumns[i].bSearchable;
+                if ( is_searchable ) {
+                    var title = $(this).text();
+                    var search_title = _("Search %s").format(title);
+                    $(this).html( '<input type="text" placeholder="%s" />'.format(search_title) );
+
+                    $( 'input', this ).on( 'keyup change', function () {
+                        if ( table.column(i).search() !== this.value ) {
+                            table
+                                .column(i)
+                                .search( this.value )
+                                .draw();
+                        }
+                    } );
+                } else {
+                    $(this).html('');
+                }
+            } );
+
         });
     </script>
 [% END %]
-- 
2.20.1