Browse Source

Bug 30487: Convert checkout and patron details page tabs to Bootstrap

This patch updates the checkout and patron details pages, updating
jQueryUI tabs to Bootstrap tabs.

To test, apply the patch and rebuild the staff interface CSS
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client).

Go to Circulation -> Check out and load a patron record for checkout.
Ideally the patron record should have a variet of data associated with
it:

 - Checkouts
 - Relative's checkouts (if patron is a guarantor or guarantee to
   another patron with checkouts)
 - Holds
 - Article requests
 - Claims
 - Restrictions
 - Clubs

On the patron's checkout page, test the various tabs corresponding to
the features listed above. Having data to display in those tabs helps
confirm that any table functionality triggered by the tab activation is
working correctly.

The checkouts tab should work correctly whether you have "Always show
checkouts immediately" checked or not.

Test that you can pre-select any tab by appending its anchor to the URL,
e.g.:

/cgi-bin/koha/circ/circulation.pl?borrowernumber=123#reserves

Perform the same checks on the patron details page.

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
22.11.x
Owen Leonard 2 years ago
committed by Tomas Cohen Arazi
parent
commit
dd75682f77
Signed by: tomascohen GPG Key ID: 0A272EA1B2F3C15F
  1. 5
      koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
  2. 2
      koha-tmpl/intranet-tmpl/prog/en/includes/blocked-fines.inc
  3. 2
      koha-tmpl/intranet-tmpl/prog/en/includes/borrower_debarments.inc
  4. 2
      koha-tmpl/intranet-tmpl/prog/en/includes/checkouts-table.inc
  5. 2
      koha-tmpl/intranet-tmpl/prog/en/includes/patron-article-requests.inc
  6. 2
      koha-tmpl/intranet-tmpl/prog/en/includes/patron-return-claims.inc
  7. 2
      koha-tmpl/intranet-tmpl/prog/en/includes/relatives-issues-table.inc
  8. 45
      koha-tmpl/intranet-tmpl/prog/en/modules/circ/circulation.tt
  9. 64
      koha-tmpl/intranet-tmpl/prog/en/modules/members/moremember.tt
  10. 2
      koha-tmpl/intranet-tmpl/prog/js/holds.js
  11. 12
      koha-tmpl/intranet-tmpl/prog/js/pages/circulation.js

5
koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss

@ -1245,11 +1245,6 @@ div {
}
}
#reserves,
#checkouts {
padding: 1em;
}
#sales {
display: none;
}

2
koha-tmpl/intranet-tmpl/prog/en/includes/blocked-fines.inc

@ -9,7 +9,7 @@
[% END %]
[% IF CAN_user_updatecharges_remaining_permissions %]
<a href="/cgi-bin/koha/members/pay.pl?borrowernumber=[% patron.borrowernumber | uri %]" class="btn btn-default btn-xs" >Make payment</a>
<a href="/cgi-bin/koha/members/paycollect.pl?borrowernumber=[% patron.borrowernumber | uri %]" class="btn btn-default btn-xs" >Pay all charges</a></li>
<a href="/cgi-bin/koha/members/paycollect.pl?borrowernumber=[% patron.borrowernumber | uri %]" class="btn btn-default btn-xs" >Pay all charges</a>
[% END %]
</li>
[% END %]

2
koha-tmpl/intranet-tmpl/prog/en/includes/borrower_debarments.inc

@ -1,7 +1,7 @@
[% USE raw %]
[% USE Koha %]
[% PROCESS 'patron_restrictions.inc' %]
<div id="reldebarments">
<div id="reldebarments" role="tabpanel" class="tab-pane">
[% IF ( not debarments.defined || debarments.size < 1 ) %]
<p>Patron is currently unrestricted.</p>
[% ELSE %]

2
koha-tmpl/intranet-tmpl/prog/en/includes/checkouts-table.inc

