From 209c8538a84b75a692cc81a05e6724fc514962e3 Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
Date: Mon, 4 Apr 2022 16:40:20 +0000
Subject: [PATCH] Bug 30453: Convert offline circulation tabs to Bootstrap

This patch updates the offline circulation page in the staff interface
to use Bootstrap tabs instead of jQueryUI.

To test, apply the patch and make sure the AllowOfflineCirculation
system preference is enabled.

- Go to Circulation -> Built-in offline circulation interface
- Submit a patron barcode in the "Check out" field.
- Under the barcode input field you should see two tabs: Checkouts and
  Fines. Confirm that they look correct and work correctly.

Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
---
 .../prog/en/modules/circ/offline.tt           | 107 +++++++++---------
 1 file changed, 53 insertions(+), 54 deletions(-)

diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/circ/offline.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/circ/offline.tt
index 01abfab00d..48fd7b0cfa 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/circ/offline.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/circ/offline.tt
@@ -149,62 +149,63 @@
                 </form>
 
                 <div id="patronlists" class="toptabs">
-                    <ul>
-                        <li><a href="#checkouts"><span class="checkout-count">0</span> Checkouts</a></li>
-                        <li><a href="#fines"><span class="fine-amount">0</span> in fines</a></li>
+                    <ul class="nav nav-tabs" role="tablist">
+                        <li role="presentation" class="active"><a href="#checkouts" aria-controls="checkouts" role="tab" data-toggle="tab"><span class="checkout-count">0</span> Checkouts</a></li>
+                        <li role="presentation"><a href="#fines" aria-controls="fines" role="tab" data-toggle="tab"><span class="fine-amount">0</span> in fines</a></li>
                     </ul>
-
-                    <!-- SUMMARY : TODAY & PREVIOUS ISSUES -->
-                    <div id="checkouts">
-                        <div id="session-issues">
-                            <table id="issuest">
-                                <thead><tr>
-                                    <th scope="col">Due date</th>
-                                    <th scope="col">Title</th>
-                                    <th scope="col">Barcode</th>
-                                    <th scope="col">Item type</th>
-                                    <th scope="col">Checked out on</th>
-                                    <th scope="col">Checked out from</th>
-                                    <th scope="col">Call number</th>
-                                    <th scope="col">Charge</th>
-                                </tr></thead>
-                                <tbody>
-                                </tbody>
-                            </table>
+                    <div class="tab-content">
+                        <!-- SUMMARY : TODAY & PREVIOUS ISSUES -->
+                        <div role="tabpanel" class="tab-pane active" id="checkouts">
+                            <div id="session-issues">
+                                <table id="issuest">
+                                    <thead><tr>
+                                        <th scope="col">Due date</th>
+                                        <th scope="col">Title</th>
+                                        <th scope="col">Barcode</th>
+                                        <th scope="col">Item type</th>
+                                        <th scope="col">Checked out on</th>
+                                        <th scope="col">Checked out from</th>
+                                        <th scope="col">Call number</th>
+                                        <th scope="col">Charge</th>
+                                    </tr></thead>
+                                    <tbody>
+                                    </tbody>
+                                </table>
+                            </div>
+
+                            <div id="oldissues">
+                                <h5>Previous checkouts</h5>
+                                <table id="oldissuest">
+                                    <thead><tr>
+                                        <th scope="col">Due date</th>
+                                        <th scope="col">Title</th>
+                                        <th scope="col">Barcode</th>
+                                        <th scope="col">Item type</th>
+                                        <th scope="col">Checked out on</th>
+                                        <th scope="col">Checked out from</th>
+                                        <th scope="col">Call number</th>
+                                        <th scope="col">Charge</th>
+                                    </tr></thead>
+                                    <tbody>
+                                    </tbody>
+                                </table>
+                            </div>
                         </div>
 
-                        <div id="oldissues">
-                            <h5>Previous checkouts</h5>
-                            <table id="oldissuest">
-                                <thead><tr>
-                                    <th scope="col">Due date</th>
-                                    <th scope="col">Title</th>
-                                    <th scope="col">Barcode</th>
-                                    <th scope="col">Item type</th>
-                                    <th scope="col">Checked out on</th>
-                                    <th scope="col">Checked out from</th>
-                                    <th scope="col">Call number</th>
-                                    <th scope="col">Charge</th>
-                                </tr></thead>
-                                <tbody>
-                                </tbody>
-                            </table>
-                        </div>
-                    </div>
+                        <div role="tabpanel" class="tab-pane" id="fines">
+                            <span class="patron-title"></span> has <span class="fine-amount">0</span> in fines. If you would like you can record payments.
+                            <fieldset><legend>Pay fines</legend>
+                                <label for="pay-fine-amount">Fine amount: </label><input type="text" name="pay-fine-amount" id="pay-fine-amount"/>
+                                <button id="pay-fine" class="submit">Pay fine</button>
 
-                    <div id="fines">
-                        <span class="patron-title"></span> has <span class="fine-amount">0</span> in fines. If you would like you can record payments.
-                        <fieldset><legend>Pay fines</legend>
-                            <label for="pay-fine-amount">Fine amount: </label><input type="text" name="pay-fine-amount" id="pay-fine-amount"/>
-                            <button id="pay-fine" class="submit">Pay fine</button>
-
-                            <table id="session-payments" style="display: none;">
-                                <thead><tr><th>Amount</th><th>Date</th></tr></thead>
-                                <tbody></tbody>
-                            </table>
-                        </fieldset>
-                    </div>
-                </div>
+                                <table id="session-payments" style="display: none;">
+                                    <thead><tr><th>Amount</th><th>Date</th></tr></thead>
+                                    <tbody></tbody>
+                                </table>
+                            </fieldset>
+                        </div> <!-- /# -->fines
+                    </div> <!-- /.tab-content -->
+                </div> <!-- /#patronlists -->
             </div>
         </div>
     </main>
@@ -771,8 +772,6 @@
                 recordFine($('#pay-fine-amount').val());
             });
 
-            $('#patronlists').tabs();
-
             $("#duedatespec").flatpickr({
                 enableTime: true,
                 dateFormat: flatpickr_datetime_string,
-- 
2.20.1