From dfc6be2d8786cbf41036344d1b557d17d57bd923 Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
Date: Tue, 30 Mar 2021 17:25:01 +0000
Subject: [PATCH] Bug 28058: Move javascript out of columns_settings.inc into
 separate file

This patch moves the JavaScript contained in a <script> block inside
columns_settings.inc into a separate file.

The new JavaScript file, tablesettings.js, contains some corrections to
minor errors highlighted by eslint (missing semicolons, undeclared
variables, etc).

I'm also moving the contents of table_filters.js into tablesettings.js
and removing table_filters.js. I don't think it necessary to have a
whole separate JS file which is only used on pages which already include
columns_settings.inc.

To test, apply the patch and perform a catalog search in the staff
client.

- On the bibliographic detail page, confirm that the table of holdings
  still works correctly: Sorting, search, column filters, and export.
  - Confirm that clicking the "Activate filters" control activates the
  filter fields at the top of each table column.
- Go to Reports -> Lost items and perform the same tests.

Signed-off-by: David Nind <david@davidnind.com>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
---
 .../prog/en/includes/columns_settings.inc          | 169 +---------------
 .../prog/en/modules/catalogue/detail.tt            |   1 -
 .../prog/en/modules/reports/itemslost.tt           |   1 -
 koha-tmpl/intranet-tmpl/prog/js/table_filters.js   |  50 -----
 koha-tmpl/intranet-tmpl/prog/js/tablesettings.js   | 216 +++++++++++++++++++++
 5 files changed, 219 insertions(+), 218 deletions(-)
 delete mode 100644 koha-tmpl/intranet-tmpl/prog/js/table_filters.js
 create mode 100644 koha-tmpl/intranet-tmpl/prog/js/tablesettings.js

diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/columns_settings.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/columns_settings.inc
index 7f3c214ddc..1284657466 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/includes/columns_settings.inc
+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/columns_settings.inc
@@ -1,169 +1,6 @@
+[% USE raw %]
+[% USE Asset %]
 [% USE TablesSettings %]
 <!-- columns_settings.inc -->
