From a33fdb691e6788209a32e9b58391071c5078253d Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
Date: Fri, 14 Sep 2018 22:29:38 +0000
Subject: [PATCH] Bug 20959: Style checkin form more like the checkout form,
 with collapsed settings panel

This patch modifies the structure of the checkin form so that settings
(Specify return date, book drop mode, forgive overdue charges) are in a
collapsed panel when inactive. The style of the barcode field and the
mode notification messages has been changed to reduce the vertical
motion of the form when selecting options.

Some class names have been changed in circulation.tt and circulation.js
to make them appropriate for use on both forms.

To test, apply the patch and clear your browser cache if necessary.

 - View the checkin page. The "checkin settings" panel should be
   collapsed by default.
 - Confirm that the settings panel collapses and expands as it should.
 - Confirm that selecting "Forgive overdue charges" or "Book drop mode"
   trigger the display of the correct message and that the style of the
   barcode field is changed.
 - Confirm that after submitting a barcode for check-in, the
   settings panel stays open and your selected settings are still
   selected.

Signed-off-by: Josef Moravec <josef.moravec@gmail.com>
---
 .../intranet-tmpl/prog/css/src/staff-global.scss   |  28 +++-
 .../prog/en/modules/circ/circulation.tt            |  16 +-
 .../intranet-tmpl/prog/en/modules/circ/returns.tt  | 178 +++++++++++----------
 .../intranet-tmpl/prog/js/pages/circulation.js     |  28 ++--
 4 files changed, 134 insertions(+), 116 deletions(-)

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 2fc5b84..64ee5a9 100644
--- a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
+++ b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
@@ -483,11 +483,6 @@ input {
         }
     }
 
-    &.alert {
-        background-color: #FFFF99;
-        border-color: #900;
-    }
-
     &.submit {
         @include default-button;
 
@@ -506,6 +501,11 @@ input {
     }
 }
 
+.input-warning {
+    background-color: #FFFF99;
+    border-color: #900;
+}
+
 label,
 .label {
     color: #000;
@@ -1909,7 +1909,7 @@ i {
     }
 }
 
