From ecdb21ad6d7d4a9031f11ec14cd4fe76dbd628e5 Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
Date: Thu, 29 Nov 2018 19:56:43 +0000
Subject: [PATCH] Bug 21918: Update buttons on fines to match newer buttons

This patch makes a number of changes to the "Pay fines" template, the
goal of which is to make the interface look better in general. Changes
include:

 - Styling the "Pay" and "Write off" buttons as Bootstrap buttons.
 - Adding DataTables sorting, searching, and filtering.
 - Adding a column showing the fine date.
 - Hide the "Add note" input, add a link to show it.
 - Add some missing "preventDefault" methods from events.
 - Add "Writeoff selected" to the buttons which are disabled when there
   is no checkbox selection.
 - The <tfoot> tag is now expected by the HTML validator to be after
   <tbody>, so this section has been moved to suppress validator errors.

To test, apply the patch and locate a patron who has multiple
outstanding fines.

 - Go to Fines -> Pay fines
 - Confirm that the table of fines is shown as a DataTable, with sorting
   on columns which have data.
 - Test columns settings in Administration -> Columns settings.
 - Confirm that fine dates are shown, and that sorting by this column
   works correctly.
 - Click an "Add note" link to show a note input field. Focus should be
   in the newly-displayed input.
   - Confirm that notes are still saved correctly when paying or writing
     off single or multiple fines.
   - Confirm that when the "add note" input is hidden, its contents are
     erased.
 - Uncheck all checkboxes by clicking the "Clear all" link at the top.
   The "Pay selected" and "Write off selected" buttons should become
   disabled.
   - Checking any checkbox should re-enable those buttons.
 - Test that the relocated "Apply" button (for outstanding credits)
   still works as expected.

Signed-off-by: Jose-Mario Monteiro-Santos <jose-mario.monteiro-santos@inLibro.com>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
---
 admin/columns_settings.yml                         |  23 +++++
 .../intranet-tmpl/prog/css/src/staff-global.scss   |   1 +
 .../intranet-tmpl/prog/en/modules/members/pay.tt   | 112 ++++++++++++++-------
 3 files changed, 100 insertions(+), 36 deletions(-)

diff --git a/admin/columns_settings.yml b/admin/columns_settings.yml
index c616851e46..9293c7cfa1 100644
--- a/admin/columns_settings.yml
+++ b/admin/columns_settings.yml
@@ -319,6 +319,29 @@ modules:
           cannot_be_toggled: 1
           cannot_be_modified: 1
 
+    pay:
+      pay-fines-table:
+        -
+          columnname: checkbox
+          cannot_be_toggled: 1
+          cannot_be_modified: 1
+        -
+          columnname: actions
+          cannot_be_toggled: 1
+          cannot_be_modified: 1
+        -
+          columnname: description
+        -
+          columnname: date
+        -
+          columnname: note
+        -
+          columnname: account_type
+        -
+          columnname: amount
+        -
+          columnname: amountoutstanding
+
     member:
       memberresultst:
         -
diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
index ebe2ca7c9f..c3820b3901 100644
--- a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
+++ b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
@@ -843,6 +843,7 @@ tfoot {
     td {
         background-color: #F3F3F3;
         font-weight: bold;
+        vertical-align: middle;
     }
 }
 
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/members/pay.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/members/pay.tt
index b58c4e66e3..ae3c50869f 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/members/pay.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/members/pay.tt
@@ -4,10 +4,13 @@
 [% USE AuthorisedValues %]
 [% USE Branches %]
 [% USE Price %]
+[% USE ColumnsSettings %]
+[% USE KohaDates %]
 [% SET footerjs = 1 %]
 [% INCLUDE 'doc-head-open.inc' %]
 <title>Koha &rsaquo; Patrons &rsaquo; Make a payment for  [% patron.firstname | html %] [% patron.surname | html %]</title>
 [% INCLUDE 'doc-head-close.inc' %]
+[% Asset.css("css/datatables.css") | $raw %]
 </head>
 
 <body id="pat_pay" class="pat">
