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> Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de> Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
This commit is contained in:
parent
ff08e99965
commit
ae21c3adb1
3 changed files with 44 additions and 24 deletions
|
|
@ -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> <!-- /.modal-content -->
|
||||
</div> <!-- /.modal-dialog -->
|
||||
</div> <!-- /#suspendModal[% HOLD.reserve_id | html %] -->
|
||||
[% ELSE %]
|
||||
<form class="form-inline" action="/cgi-bin/koha/opac-modrequest-suspend.pl" method="post">
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
|
|
|||
|
|
@ -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>\
|
||||
|
|
|
|||
Loading…
Reference in a new issue