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>

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

Signed-off-by: Nick Clemens <nick@bywatersolutions.com>

diff --git a/koha-tmpl/intranet-tmpl/prog/css/reports.css b/koha-tmpl/intranet-tmpl/prog/css/reports.css
index b938b7b..fa8e13e 100644 (file)
--- 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 646bbed..58ff9e3 100644 (file)
--- 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(){