From 62b389549cd40c719cf4cdfd7e72e74ebc4b9710 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. The patch contains indentation changes, so diff accordingly.

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.

Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
---
 .../prog/en/modules/tools/export.tt           | 472 +++++++++---------
 .../prog/en/modules/tools/modborrowers.tt     | 150 +++---
 .../prog/en/modules/tools/overduerules.tt     | 170 ++++---
 3 files changed, 405 insertions(+), 387 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 3b8ed38f42..645f623e64 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 1a69521b97..3ebea7b380 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 %]
@@ -419,8 +427,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 bbaf254c8d..4d250ad21d 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/overduerules.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/tools/overduerules.tt
@@ -71,88 +71,90 @@
                 <h3>Rules for overdue actions: [% IF ( branch ) %][% Branches.GetName( branch ) | html %][% ELSE %] default library [% END %]</h3>
                     [% 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>
-    [% 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' %]<span>Email</span>
-                  [% CASE 'print' %]<span>Print</span>
-                  [% CASE 'sms' %]<span>SMS</span>
-                  [% CASE 'feed' %]<span>Feed</span>
-                  [% CASE 'itiva' %]<span>Phone (i-tiva)</span>
-                  [% CASE 'phone' %]<span>Phone</span>
-                  [% CASE %]<span>[% mtt | html %]</span>
-                  [% 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>
-                    [% 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') %]
-                <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>
+                <div id="rulestabs" class="toptabs">
+                    <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>
+                    <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 scope="col">
+                                                    [% SWITCH mtt %]
+                                                    [% CASE 'email' %]<span>Email</span>
+                                                    [% CASE 'print' %]<span>Print</span>
+                                                    [% CASE 'sms' %]<span>SMS</span>
+                                                    [% CASE 'feed' %]<span>Feed</span>
+                                                    [% CASE 'itiva' %]<span>Phone (i-tiva)</span>
+                                                    [% CASE 'phone' %]<span>Phone</span>
+                                                    [% CASE %]<span>[% mtt | html %]</span>
+                                                    [% 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>
+                                                            [% 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') %]
+                                                    <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 # /FOREACH mtt %]
+                                            </tr>
+                                        [% END # /FOREACH value %]
+                                    </tbody>
+                                </table>
+                            </div> <!-- /.tab-pane -->
+                        [% END # /FOR tabs %]
+                    </div> <!-- /.tab-content -->
+                </div>
 
                 <fieldset class="action"><input type="submit" value="Save changes" /></fieldset>
             </form>
@@ -184,7 +186,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