From 13c03316e966784211b7aabb50f66538fbc33fc1 Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
Date: Wed, 6 Apr 2022 18:00:14 +0000
Subject: [PATCH] Bug 30475: Convert tools pages tabs to Bootstrap (part 2)

This patch converts jQueryUI tabs on three tools templates to Bootstrap
tabs.

To test, apply the patch and go to Tools -> Export.

- You should see at least two tabs, "Export bibliographic records" and
  "Export authority records."
- Confirm that they look correct and work correctly.

Go to Tools -> Batch patron modification.

- Check the "By card number," "By borrowernumber," and "By patron list"
  tabs.

Go to Tools -> Overdue notice/status triggers.

 - Check the "First," "Second," and "Third" tabs.
---
 .../prog/en/modules/tools/export.tt           | 472 +++++++++---------
 .../prog/en/modules/tools/modborrowers.tt     | 150 +++---
 .../prog/en/modules/tools/overduerules.tt     | 169 ++++---
 3 files changed, 405 insertions(+), 386 deletions(-)

diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/export.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/tools/export.tt
index fee9ea6132..de6b7769b7 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/export.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/tools/export.tt
@@ -47,252 +47,261 @@
 [% END %]
 
 <div id="exporttype" class="toptabs">
-<ul>
-<li><a href="#bibs">Export bibliographic records</a></li>
-<li><a href="#auths">Export authority records</a></li>
-[% IF ( allow_db_export ) %]
-<li><a href="#db">Export database</a></li>
-[% END %]
-[% IF ( allow_conf_export ) %]
-<li><a href="#conf">Export configuration</a></li>
-[% END %]
-</ul>
-<div id="bibs">
-<p>
-    <strong>Note : The items are exported by this tool unless specified.</strong>
-</p>
-
-<form method="post" enctype="multipart/form-data" action="/cgi-bin/koha/tools/export.pl">
-    <fieldset class="rows">
-    <legend> Select records to export </legend>
-        <ol>
-        <li>
-            <label for="start">From biblionumber: </label>
-            <input id="start" type="text" name="StartingBiblionumber" size="5" />
-        </li>
-        <li>
-            <label for="end">To biblionumber: </label>
-            <input id="end" type="text" name="EndingBiblionumber" size="5" />
+    <ul class="nav nav-tabs" role="tablist">
+        <li role="presentation" class="active">
+            <a href="#bibs" aria-controls="bibs" role="tab" data-toggle="tab">Export bibliographic records</a>
         </li>
-        
-        <li>
-            <label for="itemtype">Item type: </label>
-            <select name="itemtype" id="itemtype">
-                <option value="">-- All --</option>
-                [% FOREACH itemtype IN itemtypes %]
-                    <option value="[% itemtype.itemtype | html %]">[% itemtype.translated_description | html %]</option>
-                [% END %]
-            </select>
-        </li>
-        
-        <li>
-            <label>With items owned by the following libraries: </label>
-            [% INCLUDE 'branch-selector.inc' branches = libraries %]
+        <li role="presentation">
+            <a href="#auths" aria-controls="auths" role="tab" data-toggle="tab">Export authority records</a>
         </li>
-    </ol>
-
-    <fieldset class="rows">
-        <legend>Call number range</legend>
-        <ol>
-            <li>
-                <label for="startcn">From item call number: </label>
-                <input id="startcn" type="text" name="start_callnumber" size="15" />
+        [% IF ( allow_db_export ) %]
+            <li role="presentation">
+                <a href="#db" aria-controls="db" role="tab" data-toggle="tab">Export database</a>
             </li>
-            <li>
-                <label for="endcn">To item call number: </label>
-                <input id="endcn" type="text" name="end_callnumber" size="15" />
+        [% END %]
+        [% IF ( allow_conf_export ) %]
+            <li role="presentation">
+                <a href="#conf" aria-controls="conf" role="tab" data-toggle="tab">Export configuration</a>
             </li>
-        </ol>
-    </fieldset>
+        [% END %]
+    </ul>
+    <div class="tab-content">
+        <div id="bibs" role="tabpanel" class="tab-pane active">
+        <p>
+            <strong>Note : The items are exported by this tool unless specified.</strong>
+        </p>
 
-    <fieldset class="rows">
-        <legend>Accession date (inclusive)</legend>
-        <ol>
-            <li>
-                    <label for="from">Start date:</label>
-                    <input type="text" size="10" id="from" name="start_accession" value="[% from | html %]" class="flatpickr" data-date_to="to" />
-            </li>
-            <li>
-                <label for="to">End date:</label>
-                <input size="10" id="to" name="end_accession" value="[% end_accession | html %]" type="text" class="flatpickr" />
-            </li>
-        </ol>
-    </fieldset>
+        <form method="post" enctype="multipart/form-data" action="/cgi-bin/koha/tools/export.pl">
+            <fieldset class="rows">
+            <legend> Select records to export </legend>
+                <ol>
+                <li>
+                    <label for="start">From biblionumber: </label>
+                    <input id="start" type="text" name="StartingBiblionumber" size="5" />
+                </li>
+                <li>
+                    <label for="end">To biblionumber: </label>
+                    <input id="end" type="text" name="EndingBiblionumber" size="5" />
+                </li>
 
