Bug 16738 - Improve EDIFACT messages template

This patch makes several improvements to the EDIFACT messages template
to make it more consistent with similar interfaces in Koha. Changes to
edimsg.tt are made to simplify the display of the data in a modal.

This patch also corrects a couple of markup errors.

To test you must have multiple rows of data in the edifact_messages
table. I tested with dummy data I inserted manually. Should should have
some rows which use 'QUOTE' and 'ORDERS' as the message_type.

To test deletions you may need to apply the patch for Bug 16737.

- Apply the patch and go to Acquisitions -> EDIFACT messages.
- In the table of messages, the date should be displayed according to
  your system preference.
- Sorting by date should work correctly regardless of date format
  setting.
- The 'Actions' column should contain 'View message' and 'Delete'
  Bootstrap-style buttons with Font Awesome icons. The column should be
  unsorted.
- Clicking the 'Delete' button should prompt you to confirm.
- Clicking the 'View message' button should trigger a modal which loads
  the message data.
- Test the page with no messages or when all messages have been
  deleted. The page should display a standard message dialog instead of
  an empty table.

Signed-off-by: Nicole C Engard <nengard@bywatersolutions.com>

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

Signed-off-by: Kyle M Hall <kyle@bywatersolutions.com>
(cherry picked from commit 4e52b81247)
Signed-off-by: Frédéric Demians <f.demians@tamil.fr>

koha-tmpl/intranet-tmpl/prog/en/modules/acqui/edifactmsgs.tt

@@ -1,5 +1,6 @@
+[% USE KohaDates %]
 [% INCLUDE 'doc-head-open.inc' %]
-<title>Koha &rsaquo; Acquisitions</title>
+<title>Koha &rsaquo; Acquisitions &rsaquo; EDIFACT messages</title>
 <link rel="stylesheet" type="text/css" href="[% interface %]/[% theme %]/css/datatables.css" />
 [% INCLUDE 'doc-head-close.inc' %]
 [% INCLUDE 'datatables.inc' %]
@@ -7,11 +8,37 @@
 $(document).ready(function() {
     $('#edi_msgs').dataTable($.extend(true, {}, dataTablesDefaults, {
         'aaSorting': [[1, "desc" ]],
-        'sPaginationType': "four_button"
-        }));
+        'sPaginationType': "four_button",
+        "aoColumnDefs": [
+            { "aTargets": [ -1 ], "bSortable": false, "bSearchable": false },
+            { "sType": "title-string", "aTargets" : [ "title-string" ] }
+        ]
+    }));
+
+    var EDIModal = $("#EDI_modal");
+    var EDIModalBody = $("#EDI_modal .modal-body");
+
+    $(".view_message").on("click", function(e){
+        e.preventDefault();
+        var page = $(this).attr("href");
+        EDIModalBody.load(page + " #edimsg");
+        EDIModal.modal("show");
+    });
+    EDIModal.on("click",".closebtn",function(e){
+        e.preventDefault();
+        EDIModal.modal("hide");
+    });
+    EDIModal.on("hidden", function(){
+        EDIModalBody.html("<div id=\"loading\"><img src=\"[% interface %]/[% theme %]/img/loading-small.gif\" alt=\"\" /> "+_("Loading")+"</div>");
+    });
+    $(".delete_msg").on("click",function(){
+        return confirm(_("Are you sure you want to delete this message?"));
+    });
 });
 </script>
-
+<style type="text/css">
+#EDI_modal { width : 80%; margin-left : -40%; } @media (max-width: 767px) { #EDI_modal { margin: 0; width : auto; } }
+</style>
 </head>
 <body id="acq_edifactmsgs" class="acq">
 [% INCLUDE 'header.inc' %]
