From d3d89e629eb984511c71b2844899c08036bfa6fb Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
Date: Fri, 14 Aug 2020 12:08:10 +0000
Subject: [PATCH] Bug 26207: Compare values of system preference log entries

This patch adds the ability to compare the values of system preferences
in the system log. The user can select two entries in the log search
results and view a diff of the two versions.

The feature is designed specifically for CSS and JS preferences like
OpacUserCSS or OpacUserJS where code changes are difficult to track.

To test, apply the patch and go to Tools -> Log viewer. You may need to
add values and make changes to preferences like OpacUserCSS if you don't
already have a history in your logs.

- Perform a search for log entries in the "System prefs" module.
- In the results, each entry for a system preference should have a
  "Compare" checkbox."
- Check one of the checkboxes.
  - The table should now be filtered by the system preference name. This
    facilitates meaningful selections for comparison.
  - You should see a message displayed onscreen, "Showing results
    for...[ preference name]"
  - The "Check none" link in the toolbar above the table should now be
    enabled.
  - If youy click the "Compare selected" link in the toolbar at this
    stage you should get a message, "You must select two entries to
    compare."
  - If you uncheck the checkbox the table should return to an unfiltered
    state.
- Check two checkboxes.
  - The "Compare selected" link in the toolbar should now be enabled.
  - Next to each of the checkboxes you checked should be a "View
    comparison" link.
  - Clicking either of the "View comparison" links or the "Compare
    selected" link should trigger a modal with the diff view of the two
    preferences.
- Try to select a third checkbox. You should get a message, "You can
  select a maximum of two checkboxes." The box should remain unchecked.
- Test that unchecking both checkboxes manually clears the table filter.
- Test that the "Check none" link works to uncheck checked boxes and
  clear the table filter.

Signed-off-by: Brandon J <brandon.jimenez@inLibro.com>

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

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
---
 .../prog/en/modules/tools/viewlog.tt          | 105 +++++++++++++++---
 koha-tmpl/intranet-tmpl/prog/js/viewlog.js    |  70 ++++++++++++
 2 files changed, 158 insertions(+), 17 deletions(-)

diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/viewlog.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/tools/viewlog.tt
index 85090b3ccb..525a590755 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/viewlog.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/tools/viewlog.tt
@@ -16,22 +16,49 @@
 	[% END %]
 </title>
 [% INCLUDE 'doc-head-close.inc' %]
-<style>
-fieldset.rows label.viewlog {
-    float: none;
-    font-weight: normal;
-    margin: 0;
-    min-width: 9em;
-    padding: .5em;
-    text-align: left;
-    white-space: nowrap;
-    width: auto;
-}
-.log_modules {
-    display: flex;
-    flex-wrap: wrap;
-}
-</style>
+[% Asset.css("css/humanmsg.css") | $raw %]
+[% FILTER collapse %]
+    <style>
+        fieldset.rows label.viewlog {
+            float: none;
+            font-weight: normal;
+            margin: 0;
+            min-width: 9em;
+            padding: .5em;
+            text-align: left;
+            white-space: nowrap;
+            width: auto;
+        }
+        .log_modules {
+            display: flex;
+            flex-wrap: wrap;
+        }
+        .compare_info {
+            background-color: #E6F0F2;
+            margin: .5em -.5em -.5em -.5em;
+            padding: .5em;
+            text-align: right;
+        }
+        .modal-dialog {
+            width : 90%;
+        }
+        /* jsdiff styles */
+        ins {
+            background-color: #e6ffe6;
+        }
+        del {
+            background-color: #ffe6e6;
+        }
+        #col1 ins,
+        #col2 del {
+            display: none;
+        }
+        pre {
+            overflow: scroll;
+            padding: 10px;
+        }
+    </style>
+[% END %]
 </head>
 
 <body id="tools_viewlog" class="tools">