-    </fieldset>
-    <fieldset class="rows">
-    <legend>
-        Use a file
-    </legend>
-        <ol>
-        <li>File containing a list of biblionumbers with one biblionumber per line. This list works as a filter: it is compatible with other parameters. (File types accepted: .csv and .txt)</li>
-        <li><label for="id_list_file">File: </label> <input type="file" id="id_list_file" name="id_list_file" /></li>
-        </ol>
-    </fieldset>
-    <fieldset class="rows">
-    <legend> Options</legend>
-<ol>        <li>
-        <label for="dont_export_item">Don't export items:</label>
-        <input id="dont_export_item" type="checkbox" name="dont_export_item" />
-        </li>
-        <li>
-        <label for="strip_items_not_from_libraries">Remove items not owned by selected libraries:</label>
-        <input id="strip_items_not_from_libraries" type="checkbox" name="strip_items_not_from_libraries" />
-        </li>
-        <li>
-        <label for="export_remove_fields">Don't export fields:</label>
-        <input id="export_remove_fields" type="text" name="export_remove_fields" value="[% export_remove_fields | html %]" />
-        separate by a blank. (e.g., 100a 200 606)
-        </li></ol>
-    </fieldset>
-    <fieldset class="rows">
-    <legend>
-        Output format
-    </legend>
-        <ol><li>
-            <label for="output_format">File format: </label>
-            <select id="output_format" name="output_format">
-                <option value="iso2709">MARC</option>
-                <option value="xml">XML</option>
-                [% IF csv_profiles %]
-                    <option value="csv">CSV</option>
-                [% ELSE %]
-                    <option value="csv" disabled data-toggle="tooltip" data-placement="left" title="You must create a CSV profile for MARC exports to use this option.">CSV</option>
-                [% END %]
-            </select>
-        </li>
-        <li class="csv_profiles">
-            <label for="bibs_csv_profile">CSV profile: </label>
-            <select id="bibs_csv_profile" name="csv_profile_id">
-                [% FOR csv_profile IN csv_profiles %]
-                    <option value="[% csv_profile.export_format_id | html %]">[% csv_profile.profile | html %]</option>
-                [% END %]
-            </select>
-        </li>
-        <li>
-        <label for="filename">File name:</label><input id="filename" type="text" name="filename" value="koha.mrc" />
-        </li></ol>
-    </fieldset>
-    <input type="hidden" name="op" value="export" />
-    <input type="hidden" name="record_type" value="bibs" />
+                <li>
+                    <label for="itemtype">Item type: </label>
+                    <select name="itemtype" id="itemtype">
+                        <option value="">-- All --</option>
+                        [% FOREACH itemtype IN itemtypes %]
+                            <option value="[% itemtype.itemtype | html %]">[% itemtype.translated_description | html %]</option>
+                        [% END %]
+                    </select>
+                </li>
 
-    <fieldset class="action"><input type="submit" value="Export bibliographic records" class="button" /></fieldset>
-</form>
-</div>
+                <li>
+                    <label>With items owned by the following libraries: </label>
+                    [% INCLUDE 'branch-selector.inc' branches = libraries %]
+                </li>
+            </ol>
 
