Bug 20959: Style checkin form more like the checkout form, with collapsed settings...

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 rebuild the staff client CSS
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client).
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.
 - Confirm that specifying a due date and selecting "remember" shows
   a new message with the selected date.
   - Confirm that unchecking "remember" hides the message.
   - Confirm that date settings are remembered and the correct message
     displayed (or not) during check-in.
 - Test with CircSidebar enabled and disabled.

Signed-off-by: Arthur Bousquet <arthur.bousquet@inlibro.com>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>

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 e188f00..1eeb844 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
+++ b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
@@ -490,11 +490,6 @@ input {
         }
     }
 
-    &.alert {
-        background-color: #FFFF99;
-        border-color: #900;
-    }
-
     &.hasDatepicker {
         background-image: url("../img/famfamfam/silk/calendar.png");
         background-position-x: right;
@@ -523,6 +518,11 @@ input {
     }
 }
 
+.input-warning {
+    background-color: #FF9;
+    border-color: #900;
+}
+
 label,
 .label {
     color: #000;
@@ -1981,7 +1981,7 @@ i {
     }
 }
 
-.checkout-setting {
+.circ-setting {
     font-size: 85%;
     padding-top: .3em;
 
@@ -1995,7 +1995,7 @@ i {
     }
 }
 
-.checkout-settings {
+.circ-settings {
     background-color: #F4F8F9;
     border-radius: 0;
     border-top: 2px solid #B9D8D9;
@@ -2006,10 +2006,23 @@ i {
     padding: 1em 1em 0;
 }
 
-#show-checkout-settings {
+#show-circ-settings {
     margin-top: .5em;
 }
 
+.checkin-active-setting {
+    background-color: #FFC;
+    border-radius: 3px;
+    box-shadow: 1px 1px 2px 0 rgba(102, 102, 102, .5);
+    margin: .5em;
+    padding: .5em;
+}
+
+.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 a502470..04fd964 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/circ/circulation.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/circ/circulation.tt
@@ -546,15 +546,15 @@
 
                                                 <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 %]" />
@@ -573,7 +573,7 @@
                                                     [% 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 %]
@@ -583,7 +583,7 @@
                                                             <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"/>
@@ -603,7 +603,7 @@
                                                     [% 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>
@@ -616,7 +616,7 @@
                                                         </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 1e98107..f1a28a1 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/circ/returns.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/circ/returns.tt
@@ -669,91 +669,116 @@
         </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 | $KohaDates %] ).</p>
-    </div>
-
-<div class="row">
     <form id="checkin-form" method="post" action="/cgi-bin/koha/circ/returns.pl" autocomplete="off" >
-    <div class="col-sm-6">
-            <fieldset>
-            <legend>Check in</legend>
-            <label for="barcode">Enter item barcode: </label>
+        <fieldset id="circ_returns_checkin">
+            <h3>Check in</h3>
+            <div class="row">
+        <div class="col-sm-6">
+            <div class="hint">Enter item barcode:</div>
+                <div class="form-control-group">
+                    [% IF ( exemptfine ) %]
+                        <input name="barcode" id="barcode" size="14" class="focus input-warning" type="text" />
+                    [% 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 | 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 %]" />
+                    [% END %]
+                </div>
+            <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">
             [% IF ( exemptfine ) %]
-            <input name="barcode" id="barcode" size="14" class="focus alert" type="text" />
-            [% ELSIF ( dropboxmode ) %]
-            <input name="barcode" id="barcode" size="14" class="focus alert" type="text" />
+                <div id="exemptfines" class="checkin-active-setting">
             [% ELSE %]
-            <input name="barcode" id="barcode" size="14" class="focus" type="text" />
+                <div id="exemptfines" class="checkin-active-setting" style="display:none;">
             [% END %]
-            <input type="submit" class="submit" value="Submit" />
+                <p><i class="fa fa-check"></i> Fines for returned items are forgiven.</p>
+            </div>
+
+            [% IF ( forgivemanualholdsexpire ) %]
+                <div id="forgivemanualholdsexpire-alert" class="checkin-active-setting">
+            [% ELSE %]
+                <div id="forgivemanualholdsexpire-alert" class="checkin-active-setting" style="display:none;">
+            [% END %]
+                    <p><i class="fa fa-check"></i> Fines are not charged for manually cancelled holds.</p>
+                </div>
+
+                [% IF ( dropboxmode ) %]
+                    <div id="dropboxmode" class="checkin-active-setting">
+                [% ELSE %]
+                    <div id="dropboxmode" class="checkin-active-setting" style="display:none;">
+                [% END %]
+                    <p><i class="fa fa-check"></i> Book drop mode. <span class="single-line">( Effective checkin date is [% dropboxdate | $KohaDates with_hours => 1 %] )</span></p>
+                </div>
+                [% IF ( return_date_override_remember ) %]
+                    <div id="return_date_remember" class="checkin-active-setting">
+                [% ELSE %]
+                    <div id="return_date_remember" class="checkin-active-setting" style="display:none;">
+                [% END %]
+                    <p><i class="fa fa-check"></i> Saved check-in date: <span id="saved_return_date" class="single-line">[% return_date_override | html %]</span></p>
+                </div>
+            </div>
+        </div>
 
+            <div class="circ-settings">
             [% IF Koha.Preference('SpecifyReturnDate') %]
                 <div class="date-select" id="return_date_override_fields">
                     <div class="hint">Specify return date [% INCLUDE 'date-format.inc' %]: </div>
 
                     <input type="text" size="13" id="return_date_override" name="return_date_override" value="[% return_date_override | html %]" />
 
