From f3014809966e62da49825c68e9cb4d1306699b3b Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
Date: Fri, 1 Apr 2022 14:30:49 +0000
Subject: [PATCH] Bug 30434: Convert catalog merge page tabs to Bootstrap

This patch updates the catalog merge template so that it uses Bootstrap
tabs instead of jQueryUI. Some JavaScript is modified to accommodate the
new DOM structure.

The patch also makes a minor HTML correction, adding a missing "</ol>".

To test, apply the patch and search the catalog in the staff client.

- In the search results, check the checkbox for two records.
- Choose Edit -> Merge records.
- Click next to accept the merge reference selection.
- On the next page you should see two tabs under "Source records."
  Confirm that they work correctly.
- All checkboxes in the first tab should be checked by default.
- Confirm that tag and subfield selection still works correctly.
---
 .../prog/en/includes/merge-record.inc         | 40 ++++++++++---------
 .../prog/en/modules/cataloguing/merge.tt      | 14 ++++---
 2 files changed, 29 insertions(+), 25 deletions(-)

diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/merge-record.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/merge-record.inc
index 6d14015916..5f544be85c 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/includes/merge-record.inc
+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/merge-record.inc
@@ -1,5 +1,5 @@
 [% BLOCK sourcetab %]
-    <div id="tabrecord[% record.recordid | html %]">
+    <div id="tabrecord[% record.recordid | html %]" role="tabpanel" class="tab-pane">
         <div class="record">
             <ul id="ulrecord[% record.recordid | html %]">
                 [% FOREACH field IN record.display %]
@@ -45,24 +45,26 @@
 [% END %]
 
 [% BLOCK mergesource %]
-<div id="tabs" class="toptabs">
-<h2>Source records</h2>
-    <ul>
-        [% FOREACH record IN sourcerecords %]
-            <li>
-                <a href="#tabrecord[% record.recordid | uri %]">
-                    [% record.recordid | html %]
-                    [% IF record.reference %](ref)[% END %]
-                </a>
-            </li>
-        [% END %]
-    </ul>
-    [% IF ( sourcerecords.size ) %]
-        [% FOREACH record IN sourcerecords %]
-            [% PROCESS sourcetab tabrecord=record %]
-        [% END %]
-    [% END %]
-</div> <!-- // #tabs -->
+    <div id="tabs" class="toptabs">
+        <h2>Source records</h2>
+        <ul class="nav nav-tabs" role="tablist">
+            [% FOREACH record IN sourcerecords %]
+                <li role="presentation">
+                    <a href="#tabrecord[% record.recordid | uri %]" aria-controls="tabrecord[% record.recordid | uri %]" role="tab" data-toggle="tab">
+                        [% record.recordid | html %]
+                        [% IF record.reference %](ref)[% END %]
+                    </a>
+                </li>
+            [% END %]
+        </ul>
+        <div class="tab-content">
+            [% IF ( sourcerecords.size ) %]
+                [% FOREACH record IN sourcerecords %]
+                    [% PROCESS sourcetab tabrecord=record %]
+                [% END %]
+            [% END %]
+        </div>
+    </div> <!-- // #tabs -->
 [% END %]
 
 [% BLOCK mergetarget %]
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/cataloguing/merge.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/cataloguing/merge.tt
index 2f3864f29d..9c96be0823 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/cataloguing/merge.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/cataloguing/merge.tt
@@ -31,6 +31,7 @@ div#result { margin-top: 1em; }
                 Merging records
             </a>
         </li>
+    </ol>
 </nav>
 
 <div class="main container-fluid">
@@ -289,13 +290,14 @@ div#result { margin-top: 1em; }
               rebuild_target($("#tabs"), $("#resultul"));
             });
 
-            // Creating tabs
-            $("#tabs").tabs();
+            if( $(".tab-pane.active").length < 1 ){
+                $("#tabs a:first").tab("show");
+            }
 
-            // Check all checkboxes in first tab, and uncheck all others to avoid
-            // inconsistencies from a page refresh.
-            $('#tabs div#tabrecord[% ref_biblionumber | html %]').find('input[type="checkbox"]').prop('checked', true);
-            $('#tabs > div:not("#tabrecord[% ref_biblionumber | html %]")').find('input[type="checkbox"]').prop('checked', false);
+            // Uncheck all checkboxes in both tabs, then check all checkboxes in first tab
+            // to avoid inconsistencies from a page refresh.
+            $("#tabs input[type='checkbox']").prop("checked", false);
+            $("#tabrecord[% ref_biblionumber | html %] input[type='checkbox']").prop("checked", true );
 
             //Set focus to cataloging search
             $("input[name=q]:eq(0)").focus();
-- 
2.20.1