Bug 15318 - Use Bootstrap modal for MARC and Card preview when ordering an external...

In order to reduce the number of dependencies for common interactions we
should attempt to use Bootstrap modals in place of Greybox ones.

This patch modifies the page in Acquisitions for ordering from an
external source so that the "MARC" and "Card" previews display in
Bootstrap modals.

This patch also fixes a bug where the in-table popup menu points to the
wrong record (fixed in Cataloging by Bug 6367).

To test:

1. Apply the patch and navigate to Acquisitions.
2. Locate an exsiting basket or create a new one.
3. Add to the basket using the option to order from an external source..
4. Perform a search which will return multiple results.
5. Test the "MARC" and "Card" links for multiple results and confirm
   that the correct data is shown each time.
6. Click anywhere in the results table to show the hidden menu and test
   the "MARC" and "Card" links it displays, confirming that the data
   looks correct and corresponds correctly to the title you selected.

Followed test plan, works as expected.
Signed-off-by: Marc Véron <veron@veron.ch>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Signed-off-by: Kyle M Hall <kyle@bywatersolutions.com>

diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/acqui/z3950_search.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/acqui/z3950_search.tt
index 9b89e91..6e1ad43 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/acqui/z3950_search.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/acqui/z3950_search.tt
@@ -1,6 +1,5 @@
 [% INCLUDE 'doc-head-open.inc' %]
 <title>Koha &rsaquo; Acquisitions &rsaquo; [% IF ( opsearch ) %]Order from external source[% ELSE %]Order from external source &rsaquo; Search results[% END %]</title>
-[% INCLUDE 'greybox.inc' %]
 <link rel="stylesheet" type="text/css" href="[% themelang %]/css/datatables.css" />
 [% INCLUDE 'doc-head-close.inc' %]
 [% INCLUDE 'datatables.inc' %]
@@ -40,19 +39,31 @@
         /* Inline edit/delete links */
         $("td").click(function(event){
             var $tgt = $(event.target);
+            var row = $(this).parent();
             $(".linktools").hide();
             $("tr").removeClass("selected");
-            if($tgt.is("a")||$tgt.is(":nth-child(5)")||$tgt.is(":nth-child(6)")||$tgt.is(":nth-child(7)")||$tgt.is(":nth-child(8)")){
-                return true;
+            row.addClass("selected");
+            if($tgt.is("a")||$tgt.is(":nth-child(6)")||$tgt.is(":nth-child(7)")){
+                //Don't show inline links for cells containing links of their own.
             } else {
                 var position = $(this).offset();
                 var top = position.top+5;
                 var left = position.left+5;
                 $(".linktools",row).show().css("position","absolute").css("top",top).css("left",left);
             }
-            var row = $(this).parent();
-            row.addClass("selected");
         });
+    $(".previewData").on("click", function(e){
+        e.preventDefault();
+        var ltitle = $(this).text();
+        var page = $(this).attr("href");
+        $("#dataPreviewLabel").text(ltitle);
+        $("#dataPreview .modal-body").load(page + " div");
+        $('#dataPreview').modal({show:true});
+    });
+    $("#dataPreview").on("hidden", function(){
+        $("#dataPreviewLabel").html("");
+        $("#dataPreview .modal-body").html("<div id=\"loading\"><img src=\"[% interface %]/[% theme %]/img/loading-small.gif\" alt=\"\" /> "+_("Loading")+"</div>");
+    });
 });
 
 [% IF ( total_pages ) %]
