From 96102e415a26e42105a1384a961c98273b91ee8c Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
Date: Mon, 6 May 2019 13:07:17 +0000
Subject: [PATCH] Bug 22856: Show SQL code button should trigger CodeMirror
 view

This patch adds CodeMirror syntax highlighting to the SQL view which can
be shown on the report results page by clicking the "Show SQL code"
button.

To test, apply the patch and run any SQL report. On the report results
page, click the "Show SQL button." The SQL should be displayed with
CodeMirror syntax highlighting. Test toggling the SQL code view on and
off to confirm that the CodeMirror highlighting continues to work
correctly.

Signed-off-by: Barton Chittenden <barton@bywatersolutions.com>
---
 koha-tmpl/intranet-tmpl/prog/css/reports.css             |  6 ++++++
 .../prog/en/modules/reports/guided_reports_start.tt      | 16 ++++++++++++++--
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/koha-tmpl/intranet-tmpl/prog/css/reports.css b/koha-tmpl/intranet-tmpl/prog/css/reports.css
index b938b7b40d..fa8e13e5da 100644
--- a/koha-tmpl/intranet-tmpl/prog/css/reports.css
+++ b/koha-tmpl/intranet-tmpl/prog/css/reports.css
@@ -7,6 +7,12 @@
     width: 80%;
 }
 
+#sql_output {
+    border: 1px solid #ddd;
+    margin-bottom: .5em;
+    padding: .5em;
+}
+
 ins {
     background-color: #e6ffe6;
 }
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 646bbed78c..58ff9e3acd 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
@@ -719,7 +719,11 @@ canned reports and writing custom SQL reports.</p>
 <h1>[% name | html %]</h1>
 [% IF ( notes ) %]<p><span class="label">Notes:</span> [% notes | html %]</p>[% END %]
 [% IF ( unlimited_total ) %]<p><span class="label">Total number of results:</span> [% unlimited_total | html %][% IF unlimited_total > limit %] ([% limit | html %] shown)[% END %].</p>[% END %]
-<div id="sql_output" style="display:none;"><span class="label">Report SQL:</span><pre>[% sql | html %]</pre></div>
+
+<div id="sql_output" style="display:none;">
+    <span class="label">Report SQL:</span>
+    <textarea id="sql" readonly="readonly">[% sql | html %]</textarea>
+</div>
 
 <div>
     <a href="#" id="toggle_chart_settings_hid" class="toggle_chart_settings" style="display:none"><i class="fa fa-eye-slash"></i> Hide chart</a>
@@ -1054,7 +1058,7 @@ canned reports and writing custom SQL reports.</p>
         }
 
         $(document).ready(function(){
-
+            var showsql;
             hide_bar_element();
 
             if ( $('.chart-column-conf').length == 1 ) {
@@ -1321,6 +1325,14 @@ canned reports and writing custom SQL reports.</p>
                 $("#sql_output").toggle();
                 $("#toggle_sql_hid").toggle();
                 $("#toggle_sql_vis").toggle();
+                if( !showsql ){
+                    showsql = CodeMirror.fromTextArea(sql, {
+                        lineNumbers: false,
+                        mode: "text/x-sql",
+                        lineWrapping: true,
+                        readOnly: true
+                    });
+                }
             });
 
             $(".toggle_chart_settings").click(function(){
-- 
2.11.0