-                    <label for="return_date_override_remember"> Remember for next check in:</label>
-                    [% IF ( return_date_override_remember ) %]
-                        <input type="checkbox" id="return_date_override_remember" name="return_date_override_remember" checked="checked" />
-                    [% ELSE %]
-                        <input type="checkbox" id="return_date_override_remember" name="return_date_override_remember" />
-                    [% END %]
-
-                    <input type="button" class="action" id="cleardate" value="Clear" name="cleardate" />
-            </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 %]" />
-            [% END %]
 
 
-            </fieldset>
+                    <button type="button" class="action btn btn-default btn-xs" id="cleardate" name="cleardate">Clear</button>
+                    <div class="circ-setting">
+                        [% IF ( return_date_override_remember ) %]
+                            <input type="checkbox" id="return_date_override_remember" name="return_date_override_remember" checked="checked" />
+                        [% ELSE %]
+                            <input type="checkbox" id="return_date_override_remember" name="return_date_override_remember" />
+                        [% END %]
+                        <label for="return_date_override_remember"> Remember due date for next check in</label>
+                    </div>
             </div>
-            <div class="col-sm-6">
-            <fieldset id="checkin_options">
-                <legend>Options</legend>
+        [% END %]
                     [% IF ( CAN_user_updatecharges_writeoff && overduecharges ) %]
-                    <p>
+                        <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>
+                        </div>
                     [% END %] <!-- overduecharges -->
-                    <p>
+                        <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>
-                    </p>
+                        </div>
                     [% IF Koha.Preference('ExpireReservesMaxPickUpDelayCharge') %]
-                    <p>
+                        <div class="forgive-manual-hold-fees circ-setting">
                         [% IF ( forgivemanualholdsexpire ) %]
                         <input type="checkbox" id="forgivemanualholdsexpire" name="forgivemanualholdsexpire" value="forgivemanualholdsexpire" checked="checked" />
                         [% ELSE %]
                         <input type="checkbox" id="forgivemanualholdsexpire" name="forgivemanualholdsexpire" value="forgivemanualholdsexpire" />
                         [% END %]
                         <label for="forgivemanualholdsexpire">Forgive fees for manually expired holds</label>
-                    </p>
+                        </div>
                     [% END %] <!-- overduecharges -->
-            </fieldset>
-        </div>
-    </form>
-</div>
+                </div> <!-- /.circ-settings -->
+            </fieldset> <!-- /#circ_returns_checkin -->
+        </form> <!-- /#checkin-form -->
 
 [% IF ( riloop ) %]
     <h2>Checked-in items</h2>
@@ -809,15 +834,18 @@
     </table>
 [% END %]
 
-                    [% IF Koha.Preference('CircSidebar') %]
-                            </div> <!-- /.col-sm-10.col-sm-push-2 -->
-                            <div class="col-sm-2 col-sm-pull-10">
-                                <aside>
-                                    [% INCLUDE 'circ-nav.inc' %]
-                                </aside>
-                            </div> <!-- /.col-sm-2.col-sm-pull-10 -->
-                        </div> <!-- /.row -->
-                    [% END %]
+                [% IF Koha.Preference('CircSidebar') %]
+                        </div> <!-- /.col-sm-10.col-sm-push-2 -->
+                        <div class="col-sm-2 col-sm-pull-10">
+                            <aside>
+                                [% INCLUDE 'circ-nav.inc' %]
+                            </aside>
+                        </div> <!-- /.col-sm-2.col-sm-pull-10 -->
+                    </div> <!-- /.row -->
+                [% ELSE %]
+                        </div> <!-- /.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2 -->
+                    </div> <!-- /.row -->
+                [% END %]
 
             </main>
         </div> <!-- /.col-sm-12 -->
@@ -828,6 +856,7 @@
     [% 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>
@@ -894,28 +923,31 @@
                         return false;
                     }
                 }
+                // Add saved date information to onscreen message, which
+                // may or may not be hidden
+                $("#saved_return_date").text( $("#return_date_override").val() );
                 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);
                     $("#return_date_override").datetimepicker("disable");
                 } else {
-                    $("#barcode").removeClass("alert");
+                    $("#barcode").removeClass("input-warning");
                     $("#dropboxmode").hide();
 
                     $("#return_date_override_fields :input").prop('disabled', false);
@@ -925,10 +957,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();
@@ -937,13 +969,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 %]
 
@@ -971,8 +1003,22 @@
                 this.form.return_date_override.value = '';
                 this.form.return_date_override_remember.checked = false;
                 this.form.barcode.focus();
+                $("#return_date_remember").hide();
                 return false;
             });
+
+            $("#return_date_override_remember").on("change", function(){
+                if( $(this).prop("checked" ) ){
+                    if( $("#return_date_override").val() == "" ){
+                        $("#saved_return_date").text( _("No date selected") );
+                    } else {
+                        $("#saved_return_date").text( $("#return_date_override").val() );
+                    }
+                    $("#return_date_remember").show();
+                } else {
+                    $("#return_date_remember").hide();
+                }
+            });
         });
     </script>
 [% END %]

diff --git a/koha-tmpl/intranet-tmpl/prog/js/pages/circulation.js b/koha-tmpl/intranet-tmpl/prog/js/pages/circulation.js
index 9602550..84c7f77 100644 (file)
--- 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");
         }
     });