From 9e0358599b5296ee76d5c8a97799757df3e5e995 Mon Sep 17 00:00:00 2001 From: Owen Leonard <oleonard@myacpl.org> Date: Tue, 29 Mar 2022 17:17:36 +0000 Subject: [PATCH] Bug 30401: Convert budgets administration page tabs to Bootstrap This patch updates the budgets administration page to use Bootstrap tabs instead of jQueryUI. This patch contains indentation changes, so ignore whitespace when you use your preferred diff tool. To test, apply the patch and go to Administration -> Budgets. Check that the "Active budgets" and "Inactive budgets" work correctly. Append "?tab=2" to the page URL to confirm that the second tab is preselected. Signed-off-by: Lucas Gass <lucas@bywatersolutions.com> --- .../prog/en/modules/admin/aqbudgetperiods.tt | 149 +++++++++--------- 1 file changed, 77 insertions(+), 72 deletions(-) diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/aqbudgetperiods.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/aqbudgetperiods.tt index 1560479772..8dc37d99aa 100644 --- a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/aqbudgetperiods.tt +++ b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/aqbudgetperiods.tt @@ -471,79 +471,84 @@ [% INCLUDE 'budgets-active-currency.inc' %] <div id="budgetsTabs" class="toptabs"> - <ul> - <li><a href="#active">Active budgets</a></li> - <li><a href="#inactive">Inactive budgets</a></li> + <ul class="nav nav-tabs" role="tablist"> + <li role="presentation" class="active"> + <a href="#active" aria-controls="active" role="tab" data-toggle="tab">Active budgets</a> + </li> + <li role="presentation"> + <a href="#inactive" aria-controls="inactive" role="tab" data-toggle="tab">Inactive budgets</a> + </li> </ul> - - <div id="active"> - [% IF ( period_active_loop ) %] - <table id="activeperiodst"> - <thead> - <tr> - <th>Budget name</th> - <th>Start date</th> - <th>End date</th> - <th>Locked</th> - <th>Total</th> - <th class="noExport">Actions</th> - </tr> - </thead> - <tbody> - [% FOREACH period_active IN period_active_loop %] + <div class="tab-content"> + <div id="active" role="tabpanel" class="tab-pane active"> + [% IF ( period_active_loop ) %] + <table id="activeperiodst"> + <thead> <tr> - <td><a href="/cgi-bin/koha/admin/aqbudgets.pl?budget_period_id=[% period_active.budget_period_id | uri %]" title="View funds for [% period_active.budget_period_description | html %]">[% period_active.budget_period_description | html %]</a></td> - <td data-order="[% period_active.budget_period_startdate | html %]">[% period_active.budget_period_startdate | $KohaDates %]</td> - <td data-order="[% period_active.budget_period_enddate | html %]">[% period_active.budget_period_enddate | $KohaDates %]</td> - <td> - [% IF ( period_active.budget_period_locked ) %] - <i class="fa fa-lock"></i> Locked</span> - [% END %] - </td> - <td class="data">[% period_active.budget_period_total | $Price %]</td> - <td> - [% PROCESS action_menu block_budget=period_active %] - </td> + <th>Budget name</th> + <th>Start date</th> + <th>End date</th> + <th>Locked</th> + <th>Total</th> + <th class="noExport">Actions</th> </tr> - [% END %] - </tbody> - </table> - [% ELSE %] - No active budgets - [% END %] - </div> - <div id="inactive"> - [% IF ( period_inactive_loop ) %] - <table id="inactiveperiodst"> - <thead> - <tr> - <th>Budget name</th> - <th>Start date</th> - <th>End date</th> - <th>Locked</th> - <th>Total</th> - <th class="noExport">Actions</th> - </tr> - </thead> - <tbody> - [% FOREACH period_loo IN period_inactive_loop %] - <tr> - <td><a href="/cgi-bin/koha/admin/aqbudgets.pl?budget_period_id=[% period_loo.budget_period_id | uri %]" title="View funds for [% period_loo.budget_period_description | html %]">[% period_loo.budget_period_description | html %]</a></td> - <td data-order="[% period_loo.budget_period_startdate | html %]">[% period_loo.budget_period_startdate | $KohaDates %]</td> - <td data-order="[% period_loo.budget_period_enddate | html %]">[% period_loo.budget_period_enddate | $KohaDates %]</td> - <td>[% IF ( period_loo.budget_period_locked ) %]<i class="fa fa-lock"></i> Locked[% END %]</td> - <td class="data">[% period_loo.budget_period_total | $Price %]</td> - <td> - [% PROCESS action_menu block_budget=period_loo %] - </td> - </tr> - [% END %] - </tbody> - </table> - [% ELSE %] - No inactive budgets - [% END %] - </div> + </thead> + <tbody> + [% FOREACH period_active IN period_active_loop %] + <tr> + <td><a href="/cgi-bin/koha/admin/aqbudgets.pl?budget_period_id=[% period_active.budget_period_id | uri %]" title="View funds for [% period_active.budget_period_description | html %]">[% period_active.budget_period_description | html %]</a></td> + <td data-order="[% period_active.budget_period_startdate | html %]">[% period_active.budget_period_startdate | $KohaDates %]</td> + <td data-order="[% period_active.budget_period_enddate | html %]">[% period_active.budget_period_enddate | $KohaDates %]</td> + <td> + [% IF ( period_active.budget_period_locked ) %] + <i class="fa fa-lock"></i> Locked</span> + [% END %] + </td> + <td class="data">[% period_active.budget_period_total | $Price %]</td> + <td> + [% PROCESS action_menu block_budget=period_active %] + </td> + </tr> + [% END %] + </tbody> + </table> + [% ELSE %] + No active budgets + [% END %] + </div> + <div id="inactive" role="tabpanel" class="tab-pane"> + [% IF ( period_inactive_loop ) %] + <table id="inactiveperiodst"> + <thead> + <tr> + <th>Budget name</th> + <th>Start date</th> + <th>End date</th> + <th>Locked</th> + <th>Total</th> + <th class="noExport">Actions</th> + </tr> + </thead> + <tbody> + [% FOREACH period_loo IN period_inactive_loop %] + <tr> + <td><a href="/cgi-bin/koha/admin/aqbudgets.pl?budget_period_id=[% period_loo.budget_period_id | uri %]" title="View funds for [% period_loo.budget_period_description | html %]">[% period_loo.budget_period_description | html %]</a></td> + <td data-order="[% period_loo.budget_period_startdate | html %]">[% period_loo.budget_period_startdate | $KohaDates %]</td> + <td data-order="[% period_loo.budget_period_enddate | html %]">[% period_loo.budget_period_enddate | $KohaDates %]</td> + <td>[% IF ( period_loo.budget_period_locked ) %]<i class="fa fa-lock"></i> Locked[% END %]</td> + <td class="data">[% period_loo.budget_period_total | $Price %]</td> + <td> + [% PROCESS action_menu block_budget=period_loo %] + </td> + </tr> + [% END %] + </tbody> + </table> + [% ELSE %] + No inactive budgets + [% END %] + </div> + </div> <!-- /.tab-content --> </div> [% END %] @@ -566,10 +571,10 @@ [% Asset.js("js/acq.js") | $raw %] <script> $(document).ready(function() { - var tabs = $('#budgetsTabs').tabs(); [% IF ( tab ) %] - tabs.tabs("option", "active", [% tab | html %]); + $("#budgetsTabs li:eq([% tab | html %]) a").tab("show"); [% END %] + $("#activeperiodst,#inactiveperiodst").dataTable($.extend(true, {}, dataTablesDefaults, { "aoColumnDefs": [ { "aTargets": [ -1 ], "bSortable": false, "bSearchable": false }, -- 2.20.1