Koha-community/Koha
13
7
Fork 0
Code Issues Releases Wiki Activity

Bug 35007: Configure self checkout tables consistently

Browse source 
This patch makes some updates to the self checkout page so that
checkouts, holds, and account tabs are consistent with each other, with
the same DataTables configuration.

Included in the DataTables configuration are the same options we use on
the OPAC's user summary page to show controls for copy, CSV, and print.

Also changed: Some extra markup is removed from holds-table.inc, markup
which was used to show table information responsively before we started
using the DataTables responsive plugin.

To test, apply the patch and log into the self checkout system as a user
with checkouts, holds, and present or past charges.

Compare the checkouts, holds, and charges tabs to confirm that the
tables look correct and work correctly. Test that the copy, CSV, and
print controls, and the search and clear filter functions. Test that
each table responds correctly at various browser widths.

Signed-off-by: David Nind <david@davidnind.com>
Signed-off-by: Nick Clemens <nick@bywatersolutions.com>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
This commit is contained in:
Owen Leonard 2023-10-10 15:50:08 +00:00 committed by Tomas Cohen Arazi
parent e08bf3bb4c
commit 3738b00c15
Signed by: tomascohen
GPG key ID: 0A272EA1B2F3C15F
4 changed files with 50 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss
View file

@ -705,7 +705,8 @@ table {
.nosort,
.nosort.sorting_asc,
.nosort.sorting_desc,
.nosort.sorting {
.nosort.sorting,
.sorting_disabled {
background: #E2E8E8 none;
padding-right: 19px;
}

4
koha-tmpl/opac-tmpl/bootstrap/en/includes/account-table.inc
View file

@ -7,8 +7,8 @@
<tr>
[% IF ENABLE_OPAC_PAYMENTS %]<th>&nbsp;</th>[% END %]
<th>Created</th>
<th>Updated</th>
<th>Type</th>
<th class="psort">Updated</th>
<th class="all">Type</th>
<th>Description</th>
<th>Amount</th>
<th>Amount outstanding</th>

13
koha-tmpl/opac-tmpl/bootstrap/en/includes/holds-table.inc
View file

@ -8,7 +8,7 @@
<!-- HOLDS TABLE ROWS -->
<thead>
<tr>
<th class="anti-the">Title</th>
<th class="all anti-the">Title</th>
[% IF ( showpriority ) %]
<th>Placed on</th>
[% ELSE %]
@ -66,17 +66,13 @@
[% END %]
</td>
<td class="reservedate" data-order="[% HOLD.reservedate | html %]">
<span class="tdlabel">Hold date:</span>
[% HOLD.reservedate | $KohaDates %]
</span>
[% HOLD.reservedate | $KohaDates %]
</td>
[% IF ! HOLD.found %]
<td class="expirationdate" data-order="[% HOLD.expirationdate | html %]">
[% IF ( HOLD.expirationdate ) %]
<span class="tdlabel">Expiration:</span>
[% HOLD.expirationdate | $KohaDates %]
[% ELSE %]
<span class="tdlabel">Expiration:</span>
Never expires
[% END %]
[% ELSE %]
@ -86,7 +82,6 @@
</td>
[% UNLESS( singleBranchMode) %]
<td class="branch">
<span class="tdlabel">Pickup location:</span>
[% HOLD.branch.branchname | html %]
[% IF ( HOLD.can_update_pickup_location_opac ) %]
<button type="button" class="btn btn-sm btn-link" data-toggle="modal" data-target="#changePickup[% HOLD.reserve_id | html %]">
@ -125,7 +120,6 @@
[% END %]
[% IF ( showpriority ) %]
<td data-order="[% HOLD.priority | html %]" class="priority">
<span class="tdlabel">Priority:</span>
[% HOLD.priority | html %]
</td>
[% END %]
@ -133,7 +127,6 @@
<td>[% HOLD.reservenotes | html | html_line_break %]</td>
[% END %]
<td class="status">
<span class="tdlabel">Status:</span>
[% IF ( HOLD.is_waiting ) %]
<i class="fa fa-exclamation-circle text-warning" aria-hidden="true"></i>
[% IF ( HOLD.is_at_destination ) %]
@ -206,8 +199,8 @@
</form>
[% END %]
</td>
<td></td>
[% END # / IF onlyinfo %]
<td></td>
</tr>
[% END # /FOREACH HOLDS %]
</tbody>

58
koha-tmpl/opac-tmpl/bootstrap/en/modules/sco/sco-main.tt
View file

@ -14,6 +14,7 @@
[% ELSE %]
<link rel="shortcut icon" href="[% interface | html %]/[% theme | html %]/images/favicon.ico" type="image/x-icon" />
[% END %]
[% Asset.css("lib/jquery/responsive.dataTables.min.css") | $raw %]
[% Asset.css("lib/fontawesome/css/fontawesome.min.css") | $raw %]
[% Asset.css("lib/fontawesome/css/brands.min.css") | $raw %]
[% Asset.css("lib/fontawesome/css/solid.min.css") | $raw %]
@ -313,13 +314,14 @@
<thead>
<tr>
<th class="noshow">Checked out on</th>
<th class="anti-the">Title</th>
<th class="all anti-the">Title</th>
<th>Call number</th>
<th>Due</th>
<th class="nosort">Renew</th>
<th class="psort">Due</th>
<th class="all nosort">Renew</th>
[% UNLESS ( nofines ) %]
<th>Fines</th>
[% END %]
<th></th>
</tr>
</thead>
<tbody>
@ -373,9 +375,11 @@
<span>No renewals allowed</span>
[% END %]
[% IF Koha.Preference('SCOAllowCheckin') %]
<input type="submit" value="Check in item" name="confirm" class="btn btn-info btn-sm return" />
<input type="hidden" name="op" value="returnbook" />
<input type="hidden" name="confirmed" value="" />
<div>
<input type="submit" value="Check in item" name="confirm" class="btn btn-info btn-sm return" />
<input type="hidden" name="op" value="returnbook" />
<input type="hidden" name="confirmed" value="" />
</div>
[% END %]
[% END %]
[% IF ISSUE.auto_renew %]
@ -388,6 +392,7 @@
[% IF ( ISSUE.charges ) %]Yes[% ELSE %]No[% END %]
</td>
[% END %]
<td></td>
</tr>
[% END # / FOREACH ISSUE %]
</tbody>
@ -518,15 +523,38 @@
$(document).ready(function() {
dofocus();
[% IF ( patronid ) %]sco_init();[% END %]
$("#loanTable").dataTable($.extend(true, {}, dataTablesDefaults, {
"dom": "t",
"order": [ 0 ],
"columnDefs": [
{ "targets": [ "nosort" ], "sortable": false, "searchable": false },
{ "targets": [ "noshow" ], "visible": false, "searchable": false },
{ "type": "anti-the", "targets" : [ "anti-the" ] }
]
}));
var dTables = $("#loanTable, #holdst, #finestable");
dTables.each(function(){
var thIndex = $(this).find("th.psort").index();
$(this).dataTable($.extend(true, {}, dataTablesDefaults, {
"sorting" : [[ thIndex, 'asc' ]],
"dom": '<"top"<"table_entries"><"table_controls"fB>>t',
"columnDefs": [
{ "targets": [ "nosort" ],"sortable": false,"searchable": false },
{ "targets": [ "noshow" ], "visible": false, "searchable": false },
{ "type": "anti-the", "targets" : [ "anti-the" ] },
{ "visible": false, "targets" : [ "hidden" ] },
{ "className": 'dtr-control', "orderable": false, "targets": -1 }
],
"language": {
"search": "_INPUT_",
"searchPlaceholder": _("Search")
},
"autoWidth": false,
"responsive": {
details: {
type: 'column',
target: -1
}
}
}));
});
$('a[data-toggle="tab"]').on('shown.bs.tab', function (event) {
dTables.DataTable().responsive.recalc();
dataTables.DataTable().responsive.recalc();
} );
$("#logout_form").on("click", function(e){
e.preventDefault(e);