Attachment 119163 Details for Bug 28058 – Bug 28058: Move javascript out of columns_settings.inc into separate file

[patch] Bug 28058: Move javascript out of columns_settings.inc into separate file

Bug-28058-Move-javascript-out-of-columnssettingsin.patch (text/plain), 17.92 KB, created by David Nind on 2021-04-03 20:56:57 UTC

(hide)

Description:

Filename:

MIME Type:

Creator: David Nind

Created: 2021-04-03 20:56:57 UTC

Size: 17.92 KB

patch

obsolete

>From 0f7cc4e16b3f2fceddfe4e7e47ee7646dad8ece3 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>
>---
> .../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 %]
> 
>-
>-<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: ' ' + _("Clear filter") + '',
>- 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: ' ' + _("Columns") + '',
>- exportOptions: {
>- columns: exportColumns
>- }
>- }
>- );
>- }
>-
>- dt_parameters[ "buttons" ].push(
>- {
>- extend: 'collection',
>- autoClose: true,
>- fade: 100,
>- className: "export_controls",
>- titleAttr: _("Export or print"),
>- text: ' ' + _("Export") + '',
>- 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 %]
> 
>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(' ' + __('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(' ' + __('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: ' ' + __("Clear filter") + '',
>+ 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: ' ' + __("Columns") + '',
>+ exportOptions: {
>+ columns: exportColumns
>+ }
>+ }
>+ );
>+ }
>+
>+ dt_parameters["buttons"].push(
>+ {
>+ extend: 'collection',
>+ autoClose: true,
>+ fade: 100,
>+ className: "export_controls",
>+ titleAttr: __("Export or print"),
>+ text: ' ' + __("Export") + '',
>+ 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(' ' + __('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(' ' + __('Activate filters'))
>+ .unbind('click')
>+ .click(function () {
>+ activate_filters(id);
>+ return false;
>+ });
>+}
>-- 
>2.11.0

Actions: View | Diff | Splinter Review

Attachments on bug 28058: 119024 | 119163 | 119165 | 119321