-<div id="auths">
-<form method="post" enctype="multipart/form-data" action="/cgi-bin/koha/tools/export.pl">
-    <fieldset class="rows">
-    <legend> Select records to export </legend>
-        <ol><li>
-            <label for="start">From authid: </label>
-            <input id="start" type="text" name="starting_authid" size="6" />
-        </li>
-        <li>
-            <label for="end">To authid: </label>
-            <input id="end" type="text" name="ending_authid" size="6" />
-        </li>
-        <li>
-            <label for="authtype">Authority type: </label>
-            <select name="authtype" id="authtype">
-                <option value="">-- All --</option>
-                [% FOREACH authority_type IN authority_types %]
-                    <option value="[% authority_type.authtypecode | html %]">[% authority_type.authtypetext | html %]</option>
-                [% END %]
-            </select>
-        </li>
-        </ol>
-    </fieldset>
-    <fieldset class="rows">
-    <legend>
-        Use a file
-    </legend>
-        <ol>
-        <li>File containing a list of authids with one authid per line. This list works as a filter: it is compatible with other parameters. (File types accepted: .csv and .txt)</li>
-        <li><label for="id_list_file">File:</label> <input type="file" id="id_list_file" name="id_list_file" /></li>
-        </ol>
-    </fieldset>
-    <fieldset class="rows">
-    <legend>Options</legend>
-        <ol>
-        <li>
-            <label for="export_remove_fields">Don't export fields:</label>
-            <input id="export_remove_fields" type="text" name="export_remove_fields" />
-            separate by a blank. (e.g., 100a 200 606)
-        </li></ol>
-    </fieldset>
-    <fieldset class="rows">
-    <legend>Output format</legend>
-        <ol><li>
-            <label for="output_format">File format: </label>
-            <select id="output_format_auth" name="output_format">
-                <option value="marc">MARC</option>
-                <option value="xml">XML</option>
-            </select>
-        </li>
-        <li>
-        <label for="filename_auth">File name:</label><input id="filename_auth" type="text" name="filename_auth" value="koha.mrc" />
-        </li></ol>
-    </fieldset>
-    <input type="hidden" name="op" value="export" />
-    <input type="hidden" name="record_type" value="auths" />
+            <fieldset class="rows">
+                <legend>Call number range</legend>
+                <ol>
+                    <li>
+                        <label for="startcn">From item call number: </label>
+                        <input id="startcn" type="text" name="start_callnumber" size="15" />
+                    </li>
+                    <li>
+                        <label for="endcn">To item call number: </label>
+                        <input id="endcn" type="text" name="end_callnumber" size="15" />
+                    </li>
+                </ol>
+            </fieldset>
 
-    <fieldset class="action"><input type="submit" value="Export authority records" class="button" /></fieldset>
-</form>
-</div>
+            <fieldset class="rows">
+                <legend>Accession date (inclusive)</legend>
+                <ol>
+                    <li>
+                            <label for="from">Start date:</label>
+                            <input type="text" size="10" id="from" name="start_accession" value="[% from | html %]" class="flatpickr" data-date_to="to" />
+                    </li>
+                    <li>
+                        <label for="to">End date:</label>
+                        <input size="10" id="to" name="end_accession" value="[% end_accession | html %]" type="text" class="flatpickr" />
+                    </li>
+                </ol>
+            </fieldset>
 
-[% IF ( allow_db_export ) %]
-<div id="db">
-<form method="post" action="/cgi-bin/koha/tools/export.pl">
-    <p><strong>Note : This export file will be very large, and is generated nightly.</strong></p>
-    <fieldset class="rows">
-    <legend> Choose a file </legend>
-    [% IF ( dbfiles && (dbfiles.size > 0) ) %]
-        <ul>
-        [% FOREACH dbfile IN dbfiles %]
-            <li><input type="radio" name="filename" value="[% dbfile | html %]">[% dbfile | html %]</input></li>
-        [% END %]
-        </ul>
-    [% ELSE %]
-        <p>Unfortunately, no backups are available.</p>
-    [% END %]
-    </fieldset>
+            </fieldset>
+            <fieldset class="rows">
+            <legend>
+                Use a file
+            </legend>
+                <ol>
+                <li>File containing a list of biblionumbers with one biblionumber per line. This list works as a filter: it is compatible with other parameters. (File types accepted: .csv and .txt)</li>
+                <li><label for="id_list_file">File: </label> <input type="file" id="id_list_file" name="id_list_file" /></li>
+                </ol>
+            </fieldset>
+            <fieldset class="rows">
+            <legend> Options</legend>
+        <ol>        <li>
+                <label for="dont_export_item">Don't export items:</label>
+                <input id="dont_export_item" type="checkbox" name="dont_export_item" />
+                </li>
+                <li>
+                <label for="strip_items_not_from_libraries">Remove items not owned by selected libraries:</label>
+                <input id="strip_items_not_from_libraries" type="checkbox" name="strip_items_not_from_libraries" />
+                </li>
+                <li>
+                <label for="export_remove_fields">Don't export fields:</label>
+                <input id="export_remove_fields" type="text" name="export_remove_fields" value="[% export_remove_fields | html %]" />
+                separate by a blank. (e.g., 100a 200 606)
+                </li></ol>
+            </fieldset>
+            <fieldset class="rows">
+            <legend>
+                Output format
+            </legend>
+                <ol><li>
+                    <label for="output_format">File format: </label>
+                    <select id="output_format" name="output_format">
+                        <option value="iso2709">MARC</option>
+                        <option value="xml">XML</option>
+                        [% IF csv_profiles %]
+                            <option value="csv">CSV</option>
+                        [% ELSE %]
+                            <option value="csv" disabled data-toggle="tooltip" data-placement="left" title="You must create a CSV profile for MARC exports to use this option.">CSV</option>
+                        [% END %]
+                    </select>
+                </li>
+                <li class="csv_profiles">
+                    <label for="bibs_csv_profile">CSV profile: </label>
+                    <select id="bibs_csv_profile" name="csv_profile_id">
+                        [% FOR csv_profile IN csv_profiles %]
+                            <option value="[% csv_profile.export_format_id | html %]">[% csv_profile.profile | html %]</option>
+                        [% END %]
+                    </select>
+                </li>
+                <li>
+                <label for="filename">File name:</label><input id="filename" type="text" name="filename" value="koha.mrc" />
+                </li></ol>
+            </fieldset>
+            <input type="hidden" name="op" value="export" />
+            <input type="hidden" name="record_type" value="bibs" />
 