@ -1,7 +1,7 @@
[% USE Koha %]
[% PROCESS 'modal-claims.inc' %]
[% INCLUDE 'format_price.inc' %]
<div id="checkouts">
<div id="checkouts" role="tabpanel" class="tab-pane active">
[% IF ( issuecount ) %]
<div id="issues-table-loading-message">
<p>

2
koha-tmpl/intranet-tmpl/prog/en/includes/patron-article-requests.inc

@ -1,6 +1,6 @@
[% USE Context %]
[% SET current_article_requests = Context.Scalar( Context.Scalar( patron, 'article_requests' ), 'filter_by_current' ) %]
<div id="article-requests">
<div id="article-requests" role="tabpanel" class="tab-pane">
[% IF current_article_requests.count > 0 %]
<table id="article-requests-table" class="table table-bordered table-striped">
<thead>

2
koha-tmpl/intranet-tmpl/prog/en/includes/patron-return-claims.inc

@ -1,4 +1,4 @@
<div id="return-claims">
<div id="return-claims" role="tabpanel" class="tab-pane">
<p id="return-claims-controls">
[% IF ( patron.return_claims.resolved.count > 0 || patron.return_claims.unresolved.count > 0 ) %]
<a id="show_all_claims" class="ctrl_link" href="#">Show all [% patron.return_claims.count | html %] claim(s)</a>

2
koha-tmpl/intranet-tmpl/prog/en/includes/relatives-issues-table.inc

@ -1,6 +1,6 @@
[% USE Koha %]
[% IF ( relatives_issues_count ) %]
<div id="relatives-issues">
<div id="relatives-issues" role="tabpanel" class="tab-pane">
<table id="relatives-issues-table" style="width: 100% !Important;">
<thead>
<tr>

45
koha-tmpl/intranet-tmpl/prog/en/modules/circ/circulation.tt

