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>
This commit is contained in:
Owen Leonard 2020-11-12 11:37:33 -05:00 committed by Jonathan Druart
parent d3323881d5
commit ebc20ffef4
2 changed files with 20 additions and 4 deletions

View File

@ -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;
}

View File

@ -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");