From 8c3b690679f3cc71a5ab12a930755b9768d8bf85 Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
Date: Thu, 6 Aug 2020 12:41:23 +0000
Subject: [PATCH] Bug 16112: (follow-up) Form style improvements, clear date

This follow-up makes some markup and style improvements in order to make
the renew form more consistent with similar forms like checkout and
check-in.

It also adds a "Clear" button for the datepicker field, matching similar
date inputs.

To test, apply the patch and go to Circulation -> Renew.

 - With or without the  SpecifyDueDate system preference enabled the
   form should look correct.
 - With the SpecifyDueDate preference enabled you should see the date
   form below the barcode input field.
 - Select a date and test that the "Clear" button works to clear it.
 - Compare to the check-in page to confirm that they look consistent
   with each other.

Signed-off-by: Marco Abi-Ramia <marco.abi-ramia@inlibro.com>
---
 .../prog/en/modules/circ/renew.tt             | 31 +++++++++++++------
 1 file changed, 22 insertions(+), 9 deletions(-)

diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/circ/renew.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/circ/renew.tt
index d9d335e828..aa13327999 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/circ/renew.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/circ/renew.tt
@@ -167,21 +167,29 @@
                 <form method="post" action="/cgi-bin/koha/circ/renew.pl" autocomplete="off" >
 
                     <fieldset>
-                        <legend>Renew</legend>
+                        <h2>Renew</h2>
 
-                        [% IF Koha.Preference('SpecifyDueDate') %]
-                            <label for="hard_due_date">Hard due date [% INCLUDE 'date-format.inc' %]:</label>
-                            <input type="text" size="20" id="hard_due_date" name="hard_due_date" value="[% hard_due_date | $KohaDates with_hours => 1 %]" />
-                            <br/>
-                        [% END %]
+                        <div>
+                            <label for="barcode" class="hint">Enter item barcode: </label>
+                        </div>
 
-                        <label for="barcode">Enter item barcode: </label>
+                        <input name="barcode" id="barcode" size="14" class="barcode focus" type="text" />
 
-                        <input name="barcode" id="barcode" size="14" class="focus" type="text" />
+                        <button type="submit" class="btn btn-default">Submit</button>
+
+                        [% IF Koha.Preference('SpecifyDueDate') %]
+                            <div class="circ-settings show">
+                                <div class="date-select" id="renew_date_override_fields">
+                                    <div><label for="hard_due_date" class="hint">Specify due date [% INCLUDE 'date-format.inc' %]:</label></div>
+                                    <input type="text" size="20" id="hard_due_date" name="hard_due_date" value="[% hard_due_date | $KohaDates with_hours => 1 %]" />
+                                    <button type="button" class="action btn btn-default btn-xs" id="cleardate" name="cleardate">Clear</button>
+                                </div> <!-- /.date-select -->
+                            </div>
+                        [% END %]
 
-                        <input type="submit" class="submit" value="Submit" />
                     </fieldset>
 
+
                 </form>
             [% END %]
 
@@ -233,6 +241,11 @@
                 }).on("change", function(e, value) {
                     if ( ! is_valid_date( $(this).val() ) ) {$(this).val("");}
                 });
+                $("#cleardate").on("click",function(e){
+                    e.preventDefault();
+                    this.form.hard_due_date.value = '';
+                    this.form.barcode.focus();
+                });
             [% END %]
 
         });
-- 
2.17.1