-    [% IF ( dbfiles && (dbfiles.size > 0) ) %]
-        <input type="hidden" name="op" value="export" />
-        <input type="hidden" name="record_type" value="db" />
-        <fieldset class="action"><input type="submit" value="Download database" class="button" /></fieldset>
-    [% END %]
-</form>
-</div>
-[% END %]
+            <fieldset class="action"><input type="submit" value="Export bibliographic records" class="button" /></fieldset>
+        </form>
+        </div>
 
-[% IF ( allow_conf_export ) %]
-<div id="conf">
-<form method="post" action="/cgi-bin/koha/tools/export.pl">
-    <p><strong>Note : This export file will be very large, and is generated nightly.</strong></p>
-    <fieldset class="rows">
-    <legend> Choose a file </legend>
-    [% IF ( conffiles && (conffiles.size > 0) ) %]
-        <ul>
-        [% FOREACH conffile IN conffiles %]
-            <li><input type="radio" name="filename" value="[% conffile | html %]">[% conffile | html %]</input></li>
+        <div id="auths" role="tabpanel" class="tab-pane">
+        <form method="post" enctype="multipart/form-data" action="/cgi-bin/koha/tools/export.pl">
+            <fieldset class="rows">
+            <legend> Select records to export </legend>
+                <ol><li>
+                    <label for="start">From authid: </label>
+                    <input id="start" type="text" name="starting_authid" size="6" />
+                </li>
+                <li>
+                    <label for="end">To authid: </label>
+                    <input id="end" type="text" name="ending_authid" size="6" />
+                </li>
+                <li>
+                    <label for="authtype">Authority type: </label>
+                    <select name="authtype" id="authtype">
+                        <option value="">-- All --</option>
+                        [% FOREACH authority_type IN authority_types %]
+                            <option value="[% authority_type.authtypecode | html %]">[% authority_type.authtypetext | html %]</option>
+                        [% END %]
+                    </select>
+                </li>
+                </ol>
+            </fieldset>
+            <fieldset class="rows">
+            <legend>
+                Use a file
+            </legend>
+                <ol>
+                <li>File containing a list of authids with one authid per line. This list works as a filter: it is compatible with other parameters. (File types accepted: .csv and .txt)</li>
+                <li><label for="id_list_file">File:</label> <input type="file" id="id_list_file" name="id_list_file" /></li>
+                </ol>
+            </fieldset>
+            <fieldset class="rows">
+            <legend>Options</legend>
+                <ol>
+                <li>
+                    <label for="export_remove_fields">Don't export fields:</label>
+                    <input id="export_remove_fields" type="text" name="export_remove_fields" />
+                    separate by a blank. (e.g., 100a 200 606)
+                </li></ol>
+            </fieldset>
+            <fieldset class="rows">
+            <legend>Output format</legend>
+                <ol><li>
+                    <label for="output_format">File format: </label>
+                    <select id="output_format_auth" name="output_format">
+                        <option value="marc">MARC</option>
+                        <option value="xml">XML</option>
+                    </select>
+                </li>
+                <li>
+                <label for="filename_auth">File name:</label><input id="filename_auth" type="text" name="filename_auth" value="koha.mrc" />
+                </li></ol>
+            </fieldset>
+            <input type="hidden" name="op" value="export" />
+            <input type="hidden" name="record_type" value="auths" />
+
+            <fieldset class="action"><input type="submit" value="Export authority records" class="button" /></fieldset>
+        </form>
+        </div>
+
+        [% IF ( allow_db_export ) %]
+        <div id="db" role="tabpanel" class="tab-pane">
+        <form method="post" action="/cgi-bin/koha/tools/export.pl">
+            <p><strong>Note : This export file will be very large, and is generated nightly.</strong></p>
+            <fieldset class="rows">
+            <legend> Choose a file </legend>
+            [% IF ( dbfiles && (dbfiles.size > 0) ) %]
+                <ul>
+                [% FOREACH dbfile IN dbfiles %]
+                    <li><input type="radio" name="filename" value="[% dbfile | html %]">[% dbfile | html %]</input></li>
+                [% END %]
+                </ul>
+            [% ELSE %]
+                <p>Unfortunately, no backups are available.</p>
+            [% END %]
+            </fieldset>
+
+            [% IF ( dbfiles && (dbfiles.size > 0) ) %]
+                <input type="hidden" name="op" value="export" />
+                <input type="hidden" name="record_type" value="db" />
+                <fieldset class="action"><input type="submit" value="Download database" class="button" /></fieldset>
+            [% END %]
+        </form>
+        </div>
         [% END %]