@@ -225,6 +252,10 @@ fieldset.rows label.viewlog {
                 [% IF ( do_it ) %]
                     [% IF ( total ) %]
                         <h3>Log entries</h3>
+                        <div id="toolbar" class="btn-toolbar">
+                            <a href="#" id="select_none" class="btn btn-link disabled"><i class="fa fa-remove"></i> Check none</a>
+                            <button class="btn btn-link disabled compare_link"><i class="fa fa-columns"></i> Compare selected</button>
+                        </div>
                         <table id="logst">
                             <thead>
                                 <tr>
@@ -284,7 +315,18 @@ fieldset.rows label.viewlog {
                                         [% IF ( loopro.module == 'CIRCULATION' ) %]
                                             <a href="/cgi-bin/koha/catalogue/moredetail.pl?itemnumber=[% loopro.info | uri %]&amp;biblionumber=[% loopro.biblionumber | uri %]&amp;bi=[% loopro.biblioitemnumber | uri %]#item[% loopro.info | uri %]" title="Display detail for this item">Item [% loopro.barcode | html %]</a>
                                         [% ELSE %]
-                                            [% loopro.info | html %]
+                                            [% IF loopro.module == "SYSTEMPREFERENCE" %]
+                                                <div class="loginfo" id="loginfo[% loopro.action_id | html %]">
+                                                    [% loopro.info | html %]
+                                                </div>
+                                                <div class="compare_info" id="compare_info[% loopro.action_id | html %]">
+                                                    <label><input type="checkbox" name="diff" id="action_id[% loopro.action_id | html %]" data-actionid="[% loopro.action_id | html %]" data-filter="[% FOREACH info IN loopro.info.split(' \| ') %][% IF loop.first %][% info | html %][% END %][% END %]" class="compare" /> Compare</label>
+                                                </div>
+                                            [% ELSE %]
+                                                <div class="loginfo" id="loginfo[% loopro.action_id | html %]">
+                                                    [% loopro.info | html %]
+                                                </div>
+                                            [% END %]
                                         [% END %]
                                     </td>
                                     <td>[% PROCESS translate_log_interface log_interface=loopro.interface %]</td>
@@ -325,15 +367,44 @@ fieldset.rows label.viewlog {
         </div> <!-- /.col-sm-2.col-sm-pull-10 -->
      </div> <!-- /.row -->
 
+<div class="modal" id="compareInfo" tabindex="-1" role="dialog" aria-labelledby="compareInfoLabel">
+    <div class="modal-dialog modal-lg" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="closebtn" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                <h4 class="modal-title" id="compareInfoLabel">Compare preference values</h4>
+            </div>
+            <div class="modal-body">
+                <div class="row">
+                    <div class="compare_pane col-sm-6" id="col1">
+                        <h5>Older version</h5>
+                        <pre></pre>
+                    </div>
+                    <div class="compare_pane col-sm-6" id="col2">
+                        <h5>Newer version</h5>
+                        <pre></pre>
+                    </div>
+                </div>
+            </div> <!-- /.modal-body -->
+            <div class="modal-footer">
+                <button type="button" class="btn btn-default deny" data-dismiss="modal">Close</button>
+            </div>
+        </div> <!-- /.modal-content -->
+    </div> <!-- /.modal-dialog -->
+</div> <!-- /#compareInfo -->
+
 [% MACRO jsinclude BLOCK %]
     [% INCLUDE 'calendar.inc' %]
     [% INCLUDE 'datatables.inc' %]
     [% INCLUDE 'columns_settings.inc' %]
+    [% Asset.js("lib/jquery/plugins/humanmsg.js") | $raw %]
     [% Asset.js("js/tools-menu.js") | $raw %]
+    [% Asset.js("lib/hc-sticky.js") | $raw %]
     [% IF ( circulation ) %]
         [% INCLUDE 'str/members-menu.inc' %]
         [% Asset.js("js/members-menu.js") | $raw %]
     [% END %]
+    [% Asset.js("lib/jsdiff/jsdiff.min.js") | $raw %]
     <script>
         var columns_settings = [% TablesSettings.GetColumns('tools', 'logviewer', 'logst', 'json') | $raw %];
     </script>
diff --git a/koha-tmpl/intranet-tmpl/prog/js/viewlog.js b/koha-tmpl/intranet-tmpl/prog/js/viewlog.js
index 1354c95e0a..04eb6c7b2f 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/viewlog.js
+++ b/koha-tmpl/intranet-tmpl/prog/js/viewlog.js
@@ -1,3 +1,5 @@
+var Sticky;
+
 function tickAll(section){
     $("input[type='checkbox'][name='" + section + "']").prop("checked", true);
     $("#" + section.slice(0,-1) + "ALL").prop("checked", true);
@@ -10,7 +12,52 @@ function untickAll(section){
     $("input[type='checkbox'][name='" + section + "']").prop("disabled", false);
 }
 
+function limitCheckboxes() {
+    var checkboxes = $(".compare");
+    var limit = 2;
+    var compare_link = '<a href="#" class="btn btn-link compare_link"><i class="fa fa-columns"></i> ' + __("View comparison") + '</a>';
+    checkboxes.each(function(){
+        $(this).on("change", function(){
+            var checked = [];
+            checkboxes.each(function () {
+                if( $(this).prop("checked") ){
+                    checked.push( $(this).data("actionid") );
+                }
+            });
+            if (checked.length > 0) {
+                $("#select_none").removeClass("disabled");
+            } else {
+                $("#select_none").addClass("disabled");
+                $("#logst").DataTable().search("").draw();
+            }
+            if( checked.length == 1 ){
+                $("#logst").DataTable().search($(this).data("filter")).draw();
+                humanMsg.displayAlert( __("Showing results for %s").format( $(this).data("filter") ) );
+            }
+            if( checked.length == 2 ){
+                $("#compare_info" + checked[0]).prepend( compare_link );
+                $("#compare_info" + checked[1]).prepend( compare_link );
+                $("button.compare_link").removeClass("disabled");
+            } else if (checked.length > limit) {
+                humanMsg.displayAlert( __("You can select maximum of two checkboxes") );
+                $(this).prop("checked", false );
+            } else if (checked.length < limit) {
+                $("a.compare_link").remove();
+                $("button.compare_link").addClass("disabled");
+            }
+        });
+    });
+}
+
 $(document).ready(function(){
+    limitCheckboxes();
+    if ($('#toolbar').length) {
+        Sticky = $("#toolbar");
+        Sticky.hcSticky({
+            stickTo: "main",
+            stickyClass: "floating"
+        });
+    }
 
     if ( $('input[type="checkbox"][name="modules"]:checked').length == 0 ) {
         tickAll('modules');
@@ -67,4 +114,27 @@ $(document).ready(function(){
         "order": [[0, "desc"]],
         "pagingType" : "full"
     }, columns_settings);
+
+    $("body").on("click", ".compare_link", function(e){
+        e.preventDefault();
+        if( $(this).hasClass('disabled') ){
+            humanMsg.displayAlert( __("You must select two entries to compare") );
+        } else {
+            var firstid = $(".compare:checked").eq(0).data("actionid");
+            var secondid = $(".compare:checked").eq(1).data("actionid");
+            var firstvalue = $("#loginfo" + firstid).text();
+            var secondvalue = $("#loginfo" + secondid).text();
+            var diffs = diffString(secondvalue, firstvalue);
+            $("#col1 pre,#col2 pre").html(diffs);
+            $("#compareInfo").modal("show");
+        }
+    });
+    $("#compareInfo").on("hidden.bs.modal", function(){
+        $("#col1 pre,#col2 pre").html("");
+    });
+
+    $("#select_none").on("click", function(e){
+        e.preventDefault();
+        $(".compare:checked").prop("checked", false).change();
+    });
 });
-- 
2.39.5