From 2d3c2fee9abb8642f30d5c3350f1fab4ea33ad81 Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
Date: Fri, 1 Apr 2022 13:10:49 +0000
Subject: [PATCH] Bug 30433: Convert advanced search tabs to Bootstrap

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

To test, apply the patch and test the advanced search interface. The
tabs should look correct and work correctly.

Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
---
 .../prog/en/modules/catalogue/advsearch.tt    | 80 ++++++++++---------
 1 file changed, 42 insertions(+), 38 deletions(-)

diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/advsearch.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/advsearch.tt
index 3b1b3b844b..65215c6dd3 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/advsearch.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/advsearch.tt
@@ -178,10 +178,10 @@
 
                 <!-- MC-TYPE LIMITS -->
                 <div id="advsearches" class="toptabs">
-                    <ul>
+                    <ul class="nav nav-tabs" role="tablist">
                         [% FOREACH advsearchloo IN advancedsearchesloop %]
-                            <li id="advsearch-tab-[% advsearchloo.advanced_search_type | html %]">
-                                <a href="#advsearch-[% advsearchloo.advanced_search_type | uri %]">
+                            <li role="presentation" id="advsearch-tab-[% advsearchloo.advanced_search_type | html %]">
+                                <a href="#advsearch-[% advsearchloo.advanced_search_type | uri %]" aria-controls="advsearch-[% advsearchloo.advanced_search_type | uri %]" role="tab" data-toggle="tab">
                                     [% IF ( advsearchloo.advanced_search_type == 'itemtypes' ) %]Item type
                                     [% ELSIF ( advsearchloo.advanced_search_type == 'ccode' ) %]Collection
                                     [% ELSIF ( advsearchloo.advanced_search_type == 'loc' ) %]Shelving location
@@ -192,42 +192,44 @@
                         [% END # /FOREACH advsearchloo %]
                     </ul>
 
-                    [% FOREACH advsearchloo IN advancedsearchesloop %]
-                        <div id="advsearch-[% advsearchloo.advanced_search_type | html %]" class="advsearch">
-                            <h4>Limit to any of the following:</h4>
-                            <table>
-                                <tr>
-                                    [% FOREACH itemtypeloo IN advsearchloo.code_loop %]
-                                        <td>
-                                            [% SET limit_key = 'mc-' _ itemtypeloo.ccl _ "_" _ itemtypeloo.code %]
-                                            [% IF limits.$limit_key.defined %]
-                                                [% limits.delete( limit_key ) %]
-                                                <input type="checkbox" checked="checked" id="[% itemtypeloo.ccl FILTER remove(',') | html %]-[% itemtypeloo.number | html %]" name="limit" value="mc-[% itemtypeloo.ccl | html %]:[% itemtypeloo.code | html %]"/>
-                                            [% ELSE %]
-                                                <input type="checkbox" id="[% itemtypeloo.ccl FILTER remove(',') | html %]-[% itemtypeloo.number | html %]" name="limit" value="mc-[% itemtypeloo.ccl | html %]:[% itemtypeloo.code | html %]"/>
-                                            [% END # /IF limits.$limit_key.defined %]
-                                            <label for="[% itemtypeloo.ccl FILTER remove(',') | html %]-[% itemtypeloo.number | html %]">
-                                                [% UNLESS ( Koha.Preference('OpacNoItemTypeImages') ) %]
-                                                    [% IF ( itemtypeloo.imageurl ) %]
-                                                        <img src="[% itemtypeloo.imageurl | html %]" alt="[% itemtypeloo.description | html %]" />
+                    <div class="tab-content">
+                        [% FOREACH advsearchloo IN advancedsearchesloop %]
+                            <div id="advsearch-[% advsearchloo.advanced_search_type | html %]"  role="tabpanel" class="tab-pane advsearch">
+                                <h4>Limit to any of the following:</h4>
+                                <table>
+                                    <tr>
+                                        [% FOREACH itemtypeloo IN advsearchloo.code_loop %]
+                                            <td>
+                                                [% SET limit_key = 'mc-' _ itemtypeloo.ccl _ "_" _ itemtypeloo.code %]
+                                                [% IF limits.$limit_key.defined %]
+                                                    [% limits.delete( limit_key ) %]
+                                                    <input type="checkbox" checked="checked" id="[% itemtypeloo.ccl FILTER remove(',') | html %]-[% itemtypeloo.number | html %]" name="limit" value="mc-[% itemtypeloo.ccl | html %]:[% itemtypeloo.code | html %]"/>
+                                                [% ELSE %]
+                                                    <input type="checkbox" id="[% itemtypeloo.ccl FILTER remove(',') | html %]-[% itemtypeloo.number | html %]" name="limit" value="mc-[% itemtypeloo.ccl | html %]:[% itemtypeloo.code | html %]"/>
+                                                [% END # /IF limits.$limit_key.defined %]
+                                                <label for="[% itemtypeloo.ccl FILTER remove(',') | html %]-[% itemtypeloo.number | html %]">
+                                                    [% UNLESS ( Koha.Preference('OpacNoItemTypeImages') ) %]
+                                                        [% IF ( itemtypeloo.imageurl ) %]
+                                                            <img src="[% itemtypeloo.imageurl | html %]" alt="[% itemtypeloo.description | html %]" />
+                                                        [% END %]
+                                                            &nbsp;
                                                     [% END %]
-                                                        &nbsp;
-                                                [% END %]
-                                                [% itemtypeloo.description | html %]
-                                            </label>
-                                        </td>
-                                        [% IF ( loop.last ) %]
-                                            </tr>
-                                        [% ELSE %]
-                                            [% UNLESS ( loop.count % 5 ) %]
+                                                    [% itemtypeloo.description | html %]
+                                                </label>
+                                            </td>
+                                            [% IF ( loop.last ) %]
                                                 </tr>
-                                                <tr>
-                                            [% END %]
-                                        [% END # /IF ( loop.last ) %]
-                                    [% END # /FOREACH itemtypeloo %]
-                            </table>
-                        </div> <!-- /#advsearch-[% advsearchloo.advanced_search_type | html %] -->
-                    [% END # /FOREACH advsearchloo %]
+                                            [% ELSE %]
+                                                [% UNLESS ( loop.count % 5 ) %]
+                                                    </tr>
+                                                    <tr>
+                                                [% END %]
+                                            [% END # /IF ( loop.last ) %]
+                                        [% END # /FOREACH itemtypeloo %]
+                                </table>
+                            </div> <!-- /#advsearch-[% advsearchloo.advanced_search_type | html %] -->
+                        [% END # /FOREACH advsearchloo %]
+                    </div> <!-- /.tab-content -->
                 </div> <!-- /#advsearches -->
                 <!-- /MC-TYPE LIMIT -->
 
@@ -385,7 +387,9 @@
         var Sticky;
         $(document).ready(function() {
             $("input[name=q]:eq(0)").focus();
-            $('#advsearches').tabs();
+            if( $(".tab-pane.active").length < 1 ){
+                $("#advsearches a:first").tab("show");
+            }
             Sticky = $("#toolbar");
             Sticky.hcSticky({
                 stickTo: ".main",
-- 
2.20.1