-        </ul>
-    [% ELSE %]
-        <p>Unfortunately, no backups are available.</p>
-    [% END %]
-    </fieldset>
 
-    [% IF ( conffiles && (conffiles.size > 0) ) %]
-        <input type="hidden" name="op" value="export" />
-        <input type="hidden" name="record_type" value="conf" />
-        <fieldset class="action"><input type="submit" value="Download configuration" class="button" /></fieldset>
-    [% END %]
-</form>
-</div>
-[% END %]
+        [% IF ( allow_conf_export ) %]
+        <div id="conf" role="tabpanel" class="tab-pane">
+        <form method="post" action="/cgi-bin/koha/tools/export.pl">
+            <p><strong>Note : This export file will be very large, and is generated nightly.</strong></p>
+            <fieldset class="rows">
+            <legend> Choose a file </legend>
+            [% IF ( conffiles && (conffiles.size > 0) ) %]
+                <ul>
+                [% FOREACH conffile IN conffiles %]
+                    <li><input type="radio" name="filename" value="[% conffile | html %]">[% conffile | html %]</input></li>
+                [% END %]
+                </ul>
+            [% ELSE %]
+                <p>Unfortunately, no backups are available.</p>
+            [% END %]
+            </fieldset>
 
+            [% IF ( conffiles && (conffiles.size > 0) ) %]
+                <input type="hidden" name="op" value="export" />
+                <input type="hidden" name="record_type" value="conf" />
+                <fieldset class="action"><input type="submit" value="Download configuration" class="button" /></fieldset>
+            [% END %]
+        </form>
+        </div>
+        [% END %]
+    </div> <!-- /.tab-content -->
 </div>
 
             </main>
