bug 3436: enhance sorting of loans (self-check)

[1] Change the default sort order of checked out
    items to have the most recent loans displayed
    first.

[2] Add the ability (via jQuery tablesorter) for
    the user to sort the list of loans.

Also fixed the formatting of the due date.

This change was sponsored by the Plano Independent School
District.

Signed-off-by: Galen Charlton <gmcharlt@gmail.com>

koha-tmpl/opac-tmpl/prog/en/css/sco.css

@@ -165,6 +165,19 @@ tr.even td, tr.even.highlight td {
 	background-color: #FFF;
 }
 
+.header {
+    background-image:url("../../images/ascdesc.gif");
+    background-position:right center;
+    background-repeat:no-repeat;
+    cursor:pointer;
+}
+.headerSortUp {
+    background-image:url("../../images/asc.gif");
+}
+.headerSortDown {
+    background-image:url("../../images/desc.gif");
+}
+
 p {
 	margin: .7em 0;
 }

koha-tmpl/opac-tmpl/prog/en/modules/sco/sco-main.tmpl

@@ -3,6 +3,7 @@
 <meta name="generator" content="Koha <!-- TMPL_VAR NAME="Version" -->" /> <!-- leave this for stats -->
 <link rel="shortcut icon" href="<!-- TMPL_VAR NAME="themelang" -->/includes/favicon.ico" type="image/x-icon" />
 <script type="text/javascript" src="<!-- TMPL_VAR name="themelang" -->/lib/jquery/jquery.js"></script>