@@ -78,7 +89,7 @@ function validate_goto_page(){
 .linktools { background-color:#FFF;border-top:1px solid #DDD; border-left: 1px solid #DDD; border-right: 1px solid #666; border-bottom:1px solid #666;display: none; white-space: nowrap;}
 .linktools a { font-size : 85%; text-decoration:none; padding:.3em;;background-color:#FFF; display:block;float:left;border-right:1px solid #DDD;}
 .linktools a:hover { background-color:#EEE;color:#CC3300;border-right:1px solid #CCC;}
-tr.selected { background-color : #FFFFCC; } tr.selected td { background-color : transparent !important; }
+tr.selected { background-color : #FFFFCC; } tr.selected td { background-color : transparent !important; } #dataPreview { width : 80%; margin-left : -40%; } @media (max-width: 767px) { #dataPreview { margin: 0; width : auto; } }
 </style>
 </head>
 <body id="acq_z3950_search" class="acq">
@@ -174,13 +185,13 @@ tr.selected { background-color : #FFFFCC; } tr.selected td { background-color :
     <tbody>[% FOREACH breeding_loo IN breeding_loop %]
         [% IF ( breeding_loo.breedingid ) %]
 
-        [% IF ( breeding_loo.toggle ) %]<tr class="highlight">[% ELSE %]<tr>[% END %]
-            <td>[% breeding_loo.server %] <div class="linktools"><a href="/cgi-bin/koha/catalogue/showmarc.pl?importid=[% breeding_loo.breedingid %]" rel="gb_page_center[600,500]">Preview MARC</a> <a href="/cgi-bin/koha/catalogue/showmarc.pl?viewas=card&amp;importid=[% breeding_loo.breedingid %]" rel="gb_page_center[600,500]">Preview card</a> <a href="/cgi-bin/koha/acqui/neworderempty.pl?frameworkcode=[% frameworkcode %]&amp;breedingid=[% breeding_loo.breedingid %]&amp;booksellerid=[% booksellerid %]&amp;basketno=[% basketno %]">Order</a> <a href="#" id="closemenu" title="Close this menu"> X </a></div></td>
+        <tr>
+            <td>[% breeding_loo.server %] <div class="linktools"><a href="/cgi-bin/koha/catalogue/showmarc.pl?importid=[% breeding_loo.breedingid %]" class="previewData">Preview MARC</a> <a href="/cgi-bin/koha/catalogue/showmarc.pl?viewas=card&amp;importid=[% breeding_loo.breedingid %]" class="previewData">Preview card</a> <a href="/cgi-bin/koha/acqui/neworderempty.pl?frameworkcode=[% frameworkcode %]&amp;breedingid=[% breeding_loo.breedingid %]&amp;booksellerid=[% booksellerid %]&amp;basketno=[% basketno %]">Order</a> <a href="#" id="closemenu" title="Close this menu"> X </a></div></td>
             <td>[% breeding_loo.title |html %]</td>
             <td>[% breeding_loo.author %]</td>
             <td>[% breeding_loo.isbn %]</td>
             <td>[% breeding_loo.lccn %]</td>
-            <td><a href="/cgi-bin/koha/catalogue/showmarc.pl?importid=[% breeding_loo.breedingid %]" title="MARC" rel="gb_page_center[600,500]">MARC</a> | <a href="/cgi-bin/koha/catalogue/showmarc.pl?viewas=card&amp;importid=[% breeding_loo.breedingid %]" title="Card" rel="gb_page_center[600,500]">Card</a></td>
+            <td><a href="/cgi-bin/koha/catalogue/showmarc.pl?importid=[% breeding_loo.breedingid %]" title="MARC" class="previewData">MARC</a> | <a href="/cgi-bin/koha/catalogue/showmarc.pl?viewas=card&amp;importid=[% breeding_loo.breedingid %]" title="Card" class="previewData">Card</a></td>
                        <td><a href="/cgi-bin/koha/acqui/neworderempty.pl?frameworkcode=[% frameworkcode %]&amp;breedingid=[% breeding_loo.breedingid %]&amp;booksellerid=[% booksellerid %]&amp;basketno=[% basketno %]">Order</a></td>
 
         </tr>
@@ -188,6 +199,20 @@ tr.selected { background-color : #FFFFCC; } tr.selected td { background-color :
     [% END %]</tbody>
 </table>
 
+
+    <div id="dataPreview" class="modal hide" tabindex="-1" role="dialog" aria-labelledby="dataPreviewLabel" aria-hidden="true">
+        <div class="modal-header">
+            <button type="button" class="closebtn" data-dismiss="modal" aria-hidden="true">×</button>
+            <h3 id="dataPreviewLabel">MARC preview</h3>
+        </div>
+        <div class="modal-body">
+            <div id="loading"> <img src="[% interface %]/[% theme %]/img/loading-small.gif" alt="" /> Loading </div>
+        </div>
+        <div class="modal-footer">
+            <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
+        </div>
+    </div>
+
     <form method="post" action="z3950_search.pl" id="page_form" name="page_form" class="checkboxed">
         <input type="hidden" name="op" id="op" value="do_search" />
         <input type="hidden" name="current_page" id="current_page" value="[% current_page %]" />