@@ -310,7 +319,6 @@
     [% INCLUDE 'calendar.inc' %]
     <script>
         $(document).ready(function() {
-            $('#exporttype').tabs();
 
             $("li.csv_profiles").hide();
 
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/modborrowers.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/tools/modborrowers.tt
index f60a917a9b..6db5bafc6b 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/modborrowers.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/tools/modborrowers.tt
@@ -39,89 +39,97 @@
                 <form id="patron_batchmod_form" method="post" enctype="multipart/form-data" action="/cgi-bin/koha/tools/modborrowers.pl">
                     <input type="hidden" name="op" value="show" />
                     <div id="batch_patron_options" class="toptabs">
-                        <ul>
-                            <li>
-                                <a href="#usecardnumber">By card number</a>
+                        <ul class="nav nav-tabs" role="tablist">
+                            <li role="presentation" class="active">
+                                <a href="#usecardnumber" aria-controls="usecardnumber" role="tab" data-toggle="tab">By card number</a>
                             </li>
-                            <li>
-                                <a href="#useborrowernumber">By borrowernumber</a>
+                            <li role="presentation">
+                                <a href="#useborrowernumber" aria-controls="useborrowernumber" role="tab" data-toggle="tab">By borrowernumber</a>
                             </li>
                             [% IF patron_lists %]
-                                <li>
-                                    <a href="#uselist">By patron list</a>
+                                <li role="presentation">
+                                    <a href="#uselist" aria-controls="uselist" role="tab" data-toggle="tab">By patron list</a>
                                 </li>
                             [% END %]
                         </ul>
-                        <div id="usecardnumber">
-                            <fieldset class="rows">
-                                <legend>Use a file of card numbers</legend>
-                                <ol>
-                                    <li>
-                                        <label for="cardnumberuploadfile">File: </label> <input type="file" id="cardnumberuploadfile" name="cardnumberuploadfile" />
-                                        <div class="hint">File must contain one card number per line.</div>
-                                    </li>
-                                </ol>
-                            </fieldset>
-                            <fieldset class="rows">
-                                <legend>Or list card numbers one by one</legend>
-                                <ol>
-                                    <li>
-                                    <label for="cardnumberlist">Card number list (one card number per line): </label>
-                                    <textarea rows="10" cols="30" id="cardnumberlist" name="cardnumberlist">[% cardnumberlist | html %]</textarea>
-                                    </li>
-                                </ol>
-                            </fieldset>
-                    <fieldset class="action">
-                        <input type="submit" value="Continue" class="button" />
-                        <a class="cancel" href="/cgi-bin/koha/tools/tools-home.pl">Cancel</a>
-                    </fieldset>
-                        </div>
-                        <div id="useborrowernumber">
-                            <fieldset class="rows">
-                                <legend>Use a file of borrowernumbers</legend>
-                                <ol>
-                                    <li>
-                                        <label for="borrowernumberuploadfile">File: </label> <input type="file" id="borrowernumberuploadfile" name="borrowernumberuploadfile" />
-                                        <div class="hint">File must contain one borrowernumber per line.</div>
-                                    </li>
-                                </ol>
-                            </fieldset>
-                            <fieldset class="rows">
-                                <legend>List borrowernumbers one by one</legend>
-                                <ol>
-                                    <li>
-                                    <label for="borrowernumberlist">Borrowernumber list (one number per line): </label>
-                                    <textarea rows="10" cols="30" id="borrowernumberlist" name="borrowernumberlist">[% borrowernumberlist | html %]</textarea>
-                                    </li>
-                                </ol>
-                            </fieldset>
-                    <fieldset class="action">
-                        <input type="submit" value="Continue" class="button" />
-                        <a class="cancel" href="/cgi-bin/koha/tools/tools-home.pl">Cancel</a>
-                    </fieldset>
-                        </div>
-                        [% IF patron_lists %]
-                            <div id="uselist">
+                        <div class="tab-content">
+                            <div id="usecardnumber" role="tabpanel" class="tab-pane active">
                                 <fieldset class="rows">
-                                    <legend>Use a patron list</legend>
+                                    <legend>Use a file of card numbers</legend>
                                     <ol>
                                         <li>
-                                            <label for="patron_list_id">Patron list: </label>
-                                            <select id="patron_list_id" name="patron_list_id">
-                                                <option value=""> -- Choose a patron list -- </option>
-                                                [% FOREACH pl IN patron_lists %]
-                                                    <option value="[% pl.patron_list_id | html %]">[% pl.name | html %]</option>
-                                                [% END %]
-                                            </select>
+                                            <label for="cardnumberuploadfile">File: </label> <input type="file"
+                                                id="cardnumberuploadfile" name="cardnumberuploadfile" />
+                                            <div class="hint">File must contain one card number per line.</div>
                                         </li>
                                     </ol>
                                 </fieldset>
-                    <fieldset class="action">
-                        <input type="submit" value="Continue" class="button" />
-                        <a class="cancel" href="/cgi-bin/koha/tools/tools-home.pl">Cancel</a>
-                    </fieldset>
+                                <fieldset class="rows">
+                                    <legend>Or list card numbers one by one</legend>
+                                    <ol>
+                                        <li>
+                                            <label for="cardnumberlist">Card number list (one card number per line):
+                                            </label>
+                                            <textarea rows="10" cols="30" id="cardnumberlist"
+                                                name="cardnumberlist">[% cardnumberlist | html %]</textarea>
+                                        </li>
+                                    </ol>
+                                </fieldset>
+                                <fieldset class="action">
+                                    <input type="submit" value="Continue" class="button" />
+                                    <a class="cancel" href="/cgi-bin/koha/tools/tools-home.pl">Cancel</a>
+                                </fieldset>
                             </div>
-                        [% END %]
+                            <div id="useborrowernumber" role="tabpanel" class="tab-pane">
+                                <fieldset class="rows">
+                                    <legend>Use a file of borrowernumbers</legend>
+                                    <ol>
+                                        <li>
+                                            <label for="borrowernumberuploadfile">File: </label> <input type="file"
+                                                id="borrowernumberuploadfile" name="borrowernumberuploadfile" />
+                                            <div class="hint">File must contain one borrowernumber per line.</div>
+                                        </li>
+                                    </ol>
+                                </fieldset>
+                                <fieldset class="rows">
+                                    <legend>List borrowernumbers one by one</legend>
+                                    <ol>
+                                        <li>
+                                            <label for="borrowernumberlist">Borrowernumber list (one number per line):
+                                            </label>
+                                            <textarea rows="10" cols="30" id="borrowernumberlist"
+                                                name="borrowernumberlist">[% borrowernumberlist | html %]</textarea>
+                                        </li>
+                                    </ol>
+                                </fieldset>
+                                <fieldset class="action">
+                                    <input type="submit" value="Continue" class="button" />
+                                    <a class="cancel" href="/cgi-bin/koha/tools/tools-home.pl">Cancel</a>
+                                </fieldset>
+                            </div>
+                            [% IF patron_lists %]
+                                <div id="uselist" role="tabpanel" class="tab-pane">
+                                    <fieldset class="rows">
+                                        <legend>Use a patron list</legend>
+                                        <ol>
+                                            <li>
+                                                <label for="patron_list_id">Patron list: </label>
+                                                <select id="patron_list_id" name="patron_list_id">
+                                                    <option value=""> -- Choose a patron list -- </option>
+                                                    [% FOREACH pl IN patron_lists %]
+                                                    <option value="[% pl.patron_list_id | html %]">[% pl.name | html %]</option>
+                                                    [% END %]
+                                                </select>
+                                            </li>
+                                        </ol>
+                                    </fieldset>
+                                    <fieldset class="action">
+                                        <input type="submit" value="Continue" class="button" />
+                                        <a class="cancel" href="/cgi-bin/koha/tools/tools-home.pl">Cancel</a>
+                                    </fieldset>
+                                </div>
+                            [% END %]
+                        </div> <!-- /.tab-content -->
                     </div><!-- /#batch_patron_options -->
                 </form>
                 [% END %]
@@ -441,8 +449,6 @@
                     });
                     return false;
                 });
