Bug 16778: Replace usage of Greybox modals with Bootstrap modals

This patch is a proof-of-concept for replacing Greybox modals in
situations where in-modal page transitions happen. This one addresses
patron card export from the patron lists page.

To test you must have at least one patron lists containing patrons.

- Apply the patch and go to Patrons -> Patron lists.
- In the 'Actions' menu associated with your list, choose 'Print patron
  cards.' A modal window should be triggered.
- In the modal window, change settings as necessary and click the
  "Export" button.
- The modal should reload and display a link to download a PDF. Confirm
  that the PDF download works correctly and that the correct patron
  batch was processed.
- Repeat the process and confirm at each step that clicking the 'X'
  button or the 'Cancel' link dismisses the modal window.

To confirm that changes to the patron card print template has not
adversely affected printing patron cards from the patron card creator
page:

- Go to Tools -> Patron card creator.
- Choose Manage -> Card batches.
- Click 'Export' for any batch.
- Confirm that the Greybox modal still works correctly for patron card
  export.

Signed-off-by: Hector Castro <hector.hecaxmmx@gmail.com>
Works as advertised

Signed-off-by: Kyle M Hall <kyle@bywatersolutions.com>
Signed-off-by: Kyle M Hall <kyle@bywatersolutions.com>

diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/patron_lists/lists.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/patron_lists/lists.tt
index f8c0a03..a3d8866 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/patron_lists/lists.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/patron_lists/lists.tt
@@ -8,6 +8,9 @@
 <script type="text/javascript">
 //<![CDATA[
     $(document).ready(function() {
 <script type="text/javascript">
 //<![CDATA[
     $(document).ready(function() {

+        var patronExportModal = $("#patronExportModal");
+        var patronExportModalBody = $("#patronExportModal .modal-body")
+

         $('#patron-lists-table').dataTable($.extend(true, {}, dataTablesDefaults, {
             "autoWidth": false,
             "aoColumnDefs": [
         $('#patron-lists-table').dataTable($.extend(true, {}, dataTablesDefaults, {
             "autoWidth": false,
             "aoColumnDefs": [


@@ -20,11 +23,32 @@
             var list = $(this).data("list-name");
             return confirmDelete( _("Are you sure you want to delete the list %s?").format(list) );
         });
             var list = $(this).data("list-name");
             return confirmDelete( _("Are you sure you want to delete the list %s?").format(list) );
         });

-        $(".print_cards").on("click",function(e){
+
+        $(".print_cards").on("click", function(e){
+            e.preventDefault();
+            var page = $(this).attr("href");
+            patronExportModalBody.load(page + " #exportingf");
+            patronExportModal.modal("show");
+        });
+
+        patronExportModal.on("hidden", function(){
+            patronExportModalBody.html("<div id=\"loading\"><img src=\"[% interface %]/[% theme %]/img/loading-small.gif\" alt=\"\" /> "+_("Loading")+"</div>");
+        });
+
+        patronExportModal.on("submit", "#exportingf", function(e){
+            e.preventDefault();
+            modal_body = patronExportModalBody;
+            modal_body.html("<div id=\"loading\"><img src=\"[% interface %]/[% theme %]/img/loading-small.gif\" alt=\"\" /> "+_("Loading")+"</div>");
+            target_url = $(this).attr("action");
+            params =  $( this ).serialize();
+            modal_body.load( target_url + "?" + params + " #custom-doc");
+        });
+
+        patronExportModal.on("click",".closebtn,.gb-close",function(e){

             e.preventDefault();
             e.preventDefault();

-            var patron_list_id = $(this).data("patron_list_id");
-            GB_showCenter(_("Print patron cards from list"), "/cgi-bin/koha/patroncards/print.pl?patronlist_id=" + patron_list_id, 400, 800);
+            patronExportModal.modal("hide");

         });
         });

+

     });
 //]]>
 </script>
     });
 //]]>
 </script>


@@ -76,7 +100,9 @@
                                     <li><a class="delete_patron" href="/cgi-bin/koha/patron_lists/delete.pl?patron_list_id=[% l.patron_list_id %]" data-list-name="[% l.name %]"><i class="fa fa-trash"></i> Delete list</a></li>
                                     [% IF ( l.patron_list_patrons_rs.count ) %]
                                         <li class="divider"></li>
                                     <li><a class="delete_patron" href="/cgi-bin/koha/patron_lists/delete.pl?patron_list_id=[% l.patron_list_id %]" data-list-name="[% l.name %]"><i class="fa fa-trash"></i> Delete list</a></li>
                                     [% IF ( l.patron_list_patrons_rs.count ) %]
                                         <li class="divider"></li>

-                                        <li><a href="#" class="print_cards" data-patron_list_id="[% l.patron_list_id %]"><i class="fa fa-print"></i> Print patron cards</a></li>
+                                        <li>
+                                            <a class="print_cards" href="/cgi-bin/koha/patroncards/print.pl?patronlist_id=[% l.patron_list_id %]" data-patron_list_id="[% l.patron_list_id %]"><i class="fa fa-print"></i> Print patron cards</a>
+                                        </li>

                                         [% IF CAN_user_tools_edit_patrons %]
                                             <li>
                                                 <a href="/cgi-bin/koha/tools/modborrowers.pl?patron_list_id=[% l.patron_list_id %]&op=show">
                                         [% IF CAN_user_tools_edit_patrons %]
                                             <li>
                                                 <a href="/cgi-bin/koha/tools/modborrowers.pl?patron_list_id=[% l.patron_list_id %]&op=show">


@@ -99,6 +125,18 @@
                 [% END %]
             </tbody>
         </table>
                 [% END %]
             </tbody>
         </table>

+
+            <!-- Modal to print patron cards -->
+            <div class="modal hide" id="patronExportModal" tabindex="-1" role="dialog" aria-labelledby="patronExportModal_label" aria-hidden="true">
+                <div class="modal-header">
+                    <button type="button" class="closebtn" data-dismiss="modal" aria-hidden="true">&times;</button>
+                    <h3 id="patronExportModal_label">Print patron cards</h3>
+                </div>
+                <div class="modal-body">
+                    <div id="loading"> <img src="[% interface %]/[% theme %]/img/loading-small.gif" alt="" /> Loading </div>
+                </div>
+            </div>
+

         [% ELSE %]
            <div class="dialog message">There are no patron lists.</div>
         [% END %]
         [% ELSE %]
            <div class="dialog message">There are no patron lists.</div>
         [% END %]

diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/patroncards/print.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/patroncards/print.tt
index c6619ab..2691254 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/patroncards/print.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/patroncards/print.tt
@@ -16,7 +16,7 @@
     <style type="text/css">#custom-doc {width:47.23em; *width:46.04em; min-width:610px; margin:auto; margin-top:0.4em;}</style>
 </head>
 <body id="pcard_print" class="tools pcard">
     <style type="text/css">#custom-doc {width:47.23em; *width:46.04em; min-width:610px; margin:auto; margin-top:0.4em;}</style>
 </head>
 <body id="pcard_print" class="tools pcard">

-    <div id="custom-doc" class="yui-t2">
+    <div id="custom-doc">

         <div id="bd">
             [% IF ( batches ) %]
             <form>
         <div id="bd">
             [% IF ( batches ) %]
             <form>


@@ -62,7 +62,7 @@
                         [% IF ( multi_batch_count == 1 ) %][% multi_batch_count %] batch to export[% ELSE %][% multi_batch_count %] batches to export[% END %]
                     [% END %]
             </h3>
                         [% IF ( multi_batch_count == 1 ) %][% multi_batch_count %] batch to export[% ELSE %][% multi_batch_count %] batches to export[% END %]
                     [% END %]
             </h3>

-            <form name="exporting" method="post" action="/cgi-bin/koha/patroncards/print.pl">
+            <form id="exportingf" name="exporting" method="post" action="/cgi-bin/koha/patroncards/print.pl">

                 <input type="hidden" name="op" value="export" />
                 <input type="hidden" name="referer" value="[% referer %]" />
                 [% FOREACH batch_id IN batch_ids %]
                 <input type="hidden" name="op" value="export" />
                 <input type="hidden" name="referer" value="[% referer %]" />
                 [% FOREACH batch_id IN batch_ids %]