From 96eeeb82c9d1c34975f9d9c035de529d9eac84f6 Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
Date: Fri, 9 Sep 2022 12:52:15 +0000
Subject: [PATCH] Bug 30309: Convert lists tabs in the staff interface to
 Bootstrap

This patch updates the staff interface lists page to use Bootstrap tabs
instead of jQueryUI.

To test, apply the patch and go to Lists.

- Test that the public and private tabs work correctly.
- Test that other lists functionality still works as expected.
- Confirm that adding the "public" URL parameter works to trigger the
  "Public lists" tab by default:

  /cgi-bin/koha/virtualshelves/shelves.pl?public=1

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
---
 .../prog/en/modules/virtualshelves/shelves.tt | 118 +++++++++---------
 1 file changed, 59 insertions(+), 59 deletions(-)

diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/virtualshelves/shelves.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/virtualshelves/shelves.tt
index 3c1e4c7e5e..cb62f8cf1c 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/virtualshelves/shelves.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/virtualshelves/shelves.tt
@@ -486,53 +486,55 @@
             [% IF op == 'list' %]
                 <h1>Lists</h1>
                 <div id="tabs" class="toptabs">
-                    <ul>
-                        <li id="privateshelves_tab" class="active">
-                            <a href="#tab_content">Your lists</a>
+                    <ul class="nav nav-tabs" role="tablist">
+                        <li id="privateshelves_tab" role="presentation" class="active">
+                            <a href="#shelves_list" aria-controls="shelves_list" role="tab" data-toggle="tab" data-public="0">Your lists</a>
                         </li>
-                        <li id="publicshelves_tab" class="active">
-                            <a href="#tab_content">Public lists</a>
+                        <li id="publicshelves_tab" role="presentation">
+                            <a href="#shelves_list" aria-controls="shelves_list" role="tab" data-toggle="tab" data-public="1">Public lists</a>
                         </li>
                     </ul>
 
-                    <div id="tab_content">
-                        <table id="listresultst">
-                            <thead>
-                                <tr>
-                                    <th class="NoVisible">Type</th>
-                                    <th>List name</th>
-                                    <th>Contents</th>
-                                    <th>Type</th>
-                                    <th>Owner</th>
-                                    <th>Sort by</th>
-                                    <th>Creation date</th>
-                                    <th>Modification date</th>
-                                    <th class="noExport">Actions</th>
-                                </tr>
-                                <tr class="filters_row">
-                                    <th></th>
-                                    <th><input class="filter text_filter" id="searchshelfname_filter" placeholder="List name"></th>
-                                    <th></th>
-                                    <th></th>
-                                    <th><input class="filter text_filter" id="searchowner_filter" placeholder="Owner"></th>
-                                    <th>
-                                        <select class="filter text_filter" id="searchsortby_filter">
-                                            <option value=""></option>
-                                            <option value="title">Title</option>
-                                            <option value="author">Author</option>
-                                            <option value="copyrightdate">Copyrightdate</option>
-                                            <option value="itemcallnumber">Call number</option>
-                                            <option value="dateadded">Date added</option>
-                                        </select>
-                                    </th>
-                                    <th></th>
-                                    <th></th>
-                                    <th></th>
-                                </tr>
-                            </thead>
-                            <tbody></tbody>
-                        </table> <!-- /#listresultst -->
-                    </div> <!-- #/tab_content -->
+                    <div class="tab-content">
+                        <div role="tabpanel" class="tab-pane active" id="shelves_list">
+                            <table id="listresultst">
+                                <thead>
+                                    <tr>
+                                        <th class="NoVisible">Type</th>
+                                        <th>List name</th>
+                                        <th>Contents</th>
+                                        <th>Type</th>
+                                        <th>Owner</th>
+                                        <th>Sort by</th>
+                                        <th>Creation date</th>
+                                        <th>Modification date</th>
+                                        <th class="noExport">Actions</th>
+                                    </tr>
+                                    <tr class="filters_row">
+                                        <th></th>
+                                        <th><input class="filter text_filter" id="searchshelfname_filter" placeholder="List name"></th>
+                                        <th></th>
+                                        <th></th>
+                                        <th><input class="filter text_filter" id="searchowner_filter" placeholder="Owner"></th>
+                                        <th>
+                                            <select class="filter text_filter" id="searchsortby_filter">
+                                                <option value=""></option>
+                                                <option value="title">Title</option>
+                                                <option value="author">Author</option>
+                                                <option value="copyrightdate">Copyrightdate</option>
+                                                <option value="itemcallnumber">Call number</option>
+                                                <option value="dateadded">Date added</option>
+                                            </select>
+                                        </th>
+                                        <th></th>
+                                        <th></th>
+                                        <th></th>
+                                    </tr>
+                                </thead>
+                                <tbody></tbody>
+                            </table> <!-- /#listresultst -->
+                        </div> <!-- /#shelves_list -->
+                    </div> <!-- #/.tab-content -->
                 </div> <!-- /#tabs -->
             [% END # /IF op == 'list' %]
 
@@ -686,23 +688,21 @@
 
                 dtListResults.fnAddFilters("filter", 750);
 
-                var tabs = $("#tabs").tabs({
-                    [% IF public %]
-                        active: 1,
-                    [% ELSE %]
-                        active: 0,
-                    [% END %]
-                    activate: function(e, ui) {
-                        var active = tabs.tabs("option", "active" );
-                        if ( active == 0 ) {
-                            public = 0;
-                            dtListResults.fnDraw();
-                        } else if ( active == 1 ) {
-                            public = 1;
-                            dtListResults.fnDraw();
-                        }
-                    }
+                /* Select correct tab based on URL parameter */
+                if( public == 0 ){
+                    $('#privateshelves_tab').tab('show');
+                } else {
+                    $("#publicshelves_tab").tab("show");
+                }
+
+                $('a[data-toggle="tab"]')
+                .on("click", function(){
+                    public = $(this).data("public");
+                })
+                .on('shown.bs.tab', function (e) {
+                    dtListResults.fnDraw();
                 });
+
                 $("body").on("click", ".deleteshelf", function(){
                     return confirmDelete(MSG_CONFIRM_DELETE_LIST);
                 });
-- 
2.39.5