-            [% ELSE %]
-                $("#batch_patron_options").tabs();
             [% END %]
 
             var values = new Array();
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/overduerules.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/tools/overduerules.tt
index 659f092ed4..dadc4bd76e 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/overduerules.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/tools/overduerules.tt
@@ -72,92 +72,95 @@
                     [% IF ( datasaved ) %]<div class="dialog message">Changes saved.</div> [% END %]
 
   <div id="rulestabs" class="toptabs">
-    <ul class="ui-tabs-nav">
-      [% FOR tab IN tabs %]
-          <li><a href="#[% tab.id | uri %]" class="tab [% tab.id | html %]" data-number="[% tab.number | html %]"></a></li>
-      [% END %]
+    <ul class="nav nav-tabs" role="tablist">
+        [% FOR tab IN tabs %]
+            <li role="presentation">
+                <a href="#[% tab.id | uri %]" class="tab [% tab.id | html %]" data-number="[% tab.number | html %]" aria-controls="[% tab.id | uri %]" role="tab" data-toggle="tab"></a>
+            </li>
+        [% END %]
     </ul>
-    [% FOR tab IN tabs %]
-      <div id="[% tab.id | html %]">
-        <table>
-          <thead>
-            <tr>
-              <th>&nbsp;</th>
-              <th scope="col">Delay</th>
-              <th scope="col">Letter</th>
-              <th scope="col">Restrict</th>
-              [% FOREACH mtt IN message_transport_types %]
-                [% NEXT IF mtt == 'itiva' AND !Koha.Preference('TalkingTechItivaPhoneNotification') %]
-                [% NEXT IF mtt == 'phone' AND !Koha.Preference('PhoneNotification') %]
-                <th scpre="col">
-                  [% SWITCH mtt %]
-                  [% CASE 'email' %]
-                    Email
-                  [% CASE 'print' %]
-                    Print
-                  [% CASE 'sms' %]
-                    SMS
-                  [% CASE 'feed' %]
-                    Feed
-                  [% CASE 'itiva' %]
-                    Phone (i-tiva)
-                  [% CASE 'phone' %]
-                    Phone
-                  [% CASE %]
-                    [% mtt | html %]
-                  [% END %]
-                </th>
-              [% END %]
-            </tr>
-          </thead>
-          <tbody>
-          [% FOREACH value IN tab.values %]
-            <tr>
-              <th scope="row">[% value.line | html %]</th>
-              <td>
-              <input type="text" inputmode="numeric" pattern="[0-9]*" name="delay[% tab.number | html %]-[% value.overduename | html %]" value="[% value.delay | html %]" />
-              </td>
-              <td>
-                <select name="letter[% tab.number | html %]-[% value.overduename | html %]">
-                  <option value="">No notice</option>
-                  [% FOREACH letter IN letters %]
-                    [% IF letter.code == value.selected_lettercode %]
-                      <option value="[% letter.code | html %]" selected="selected">[% letter.name | html %]</option>
-                    [% ELSE %]
-                      <option value="[% letter.code | html %]">[% letter.name | html %]</option>
+    <div class="tab-content">
+        [% FOR tab IN tabs %]
+        <div id="[% tab.id | html %]" role="tabpanel" class="tab-pane">
+            <table>
+            <thead>
+                <tr>
+                <th>&nbsp;</th>
+                <th scope="col">Delay</th>
+                <th scope="col">Letter</th>
+                <th scope="col">Restrict</th>
+                [% FOREACH mtt IN message_transport_types %]
+                    [% NEXT IF mtt == 'itiva' AND !Koha.Preference('TalkingTechItivaPhoneNotification') %]
+                    [% NEXT IF mtt == 'phone' AND !Koha.Preference('PhoneNotification') %]
+                    <th scpre="col">
+                    [% SWITCH mtt %]
+                    [% CASE 'email' %]
+                        Email
+                    [% CASE 'print' %]
+                        Print
+                    [% CASE 'sms' %]
+                        SMS
+                    [% CASE 'feed' %]
+                        Feed
+                    [% CASE 'itiva' %]
+                        Phone (i-tiva)
+                    [% CASE 'phone' %]
+                        Phone
+                    [% CASE %]
+                        [% mtt | html %]
                     [% END %]
