From e21d2ac864b651375a366b12ab30b0f5b506f1d3 Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
Date: Wed, 24 May 2017 17:51:18 +0000
Subject: [PATCH] Bug 18667: Show a diff view of SQL reports when converting

This patch reformats the SQL conversion before-and-after view so that it
shows a diff between the two, just as the Manage MARC Import interface
does.

This patch also makes a correction to the JavaScript which is triggered
by the closing of the modal. In Bootstrap 3 "hidden.bs.modal" is the
event name instead of "hidden."

To test, apply the patch and find an SQL report in your reports library
which requires updating.

- Click the "Update SQL" button.
- In the modal window, the "existing" and "updated" SQL should be shown
  side-by-side with colored highlighting of the differece.
- Confirm that the "Update" button still works correctly.
- Also confirm that if you open the preview of another report, the
  "Close" button hides the modal and updates the contents of the modal
  markup. Use your browser's DOM inspector to confirm that <div
  class="modal-body"> contains only <div id="loading"> and its contents.

Revision moves inline style attributes to CSS block.

Signed-off-by: Jesse Maseto <jesse@bywatersolutions.com>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
---
 .../prog/en/modules/reports/convert_report.tt         | 19 ++++++++++++-------
 .../prog/en/modules/reports/guided_reports_start.tt   | 17 +++++++++++++++--
 2 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/reports/convert_report.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/reports/convert_report.tt
index de77876850..f8395d3399 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/reports/convert_report.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/reports/convert_report.tt
@@ -1,16 +1,21 @@
 [% INCLUDE 'doc-head-open.inc' %]
-<title>Koha &rsaquo; Reports &rsaquo; Convert report</title>
+    <title>Koha &rsaquo; Reports &rsaquo; Convert report</title>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     </head>
-    <body id="report_convert" class="catalog">
-        <div id="main" style="direction: ltr;">
+    <body id="rep_report_convert" class="rep">
+        <div>
             [% IF msg == 'no_report' %]
                 There is no valid report for this id.
             [% ELSIF msg == 'can_be_updated' %]
-                <h3>Existing sql</h3>
-                <pre>[% current_sql %]</pre>
-                <h3>Updated sql</h3>
-                <pre>[% updated_sql %]</pre>
+                <div id="col1">
+                    <h3>Existing SQL</h3>
+                    <span class="show_sql">[% current_sql | html_entity %]</span>
+                </div>
+
+                <div id="col2">
+                    <h3>Updated SQL</h3>
+                    <span class="show_sql">[% updated_sql | html_entity %]</span>
+                </div>
             [% ELSE %]
                 Something went wrong.
             [% END %]
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/reports/guided_reports_start.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/reports/guided_reports_start.tt
index 499daa3c11..4c3b47e64d 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/reports/guided_reports_start.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/reports/guided_reports_start.tt
@@ -32,9 +32,16 @@
 [% INCLUDE 'calendar.inc' %]
 <style type="text/css">
     #sql { width: 90%; height: 9em;}
+    #update_sql .modal-dialog { width: 80%; }
+    ins { background-color: #e6ffe6; }
+    del { background-color: #ffe6e6; }
+    #col1, #col2 { width:45%; float:left; }
+    #col1 ins, #col2 del { display: none; }
+    .show_sql { font-family: monospace; }
 </style>
 [% IF ( saved1 ) %]
 <link rel="stylesheet" type="text/css" href="[% interface %]/[% theme %]/css/datatables.css" />
+<script type="text/javascript" src="[% interface %]/lib/jsdiff/jsdiff.min.js"></script>
 [% INCLUDE 'datatables.inc' %]
 [% END %]
 
@@ -172,11 +179,17 @@ $("#delColumn").on("click",function(){
         var ltitle = $(this).text();
         var report_id = $(this).data("report_id");
         var page = $(this).attr("href");
-        $("#update_sql .modal-body").load(page + " div");
+        $("#update_sql .modal-body").load(page + " div", function(){
+            var diff1 = $("#col1 .show_sql").text();
+            var diff2 = $("#col2 .show_sql").text();
+            var diffs = diffString( escape(diff1), escape(diff2) );
+            $("#col1 .show_sql,#col2 .show_sql").html(diffs);
+        });
         $('#update_sql').modal('show');
         $("#update_sql_button").attr("href", "/cgi-bin/koha/reports/guided_reports.pl?phase=Use saved&op=convert&report_id=" + report_id);
     });
-    $("#update_sql").on("hidden", function(){
+
+    $("#update_sql").on("hidden.bs.modal", function(){
         $("#update_sql_label").html("");
         $("#update_sql .modal-body").html("<div id=\"loading\"><img src=\"[% interface %]/[% theme %]/img/spinner-small.gif\" alt=\"\" /> "+_("Loading")+"</div>");
     });
-- 
2.11.0