+<script type="text/javascript" src="<!-- TMPL_VAR name="themelang" -->/lib/jquery/plugins/jquery.tablesorter.min.js"></script>
 <script type="text/javascript">//<![CDATA[
 function sco_init(valid_session) {
     if (valid_session == 1) {
@@ -32,10 +33,29 @@ function checkout_confirm(patronid) {
     return true;
 }
 
+$.tablesorter.addParser({
+    id: 'articles',
+    is: function(s) {return false;  },
+    format: function(s) { return s.toLowerCase().replace(/^(the|an|a) /,''); },
+    type: 'text'
+});
+
 $(document).ready(function() {
     <!-- TMPL_IF    NAME="patronid" --> sco_init(1);
     <!-- TMPL_ELSIF NAME="timedout" --> sco_init(1);
     <!-- /TMPL_IF -->
+    $("#loanTable").tablesorter({
+        <!-- TMPL_IF NAME="dateformat_metric" -->
+            dateFormat: 'uk',
+        <!-- /TMPL_IF -->
+        widgets:   ['zebra'],
+        sortList:  [[2, 1], [0, 0]],
+        headers: {
+            0: { sorter: 'articles' },
+            3: { sorter: false }
+            <!-- TMPL_UNLESS NAME="nofines" -->, 4: { sorter: false }<!-- /TMPL_UNLESS -->
+        }
+    });
 });
 //]]>
 </script>
@@ -135,17 +155,20 @@ Sorry, This Self-Checkout Station has lost authentication.  Please contact the a
 
 	<div id="borrowerdetails">
 	<!-- TMPL_IF NAME="issues_count" -->
-	<table><caption>Issues for <!-- TMPL_VAR NAME='borrowername' --> <span class="count">(<!-- TMPL_VAR NAME="issues_count" --> total)</span></caption>
+	<table id="loanTable"><caption>Issues for <!-- TMPL_VAR NAME='borrowername' --> <span class="count">(<!-- TMPL_VAR NAME="issues_count" --> total)</span></caption>
 	<!-- ISSUES TABLE ROWS -->
+    <thead>
 	<tr><th>Title</th><th>Call No.</th><th>Due</th><th>Renew</th><!-- TMPL_UNLESS NAME="nofines" --><th>Fines</th><!-- /TMPL_UNLESS --></tr>
+    </thead>
 
+    <tbody>
 	<!-- TMPL_LOOP NAME="ISSUES" -->
 	<!-- TMPL_UNLESS name="__odd__" --><tr class="highlight"><!-- TMPL_ELSE --><tr><!-- /TMPL_UNLESS -->
     <!-- FIXME: yet another jacket image breakpoint -->
 	<td><!-- TMPL_IF NAME="amazonimages" --> <!-- TMPL_IF NAME="isbn" --><a href="/cgi-bin/koha/opac-detail.pl?bib=<!-- TMPL_VAR NAME="biblionumber" ESCAPE="URL" -->"><img src="http://images.amazon.com/images/P/<!-- TMPL_VAR name="isbn" -->.01.THUMBZZZ.jpg" alt="Book Cover Image" class="thumbnail" /></a><!-- /TMPL_IF --> <!-- /TMPL_IF --><!-- TMPL_UNLESS NAME="noitemlinks" --><a href="/cgi-bin/koha/opac-detail.pl?bib=<!-- TMPL_VAR NAME="biblionumber" -->"><!-- TMPL_VAR NAME="title" escape="html" --></a><!-- TMPL_ELSE --><strong><!-- TMPL_VAR NAME="title" escape="html" --></strong><!-- /TMPL_UNLESS --><span class="item-details">
 	<!-- TMPL_VAR NAME="author" --></span> (<!-- TMPL_VAR NAME="barcode" -->)</td>
 	<td><!-- TMPL_VAR NAME="itemcallnumber" DEFAULT="&nbsp;" --></td>
-	<!-- TMPL_IF NAME="overdue" --><td class="overdue"><!-- TMPL_VAR NAME="date_due" --></td><!-- TMPL_ELSE --><td><!-- TMPL_VAR NAME="date_due" --></td><!-- /TMPL_IF -->
+	<!-- TMPL_IF NAME="overdue" --><td class="overdue"><!-- TMPL_VAR NAME="date_due_display" --></td><!-- TMPL_ELSE --><td><!-- TMPL_VAR NAME="date_due_display" --></td><!-- /TMPL_IF -->
 	<td>
     <form action="/cgi-bin/koha/sco/sco-main.pl" method="post">
     <input type="hidden" name="op" value="checkout" />
@@ -161,6 +184,7 @@ Sorry, This Self-Checkout Station has lost authentication.  Please contact the a
 	</td>
 	<!-- TMPL_UNLESS NAME="nofines" --><td><!-- TMPL_IF NAME="charges" -->Yes<!-- TMPL_ELSE -->No<!-- /TMPL_IF --></td><!-- /TMPL_UNLESS --></tr>
 	<!-- /TMPL_LOOP -->
+    </tbody>
 
 	</table>
 	<!-- TMPL_ELSE -->

opac/sco/sco-main.pl

@@ -21,6 +21,7 @@ use CGI;
 
 use C4::Auth;
 use C4::Koha;
+use C4::Dates qw/format_date/;
 use C4::Circulation;
 use C4::Reserves;
 use C4::Output;
@@ -146,6 +147,7 @@ if ($borrower->{cardnumber}) {
     my @issues;
     my ($issueslist) = GetPendingIssues( $borrower->{'borrowernumber'} );
     foreach my $it (@$issueslist) {
+        $it->{date_due_display} = format_date($it->{date_due});
         my ($renewokay, $renewerror) = CanBookBeIssued($borrower, $it->{'barcode'},'','');
         $it->{'norenew'} = 1 if $renewokay->{'NO_MORE_RENEWALS'};
         push @issues, $it;
@@ -164,6 +166,7 @@ if ($borrower->{cardnumber}) {
     $template->param(
         inputfocus => $inputfocus,
 		nofines => 1,
+        "dateformat_" . C4::Context->preference('dateformat') => 1,
     );
     if (C4::Context->preference('ShowPatronImageInWebBasedSelfCheck')) {
         my ($image, $dberror) = GetPatronImage($borrower->{cardnumber});