From 112c50d146a3c013bae7cdee97de5850849fad79 Mon Sep 17 00:00:00 2001 From: Jonathan Druart Date: Fri, 15 Nov 2024 15:28:41 +0100 Subject: [PATCH] Bug 38436: Fix column visibility when bKohaColumnsUseNames is used When the columns displayed in the table can vary (depending on sysprefs) we use bKohaColumnsUseNames. This allows us to use the name of the columns instead of there order number. The code was totally wrong, and didn't retrieve the correct number. A good example to confirm that is to add: console.log("%s is at %s".format(this.columnname, used_id)); at the end of the `if ( use_names ) {` block of _dt_visibility. If at least one column is hidden by default and cannot be toggled (and so won't appear in the list of the columns of the "Column visibility" button), there will be a shift. This line was definitelly wrong: var named_id = $( 'thead th[data-colname="' + this.columnname + '"]', selector ).index( selector + ' th' ); We cannot rely on the order of the visible columns, we need to retrieve the list of the columns using DT's api. Now the columns are retrieved using their class names, and from DT's api. The code is way nicer and more inline with how we are supposed to play with DT. Look at those 2 lines to pass the list of columns to the colvis button: let included_columns = table_settings.columns.filter(c => !c.cannot_be_toggled); columns: included_columns.map(c => '.' + c.columnname).join(',') Test plan: Play intensively with the items table (detail.pl), but also with the other tables not using bKohaColumnsUseNames (eg. patrons search) You need to set column as hidden by default and/or cannot be toggled. You need to play with the "Columns" button. Note that you need to remove the localStorage keys starting with 'DataTables_' to retrieve the visibility settings from what is defined in the admin area. --- koha-tmpl/intranet-tmpl/prog/js/datatables.js | 65 +++++++------------ 1 file changed, 25 insertions(+), 40 deletions(-) diff --git a/koha-tmpl/intranet-tmpl/prog/js/datatables.js b/koha-tmpl/intranet-tmpl/prog/js/datatables.js index bebcee9a2e9..fda47996c63 100644 --- a/koha-tmpl/intranet-tmpl/prog/js/datatables.js +++ b/koha-tmpl/intranet-tmpl/prog/js/datatables.js @@ -596,7 +596,6 @@ function _dt_default_ajax (params){ } function _dt_buttons(params){ - let included_ids = params.included_ids || []; let settings = params.settings || {}; let table_settings = params.table_settings; @@ -665,12 +664,13 @@ function _dt_buttons(params){ } ); - if( included_ids.length > 0 ){ + let included_columns = table_settings.columns.filter(c => !c.cannot_be_toggled); + if( included_columns.length > 0 ){ buttons.push( { extend: 'colvis', fade: 100, - columns: included_ids, + columns: included_columns.map(c => "[data-colname='%s']".format(c.columnname)).join(','), className: "columns_controls", titleAttr: __("Columns settings"), text: ' ' + __("Columns") + '', @@ -738,37 +738,26 @@ function _dt_buttons(params){ return buttons; } -function _dt_visibility(table_settings, settings, node){ - var counter = 0; +function _dt_visibility(table_settings, table_dt){ let hidden_ids = []; - let included_ids = []; if ( table_settings ) { - var columns_settings = table_settings['columns']; - $(columns_settings).each( function() { - let used_id = counter; - let use_names = $(node).data('bKohaColumnsUseNames'); - if ( use_names ) { - if (!node){ - console.err("bKohaColumnsUseNames is set but node not passed"); - return; + var columns_settings = table_settings.columns; + let i = 0; + let use_names = $(table_dt.table().node()).data('bKohaColumnsUseNames'); + if ( use_names ) { + let hidden_columns = table_settings.columns.filter(c => c.is_hidden); + table_dt.columns(hidden_columns.map(c => "[data-colname='%s']".format(c.columnname)).join(',')).every(function(){ + hidden_ids.push(this.index()); + }); + } else { + $(columns_settings).each( function(i, c) { + if ( c.is_hidden == '1' ) { + hidden_ids.push(i); } - let selector = '#' + node.attr('id'); - var named_id = $( 'thead th[data-colname="' + this.columnname + '"]', selector ).index( selector + ' th' ); - used_id = named_id; - } - - 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++; - }); + }); + } } - return [hidden_ids, included_ids]; + return hidden_ids; } function _dt_on_visibility(add_filters, table_node, table_dt){ @@ -894,10 +883,9 @@ function _dt_save_restore_state(table_settings, external_filter_nodes={}){ localStorage.setItem( table_key, JSON.stringify(data) ) } - function set_default(table_settings, settings){ - let columns = new Array(table_settings.columns.length).fill({visible: true}); - let hidden_ids, included_ids; - [hidden_ids, included_ids] = _dt_visibility(table_settings, settings, $("#"+settings.nTable.id)); + function set_default(table_settings, table_dt){ + let columns = new Array(table_dt.columns()[0].length).fill({visible: true}); + let hidden_ids = _dt_visibility(table_settings, table_dt); hidden_ids.forEach((id, i) => { columns[id] = { visible: false } } ); // State is not loaded if time is not passed return { columns, time: new Date() }; @@ -911,10 +899,10 @@ function _dt_save_restore_state(table_settings, external_filter_nodes={}){ return JSON.parse(atob(state_from_url)); } - if (!default_save_state) return set_default(table_settings, settings); + if (!default_save_state) return set_default(table_settings, this.api()); let state = localStorage.getItem(table_key); - if (!state) return set_default(table_settings, settings); + if (!state) return set_default(table_settings, this.api()); state = JSON.parse(state); @@ -1039,10 +1027,7 @@ function _dt_save_restore_state(table_settings, external_filter_nodes={}){ }, options); } - let hidden_ids, included_ids; - [hidden_ids, included_ids] = _dt_visibility(table_settings, settings, this) - - settings["buttons"] = _dt_buttons({included_ids, settings, table_settings}); + settings["buttons"] = _dt_buttons({settings, table_settings}); if ( add_filters ) { settings['orderCellsTop'] = true; -- 2.34.1