-
-<script>
-function KohaTable(id_selector, dt_parameters, columns_settings, add_filters) {
-    var counter = 0;
-    var hidden_ids = [];
-    var included_ids = [];
-    var selector = '#' + id_selector;
-
-    $(columns_settings).each( function() {
-        var named_id = $( 'thead th[data-colname="' + this.columnname + '"]', selector ).index( selector + ' th' );
-        var used_id = dt_parameters.bKohaColumnsUseNames ? named_id : counter;
-        if ( used_id == -1 ) return;
-
-        if ( this['is_hidden'] == "1" ) {
-            hidden_ids.push( used_id );
-        }
-        if ( this['cannot_be_toggled'] == "0" ) {
-            included_ids.push( used_id );
-        }
-        counter++;
-    });
-
-    var exportColumns = ":visible:not(.noExport)";
-    if( dt_parameters.hasOwnProperty("exportColumns") ){
-        // A custom buttons configuration has been passed from the page
-        exportColumns = dt_parameters["exportColumns"];
-    }
-
-    var export_format = {
-        body: function ( data, row, column, node ) {
-            var newnode = $(node);
-
-            if ( newnode.find(".noExport").length > 0 ) {
-                newnode = newnode.clone();
-                newnode.find(".noExport").remove();
-            }
-
-            return newnode.text().replace( /\n/g, ' ' ).trim();
-        }
-    }
-
-    var export_buttons = [
-        {
-            extend: 'excelHtml5',
-            text: _("Excel"),
-            exportOptions: {
-                columns: exportColumns,
-                format:  export_format
-            },
-        },
-        {
-            extend: 'csvHtml5',
-            text: _("CSV"),
-            exportOptions: {
-                columns: exportColumns,
-                format:  export_format
-            },
-        },
-        {
-            extend: 'copyHtml5',
-            text: _("Copy"),
-            exportOptions: {
-                columns: exportColumns,
-                format:  export_format
-            },
-        },
-        {
-            extend: 'print',
-            text: _("Print"),
-            exportOptions: {
-                columns: exportColumns,
-                format:  export_format
-            },
-        }
-    ];
-
-    dt_parameters[ "buttons" ] = [
-        {
-            fade: 100,
-            className: "dt_button_clear_filter",
-            titleAttr: _("Clear filter"),
-            enabled: false,
-            text: '<i class="fa fa-lg fa-remove"></i> <span class="dt-button-text">' + _("Clear filter") + '</span>',
-            action: function ( e, dt, node, config ) {
-                dt.search( "" ).draw("page");
-                node.addClass("disabled");
-            }
-        }
-    ];
-
-    if( included_ids.length > 0 ){
-        dt_parameters[ "buttons" ].push(
-            {
-                extend: 'colvis',
-                fade: 100,
-                columns: included_ids,
-                className: "columns_controls",
-                titleAttr: _("Columns settings"),
-                text: '<i class="fa fa-lg fa-gear"></i> <span class="dt-button-text">' + _("Columns") + '</span>',
-                exportOptions: {
-                    columns: exportColumns
-                }
-            }
-        );
-    }
-
-    dt_parameters[ "buttons" ].push(
-        {
-            extend: 'collection',
-            autoClose: true,
-            fade: 100,
-            className: "export_controls",
-            titleAttr: _("Export or print"),
-            text: '<i class="fa fa-lg fa-download"></i> <span class="dt-button-text">' + _("Export") + '</span>',
-            buttons: export_buttons
-        }
-    );
-
-    var table = $(selector);
-    if ( add_filters ) {
-        // Duplicate the table header row for columnFilter
-        thead_row = table.find('thead tr');
-        clone = thead_row.clone().addClass('filters_row');
-        clone.find("th.NoSort").html('');
-        thead_row.before(clone);
-    }
-
-    var new_parameters = {}
-    $.extend(true, new_parameters, dataTablesDefaults, dt_parameters);
-    var default_column_defs = [
-        { "targets": [ "title-string" ], "type": "title-string" },
-        { "targets": [ "string-sort" ],  "type": "string" },
-        { "targets": [ "anti-the" ],     "type": "anti-the" },
-        { "targets": [ "NoSort" ],       "orderable": false, "searchable": false },
-    ];
-    if ( new_parameters["columnDefs"] === undefined ) {
-        new_parameters["columnDefs"] = default_column_defs;
-    } else {
-        $.extend(true, new_parameters, default_column_defs);
-    }
-
-    table.dataTable(new_parameters);
-    table.DataTable().on("column-visibility.dt", function(){
-        if( typeof columnsInit == 'function' ){
-            // This function can be created separately and used to trigger
-            // an event after the DataTable has loaded AND column visibility
-            // has been updated according to the table's configuration
-            columnsInit();
-        }
-    }).columns( hidden_ids ).visible( false );
-
-    if ( add_filters ) {
-        // show a link to activate filtering
-        link = $('<a>')
-            .attr('href', '#')
-            .attr('id', id_selector + '_activate_filters');
-        $("." + id_selector  + "_table_controls").prepend(link);
-        deactivate_filters(id_selector);
-    }
-
-    $(".dt_button_clear_filter, .columns_controls, .export_controls").tooltip();
-
-    return table;
-}
-
-</script>
+[% Asset.js("js/tablesettings.js") | $raw %]
 <!-- / columns_settings.inc -->
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/detail.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/detail.tt
index dfc9411a03..16161d262d 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/detail.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/detail.tt
@@ -1286,7 +1286,6 @@ Note that permanent location is a code, and location may be an authval.
     [% Asset.js("lib/jquery/plugins/jquery.dataTables.columnFilter.js") | $raw %]
     [% INCLUDE 'columns_settings.inc' %]
     [% Asset.js("js/browser.js") | $raw %]
-    [% Asset.js("js/table_filters.js") | $raw %]
     <script>
         var browser;
         browser = KOHA.browser('[% searchid | html %]', parseInt(biblionumber, 10));
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/reports/itemslost.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/reports/itemslost.tt
index f6496fa904..41b107dbc6 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/reports/itemslost.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/reports/itemslost.tt
@@ -208,7 +208,6 @@
     [% INCLUDE 'datatables.inc' %]
     [% Asset.js("lib/jquery/plugins/jquery.dataTables.columnFilter.js") | $raw %]
     [% INCLUDE 'columns_settings.inc' %]
