Attachment 110633 Details for Bug 26505 – Bug 26505: Suspend hold modal broken in the OPAC

[patch] Bug 26505: Suspend hold modal broken in the OPAC

Bug-26505-Suspend-hold-modal-broken-in-the-OPAC.patch (text/plain), 10.75 KB, created by David Nind on 2020-09-23 21:48:29 UTC

(hide)

Description:

Filename:

MIME Type:

Creator: David Nind

Created: 2020-09-23 21:48:29 UTC

Size: 10.75 KB

patch

obsolete

>From b1b6a71813b9a09fc6fc3a447083d84eb7a0eb3f Mon Sep 17 00:00:00 2001
>From: Owen Leonard <oleonard@myacpl.org>
>Date: Tue, 22 Sep 2020 11:01:30 +0000
>Subject: [PATCH] Bug 26505: Suspend hold modal broken in the OPAC
>
>This patch makes corrections to the markup for the suspend hold modal in
>the OPAC. It hadn't been updated during the upgrade to Bootstrap 4.
>
>The JavaScript controlling the "suspend until" datepicker has been
>modified because the datepicker pop-up was not positioned correctly in
>this new version.
>
>Unrelated: The markup for confirmation modals has been updated to
>replace Bootstrap 3's "btn-default" with Bootstrap 4's "btn-secondary."
>
>To test, apply the patch and make sure the SuspendHoldsOpac and
>AutoResumeSuspendedHolds system preferences are enabled.
>
>- Log in to the OPAC as a user who has holds.
>- On the "Your summary" page open the "Holds" tab.
>- In the list of holds, click the "Suspend" button.
>- The modal should appear and look correct.
>- Test the "Suspend until" field: Clicking in the form field should
>  trigger the datepicker. It should be positioned correctly under the
>  form field.
>- Confirm that the datepicker populates the field.
>- Submit the suspension and confirm that the hold is suspended.
>- Click the "Cancel" button for a hold. Confirm that the confirmation
>  dialog appears correctly.
>
>Edit: Updated class of hidden submit button. Test the page with JS
>disabled to test that the "Suspend until" form works correctly.
>
>Signed-off-by: David Nind <david@davidnind.com>
>---
> .../bootstrap/en/includes/holds-table.inc          | 50 ++++++++++++----------
> .../opac-tmpl/bootstrap/en/modules/opac-user.tt    | 16 ++++++-
> koha-tmpl/opac-tmpl/bootstrap/js/global.js         |  2 +-
> 3 files changed, 44 insertions(+), 24 deletions(-)
>
>diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/includes/holds-table.inc b/koha-tmpl/opac-tmpl/bootstrap/en/includes/holds-table.inc
>index b28327605f..970df4cccf 100644
>--- a/koha-tmpl/opac-tmpl/bootstrap/en/includes/holds-table.inc
>+++ b/koha-tmpl/opac-tmpl/bootstrap/en/includes/holds-table.inc
>@@ -148,28 +148,34 @@
>                                             <a class="btn btn-link js-show" href="#suspendModal[% HOLD.reserve_id | html %]" role="button" data-toggle="modal"><i class="fa fa-pause" aria-hidden="true"></i> Suspend</a>
>                                             [% # hold suspend modal form %]
>                                             <div id="suspendModal[% HOLD.reserve_id | html %]" class="modal-nojs" tabindex="-1" role="dialog" aria-labelledby="suspendModal[% HOLD.reserve_id | html %]Label" aria-hidden="true">
>-                                                <form class="form-inline" action="/cgi-bin/koha/opac-modrequest-suspend.pl" method="post">
>-                                                    <div class="modal-header">
>-                                                        <button type="button" class="closebtn" data-dismiss="modal" aria-hidden="true">Ã</button>
>-                                                        [% IF HOLD.suspend %]
>-                                                            <h3 id="suspendModal[% HOLD.reserve_id | html %]Label">Resume your hold on <em>[% HOLD.biblio.title | html %]</em></h3>
>-                                                        [% ELSE %]
>-                                                            <h3 id="suspendModal[% HOLD.reserve_id | html %]Label">Suspend your hold on <em>[% HOLD.biblio.title | html %]</em></h3>
>-                                                        [% END %]
>-                                                    </div>
>-                                                    <div class="modal-body">
>-                                                        <input type="hidden" name="reserve_id" value="[% HOLD.reserve_id | html %]" />
>-                                                        <label for="suspend_until_[% HOLD.reserve_id | html %]">Suspend until:</label>
>-                                                        <input type="text" name="suspend_until" id="suspend_until_[% HOLD.reserve_id | html %]" class="suspend-until" size="10" />
>-                                                        [% INCLUDE 'date-format.inc' %]
>-                                                        <p class="js-show"><a href="#" onclick="document.getElementById('suspend_until_[% HOLD.reserve_id | html %]').value='';return false;">Clear date to suspend indefinitely</a></p>
>-                                                        <button class="btn btn-mini js-hide" type="submit" name="submit">Suspend</button>
>-                                                    </div>
>-                                                    <div class="modal-footer">
>-                                                        <button class="btn btn-primary" type="submit" name="submit">Suspend</button>
>-                                                        <a href="#" data-dismiss="modal" aria-hidden="true" class="cancel">Cancel</a>
>-                                                    </div>
>-                                                </form>
>+                                                <div class="modal-dialog">
>+                                                    <div class="modal-content">
>+                                                        <form action="/cgi-bin/koha/opac-modrequest-suspend.pl" method="post">
>+                                                            <div class="modal-header">
>+                                                                [% IF HOLD.suspend %]
>+                                                                    <h3 class="modal-title" id="suspendModal[% HOLD.reserve_id | html %]Label">Resume your hold on <em>[% HOLD.biblio.title | html %]</em></h3>
>+                                                                [% ELSE %]
>+                                                                    <h3 class="modal-title" id="suspendModal[% HOLD.reserve_id | html %]Label">Suspend your hold on <em>[% HOLD.biblio.title | html %]</em></h3>
>+                                                                [% END %]
>+                                                                <button type="button" class="closebtn" data-dismiss="modal" aria-label="Close">
>+                                                                    <span aria-hidden="true">x</span>
>+                                                                </button>
>+                                                            </div>
>+                                                            <div class="modal-body">
>+                                                                <input type="hidden" name="reserve_id" value="[% HOLD.reserve_id | html %]" />
>+                                                                <label for="suspend_until_[% HOLD.reserve_id | html %]">Suspend until:</label>
>+                                                                <input type="text" name="suspend_until" id="suspend_until_[% HOLD.reserve_id | html %]" class="suspend-until" size="10" />
>+                                                                [% INCLUDE 'date-format.inc' %]
>+                                                                <p class="js-show"><a href="#" onclick="document.getElementById('suspend_until_[% HOLD.reserve_id | html %]').value='';return false;">Clear date to suspend indefinitely</a></p>
>+                                                                <button class="btn btn-primary btn-sm js-hide" type="submit" name="submit">Suspend</button>
>+                                                            </div>
>+                                                            <div class="modal-footer">
>+                                                                <button class="btn btn-primary"><i class="fa fa-check" aria-hidden="true"></i> Suspend</button>
>+                                                                <button data-dismiss="modal" class="btn btn-secondary"><i class="fa fa-remove" aria-hidden="true"></i> Do not suspend</button>
>+                                                            </div>
>+                                                        </form>
>+                                                    </div> 
>+                                                </div> 
>                                             </div>  
>                                         [% ELSE %]
>                                             <form class="form-inline" action="/cgi-bin/koha/opac-modrequest-suspend.pl" method="post">
>diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-user.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-user.tt
>index 13cd1843ee..c4bfe00770 100644
>--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-user.tt
>+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-user.tt
>@@ -967,7 +967,21 @@
>                 });
>             [% END %]
> 
>-            $( ".suspend-until" ).datepicker({ minDate: 1 }); // Require that "until date" be in the future
>+            $(".suspend-until").datepicker({
>+                beforeShow: function(input, inst) {
>+                    // https://stackoverflow.com/questions/662220/how-to-change-the-pop-up-position-of-the-jquery-datepicker-control#answer-10598178
>+                    var calendar = inst.dpDiv;
>+                    setTimeout(function() {
>+                        calendar.position({
>+                            my: 'left top',
>+                            at: 'left bottom',
>+                            collision: 'none',
>+                            of: input
>+                        });
>+                    }, 1);
>+                },
>+                minDate: 1
>+            });
> 
>             if ( $('#opac-user-clubs').length ) {
>                 $('#opac-user-clubs-tab-link').on('click', function() {
>diff --git a/koha-tmpl/opac-tmpl/bootstrap/js/global.js b/koha-tmpl/opac-tmpl/bootstrap/js/global.js
>index e278a29131..27f2874502 100644
>--- a/koha-tmpl/opac-tmpl/bootstrap/js/global.js
>+++ b/koha-tmpl/opac-tmpl/bootstrap/js/global.js
>@@ -90,7 +90,7 @@ function confirmModal(message, title, yes_label, no_label, callback) {
>                     <div class="modal-body"><p></p></div>\
>                     <div class="modal-footer">\
>                         <a href="#" id="bootstrap-confirm-box-modal-submit" class="btn btn-danger"><i class="fa fa-check" aria-hidden="true"></i></a>\
>-                        <a href="#" id="bootstrap-confirm-box-modal-cancel" data-dismiss="modal" class="btn btn-default"><i class="fa fa-remove" aria-hidden="true"></i></a>\
>+                        <a href="#" id="bootstrap-confirm-box-modal-cancel" data-dismiss="modal" class="btn btn-secondary"><i class="fa fa-remove" aria-hidden="true"></i></a>\
>                     </div>\
>                 </div>\
>             </div>\
>-- 
>2.11.0

Actions: View | Diff | Splinter Review

Attachments on bug 26505: 110587 | 110593 | 110633 | 110696