@@ -32,27 +59,29 @@ $(document).ready(function() {
 <h1>EDIFACT messages</h1>
 <div id="acqui_edifactmsgs">
 
-
+[% IF ( messages ) %]
 <table id="edi_msgs">
 <thead>
+<tr>
 <th>Type</th>
-<th>Transferred</th>
+<th class="title-string">Transferred</th>
 <th>Status</th>
 <th>Vendor</th>
 <th>Details</th>
 <th>Filename</th>
-<th> </th>
-<th>Action</th>
+<th>Actions</th>
+</tr>
 </thead>
 <tbody>
 [% FOREACH msg IN messages %]
 <tr>
 <td>[% msg.message_type %]</td>
-<td>[% msg.transfer_date %]</td>
+<td><span title="[% msg.transfer_date %]">[% msg.transfer_date | $KohaDates %]</span></td>
 <td>[% msg.status %]</td>
 <td>
-<a href="/cgi-bin/koha/acqui/supplier.pl?booksellerid=[% msg.vendor_id %]"</a>
-[% msg.vendor.name %]
+    <a href="/cgi-bin/koha/acqui/supplier.pl?booksellerid=[% msg.vendor_id %]">
+        [% msg.vendor.name %]
+    </a>
 </td>
 <td>
 [% IF msg.message_type == 'QUOTE' || msg.message_type == 'ORDERS' %]
@@ -68,11 +97,11 @@ $(document).ready(function() {
      </a>
 [% END %]
 </td>
-</td>
 <td>[% msg.filename %]</td>
-<td><a class="popup" target="_blank" title="View Message" href="/cgi-bin/koha/acqui/edimsg.pl?id=[% msg.id %]"</a>View message</td>
-<td>
-<a href="/cgi-bin/koha/acqui/edifactmsgs.pl?op=delete&amp;message_id=[% msg.id %]">Delete</a>
+
+<td class="actions">
+    <a class="btn btn-mini view_message" target="_blank" href="/cgi-bin/koha/acqui/edimsg.pl?id=[% msg.id %]"><i class="fa fa-search"></i> View message</a>
+    <a class="btn btn-mini delete_msg" href="/cgi-bin/koha/acqui/edifactmsgs.pl?op=delete&amp;message_id=[% msg.id %]"><i class="fa fa-trash"></i> Delete</a>
 </td>
 </tr>
 [% END %]
@@ -80,6 +109,25 @@ $(document).ready(function() {
 </tbody>
 </table>
 
+<!-- Modal to display EDIFACT messages -->
+<div class="modal hide" id="EDI_modal" tabindex="-1" role="dialog" aria-labelledby="EDI_modal_label" aria-hidden="true">
+    <div class="modal-header">
+        <button type="button" class="closebtn" data-dismiss="modal" aria-hidden="true">&times;</button>
+        <h3 id="EDI_modal_label">EDIFACT message</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>
+
+
+[% ELSE %]
+    <div class="dialog message">There are no EDIFACT messages.</div>
+[% END %]
+
 </div>
 </div>
 </div>

koha-tmpl/intranet-tmpl/prog/en/modules/acqui/edimsg.tt

@@ -12,24 +12,24 @@
 </div>
 
 <div id="doc3" class="yui-t2">
-
-[% IF no_message %]
-  <div class"dialog message">The requested message cannot be displayed</div>
-[% ELSE %]
-  <div id="bd">
-  <div id="yui-main">
-  <div class="yui-b">
-   <ul>
-   [% FOREACH seg IN segments %]
-   <li>[% seg | html %]</li>
-   [% END %]
-   </ul>
-[% END %]
-
-</div>
-</div>
-<div class="yui-b">
-[% INCLUDE 'acquisitions-menu.inc' %]
-</div>
-</div>
+    <div id="bd">
+        <div id="yui-main">
+            <div class="yui-b">
+                <div id="edimsg">
+                    [% IF no_message %]
+                        <div class"dialog message">The requested message cannot be displayed</div>
+                    [% ELSE %]
+                        <ul>
+                            [% FOREACH seg IN segments %]
+                                <li>[% seg | html %]</li>
+                            [% END %]
+                        </ul>
+                    [% END %]
+                </div>
+            </div>
+        </div>
+        <div class="yui-b">
+            [% INCLUDE 'acquisitions-menu.inc' %]
+        </div>
+    </div>
 [% INCLUDE 'intranet-bottom.inc' %]