-    [% Asset.js("js/table_filters.js") | $raw %]
     <script>
         $(document).ready(function() {
             var columns_settings = [% TablesSettings.GetColumns( 'reports', 'lostitems', 'lostitems-table', 'json' ) | $raw %];
diff --git a/koha-tmpl/intranet-tmpl/prog/js/table_filters.js b/koha-tmpl/intranet-tmpl/prog/js/table_filters.js
deleted file mode 100644
index 85519b0c70..0000000000
--- a/koha-tmpl/intranet-tmpl/prog/js/table_filters.js
+++ /dev/null
@@ -1,50 +0,0 @@
-function activate_filters(id) {
-    var table = $("#" + id );
-    if (table.length == 1) {
-        filters_row = table.find('thead tr.filters_row');
-
-        var aoColumns = [];
-        filters_row.find('th').each(function() {
-            if(this.className === "NoSort"){
-                aoColumns.push(null);
-            } else {
-                aoColumns.push('text');
-            }
-        });
-
-        if (table.find('thead tr.columnFilter').length == 0) {
-            table.dataTable().columnFilter({
-                'sPlaceHolder': 'head:after'
-                ,   'aoColumns': aoColumns
-            });
-            filters_row.addClass('columnFilter');
-        }
-        filters_row.show();
-    }
-
-    $('#' + id + '_activate_filters')
-        .html('<i class="fa fa-filter"></i> ' + __('Deactivate filters') )
-        .unbind('click')
-        .click(function() {
-            deactivate_filters(id);
-            return false;
-        });
-}
-
-function deactivate_filters(id) {
-    filters_row = $("#" + id ).find('thead tr.filters_row');
-
-    filters_row.find('input[type="text"]')
-        .val('')            // Empty filter text boxes
-        .trigger('keyup')   // Filter (display all rows)
-        .trigger('blur');   // Reset value to the column name
-    filters_row.hide();
-
-    $('#' + id + '_activate_filters')
-        .html('<i class="fa fa-filter"></i> ' + __('Activate filters') )
-        .unbind('click')
-        .click(function() {
-            activate_filters(id);
-            return false;
-        });
-}
diff --git a/koha-tmpl/intranet-tmpl/prog/js/tablesettings.js b/koha-tmpl/intranet-tmpl/prog/js/tablesettings.js
new file mode 100644
index 0000000000..9445b2d628
--- /dev/null
+++ b/koha-tmpl/intranet-tmpl/prog/js/tablesettings.js
@@ -0,0 +1,216 @@
+/* global dataTablesDefaults columnsInit __ */
+/* exported KohaTable */
+
+function KohaTable(id_selector, dt_parameters, columns_settings, add_filters) {
+    var counter = 0;
+    var hidden_ids = [];
+    var included_ids = [];
+    var selector = '#' + id_selector;
+
+    $(columns_settings).each(function () {
+        var named_id = $('thead th[data-colname="' + this.columnname + '"]', selector).index(selector + ' th');
+        var used_id = dt_parameters.bKohaColumnsUseNames ? named_id : counter;
+        if (used_id == -1) return;
+
+        if (this['is_hidden'] == "1") {
+            hidden_ids.push(used_id);
+        }
+        if (this['cannot_be_toggled'] == "0") {
+            included_ids.push(used_id);
+        }
+        counter++;
+    });
+
+    var exportColumns = ":visible:not(.noExport)";
+    if (dt_parameters.hasOwnProperty("exportColumns")) {
+        // A custom buttons configuration has been passed from the page
+        exportColumns = dt_parameters["exportColumns"];
+    }
+
+    var export_format = {
+        body: function (data, row, column, node) {
+            var newnode = $(node);
+
+            if (newnode.find(".noExport").length > 0) {
+                newnode = newnode.clone();
+                newnode.find(".noExport").remove();
+            }
+
+            return newnode.text().replace(/\n/g, ' ').trim();
+        }
+    };
+
+    var export_buttons = [
+        {
+            extend: 'excelHtml5',
+            text: __("Excel"),
+            exportOptions: {
+                columns: exportColumns,
+                format: export_format
+            },
+        },
+        {
+            extend: 'csvHtml5',
+            text: __("CSV"),
+            exportOptions: {
+                columns: exportColumns,
+                format: export_format
+            },
+        },
+        {
+            extend: 'copyHtml5',
+            text: __("Copy"),
+            exportOptions: {
+                columns: exportColumns,
+                format: export_format
+            },
+        },
+        {
+            extend: 'print',
+            text: __("Print"),
+            exportOptions: {
+                columns: exportColumns,
+                format: export_format
+            },
+        }
+    ];
+
+    dt_parameters["buttons"] = [
+        {
+            fade: 100,
+            className: "dt_button_clear_filter",
+            titleAttr: __("Clear filter"),
+            enabled: false,
+            text: '<i class="fa fa-lg fa-remove"></i> <span class="dt-button-text">' + __("Clear filter") + '</span>',
+            action: function (e, dt, node) {
+                dt.search("").draw("page");
+                node.addClass("disabled");
+            }
+        }
+    ];
+
+    if (included_ids.length > 0) {
+        dt_parameters["buttons"].push(
+            {
+                extend: 'colvis',
+                fade: 100,
+                columns: included_ids,
+                className: "columns_controls",
+                titleAttr: __("Columns settings"),
+                text: '<i class="fa fa-lg fa-gear"></i> <span class="dt-button-text">' + __("Columns") + '</span>',
+                exportOptions: {
+                    columns: exportColumns
+                }
+            }
+        );
+    }
+
+    dt_parameters["buttons"].push(
+        {
+            extend: 'collection',
+            autoClose: true,
+            fade: 100,
+            className: "export_controls",
+            titleAttr: __("Export or print"),
+            text: '<i class="fa fa-lg fa-download"></i> <span class="dt-button-text">' + __("Export") + '</span>',
+            buttons: export_buttons
+        }
+    );
+
+    var table = $(selector);
+    if (add_filters) {
+        // Duplicate the table header row for columnFilter
+        var thead_row = table.find('thead tr');
+        var clone = thead_row.clone().addClass('filters_row');
+        clone.find("th.NoSort").html('');
+        thead_row.before(clone);
+    }
+
+    var new_parameters = {};
+    $.extend(true, new_parameters, dataTablesDefaults, dt_parameters);
+    var default_column_defs = [
+        { "targets": ["title-string"], "type": "title-string" },
+        { "targets": ["string-sort"], "type": "string" },
+        { "targets": ["anti-the"], "type": "anti-the" },
+        { "targets": ["NoSort"], "orderable": false, "searchable": false },
+    ];
+    if (new_parameters["columnDefs"] === undefined) {
+        new_parameters["columnDefs"] = default_column_defs;
+    } else {
+        $.extend(true, new_parameters, default_column_defs);
+    }
+
+    table.dataTable(new_parameters);
+    table.DataTable().on("column-visibility.dt", function () {
+        if (typeof columnsInit == 'function') {
+            // This function can be created separately and used to trigger
+            // an event after the DataTable has loaded AND column visibility
+            // has been updated according to the table's configuration
+            columnsInit();
+        }
+    }).columns(hidden_ids).visible(false);
+
+    if (add_filters) {
+        // show a link to activate filtering
+        var link = $('<a>')
+            .attr('href', '#')
+            .attr('id', id_selector + '_activate_filters');
+        $("." + id_selector + "_table_controls").prepend(link);
+        deactivate_filters(id_selector);
+    }
+
+    $(".dt_button_clear_filter, .columns_controls, .export_controls").tooltip();
+
+    return table;
+}
+
+function activate_filters(id) {
+    var table = $("#" + id);
+    if (table.length == 1) {
+        var filters_row = table.find('thead tr.filters_row');
+
+        var aoColumns = [];
+        filters_row.find('th').each(function () {
+            if (this.className === "NoSort") {
+                aoColumns.push(null);
+            } else {
+                aoColumns.push('text');
+            }
+        });
+
+        if (table.find('thead tr.columnFilter').length == 0) {
+            table.dataTable().columnFilter({
+                'sPlaceHolder': 'head:after'
+                , 'aoColumns': aoColumns
+            });
+            filters_row.addClass('columnFilter');
+        }
+        filters_row.show();
+    }
+
+    $('#' + id + '_activate_filters')
+        .html('<i class="fa fa-filter"></i> ' + __('Deactivate filters'))
+        .unbind('click')
+        .click(function () {
+            deactivate_filters(id);
+            return false;
+        });
+}
+
+function deactivate_filters(id) {
+    var filters_row = $("#" + id).find('thead tr.filters_row');
+
+    filters_row.find('input[type="text"]')
+        .val('')            // Empty filter text boxes
+        .trigger('keyup')   // Filter (display all rows)
+        .trigger('blur');   // Reset value to the column name
+    filters_row.hide();
+
+    $('#' + id + '_activate_filters')
+        .html('<i class="fa fa-filter"></i> ' + __('Activate filters'))
+        .unbind('click')
+        .click(function () {
+            activate_filters(id);
+            return false;
+        });
+}
-- 
2.11.0