-                  [% END %]
-                </select>
-              </td>
-              <td>
-              [% IF ( value.debarred ) %]
-                <input type="checkbox" name="debarred[% tab.number | html %]-[% value.overduename | html %]" checked="checked" value="1" />
-              [% ELSE %]
-                <input type="checkbox" name="debarred[% tab.number | html %]-[% value.overduename | html %]" value="1" />
-              [% END %]
-              </td>
-              [% FOREACH mtt IN value.message_transport_types %]
-                [% NEXT IF mtt.value == 'itiva' AND !Koha.Preference('TalkingTechItivaPhoneNotification') %]
-                [% NEXT IF mtt.value == 'phone' AND !Koha.Preference('PhoneNotification') %]
+                    </th>
+                [% END %]
+                </tr>
+            </thead>
+            <tbody>
+            [% FOREACH value IN tab.values %]
+                <tr>
+                <th scope="row">[% value.line | html %]</th>
                 <td>
-                  [% IF mtt.selected %]
-                    <input type="checkbox" name="mtt[% tab.number | html %]-[% value.overduename | html %]" value="[% mtt.value | html %]" checked="checked" />
-                  [% ELSE %]
-                    [% IF mtt.value == "sms" and not Koha.Preference("SMSSendDriver") %]
-                      <input type="checkbox" name="mtt[% tab.number | html %]-[% value.overduename | html %]" value="[% mtt.value | html %]" disabled="disabled" />
-                    [% ELSE %]
-                      <input type="checkbox" name="mtt[% tab.number | html %]-[% value.overduename | html %]" value="[% mtt.value | html %]" />
+                <input type="text" inputmode="numeric" pattern="[0-9]*" name="delay[% tab.number | html %]-[% value.overduename | html %]" value="[% value.delay | html %]" />
+                </td>
+                <td>
+                    <select name="letter[% tab.number | html %]-[% value.overduename | html %]">
+                    <option value="">No notice</option>
+                    [% FOREACH letter IN letters %]
+                        [% IF letter.code == value.selected_lettercode %]
+                        <option value="[% letter.code | html %]" selected="selected">[% letter.name | html %]</option>
+                        [% ELSE %]
+                        <option value="[% letter.code | html %]">[% letter.name | html %]</option>
+                        [% END %]
                     [% END %]
-                  [% END %]
+                    </select>
                 </td>
-              [% END %]
-            </tr>
-          [% END %]
-          </tbody>
-        </table>
-      </div>
-    [% END %]
-
+                <td>
+                [% IF ( value.debarred ) %]
+                    <input type="checkbox" name="debarred[% tab.number | html %]-[% value.overduename | html %]" checked="checked" value="1" />
+                [% ELSE %]
+                    <input type="checkbox" name="debarred[% tab.number | html %]-[% value.overduename | html %]" value="1" />
+                [% END %]
+                </td>
+                [% FOREACH mtt IN value.message_transport_types %]
+                    [% NEXT IF mtt.value == 'itiva' AND !Koha.Preference('TalkingTechItivaPhoneNotification') %]
+                    [% NEXT IF mtt.value == 'phone' AND !Koha.Preference('PhoneNotification') %]
+                    <td>
+                    [% IF mtt.selected %]
+                        <input type="checkbox" name="mtt[% tab.number | html %]-[% value.overduename | html %]" value="[% mtt.value | html %]" checked="checked" />
+                    [% ELSE %]
+                        [% IF mtt.value == "sms" and not Koha.Preference("SMSSendDriver") %]
+                        <input type="checkbox" name="mtt[% tab.number | html %]-[% value.overduename | html %]" value="[% mtt.value | html %]" disabled="disabled" />
+                        [% ELSE %]
+                        <input type="checkbox" name="mtt[% tab.number | html %]-[% value.overduename | html %]" value="[% mtt.value | html %]" />
+                        [% END %]
+                    [% END %]
+                    </td>
+                [% END %]
+                </tr>
+            [% END %]
+            </tbody>
+            </table>
+        </div>
+        [% END %]
+    </div> <!-- /.tab-content -->
 
 </div>
 
@@ -191,7 +194,9 @@
                 var id = $(this).attr("data-number");
                 $(this).html(tab_map[id]);
             });
-            $('#rulestabs').tabs();
+            if( $("#rulestabs .tab-pane.active").length < 1 ){
+                $("#rulestabs a:first").tab("show");
+            }
         });
     </script>
 [% END %]
-- 
2.20.1