Bug 21870: Convert browser alerts to modals: OPAC user summary

This patch updates the user summary page in the OPAC so that JavaScript
alerts are replaced with Bootstrap modals. This provides us the ability
to more carefully control the content of confirmation dialogs and their
control buttons.

A global function for defining a modal confirmation boxes has been
added, to which one can pass:

 - The modal title
 - Body
 - Text for submit and cancel buttons
 - A callback function to trigger on submit

To test, apply the patch and clear your browser cache if necessary.

 - Log in to the OPAC as a user who has holds and article requests.
 - Test the following interactions, both the confirmation and cancel
   options for each:
     - Cancel a hold
     - Suspend all holds
     - Resume all holds
     - Cancel an article request

Signed-off-by: Jose-Mario Monteiro-Santos <jose-mario.monteiro-santos@inLibro.com>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>

Signed-off-by: Nick Clemens <nick@bywatersolutions.com>

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 7af3a0f..1256bf6 100644 (file)
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-user.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-user.tt
@@ -762,10 +762,10 @@
                                             [% END # / IF SuspendHoldsOpac %]
                                             <td class="modify">
                                                 [% IF ( RESERVE.is_cancelable_from_opac ) %]
-                                                    <form action="/cgi-bin/koha/opac-modrequest.pl" method="post">
+                                                    <form id="delete_hold_[% RESERVE.reserve_id | html %]" action="/cgi-bin/koha/opac-modrequest.pl" method="post">
                                                     <input type="hidden" name="biblionumber" value="[% RESERVE.biblionumber | html %]" />
                                                     <input type="hidden" name="reserve_id" value="[% RESERVE.reserve_id | html %]" />
-                                                    <button type="submit" name="submit" class="btn btn-xs btn-danger" onclick="return confirmDelete(MSG_CONFIRM_DELETE_HOLD);"><i class="fa fa-remove"></i> Cancel</button></form>
+                                                    <button data-title="[% RESERVE.biblio.title | html %] [% FOREACH s IN RESERVE.biblio.subtitles %] [% s | html %] [% END %] [% RESERVE.item.enumchron | html %]" data-reserve_id="[% RESERVE.reserve_id | html %]" type="submit" class="btn btn-sm btn-danger btn-delete-hold"><i class="fa fa-remove"></i> Cancel</button></form>
                                                 [% END %]
                                             </td>
                                         </tr>
@@ -775,8 +775,8 @@
 
                             [% IF SuspendHoldsOpac %]
                                 <div>
-                                    <form class="form-inline" action="/cgi-bin/koha/opac-modrequest-suspend.pl" method="post">
-                                        <button type="submit" name="submit" class="btn" onclick="return confirmDelete(MSG_CONFIRM_SUSPEND_HOLDS);"><i class="fa fa-pause"></i> Suspend all holds</button>
+                                    <form class="form-inline" id="suspend_all_holds" action="/cgi-bin/koha/opac-modrequest-suspend.pl" method="post">
+                                        <button type="submit" id="suspend_all_submit" class="btn"><i class="fa fa-pause"></i> Suspend all holds</button>
                                         <input type="hidden" name="suspend" value="1" />
 
                                         [% IF AutoResumeSuspendedHolds %]
@@ -788,8 +788,8 @@
                                 </div>
                                 <br/>
                                 <div>
-                                    <form action="/cgi-bin/koha/opac-modrequest-suspend.pl" method="post">
-                                        <button type="submit" name="submit" class="btn" onclick="return confirmDelete(MSG_CONFIRM_RESUME_HOLDS);"><i class="fa fa-play"></i> Resume all suspended holds</button>
+                                    <form id="resume_all_holds" action="/cgi-bin/koha/opac-modrequest-suspend.pl" method="post">
+                                        <button type="submit" id="resume_all_submit" class="btn"><i class="fa fa-play"></i> Resume all suspended holds</button>
                                         <input type="hidden" name="suspend" value="0" />
                                     </form>
                                 </div>
@@ -885,7 +885,10 @@
 
                                                 <td class="article-request-cancel">
                                                     <span class="tdlabel">Cancel:</span>
-                                                    <a class="btn btn-xs btn-danger" href="opac-article-request-cancel.pl?id=[% ar.id | html %]" onclick="return confirmDelete(MSG_CONFIRM_DELETE_ARTREQ);"><i class="fa fa-remove"></i> Cancel</a>
+                                                    <form action="/cgi-bin/koha/opac-article-request-cancel.pl" id="delete_article_request_[% ar.id | html %]">
+                                                        <input type="hidden" name="id" value="[% ar.id | html %]" />
+                                                        <button data-title="[% ar.biblio.title | html %] [% ar.item.enumchron | html %]" data-article-request_id="[% ar.id | html %]" type="submit" class="btn btn-sm btn-danger btn-delete-article-request"><i class="fa fa-remove"></i> Cancel</button>
+                                                    </form>
                                                 </td>
                                             </tr>
                                         [% END %]
@@ -917,17 +920,10 @@
 [% END %]
 
 [% INCLUDE 'opac-bottom.inc' %]
-
-
 [% BLOCK jsinclude %]
     [% INCLUDE 'calendar.inc' %]
     [% INCLUDE 'datatables.inc' %]
     <script>
-        //<![CDATA[
-        var MSG_CONFIRM_DELETE_ARTREQ   = _("Are you sure you want to cancel this article request?");
-        var MSG_CONFIRM_DELETE_HOLD   = _("Are you sure you want to cancel this hold?");
-        var MSG_CONFIRM_SUSPEND_HOLDS = _("Are you sure you want to suspend all holds?");
-        var MSG_CONFIRM_RESUME_HOLDS  = _("Are you sure you want to resume all suspended holds?");
 
         $(document).ready(function(){
             $('#opac-user-views').tabs();
@@ -936,6 +932,56 @@
             $(".modal-nojs").addClass("modal").addClass("hide").removeClass("modal-nojs");
             $(".suspend-until").prop("readonly",1);
 
+            $(".btn-delete-hold").on("click", function(e){
+                e.preventDefault();
+                var hold_title = $(this).data("title");
+                var reserve_id = $(this).data("reserve_id");
+                var body = "<p><strong>" + hold_title + "</strong></p>";
+                confirmModal( hold_title, _("Are you sure you want to cancel this hold?"), _("Yes, cancel hold"), _("No, do not cancel hold"), function( result ){
+                        if( result ){
+                            $("#delete_hold_" + reserve_id ).submit();
+                        }
+                    }
+                );
+            });
+
+            $(".btn-delete-article-request").on("click", function(e){
+                e.preventDefault();
+                var hold_title = $(this).data("title");
+                var article_request_id = $(this).data("article-request_id");
+                var body = "<p><strong>" + hold_title + "</strong></p>";
+                confirmModal( hold_title, _("Are you sure you want to cancel this article request?"), _("Yes, cancel article request"), _("No, do not cancel article request"), function( result ){
+                        if( result ){
+                            $("#delete_article_request_" + article_request_id ).submit();
+                        }
+                    }
+                );
+            });
+
+            $("#suspend_all_submit").on("click", function(e){
+                e.preventDefault();
+                var title = _("Are you sure you want to suspend all holds?");
+                var body = _("All holds will be suspended.");
+                confirmModal( body, title, _("Yes, suspend all holds"), "", function( result ){
+                        if( result ){
+                            $("#suspend_all_holds").submit();
+                        }
+                    }
+                );
+            });
+
+            $("#resume_all_submit").on("click", function(e){
+                e.preventDefault();
+                var title = _("Are you sure you want to resume all suspended holds?");
+                var body = _("All holds will resume.");
+                confirmModal( body, title, _("Yes, resume all holds"), _("No, do not resume holds"), function( result ){
+                        if( result ){
+                            $("#resume_all_holds").submit();
+                        }
+                    }
+                );
+            });
+
             var dTables = $("#checkoutst,#holdst,#overduest,#opac-user-relative-issues-table");
             dTables.each(function(){
                 var thIndex = $(this).find("th.psort").index();

diff --git a/koha-tmpl/opac-tmpl/bootstrap/js/global.js b/koha-tmpl/opac-tmpl/bootstrap/js/global.js
index 8de2e70..7f95b32 100644 (file)
--- a/koha-tmpl/opac-tmpl/bootstrap/js/global.js
+++ b/koha-tmpl/opac-tmpl/bootstrap/js/global.js
@@ -51,3 +51,39 @@ function suffixOf (s, tok) {
     var index = s.indexOf(tok);
     return s.substring(index + 1);
 }
+
+// Adapted from https://gist.github.com/jnormore/7418776
+function confirmModal(message, title, yes_label, no_label, callback) {
+    $("#bootstrap-confirm-box-modal").data('confirm-yes', false);
+    if($("#bootstrap-confirm-box-modal").length == 0) {
+        $("body").append('<div id="bootstrap-confirm-box-modal" class="modal">\
+            <div class="modal-dialog">\
+                <div class="modal-content">\
+                    <div class="modal-header" style="min-height:40px;">\
+                        <button type="button" class="closebtn" data-dismiss="modal" aria-hidden="true">&times;</button>\
+                        <h4 class="modal-title"></h4>\
+                    </div>\
+                    <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"></i></a>\
+                        <a href="#" id="bootstrap-confirm-box-modal-cancel" data-dismiss="modal" class="btn btn-default"><i class="fa fa-remove"></i></a>\
+                    </div>\
+                </div>\
+            </div>\
+        </div>');
+        $("#bootstrap-confirm-box-modal-submit").on('click', function () {
+            $("#bootstrap-confirm-box-modal").data('confirm-yes', true);
+            $("#bootstrap-confirm-box-modal").modal('hide');
+            return false;
+        });
+        $("#bootstrap-confirm-box-modal").on('hide.bs.modal', function () {
+            if(callback) callback($("#bootstrap-confirm-box-modal").data('confirm-yes'));
+        });
+    }
+
+    $("#bootstrap-confirm-box-modal .modal-header h4").text( title || "" );
+    $("#bootstrap-confirm-box-modal .modal-body p").text( message || "" );
+    $("#bootstrap-confirm-box-modal-submit").text( yes_label || 'Confirm' );
+    $("#bootstrap-confirm-box-modal-cancel").text( no_label || 'Cancel' );
+    $("#bootstrap-confirm-box-modal").modal('show');
+}
\ No newline at end of file