From 73a33b46d5f1caccfe0692bc21ba8680487fab4e Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
Date: Tue, 29 Mar 2022 16:59:47 +0000
Subject: [PATCH] Bug 30400: Convert invoices page tabs to Bootstrap

This patch updates the invoices page to use Bootstrap tabs instead of
jQueryUI.

To test, apply the patch and go to Acquisitions.

- Locate a vendor which has multiple invoices associated with it.
- View the vendor details, and click the "Invoices" link in the sidebar.
- Check that the "Open invoices" and "Closed invoices" tabs work
  correctly.
---
 .../prog/en/modules/acqui/invoices.tt         | 47 ++++++++++---------
 1 file changed, 24 insertions(+), 23 deletions(-)

diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/acqui/invoices.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/acqui/invoices.tt
index f57a9ca11a..8be858e6be 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/acqui/invoices.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/acqui/invoices.tt
@@ -130,29 +130,31 @@
                             [% END # /IF CAN_user_acquisition_merge_invoices %]
                         [% END # /BLOCK invoices_table %]
 
-                        <div id="invoicestabs" class="toptabs" style="clear:both;">
-                            <ul class="ui-tabs-nav">
-                                <li><a href="#opened">Open invoices ([% openedinvoices.size || 0 | html %])</a></li>
-                                <li><a href="#closed">Closed invoices ([% closedinvoices.size || 0 | html %]) </a></li>
+                        <div id="invoicestabs" class="toptabs">
+                            <ul class="nav nav-tabs" role="tablist">
+                                <li role="presentation" class="active"><a href="#opened" aria-controls="opened" role="tab" data-toggle="tab">Open invoices ([% openedinvoices.size || 0 | html %])</a></li>
+                                <li role="presentation"><a href="#closed" aria-controls="closed" role="tab" data-toggle="tab">Closed invoices ([% closedinvoices.size || 0 | html %]) </a></li>
                             </ul>
-                            <div id="opened">
-                                [% IF openedinvoices %]
-                                    [% INCLUDE invoices_table invoices = openedinvoices %]
-                                [% ELSE %]
-                                    <div class="dialog message">
-                                        <p>Your search returned no open invoices.</p>
-                                    </div>
-                                [% END %]
-                            </div> <!-- /#opened -->
-                            <div id="closed">
-                                [% IF closedinvoices %]
-                                    [% INCLUDE invoices_table invoices = closedinvoices closed = 1 %]
-                                [% ELSE %]
-                                    <div class="dialog message">
-                                        <p>Your search returned no closed invoices.</p>
-                                    </div>
-                                [% END %]
-                            </div> <!-- /#closed -->
+                            <div class="tab-content">
+                                <div id="opened" role="tabpanel" class="tab-pane active">
+                                    [% IF openedinvoices %]
+                                        [% INCLUDE invoices_table invoices = openedinvoices %]
+                                    [% ELSE %]
+                                        <div class="dialog message">
+                                            <p>Your search returned no open invoices.</p>
+                                        </div>
+                                    [% END %]
+                                </div> <!-- /#opened -->
+                                <div id="closed" role="tabpanel" class="tab-pane">
+                                    [% IF closedinvoices %]
+                                        [% INCLUDE invoices_table invoices = closedinvoices closed = 1 %]
+                                    [% ELSE %]
+                                        <div class="dialog message">
+                                            <p>Your search returned no closed invoices.</p>
+                                        </div>
+                                    [% END %]
+                                </div> <!-- /#closed -->
+                            </div> <!-- /.tab-content -->
                         </div> <!-- /#invoicestabs -->
 
 
@@ -397,7 +399,6 @@
     [% INCLUDE 'calendar.inc' %]
     <script>
         $(document).ready(function() {
-            $('#invoicestabs').tabs();
             $(".delete_invoice").click(function(){
                 return confirmDelete(_("Are you sure you want to delete this invoice?"));
             });
-- 
2.20.1