Bug 15793 - UX of circulation patron search with long lists of returned borrowers

Okay how about this:
This patch has no floating toolbar or names styled as links. I've removed the radio buttons. The row is clickable and will redirect you to the user's page.

EDIT: This patch makes the cursor a pointer when hovering over the patrons. The row will also be highlighted on hover to make it even clearer.
EDIT2: Removes unnecessary 'Select' button

To test:
1) Put in a patron search that will bring back a long list of patrons (ie the letter 'a')
2) Select a patron by clicking anywhere on the row - confirm you are taken to the correct patron page

Sponsored-by: Catalyst IT
Signed-off-by: Marc Véron <veron@veron.ch>
Signed-off-by: Liz Rea <liz@catalyst.net.nz>
Submit button removed, patron selection on this screen much better for long lists (and short ones as well.)

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Signed-off-by: Brendan A Gallagher <brendan@bywatersolutions.com>

diff --git a/koha-tmpl/intranet-tmpl/prog/en/css/staff-global.css b/koha-tmpl/intranet-tmpl/prog/en/css/staff-global.css
index 58cb902..a638129 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/en/css/staff-global.css
+++ b/koha-tmpl/intranet-tmpl/prog/en/css/staff-global.css
@@ -282,6 +282,14 @@ tr.odd.onissue td {
        background-color: #FFFFE1;
 }
 
+tr.clickable {
+        cursor: pointer;
+}
+
+.table_borrowers tr:hover td {
+        background-color: #ffff99;
+}
+
 tfoot td {
        background-color : #f3f3f3;
        font-weight : bold;

diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/circ/circulation.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/circ/circulation.tt
index 0efe49b..aa7bbdb 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/circ/circulation.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/circ/circulation.tt
@@ -89,6 +89,10 @@ $(document).ready(function() {
         }
     });
 
+    $(".clickable").click(function() {
+        window.document.location = $(this).data('url');
+    });
+
     [% IF !( CircAutoPrintQuickSlip == 'clear' ) %]
         // listen submit to trigger qslip on empty checkout
         $('#mainform').bind('submit',function() {
@@ -568,10 +572,9 @@ No patron matched <span class="ex">[% message %]</span>
     <input type="hidden" name="duedatespec" value="[% duedatespec %]" />
     <input type="hidden" name="stickyduedate" value="[% stickyduedate %]" />
 
-    <table id="table_borrowers">
+    <table id="table_borrowers" class="table_borrowers">
         <thead>
             <tr>
-                <th></th>
                 <th>Name</th>
                 <th>Cardnumber</th>
                 <th>Category</th>
@@ -581,8 +584,7 @@ No patron matched <span class="ex">[% message %]</span>
         </thead>
         <tbody>
             [% FOREACH borrower IN borrowers %]
-            <tr>
-                <td><input type="radio" name="borrowernumber" value="[% borrower.borrowernumber %]" /></td>
+            <tr class="clickable" data-url="/cgi-bin/koha/circ/circulation.pl?borrowernumber=[% borrower.borrowernumber %]">
                 <td>[% borrower.surname %], [% borrower.firstname %]</td>
                 <td>[% borrower.cardnumber %]</td>
                 <td>[% borrower.categorycode %]</td>
@@ -592,7 +594,6 @@ No patron matched <span class="ex">[% message %]</span>
             [% END %]
         </tbody>
     </table>
-    <fieldset class="action"><input type="submit" value="Select" /></fieldset>
 </fieldset>
 </form>
 [% ELSE %]