From 3738b00c15c09fe98f833f950da8821cc6951788 Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
Date: Tue, 10 Oct 2023 15:50:08 +0000
Subject: [PATCH] Bug 35007: Configure self checkout tables consistently

This patch makes some updates to the self checkout page so that
checkouts, holds, and account tabs are consistent with each other, with
the same DataTables configuration.

Included in the DataTables configuration are the same options we use on
the OPAC's user summary page to show controls for copy, CSV, and print.

Also changed: Some extra markup is removed from holds-table.inc, markup
which was used to show table information responsively before we started
using the DataTables responsive plugin.

To test, apply the patch and log into the self checkout system as a user
with checkouts, holds, and present or past charges.

Compare the checkouts, holds, and charges tabs to confirm that the
tables look correct and work correctly. Test that the copy, CSV, and
print controls, and the search and clear filter functions. Test that
each table responds correctly at various browser widths.

Signed-off-by: David Nind <david@davidnind.com>
Signed-off-by: Nick Clemens <nick@bywatersolutions.com>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
---
 .../opac-tmpl/bootstrap/css/src/_common.scss  |  3 +-
 .../bootstrap/en/includes/account-table.inc   |  4 +-
 .../bootstrap/en/includes/holds-table.inc     | 13 +----
 .../bootstrap/en/modules/sco/sco-main.tt      | 58 ++++++++++++++-----
 4 files changed, 50 insertions(+), 28 deletions(-)

diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss
index 6888ba9a29..8c318e25ab 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss
+++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss
@@ -705,7 +705,8 @@ table {
     .nosort,
     .nosort.sorting_asc,
     .nosort.sorting_desc,
-    .nosort.sorting {
+    .nosort.sorting,
+    .sorting_disabled {
         background: #E2E8E8 none;
         padding-right: 19px;
     }
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/includes/account-table.inc b/koha-tmpl/opac-tmpl/bootstrap/en/includes/account-table.inc
index 3605fcab1d..70a1508e87 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/includes/account-table.inc
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/includes/account-table.inc
@@ -7,8 +7,8 @@
                 <tr>
                     [% IF ENABLE_OPAC_PAYMENTS %]<th>&nbsp;</th>[% END %]
                     <th>Created</th>
-                    <th>Updated</th>
-                    <th>Type</th>
+                    <th class="psort">Updated</th>
+                    <th class="all">Type</th>
                     <th>Description</th>
                     <th>Amount</th>
                     <th>Amount outstanding</th>
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/includes/holds-table.inc b/koha-tmpl/opac-tmpl/bootstrap/en/includes/holds-table.inc
index cd35d2dc92..e74c2b1356 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/includes/holds-table.inc
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/includes/holds-table.inc
@@ -8,7 +8,7 @@
     <!-- HOLDS TABLE ROWS -->
     <thead>
         <tr>
-            <th class="anti-the">Title</th>
+            <th class="all anti-the">Title</th>
             [% IF ( showpriority ) %]
                 <th>Placed on</th>
             [% ELSE %]
@@ -66,17 +66,13 @@
                     [% END %]
                 </td>
                 <td class="reservedate" data-order="[% HOLD.reservedate | html %]">
-                    <span class="tdlabel">Hold date:</span>
-                        [% HOLD.reservedate | $KohaDates %]
-                    </span>
+                    [% HOLD.reservedate | $KohaDates %]
                 </td>
                 [% IF ! HOLD.found %]
                     <td class="expirationdate" data-order="[% HOLD.expirationdate | html %]">
                         [% IF ( HOLD.expirationdate ) %]
-                            <span class="tdlabel">Expiration:</span>
                             [% HOLD.expirationdate | $KohaDates %]
                         [% ELSE %]
-                            <span class="tdlabel">Expiration:</span>
                             Never expires
                         [% END %]
                 [% ELSE %]
@@ -86,7 +82,6 @@
                 </td>
                 [% UNLESS( singleBranchMode) %]
                     <td class="branch">
-                        <span class="tdlabel">Pickup location:</span>
                         [% HOLD.branch.branchname | html %]
                         [% IF ( HOLD.can_update_pickup_location_opac ) %]
                             <button type="button" class="btn btn-sm btn-link" data-toggle="modal" data-target="#changePickup[% HOLD.reserve_id | html %]">
@@ -125,7 +120,6 @@
                 [% END %]
                 [% IF ( showpriority ) %]
                         <td data-order="[% HOLD.priority | html %]" class="priority">
-                        <span class="tdlabel">Priority:</span>
                         [% HOLD.priority | html %]
                     </td>
                 [% END %]
@@ -133,7 +127,6 @@
                     <td>[% HOLD.reservenotes | html | html_line_break %]</td>
                 [% END %]
                 <td class="status">
-                    <span class="tdlabel">Status:</span>
                     [% IF ( HOLD.is_waiting ) %]
                         <i class="fa fa-exclamation-circle text-warning" aria-hidden="true"></i>
                         [% IF ( HOLD.is_at_destination ) %]
@@ -206,8 +199,8 @@
                             </form>
                         [% END %]
                     </td>
-                    <td></td>
                 [% END # / IF onlyinfo %]
+                <td></td>
             </tr>
         [% END # /FOREACH HOLDS %]
     </tbody>
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/sco/sco-main.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/sco/sco-main.tt
index 7e120d8442..dff5a86237 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/sco/sco-main.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/sco/sco-main.tt
@@ -14,6 +14,7 @@
 [% ELSE %]
 <link rel="shortcut icon" href="[% interface | html %]/[% theme | html %]/images/favicon.ico" type="image/x-icon" />
 [% END %]
+[% Asset.css("lib/jquery/responsive.dataTables.min.css") | $raw %]
 [% Asset.css("lib/fontawesome/css/fontawesome.min.css") | $raw %]
 [% Asset.css("lib/fontawesome/css/brands.min.css") | $raw %]
 [% Asset.css("lib/fontawesome/css/solid.min.css") | $raw %]
@@ -313,13 +314,14 @@
                                         <thead>
                                             <tr>
                                                 <th class="noshow">Checked out on</th>
-                                                <th class="anti-the">Title</th>
+                                                <th class="all anti-the">Title</th>
                                                 <th>Call number</th>
-                                                <th>Due</th>
-                                                <th class="nosort">Renew</th>
+                                                <th class="psort">Due</th>
+                                                <th class="all nosort">Renew</th>
                                                 [% UNLESS ( nofines ) %]
                                                     <th>Fines</th>
                                                 [% END %]
+                                                <th></th>
                                             </tr>
                                         </thead>
                                         <tbody>
@@ -373,9 +375,11 @@
                                                                     <span>No renewals allowed</span>
                                                                 [% END %]
                                                                 [% IF Koha.Preference('SCOAllowCheckin') %]
-                                                                    <input type="submit" value="Check in item" name="confirm" class="btn btn-info btn-sm return" />
-                                                                    <input type="hidden" name="op" value="returnbook" />
-                                                                    <input type="hidden" name="confirmed" value=""  />
+                                                                    <div>
+                                                                        <input type="submit" value="Check in item" name="confirm" class="btn btn-info btn-sm return" />
+                                                                        <input type="hidden" name="op" value="returnbook" />
+                                                                        <input type="hidden" name="confirmed" value=""  />
+                                                                    </div>
                                                                 [% END %]
                                                             [% END %]
                                                             [% IF ISSUE.auto_renew %]
@@ -388,6 +392,7 @@
                                                             [% IF ( ISSUE.charges ) %]Yes[% ELSE %]No[% END %]
                                                         </td>
                                                     [% END %]
+                                                    <td></td>
                                                 </tr>
                                             [% END # / FOREACH ISSUE %]
                                         </tbody>
@@ -518,15 +523,38 @@
         $(document).ready(function() {
             dofocus();
             [% IF ( patronid ) %]sco_init();[% END %]
-            $("#loanTable").dataTable($.extend(true, {}, dataTablesDefaults, {
-                "dom": "t",
-                "order": [ 0 ],
-                "columnDefs": [
-                    { "targets": [ "nosort" ], "sortable": false, "searchable": false },
-                    { "targets": [ "noshow" ], "visible": false, "searchable": false },
-                    { "type": "anti-the", "targets" : [ "anti-the" ] }
-                ]
-            }));
+
+            var dTables = $("#loanTable, #holdst, #finestable");
+            dTables.each(function(){
+                var thIndex = $(this).find("th.psort").index();
+                $(this).dataTable($.extend(true, {}, dataTablesDefaults, {
+                    "sorting" : [[ thIndex, 'asc' ]],
+                    "dom": '<"top"<"table_entries"><"table_controls"fB>>t',
+                    "columnDefs": [
+                        { "targets": [ "nosort" ],"sortable": false,"searchable": false },
+                        { "targets": [ "noshow" ], "visible": false, "searchable": false },
+                        { "type": "anti-the", "targets" : [ "anti-the" ] },
+                        { "visible": false, "targets" : [ "hidden" ] },
+                        { "className": 'dtr-control', "orderable": false, "targets": -1 }
+                    ],
+                    "language": {
+                        "search": "_INPUT_",
+                        "searchPlaceholder": _("Search")
+                    },
+                    "autoWidth": false,
+                    "responsive": {
+                        details: {
+                            type: 'column',
+                            target: -1
+                        }
+                    }
+                }));
+            });
+
+            $('a[data-toggle="tab"]').on('shown.bs.tab', function (event) {
+                dTables.DataTable().responsive.recalc();
+                dataTables.DataTable().responsive.recalc();
+            } );
 
             $("#logout_form").on("click", function(e){
                 e.preventDefault(e);
-- 
2.39.5