@@ -40,25 +43,17 @@
 <table id="finest">
 <thead>
 <tr>
-    <th>&nbsp;</th>
-    <th>Fines &amp; charges</th>
+    <th class="NoSort">&nbsp;</th>
+    <th class="NoSort">Actions</th>
     <th>Description</th>
-    <th>Payment note</th>
+    <th class="title-string">Date</th>
+    <th class="NoSort">Payment note</th>
     <th>Account type</th>
     <th>Amount</th>
     <th>Amount outstanding</th>
 </tr>
 </thead>
-<tfoot>
-<tr>
-    <td class="total" colspan="6">Total due:</td>
-[% IF outstanding_credits.total_outstanding < 0 %]
-    <td style="text-align: right;">[% total + outstanding_credits.total_outstanding | $Price %]</td>
-[% ELSE %]
-    <td style="text-align: right;">[% total | $Price %]</td>
-[% END %]
-</tr>
-</tfoot>
+
 <tbody>
 [% FOREACH line IN accounts %]
 <tr>
@@ -67,10 +62,12 @@
         <input class="cb" type="checkbox" checked="checked" name="incl_par_[% line.accountlines_id | html %]" />
     [% END %]
     </td>
-    <td>
+    <td class="actions">
     [% IF ( line.amountoutstanding > 0 ) %]
-        <input type="submit" name="pay_indiv_[% line.accountlines_id | html %]" value="Pay" />
-        [% IF CAN_user_updatecharges_writeoff %]<input type="submit" name="wo_indiv_[% line.accountlines_id | html %]" value="Write off" />[% END %]
+        <button type="submit" class="btn btn-default btn-xs" name="pay_indiv_[% line.accountlines_id | html %]" value="Pay">Pay</button>
+        [% IF CAN_user_updatecharges_writeoff %]
+            <button type="submit" class="btn btn-default btn-xs" name="wo_indiv_[% line.accountlines_id | html %]" value="Write off">Write off</button>
+        [% END %]
     [% END %]
     <input type="hidden" name="itemnumber[% line.accountlines_id | html %]" value="[% line.itemnumber | html %]" />
     <input type="hidden" name="description[% line.accountlines_id | html %]" value="[% line.description | html %]" />
@@ -107,26 +104,43 @@
         [%- IF line.description %], [% line.description | html %][% END %]
         [% IF line.title %]([% line.title | html %])[% END %]
     </td>
-    <td><input type="text" name="payment_note_[% line.accountlines_id | html %]" /></td>
+    <td>
+        <span title="[% line.date | html %]">[% line.date | $KohaDates %]</span>
+    </td>
+    <td class="actions">
+        <a href="#" class="add-note" data-accountlines_id="[% line.accountlines_id | html %]"><i class="fa fa-plus"></i> Add note</a>
+        <span class="payment_note" id="payment_note_[% line.accountlines_id | html %]" style="display:none"><input type="text" size="10" name="payment_note_[% line.accountlines_id | html %]" value="" /> <a href="#" class="cancel-note"><i class="fa fa-remove"></i></a></span>
+    </td>
     <td>[% line.accounttype | html %]</td>
     <td class="debit" style="text-align: right;">[% line.amount | $Price %]</td>
     <td class="debit" style="text-align: right;">[% line.amountoutstanding | $Price %]</td>
 </tr>
 [% END %]
-[% IF outstanding_credits.total_outstanding < 0 %]
-<tr>
-    <td class="total" colspan="6">Outstanding credits could be applied <input type="submit" id="apply_credits" name="apply_credits"  value="Apply credits" class="submit" /></td>
-    <td class="credit" style="text-align: right;">[% outstanding_credits.total_outstanding | $Price %]</td>
-</tr>
-[% END %]
-[% IF ( account_grp.total ) %]
-<tr>
-
-    <td class="total" colspan="8" style="text-align: right;">Sub total:</td>
-    <td style="text-align: right;">[% account_grp.total | $Price %]</td>
-</tr>
-[% END %]
 </tbody>