-.checkout-setting {
+.circ-setting {
     font-size: 85%;
     padding-top: .3em;
 
@@ -1923,7 +1923,7 @@ i {
     }
 }
 
-.checkout-settings {
+.circ-settings {
     background-color: #F4F8F9;
     border-radius: 0;
     border-top: 2px solid #B9D8D9;
@@ -1934,10 +1934,22 @@ i {
     padding: 1em 1em 0;
 }
 
-#show-checkout-settings {
+#show-circ-settings {
     margin-top: .5em;
 }
 
+.checkin-active-setting {
+    background-color: #FFC;
+    border-radius: 3px;
+    margin: .5em;
+    padding: .5em;
+    box-shadow: 1px 1px 2px 0 rgba(102, 102, 102, .5);
+}
+
+.form-control-group {
+    white-space: nowrap;
+}
+
 .blocker {
     color: #990000;
 }
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 dbf3e2d..7e8a3a8 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/circ/circulation.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/circ/circulation.tt
@@ -527,15 +527,15 @@ No patron matched <span class="ex">[% message | html %]</span>
     [% END %]
     <button type="submit" class="btn btn-default">Check out</button>
 
-    <div id="show-checkout-settings">
-        <a href="#"><i class="fa fa-caret-right checkout-settings-icon"></i> Checkout settings</a>
+    <div id="show-circ-settings">
+        <a href="#"><i class="fa fa-caret-right circ-settings-icon"></i> Checkout settings</a>
     </div>
 
-    <div class="checkout-settings">
+    <div class="circ-settings">
 
         [% UNLESS ( noissues && Koha.Preference('OnSiteCheckoutsForce') ) %]
             [% IF ( SpecifyDueDate ) %]
-                <div id="specify-due-date" class="checkout-setting">
+                <div id="specify-due-date" class="circ-setting">
                     <div class="hint">Specify due date [% INCLUDE 'date-format.inc' %]: </div>
                     [% IF ( duedatespec ) %]
                         <input type="text" size="13" id="duedatespec" name="duedatespec" value="[% duedatespec | html %]" />
@@ -554,7 +554,7 @@ No patron matched <span class="ex">[% message | html %]</span>
         [% END %]
 
         [% UNLESS ( noissues ) %]
-            <div id="set-automatic-renewal" class="checkout-setting">
+            <div id="set-automatic-renewal" class="circ-setting">
                 [% IF NEEDSCONFIRMATION %]
                     <input type="checkbox" name="auto_renew" id="auto_renew" value="auto_renew" disabled="disabled" />
                 [% ELSE %]
@@ -564,7 +564,7 @@ No patron matched <span class="ex">[% message | html %]</span>
                 <label for="auto_renew">Automatic renewal</label>
             </div>
             [% IF Koha.Preference('decreaseLoanHighHolds') %]
-                <div id="set_high_holds_overrride" class="checkout-setting">
+                <div id="set_high_holds_overrride" class="circ-setting">
                     [% IF NEEDSCONFIRMATION %]
                         [% IF override_high_holds %]
                             <input type="checkbox" name="override_high_holds" id="override_high_holds" value="1" disabled="disabled" checked="checked"/>
@@ -584,7 +584,7 @@ No patron matched <span class="ex">[% message | html %]</span>
         [% END %]
 
         [% IF Koha.Preference('OnSiteCheckouts') %]
-            <div id="onsite_checkout-select" class="checkout-setting">
+            <div id="onsite_checkout-select" class="circ-setting">
                 [% IF noissues %]
                     <div class="onsite-checkout-only">
                         <input type="checkbox" id="onsite_checkout" name="onsite_checkout_forced" checked="checked" disabled="disabled" /> <label for="onsite_checkout">On-site checkouts only. Automatic due date: </label>
@@ -597,7 +597,7 @@ No patron matched <span class="ex">[% message | html %]</span>
             </div>
         [% END %]
 
-    </div> <!-- /.checkout-settings -->
+    </div> <!-- /.circ-settings -->
 
           <input type="hidden" name="borrowernumber" id="borrowernumber" value="[% patron.borrowernumber | html %]" />
           <input type="hidden" name="branch" value="[% branch | html %]" />
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/circ/returns.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/circ/returns.tt
index 74b24f6..127f555 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/circ/returns.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/circ/returns.tt
@@ -594,30 +594,45 @@
         </div>
 [% END%]
 
-    <div id="exemptfines" class="dialog message" style="display:none;">
-        <p>Fines for returned items are forgiven.</p>
-    </div>
-    <div id="forgivemanualholdsexpire-alert" class="dialog message" style="display:none;">
-        <p>Fines are not charged for manually cancelled holds.</p>
-    </div>
-    <div id="dropboxmode" class="dialog message" style="display:none;">
-        <p>Book drop mode.  (Effective checkin date is [% dropboxdate | html %] ).</p>
-    </div>
 </div>
-<div class="yui-g">
-    <form id="checkin-form" method="post" action="/cgi-bin/koha/circ/returns.pl" autocomplete="off" >
-    <div class="yui-u first">
-            <fieldset>
-	<legend>Check in</legend>
-            <label for="barcode">Enter item barcode: </label>
-			[% IF ( exemptfine ) %]
-			<input name="barcode" id="barcode" size="14" class="focus alert"/>
-			[% ELSIF ( dropboxmode ) %]
-			<input name="barcode" id="barcode" size="14" class="focus alert"/>
-			[% ELSE %]
-			<input name="barcode" id="barcode" size="14" class="focus"/>
-			[% END %]
-            <input type="submit" class="submit" value="Submit" />
+
+<form id="checkin-form" method="post" action="/cgi-bin/koha/circ/returns.pl" autocomplete="off">
+    <fieldset id="circ_returns_checkin">
+        <h3>Check in</h3>
+        <div class="row">
+            <div class="col-sm-6">
+                <div class="hint">Enter item barcode:</div>
+                [% IF ( exemptfine ) %]
+                    <input name="barcode" id="barcode" size="14" class="barcode focus input-warning" />
+                [% ELSIF ( dropboxmode ) %]
+                    <input name="barcode" id="barcode" size="14" class="barcode focus input-warning" />
+                [% ELSE %]
+                    <input name="barcode" id="barcode" size="14" class="barcode focus" />
+                [% END %]
+                <button type="submit" class="btn btn-default">Check in</button>
+                [% FOREACH inputloo IN inputloop %]
+                    <input type="hidden" name="ri-[% inputloo.counter %]" value="[% inputloo.barcode %]" />
+                    <input type="hidden" name="dd-[% inputloo.counter %]" value="[% inputloo.duedate %]" />
+                    <input type="hidden" name="bn-[% inputloo.counter %]" value="[% inputloo.borrowernumber %]" />
+                [% END %]
+                <div id="show-circ-settings">
+                    <a href="#"><i class="fa circ-settings-icon fa-caret-down"></i> Checkin settings</a>
+                </div>
+            </div>
+            <div class="col-sm-6">
+                <div id="exemptfines" class="checkin-active-setting" style="display:none;">
+                    <p><i class="fa fa-check"></i> Fines for returned items are forgiven.</p>
+                </div>
+                <div id="forgivemanualholdsexpire-alert" class="checkin-active-setting" style="display:none;">
+                    <p><i class="fa fa-check"></i> Fines are not charged for manually cancelled holds.</p>
+                </div>
+                <div id="dropboxmode" class="checkin-active-setting" style="display:none;">
+                    <p><i class="fa fa-check"></i> Book drop mode.  (Effective checkin date is [% dropboxdate %] ).</p>
+                </div>
+            </div>
+        </div>
+
+            <div class="circ-settings">
 
             [% IF Koha.Preference('SpecifyReturnDate') %]
                 <div class="date-select" id="return_date_override_fields">
@@ -631,54 +646,43 @@
                     [% ELSE %]
                         <input type="checkbox" id="return_date_override_remember" onclick="this.form.barcode.focus();" name="return_date_override_remember" />
                     [% END %]
-
-                    <input type="button" class="action" id="cleardate" value="Clear" name="cleardate" onclick="this.checked = false; this.form.return_date_override.value = ''; this.form.return_date_override_remember.checked = false; this.form.barcode.focus(); return false;" />
-            </div>
-        [% END %]
-            [% FOREACH inputloo IN inputloop %]
-                <input type="hidden" name="ri-[% inputloo.counter | html %]" value="[% inputloo.barcode | html %]" />
-                <input type="hidden" name="dd-[% inputloo.counter | html %]" value="[% inputloo.duedate | html %]" />
-                <input type="hidden" name="bn-[% inputloo.counter | html %]" value="[% inputloo.borrowernumber | html %]" />
+                    <button type="button" class="action btn btn-default btn-xs" id="cleardate" name="cleardate" onclick="this.checked = false; this.form.return_date_override.value = ''; this.form.return_date_override_remember.checked = false; this.form.barcode.focus(); return false;">Clear</button>
+                </div>
             [% END %]
 
-
-            </fieldset>
-            </div>
-            <div class="yui-u">
-            <fieldset id="checkin_options">
-                <legend>Options</legend>
-                    [% IF ( CAN_user_updatecharges_writeoff && overduecharges ) %]
-                    <p>
-                        [% IF ( exemptfine ) %]
+            [% IF ( CAN_user_updatecharges_writeoff && overduecharges ) %]
+                <div id="forgive-overdue-fines" class="circ-setting">
+                    [% IF ( exemptfine ) %]
                         <input type="checkbox" id="exemptcheck" name="exemptfine" value="exemptfine" checked="checked" />
                         [% ELSE %]
                         <input type="checkbox" id="exemptcheck" name="exemptfine" value="exemptfine" />
-                        [% END %]
-                        <label for="exemptcheck">Forgive overdue charges</label>
-                    </p>
-                    [% END %] <!-- overduecharges -->
-                    <p>
-                        [% IF ( dropboxmode ) %]
-                        <input type="checkbox" id="dropboxcheck" name="dropboxmode" value="dropboxmode" checked="checked" />
-                        [% ELSE %]
-                        <input type="checkbox" id="dropboxcheck" name="dropboxmode" value="dropboxmode" />
-                        [% END %]
-                        <label for="dropboxcheck">Book drop mode</label>
-                    </p>
-                    [% IF Koha.Preference('ExpireReservesMaxPickUpDelayCharge') %]
-                    <p>
-                        [% IF ( forgivemanualholdsexpire ) %]
+                    [% END %]
+                    <label for="exemptcheck">Forgive overdue charges</label>
+                </div>
+            [% END %]
+            <!-- overduecharges -->
+            <div id="book-drop-mode" class="circ-setting">
+                [% IF ( dropboxmode ) %]
+                    <input type="checkbox" id="dropboxcheck" name="dropboxmode" value="dropboxmode" checked="checked" />
+                [% ELSE %]
+                    <input type="checkbox" id="dropboxcheck" name="dropboxmode" value="dropboxmode" />
+                [% END %]
+                <label for="dropboxcheck">Book drop mode</label>
+            </div>
+            [% IF Koha.Preference('ExpireReservesMaxPickUpDelayCharge') %]
+                <div id="forgive-manual-hold-fees" class="circ-setting">
+                    [% IF ( forgivemanualholdsexpire ) %]
                         <input type="checkbox" id="forgivemanualholdsexpire" name="forgivemanualholdsexpire" value="forgivemanualholdsexpire" checked="checked" />
-                        [% ELSE %]
+                    [% ELSE %]
                         <input type="checkbox" id="forgivemanualholdsexpire" name="forgivemanualholdsexpire" value="forgivemanualholdsexpire" />
-                        [% END %]
-                        <label for="forgivemanualholdsexpire">Forgive fees for manually expired holds</label>
-                    </p>
-                    [% END %] <!-- overduecharges -->
-            </fieldset>
-        </div>
-    </form>
-</div>
+                    [% END %]
+                    <label for="forgivemanualholdsexpire">Forgive fees for manually expired holds</label>
+                </div>
+            [% END %]
+            <!-- overduecharges -->
+        </div> [%# /.circ-settings  %]
+    </fieldset> [%# /#circ_returns_checkin %]
+</form> [%# /#checkin-form  %]
 
 [% IF ( riloop ) %]
     <h2>Checked-in items</h2>
@@ -749,13 +753,28 @@
     [% INCLUDE 'columns_settings.inc' %]
     [% INCLUDE 'calendar.inc' %]
     [% Asset.js("lib/jquery/plugins/jquery-ui-timepicker-addon.min.js") | $raw %]
+    [% Asset.js("js/pages/circulation.js") | $raw %]
     [% INCLUDE 'timepicker.inc' %]
 
-    <script type="text/javascript">
+    <script>
         function Dopop(link) {
             var newin = window.open(link, 'popup', 'width=600,height=400,resizable=1,toolbar=0,scrollbars=1,top');
             $("#barcode").focus();
         }
+
+        function check_valid_return_date() {
+            if ( $("#return_date_override").val() ) {
+                var datetime = DateTime_from_syspref( $("#return_date_override").val() );
+                var now = new Date();
+                if ( !datetime || datetime > now ) {
+                    alert("Invalid return date/time!");
+                    $("#return_date_override").val("")
+                    return false;
+                }
+            }
+            return true;
+        }
+
         $(document).ready(function () {
             $(".modal").modal({ backdrop: 'static' }).on('shown', function() {
                 $("#barcode").prop("disabled", true);
@@ -805,32 +824,19 @@
                 }
             });
 
-            function check_valid_return_date() {
-                if ( $("#return_date_override").val() ) {
-                    var datetime = DateTime_from_syspref( $("#return_date_override").val() );
-                    var now = new Date();
-                    if ( !datetime || datetime > now ) {
-                        alert("Invalid return date/time!");
-                        $("#return_date_override").val("")
-                        return false;
-                    }
-                }
-                return true;
-            }
-
             $("#exemptcheck").change(function () {
                 if (this.checked == true) {
-                    $("#barcode").addClass("alert");
+                    $("#barcode").addClass("input-warning");
                     $("#exemptfines").show();
                 } else {
-                    $("#barcode").removeClass("alert");
+                    $("#barcode").removeClass("input-warning");
                     $("#exemptfines").hide();
                 }
                 $("#barcode").focus();
             });
             $("#dropboxcheck").change(function () {
                 if (this.checked == true) {
-                    $("#barcode").addClass("alert");
+                    $("#barcode").addClass("input-warning");
                     $("#dropboxmode").show();
 
                     $("#return_date_override_fields :input").prop('disabled', true);
@@ -846,10 +852,10 @@
             });
             $("#forgivemanualholdsexpire").change(function () {
                 if (this.checked == true) {
-                    $("#barcode").addClass("alert");
+                    $("#barcode").addClass("input-warning");
                     $("#forgivemanualholdsexpire-alert").show();
                 } else {
-                    $("#barcode").removeClass("alert");
+                    $("#barcode").removeClass("input-warning");
                     $("#forgivemanualholdsexpire-alert").hide();
                 }
                 $("#barcode").focus();
@@ -858,13 +864,13 @@
             [% IF(overduecharges) %]
                 $("#barcode").focus(function () {
                     if (($("#exemptcheck").prop("checked") == true) || ($("#dropboxcheck").prop("checked") == true)) {
-                        $("#barcode").addClass("alert");
+                        $("#barcode").addClass("input-warning");
                     } else {
-                        $("#barcode").removeClass("alert");
+                        $("#barcode").removeClass("input-warning");
                     }
                 });
                 $("#barcode").blur(function () {
-                    $("#barcode").removeClass("alert");
+                    $("#barcode").removeClass("input-warning");
                 });
             [% END %]
 
diff --git a/koha-tmpl/intranet-tmpl/prog/js/pages/circulation.js b/koha-tmpl/intranet-tmpl/prog/js/pages/circulation.js
index cd2ca9b..8bfd667 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/pages/circulation.js
+++ b/koha-tmpl/intranet-tmpl/prog/js/pages/circulation.js
@@ -54,26 +54,26 @@ $(document).ready(function() {
         return false;
     });
 
-    var checkout_settings = $(".checkout-settings");
-    var checkout_settings_icon = $(".checkout-settings-icon");
+    var circ_settings = $(".circ-settings");
+    var circ_settings_icon = $(".circ-settings-icon");
 
-    // If any checkboxes in the checkout settings are selected, show the settings by default
-    if ( $(".checkout-settings input:checked,#duedatespec[value!='']").length ) {
-        checkout_settings.show();
-        checkout_settings_icon.removeClass("fa-caret-right").addClass("fa-caret-down");
+    // If any checkboxes in the circ settings are selected, show the settings by default
+    if ( $(".circ-settings input:checked,#duedatespec[value!='']").length ) {
+        circ_settings.show();
+        circ_settings_icon.removeClass("fa-caret-right").addClass("fa-caret-down");
     } else {
-        checkout_settings.hide();
-        checkout_settings_icon.removeClass("fa-caret-down").addClass("fa-caret-right");
+        circ_settings.hide();
+        circ_settings_icon.removeClass("fa-caret-down").addClass("fa-caret-right");
     }
 
-    $("#show-checkout-settings a").on("click",function(){
-        if( checkout_settings.is(":hidden")){
-            checkout_settings.show();
-            checkout_settings_icon.removeClass("fa-caret-right").addClass("fa-caret-down");
+    $("#show-circ-settings a").on("click",function(){
+        if( circ_settings.is(":hidden")){
+            circ_settings.show();
+            circ_settings_icon.removeClass("fa-caret-right").addClass("fa-caret-down");
         } else {
             $("#barcode").focus();
-            checkout_settings.hide();
-            checkout_settings_icon.removeClass("fa-caret-down").addClass("fa-caret-right");
+            circ_settings.hide();
+            circ_settings_icon.removeClass("fa-caret-down").addClass("fa-caret-right");
         }
     });
 
-- 
2.1.4