@ -815,38 +815,38 @@
</div> <!-- /.row -->
<div id="patronlists" class="toptabs">
<ul>
<li>
<a href="#checkouts">Checkouts ([% issuecount || 0 | html %])</a>
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
<a href="#checkouts" aria-controls="checkouts" role="tab" data-toggle="tab">Checkouts ([% issuecount || 0 | html %])</a>
</li>
[% IF relatives_issues_count %]
<li>
<a id="relatives-issues-tab" href="#relatives-issues">Relatives' checkouts ([% relatives_issues_count | html %])</a>
<li role="presentation">
<a id="relatives-issues-tab" href="#relatives-issues" aria-controls="relatives-issues" role="tab" data-toggle="tab">Relatives' checkouts ([% relatives_issues_count | html %])</a>
</li>
[% END %]
<li>
<a href="#reserves" id="holds-tab">Holds ([% holds_count || 0 | html %])</a>
<li role="presentation">
<a href="#reserves" id="holds-tab" aria-controls="reserves" role="tab" data-toggle="tab">Holds ([% holds_count || 0 | html %])</a>
</li>
[% IF Koha.Preference('UseRecalls') %]
<li>
<a href="#recalls" id="recalls-tab">Recalls ([% recalls.count || 0 | html %])</a>
<li role="presentation">
<a href="#recalls" id="recalls-tab" aria-controls="recalls" role="tab" data-toggle="tab">Recalls ([% recalls.count || 0 | html %])</a>
</li>
[% END %]
[% IF Koha.Preference('ArticleRequests') %]
[% SET current_article_requests = Context.Scalar( Context.Scalar( patron, 'article_requests' ), 'filter_by_current' ) %]
<li>
<a href="#article-requests" id="article-requests-tab">Article requests ([% current_article_requests.count || 0 | html %])</a>
<li role="presentation">
<a href="#article-requests" id="article-requests-tab" aria-controls="article-requests" role="tab" data-toggle="tab">Article requests ([% current_article_requests.count || 0 | html %])</a>
</li>
[% END %]
[% IF Koha.Preference('ClaimReturnedLostValue') || Koha.Preference('BundleLostValue') %]
<li>
<li role="presentation">
[% IF ( patron.return_claims.count ) %]
<a href="#return-claims" id="return-claims-tab">
<a href="#return-claims" id="return-claims-tab" aria-controls="return-claims" role="tab" data-toggle="tab">
Claims
([% IF patron.return_claims.resolved.count == 0 %]
<span title="Resolved claims" class="label label-default" id="return-claims-count-resolved">[% patron.return_claims.resolved.count | html %]</span>
@ -860,7 +860,7 @@
[% END %])
</a>
[% ELSE %]
<a href="#return-claims" id="return-claims-tab">
<a href="#return-claims" id="return-claims-tab" aria-controls="return-claims" role="tab" data-toggle="tab">
Claims
(<span title="Resolved claims" class="label label-default" id="return-claims-count-resolved">0</span>
<span title="Unresolved claims" class="label label-default" id="return-claims-count-unresolved">0</span>)
@ -869,21 +869,22 @@
</li>
[% END %]
<li>
<a id="debarments-tab-link" href="#reldebarments">Restrictions ([% debarments.size || 0 | html %])</a>
<li role="presentation">
<a id="debarments-tab-link" href="#reldebarments" aria-controls="reldebarments" role="tab" data-toggle="tab">Restrictions ([% debarments.size || 0 | html %])</a>
</li>
[% SET enrollments = patron.get_club_enrollments %]
[% SET enrollable = patron.get_enrollable_clubs(0) %] <!-- 0 => not OPAC -->
[% IF CAN_user_clubs && ( enrollable.count || enrollments.count ) %]
<li>
<a id="clubs-tab-link" href="#clubs-tab">
<li role="presentation">
<a id="clubs-tab-link" href="#clubs-tab" aria-controls="clubs-tab" role="tab" data-toggle="tab">
Clubs ([% enrollments.count | html %]/[% enrollable.count | html %])
</a>
</li>
[% END %]
</ul>
<div class="tab-content">
<!-- SUMMARY : TODAY & PREVIOUS ISSUES -->
[% INCLUDE "checkouts-table.inc" %]
@ -891,14 +892,14 @@
[% INCLUDE "relatives-issues-table.inc" %]
[% IF CAN_user_clubs && ( enrollable.count || enrollments.count ) %]
<div id="clubs-tab">
<div id="clubs-tab" role="tabpanel" class="tab-pane">
Loading...
</div> <!-- /#clubs-tab -->
[% END %]
[% INCLUDE borrower_debarments.inc %]
<div id="reserves">
<div id="reserves" role="tabpanel" class="tab-pane">
[% IF ( holds_count ) %]
<form action="/cgi-bin/koha/reserve/modrequest.pl" method="post">
<input type="hidden" name="from" value="circ" />
@ -966,7 +967,7 @@
</div> <!-- /#reserves -->
[% IF Koha.Preference('UseRecalls') %]
<div id="recalls">
<div id="recalls" role="tabpanel" class="tab-pane">
[% INCLUDE 'recalls.inc' %]
</div>
[% END %]
@ -978,7 +979,7 @@
[% IF Koha.Preference('ArticleRequests') %]
[% INCLUDE 'patron-article-requests.inc' %]
[% END %]
</div> <!-- /.tab-content -->
</div> <!-- /#patronlists -->
[% ELSIF borrowernumber # IF patron %]
<div class="dialog message">Patron not found. <a href="/cgi-bin/koha/members/members-home.pl">Return to search</a></div>

64
koha-tmpl/intranet-tmpl/prog/en/modules/members/moremember.tt

@ -653,43 +653,43 @@
</div> <!-- /div.row -->
<div id="finesholdsissues" class="toptabs">
<ul>
<li>
<a href="#checkouts">Checkouts ([% issuecount || 0 | html %])</a>
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
<a href="#checkouts" aria-controls="checkouts" role="tab" data-toggle="tab">Checkouts ([% issuecount || 0 | html %])</a>
</li>
[% IF relatives_issues_count %]
<li>
<a href="#relatives-issues" id="relatives-issues-tab">Relatives' checkouts ([% relatives_issues_count | html %])</a>
<li role="presentation">
<a href="#relatives-issues" id="relatives-issues-tab" aria-controls="relatives-issues" role="tab" data-toggle="tab">Relatives' checkouts ([% relatives_issues_count | html %])</a>
</li>
[% END %]
[% IF ( fines ) %]
<li id="finestab">
<a href="#finesandcharges">Charges ([% fines | $Price %])</a>
<li role="presentation" id="finestab">
<a href="#finesandcharges" aria-controls="finesandcharges" role="tab" data-toggle="tab">Charges ([% fines | $Price %])</a>
</li>
[% END %]
[% IF ( CAN_user_circulate_circulate_remaining_permissions ) %]
<li>
<a href="#reserves" id="holds-tab">Holds ([% holds_count || 0 | html %])</a>
<li role="presentation">
<a href="#reserves" id="holds-tab" aria-controls="reserves" role="tab" data-toggle="tab">Holds ([% holds_count || 0 | html %])</a>
</li>
[% END %]
[% IF Koha.Preference('UseRecalls') %]
<li>
<a href="#recalls" id="recalls-tab">Recalls ([% recalls.count || 0 | html %])</a>
<li role="presentation">
<a href="#recalls" id="recalls-tab" aria-controls="recalls" role="tab" data-toggle="tab">Recalls ([% recalls.count || 0 | html %])</a>
</li>
[% END %]
[% IF Koha.Preference('ArticleRequests') %]
[% SET article_requests = Context.Scalar( Context.Scalar( patron, 'article_requests' ), 'filter_by_current') %]
<li>
<a href="#article-requests" id="article-requests-tab">Article requests ([% article_requests.count || 0 | html %])</a>
<li role="presentation">
<a href="#article-requests" id="article-requests-tab" aria-controls="article-requests" role="tab" data-toggle="tab">Article requests ([% article_requests.count || 0 | html %])</a>
</li>
[% END %]
[% IF Koha.Preference('ClaimReturnedLostValue') || Koha.Preference('BundleLostValue') %]
<li>
<li role="presentation">
[% IF ( patron.return_claims.count ) %]
<a href="#return-claims" id="return-claims-tab">
<a href="#return-claims" id="return-claims-tab" aria-controls="return-claims" role="tab" data-toggle="tab">
Claims
([% IF patron.return_claims.resolved.count == 0 %]
<span title="Resolved claims" class="label label-default" id="return-claims-count-resolved">[% patron.return_claims.resolved.count | html %]</span>
@ -703,7 +703,7 @@
[% END %])
</a>
[% ELSE %]
<a href="#return-claims" id="return-claims-tab">
<a href="#return-claims" id="return-claims-tab" aria-controls="return-claims" role="tab" data-toggle="tab">
Claims
(<span title="Resolved claims" class="label label-default" id="return-claims-count-resolved">0</span>
<span title="Unresolved claims" class="label label-default" id="return-claims-count-unresolved">0</span>)
@ -712,27 +712,28 @@
</li>
[% END %]
<li>
<a id="debarments-tab-link" href="#reldebarments">Restrictions ([% debarments.size || 0 | html %])</a>
<li role="presentation">
<a id="debarments-tab-link" href="#reldebarments" aria-controls="reldebarments" role="tab" data-toggle="tab">Restrictions ([% debarments.size || 0 | html %])</a>
</li>
[% SET enrollments = patron.get_club_enrollments %]
[% SET enrollable = patron.get_enrollable_clubs(0) %] <!-- 0 => not OPAC -->
[% IF CAN_user_clubs && ( enrollable.count || enrollments.count ) %]
<li>
<a id="clubs-tab-link" href="#clubs-tab">
<li role="presentation">
<a id="clubs-tab-link" href="#clubs-tab" aria-controls="checkouts" role="tab" data-toggle="tab">
Clubs ([% enrollments.count | html %]/[% enrollable.count | html %])
</a>
</li>
[% END %]
</ul>
<div class="tab-content">
[% INCLUDE "checkouts-table.inc" %]
[% INCLUDE "relatives-issues-table.inc" %]
[% IF ( fines ) %]
<div id="finesandcharges">
<div id="finesandcharges" role="tabpanel" class="tab-pane">
[% IF ( fines ) %]
<p>Total due: [% fines | $Price %]</p>
[% ELSE %]
@ -742,7 +743,7 @@
[% END %]
[% IF CAN_user_clubs && ( enrollments.count || enrollable.count ) %]
<div id="clubs-tab">
<div id="clubs-tab" role="tabpanel" class="tab-pane">
Loading...
</div>
[% END %]
@ -750,7 +751,7 @@
[% INCLUDE borrower_debarments.inc %]
[% IF ( CAN_user_circulate_circulate_remaining_permissions ) %]
<div id="reserves">
<div id="reserves" role="tabpanel" class="tab-pane">
[% IF ( holds_count ) %]
<form action="/cgi-bin/koha/reserve/modrequest.pl" method="post">
<input type="hidden" name="from" value="circ" />
@ -820,7 +821,7 @@
[% END %]
[% IF Koha.Preference('UseRecalls') %]
<div id="recalls">
<div id="recalls" role="tabpanel" class="tab-pane">
[% INCLUDE 'recalls.inc' %]
</div>
[% END %]
@ -832,7 +833,7 @@
[% IF Koha.Preference('ArticleRequests') %]
[% INCLUDE 'patron-article-requests.inc' %]
[% END %]
</div> <!-- /.tab-content -->
</div> <!-- /div#finesholdsissues -->
</main>
</div> <!-- /.col-sm-10.col-sm-push-2 -->
@ -901,19 +902,12 @@
});
}
$('#finesholdsissues').tabs({
// Correct table sizing for tables hidden in tabs
// http://www.datatables.net/examples/api/tabs_and_scrolling.html
"show": function(event, ui) {
var oTable = $('div.dataTables_wrapper>table', ui.panel).dataTable();
$("#finesholdsissues a[data-toggle='tab']").on("shown.bs.tab", function(e){
var oTable = $('div.dataTables_wrapper > table', $(e.target.hash) ).dataTable();
if ( oTable.length > 0 ) {
oTable.fnAdjustColumnSizing();
}
},
"activate": function( event, ui ) {
$("a", ui.newTab ).click();
}
} );
});
$("#view_restrictions").on("click",function(){
$('#debarments-tab-link').click();

2
koha-tmpl/intranet-tmpl/prog/js/holds.js

@ -120,7 +120,7 @@ $(document).ready(function() {
$("#holds-tab").on( "click", function(){ load_holds_table() } );
// If the holds tab is preselected on load, we need to load the table
if ( $("#holds-tab").parent().hasClass('ui-state-active') ) { load_holds_table() }
if ( $("#holds-tab").parent().hasClass('active') ) { load_holds_table() }
function load_holds_table() {
var holds = new Array();

12
koha-tmpl/intranet-tmpl/prog/js/pages/circulation.js

@ -8,10 +8,8 @@ $(document).ready(function() {
return false;
});
$('#patronlists').tabs({
activate: function( event, ui ) {
$("a", ui.newTab ).click();
}
$("#patronlists a[data-toggle='tab']").on("shown.bs.tab", function(e){
$(this).click();
});
$("#borrower_messages .cancel").on("click",function(){
@ -91,6 +89,12 @@ $(document).ready(function() {
$("#" + fieldID).val("");
});
/* Preselect Bootstrap tab based on location hash */
var hash = window.location.hash.substring(1);
if( hash ){
var activeTab = $('a[href="#' + hash + '"]');
activeTab && activeTab.tab('show');
}
});

Loading…
Cancel
Save