From ebc20ffef41a62ef31f0be5e5f16cea68ed0107f Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
Date: Thu, 12 Nov 2020 11:37:33 -0500
Subject: [PATCH] Bug 27005: Adding a filter in the datatable of
 opac-readingrecord page

This patch adds a search field and export options to the
patron's checkout history table in the OPAC.

This patch also adds some showing/hiding classes to controls which
should only be seen by users with or without JavaScript: The <select>
for resorting the table is hidden when JS is enabled. The tabs for
filtering checkouts from on-site checkouts are hidden when JS is
disabled.

To test, apply the patch and rebuild the OPAC CSS
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client).

 - Log in to the OPAC as a user who has both regular and on-site
   checkouts.
 - Go to "Your checkout history."
 - The table of checkouts should have controls at the top: A search
   field, "Clear filter," "Copy," "CSV," and "Print."
 - Confirm that the search filter works: Enter some text which will
   return results among regular or on-site checkouts.
   - It should work correctly to filter the results.
   - If you switch tabs, the filter should persist, and correctly filter
     the results under "Checkouts" and "On-site checkouts."
   - The "Clear filter" button should work correctly to clear your
     search.
  - Test the export and print button to confirm that they work for each
    table.

Signed-off-by: David Nind <david@davidnind.com>
Signed-off-by: David Nind <david@davidnind.com>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
---
 .../opac-tmpl/bootstrap/css/src/_common.scss    |  7 +++++++
 .../bootstrap/en/modules/opac-readingrecord.tt  | 17 +++++++++++++----
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss
index 2131189e6b..91d326a909 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss
+++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss
@@ -584,6 +584,13 @@ div.dt-button-collection button.dt-button.buttons-print:not(.disabled):before {
     }
 }
 
+.table_entries {
+    margin-left: 5px;
+    padding: 5px 0;
+    font-size: 90%;
+    color: #797979;
+}
+
 [class^="icon-"] {
     vertical-align: 0;
 }
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-readingrecord.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-readingrecord.tt
index 3a226aa321..5cabd8f6a6 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-readingrecord.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-readingrecord.tt
@@ -50,7 +50,8 @@
                         You have never borrowed anything from this library.
                     [% ELSE %]
                         <div id="opac-user-readingrec">
-                            <div class="resultscontrol resort">
+
+                            <div class="resultscontrol resort js-hide">
                                 <form id="sortform" action="/cgi-bin/koha/opac-readingrecord.pl" method="get">
                                     [% UNLESS ( limit ) %]<input type="hidden" name="limit" value="full" />[% END %]
                                     <select name="order" id="order">
@@ -74,7 +75,7 @@
 
                             [% IF Koha.Preference( 'OnSiteCheckouts' ) == 1 %]
                             <div id="tabs" class="toptabs">
-                                <ul>
+                                <ul class="js-show">
                                     <li id="tab_all"><a href="#tabs-container">All</a></li>
                                     <li id="tab_checkout"><a href="#tabs-container">Checkouts</a></li>
                                     <li id="tab_onsite_checkout"><a href="#tabs-container">On-site checkouts</a></li>
@@ -209,13 +210,21 @@
         });
 
         var table = $("#readingrec").dataTable($.extend(true, {}, dataTablesDefaults, {
-            "sPaginationType": "four_button",
+            "dom": '<"top"<"table_entries"i><"table_controls"fB>>t',
+            "sorting": [[ 1, "asc" ]],
+            "autoWidth": false,
+
             "columnDefs": [
                 { "targets": [ "nosort" ],"sortable": false,"searchable": false },
                 { "type": "anti-the", "targets" : [ "anti-the" ] },
                 { "type": "title-string", "targets" : [ "title-string" ] }
-            ]
+            ],
+            "language": {
+                "search": "_INPUT_",
+                "searchPlaceholder": _("Search")
+            }
         }));
+
         var tabs = $("#tabs").tabs({
             activate: function(e, ui) {
                 var id = $(ui.newTab).attr("id");
-- 
2.39.5