From a41117032c76cd5b1a290b237e732ab1aabd8ee1 Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
Date: Tue, 5 Apr 2022 12:02:20 +0000
Subject: [PATCH] Bug 30456: Convert checkout history tabs to Bootstrap
MIME-Version: 1.0
Content-Type: text/plain; charset=utf8
Content-Transfer-Encoding: 8bit

This patch updates the circulation history page to replace jQueryUI tabs
with Bootstrap tabs. A minor JavaScript change is required to work
with the new HTML structure.

To test you'll view the staff interface circulation history page with
the OnSiteCheckouts system preference on and off.

- With OnSiteCheckouts off, locate a patron who has current and/or
  past checkouts.
- View the "Circulation history" page for that patron.
- The table of checkouts should display with no tabbed interface.

- With OnSiteCheckouts on, the page should show three tabs: All,
  Checkouts, and On-site checkouts.
- Confirm that clicking on each tab correctly filters the table, e.g.
  the On-site checkouts tab should show only on-site checkouts.

Signed-off-by: Séverine QUEUNE <severine.queune@bulac.fr>
Signed-off-by: Petro Vashchuk <stalkernoid@gmail.com>
Signed-off-by: Fridolin Somers <fridolin.somers@biblibre.com>
---
 .../prog/en/modules/members/readingrec.tt     | 34 +++++++++++--------
 1 file changed, 19 insertions(+), 15 deletions(-)

diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/members/readingrec.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/members/readingrec.tt
index 827e1588c9..3acc84e067 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/members/readingrec.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/members/readingrec.tt
@@ -53,13 +53,16 @@
 
 <div id="tabs" class="toptabs">
   [% IF Koha.Preference('OnSiteCheckouts') %]
-  <ul>
-    <li><a href="#readingrec" id="tab_all">All</a></li>
-    <li><a href="#readingrec" id="tab_checkout">Checkouts</a></li>
-    <li><a href="#readingrec" id="tab_onsite_checkout">On-site checkouts</a></li>
+  <ul class="nav nav-tabs" role="tablist">
+    <li role="presentation" class="active"><a href="#readingrec" aria-controls="readingrec" role="tab" data-toggle="tab" data-tabname="all" id="tab_all">All</a></li>
+    <li role="presentation"><a href="#readingrec" aria-controls="readingrec" role="tab" data-toggle="tab" data-tabname="checkouts" id="tab_checkout">Checkouts</a></li>
+    <li role="presentation"><a href="#readingrec" aria-controls="readingrec" role="tab" data-toggle="tab" id="tab_onsite_checkout" data-tabname="onsite">On-site checkouts</a></li>
   </ul>
+  <div class="tab-content">
+      <div id="readingrec" role="tabpanel" class="tab-pane active">
+  [% ELSE %]
+    <div id="readingrec">
   [% END %]
-  <div id="readingrec">
     <table id="table_readingrec">
       <thead>
         <tr>
@@ -130,6 +133,9 @@
       </tbody>
     </table>
   </div>
+  [% IF Koha.Preference('OnSiteCheckouts') %]
+    </div> <!-- /.tab-content -->
+  [% END %]
 </div>
 [% END %]
 
@@ -156,16 +162,14 @@
                 "aaSorting": [[10, 'desc']]
             }, columns_settings);
 
-            var tabs = $("#tabs").tabs({
-                activate: function(e, ui) {
-                    var active = tabs.tabs("option", "active" );
-                    if ( active == 1 ) {
-                        table.fnFilter("standard_checkout", 0);
-                    } else if ( active == 2 ) {
-                        table.fnFilter("onsite_checkout", 0);
-                    } else { // all
-                        table.fnFilter('', 0);
-                    }
+            $("#tabs a[data-toggle='tab']").on("shown.bs.tab", function (e) {
+                active_tab = $(this).data("tabname");
+                if( active_tab == "checkouts" ){
+                    table.fnFilter("standard_checkout", 0);
+                } else if( active_tab == "onsite" ){
+                    table.fnFilter("onsite_checkout", 0);
+                } else {
+                    table.fnFilter('', 0);
                 }
             });
         });
-- 
2.39.5