From 058dbf2d8af9c5526da2026775d9316c4e9d5ea6 Mon Sep 17 00:00:00 2001 From: Owen Leonard 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. --- .../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 @@ Suspend [% # hold suspend modal form %] [% ELSE %]
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) {

\
\ \ - \ + \
\ \ \ -- 2.11.0