From 6851b08a87b3b0ddf80885c39439c9a588bb3738 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>
---
 .../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      | 59 ++++++++++++++-----
 4 files changed, 50 insertions(+), 29 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 483f026453..59a0644914 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 %]
@@ -63,17 +63,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 %]
@@ -83,7 +79,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 %]">
@@ -122,12 +117,10 @@
                 [% END %]
                 [% IF ( showpriority ) %]
                         <td data-order="[% HOLD.priority | html %]" class="priority">
-                        <span class="tdlabel">Priority:</span>
                         [% HOLD.priority | html %]
                     </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 ) %]
@@ -200,8 +193,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 2b1581f0c7..bb2821eef8 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 %]
@@ -308,13 +309,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>
@@ -370,9 +372,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 %]
                                                         </form>
@@ -382,6 +386,7 @@
                                                             [% IF ( ISSUE.charges ) %]Yes[% ELSE %]No[% END %]
                                                         </td>
                                                     [% END %]
+                                                    <td></td>
                                                 </tr>
                                             [% END # / FOREACH ISSUE %]
                                         </tbody>
@@ -501,19 +506,41 @@
             }
         [% END %]
 
-
         $(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.30.2