From 8389b5f3323ac34c0dab62637e989cdc4fc03035 Mon Sep 17 00:00:00 2001
From: Owen <oleonard@myacpl.org>
Date: Mon, 1 Nov 2021 14:39:14 +0000
Subject: [PATCH] Bug 29212: (follow-up) Fixes to suspend hold process

This patch reworks the process of suspending an individual hold from the
patron's hold list. Instead of repeating the modal markup in each line
of the holds table, a single modal is re-used.

A "focus: false" is added to the modal via a data-attribute in order to
overcome problems with selecting months and using keyboard navigation in
the calendar popup.

To test, apply the patch and log into the OPAC as a user with holds.

- View the holds tab under "Your summary."
- Click the "Suspend" button next to one of the holds.
- You should see a modal which shows the title of the item in question.
- Test that the date picker works correctly:
  - Test selecting a month and year
  - Test selecting a date both with the mouse and by using arrow keys.
  - Test that you can clear the selected date both by clicking the X and
    by clicking the text link.
- Select a date and close the modal without submitting the suspension.
- Click the "Suspend" link on another title to confirm that the date
  picker still works correctly.
- Submit a suspension and confirm that the it completes successfully.
-

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Signed-off-by: Fridolin Somers <fridolin.somers@biblibre.com>
---
 .../bootstrap/en/includes/holds-table.inc     | 33 +----------
 .../bootstrap/en/modules/opac-user.tt         | 57 +++++++++++++++++++
 2 files changed, 58 insertions(+), 32 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 50d4372385..f0b40d4f9f 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/includes/holds-table.inc
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/includes/holds-table.inc
@@ -138,38 +138,7 @@
                                         </form>
                                     [% ELSE %]
                                         [% IF AutoResumeSuspendedHolds %]
-                                            <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">
-                                                <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 flatpickr futuredate" 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 %] -->
+                                            <a class="btn btn-link suspend_hold js-show" href="#" role="button" data-title="[% HOLD.biblio.title | html %] [% FOREACH subtitle IN HOLD.biblio.subtitle.split(' \| ') %][% IF Koha.Preference('marcflavour')=='UNIMARC' %],[% END %][% subtitle | html %][% END %]" data-reserve_id="[% HOLD.reserve_id | html %]"><i class="fa fa-pause" aria-hidden="true"></i> Suspend</a>
                                         [% ELSE %]
                                             <form class="form-inline" action="/cgi-bin/koha/opac-modrequest-suspend.pl" method="post">
                                                 <input type="hidden" name="reserve_id" value="[% HOLD.reserve_id | html %]" />
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 9448a3a585..8ef4dd18bb 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-user.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-user.tt
@@ -865,6 +865,38 @@
     </div> <!-- /.container-fluid -->
 </div> <!-- /#main -->
 
+[% # hold suspend modal form %]
+<div id="suspendHoldModal" class="modal" tabindex="-1" role="dialog" aria-labelledby="suspendModalLabel" aria-hidden="true" data-focus="false">
+    <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 %]
+                        <h5 class="modal-title" id="suspendModalLabel">Resume hold</h5>
+                    [% ELSE %]
+                        <h5 class="modal-title" id="suspendModalLabel">Suspend hold</h5>
+                    [% END %]
+                    <button type="button" class="closebtn" data-dismiss="modal" aria-label="Close">
+                        <span aria-hidden="true">x</span>
+                    </button>
+                </div>
+                <div class="modal-body">
+                    <h6 id="suspendHoldTitle"></h6>
+                    <input type="hidden" name="reserve_id" id="suspendHoldReserveId" value="" />
+                    <label for="suspend_untilDate">Suspend until:</label>
+                    <input type="text" name="suspend_until" id="suspend_untilDate" size="10" />
+                    [% INCLUDE 'date-format.inc' %]
+                    <p><a href="#" id="suspend-modal-clear-date">Clear date to suspend indefinitely</a></p>
+                </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 -->
+
 [% IF ( OverDriveCirculation ) %]
     [% INCLUDE 'overdrive-checkout.inc' %]
     [% IF ( Koha.Preference('OverDrivePasswordRequired') ) %]
@@ -941,6 +973,31 @@
                 })($(this))
             });
 
+            /* We initiate this flatpickr instance here so that we can use the variable later */
+            var suspend_until_date = $("#suspend_untilDate").flatpickr({
+                minDate: "today"
+            });
+
+            $(".suspend_hold").on("click", function(e){
+                e.preventDefault();
+                var title = $(this).data("title");
+                var reserve_id = $(this).data("reserve_id");
+                $("#suspendHoldReserveId").val( reserve_id );
+                $("#suspendHoldTitle").html( "<em>" + title + "</em>" );
+                $("#suspendHoldModal").modal("show");
+            });
+
+            $("#suspend-modal-clear-date").on( "click", function(e) {
+                e.preventDefault();
+                suspend_until_date.clear();
+            });
+
+            $("#suspendHoldModal").on("hidden.bs.modal", function(){
+                $("#suspendHoldTitle").html("");
+                $("#suspendHoldReserveId").val("");
+                suspend_until_date.clear();
+            });
+
             $("#suspend_all_submit").on("click", function(e){
                 e.preventDefault();
                 var title = _("Are you sure you want to suspend all holds?");
-- 
2.39.5