+
+<tfoot>
+    [% IF outstanding_credits.total_outstanding < 0 %]
+        <tr>
+            <td class="total" colspan="7">Outstanding credits could be applied: </td>
+            <td class="credit" style="text-align: right;"><button type="submit" id="apply_credits" name="apply_credits" value="apply_credits" class="btn btn-default btn-sm">Apply <strong class="credit">[% outstanding_credits.total_outstanding | $Price %]</strong></button></td>
+        </tr>
+    [% END %]
+    [% IF ( account_grp.total ) %]
+        <tr>
+            <td class="total" colspan="7" style="text-align: right;">Sub total:</td>
+            <td style="text-align: right;">[% account_grp.total | $Price %]</td>
+        </tr>
+    [% END %]
+    <tr>
+        <td class="total" colspan="7">Total due:</td>
+        [% IF outstanding_credits.total_outstanding < 0 %]
+            <td style="text-align: right;">[% total + outstanding_credits.total_outstanding | $Price %]</td>
+        [% ELSE %]
+            <td style="text-align: right;">[% total | $Price %]</td>
+        [% END %]
+    </tr>
+</tfoot>
+
 </table>
 <fieldset class="action">
 <input type="submit" id="paycollect" name="paycollect"  value="Pay amount" class="submit" />
@@ -152,14 +166,16 @@
     [% INCLUDE 'str/members-menu.inc' %]
     [% Asset.js("js/members-menu.js") | $raw %]
     [% Asset.js("lib/jquery/plugins/jquery.checkboxes.min.js") | $raw %]
-    <script type= "text/javascript">
+    [% INCLUDE 'datatables.inc' %]
+    [% INCLUDE 'columns_settings.inc' %]
+    <script>
         function enableCheckboxActions(){
             // Enable/disable controls if checkboxes are checked
             var checkedBoxes = $("input.cb:checked");
             if ($(checkedBoxes).size()) {
-              $("#payselected").prop("disabled",false);
+              $("#payselected, #writeoff-selected").prop("disabled",false);
             } else {
-              $("#payselected").prop("disabled",true);
+              $("#payselected, #writeoff-selected").prop("disabled",true);
             }
         }
         $(document).ready(function(){
@@ -171,12 +187,14 @@
                         event.preventDefault();
                     }
             });
-            $('#CheckAll').click(function(){
+            $('#CheckAll').click(function(e){
+                e.preventDefault();
                 $("#finest").checkCheckboxes();
                 enableCheckboxActions();
                 return false;
             });
-            $('#CheckNone').click(function(){
+            $('#CheckNone').click(function(e){
+                e.preventDefault();
                 $("#finest").unCheckCheckboxes();
                 enableCheckboxActions();
                 return false;
@@ -185,8 +203,30 @@
                 enableCheckboxActions();
             });
             enableCheckboxActions();
-        });
+            $(".add-note").on("click", function(e){
+                e.preventDefault();
+                $(this).hide();
+                var accountlines_id = $(this).data("accountlines_id");
+                $("#payment_note_" + accountlines_id ).show().find("input").focus();
+            });
+            $(".cancel-note").on("click", function(e){
+                e.preventDefault();
+                $(".payment_note").hide().find("input").val("");
+                $(".add-note").show();
+            });
 
+            var columns_settings = [% ColumnsSettings.GetColumns('members', 'pay', 'pay-fines-table', 'json') | $raw %];
+            KohaTable("finest", {
+                "columnDefs": [
+                    { "bSortable": false, "bSearchable": false, 'aTargets': [ 'NoSort' ] },
+                    { "sType": "anti-the", "aTargets" : [ "anti-the" ] },
+                    { "sType": "title-string", "aTargets" : [ "title-string" ] }
+                ],
+                "paging": false,
+                'sorting': [[ 3, "asc" ]],
+                "autoWidth": false
+            }, columns_settings );
+        });
     </script>
 [% END %]
 
-- 
2.11.0