From b5c26e25bc0293b00ffb6944ca2577678b24c28e Mon Sep 17 00:00:00 2001 From: Jonathan Druart Date: Thu, 3 Oct 2024 13:35:34 +0200 Subject: [PATCH] Bug 33484: Always save but restore on demand only And remove get_columns_saved_state. I am not sure this what really helpful, maybe in case the yml or config in the DB changed, but I don't think we should complicate the code. If something is wrong, logout to clear localStorage... We will see later if we really need it. Signed-off-by: Pedro Amorim Signed-off-by: Jonathan Druart Signed-off-by: Martin Renvoize --- .../prog/en/includes/columns_settings.inc | 78 +++++-------------- koha-tmpl/intranet-tmpl/prog/js/datatables.js | 71 +++++++---------- .../prog/js/vue/components/KohaTable.vue | 35 +-------- 3 files changed, 53 insertions(+), 131 deletions(-) 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 562c4686e41..c082277b9aa 100644 --- a/koha-tmpl/intranet-tmpl/prog/en/includes/columns_settings.inc +++ b/koha-tmpl/intranet-tmpl/prog/en/includes/columns_settings.inc @@ -15,31 +15,31 @@ function KohaTable(id_selector, dt_parameters, table_settings, add_filters) { let columns_settings = table_settings["columns"]; let table_key = 'DataTables_%s_%s_%s'.format( - table_settings["module"], - table_settings["page"], - table_settings["table"]); + table_settings.module, + table_settings.page, + table_settings.table); let default_save_state = table_settings.default_save_state; let default_save_state_search = table_settings.default_save_state_search; - if ( default_save_state ) { - dt_parameters["stateSave"] = true; - dt_parameters["stateSaveCallback"] = function( settings, data ) { - if (!default_save_state_search ) { - delete data.search; - data.columns.forEach(c => delete c.search ); - } - localStorage.setItem( table_key, JSON.stringify(data) ) - } - dt_parameters["stateLoadCallback"] = function(settings) { - return JSON.parse( localStorage.getItem(table_key) ) - } - let local_settings = localStorage.getItem(table_key); - columns_settings = get_columns_saved_state(local_settings, columns_settings); - } else { - localStorage.removeItem(table_key); + dt_parameters.stateSave = true; + dt_parameters.stateSaveCallback = function( settings, data ) { + localStorage.setItem( table_key, JSON.stringify(data) ) } + dt_parameters.stateLoadCallback = function(settings) { + if (!default_save_state) return {}; + + let state = localStorage.getItem(table_key); + if (!state) return {}; + state = JSON.parse(state); + + if (!default_save_state_search ) { + delete state.search; + state.columns.forEach(c => delete c.search ); + } + return state; + } $(columns_settings).each( function() { var named_id = $( 'thead th[data-colname="' + this.columnname + '"]', selector ).index( selector + ' th' ); @@ -264,45 +264,5 @@ function KohaTable(id_selector, dt_parameters, table_settings, add_filters) { return table; } - - -/* get_columns_saved_state checks for a DataTables configuration saved -* in the browser's local storage. If it is present, the columns -* configuration supplied by Koha is overwritten -* -* It takes two parameters: -* - localstorage_config, the DataTables saved state object from local storage -* - columns_settings, the columns settings object supplied by the template -* -* An example: -* -* var columns_settings = [% ColumnsSettings.GetColumns( 'module', 'page', 'table', 'json' ) | $raw %]; -* var saved_table = localStorage.getItem("DataTables_TABLE_ID_/cgi-bin/koha/PATH/TO/SCRIPT.pl"); -* var updated_settings = get_columns_saved_state( saved_table, columns_settings ); -* -* KohaTable("TABLE_ID", { -* "stateSave": true -* }, updated_settings); -*/ - -function get_columns_saved_state( localstorage_config, columns_settings ){ - var tables = JSON.parse( localstorage_config ); - // if a table configuration was found in local storage, parse it - if( tables ){ - var stateSave_column_visibility = []; - $(tables.columns).each(function(){ - stateSave_column_visibility.push( this.visible === true ? 0 : 1 ); - }); - $.each( columns_settings, function( index, key ){ - if( stateSave_column_visibility[ index ] !== columns_settings[key] ){ - columns_settings[ index ].is_hidden = stateSave_column_visibility[ index ]; - } - }); - return columns_settings; - } else { - return columns_settings; - } -} - diff --git a/koha-tmpl/intranet-tmpl/prog/js/datatables.js b/koha-tmpl/intranet-tmpl/prog/js/datatables.js index a249fa41cac..790f66e9b90 100644 --- a/koha-tmpl/intranet-tmpl/prog/js/datatables.js +++ b/koha-tmpl/intranet-tmpl/prog/js/datatables.js @@ -938,21 +938,35 @@ function _dt_add_delay(table_dt, table_node, delay_ms) { }); } -function _dt_get_saved_state( localstorage_config, columns_settings ){ - var tables = JSON.parse( localstorage_config ); - // if a table configuration was found in local storage, parse it - if( tables ){ - var stateSave_column_visibility = []; - $(tables.columns).each(function(){ - stateSave_column_visibility.push( this.visible === true ? 0 : 1 ); - }); - $.each( columns_settings, function( index, key ){ - if( stateSave_column_visibility[ index ] !== columns_settings[key] ){ - columns_settings[ index ].is_hidden = stateSave_column_visibility[ index ]; - } - }); +function _dt_save_restore_state(table_settings){ + + let table_key = 'DataTables_%s_%s_%s'.format( + table_settings.module, + table_settings.page, + table_settings.table); + + let default_save_state = table_settings.default_save_state; + let default_save_state_search = table_settings.default_save_state_search; + + let stateSaveCallback = function( settings, data ) { + localStorage.setItem( table_key, JSON.stringify(data) ) + } + let stateLoadCallback = function(settings) { + if (!default_save_state) return {}; + + let state = localStorage.getItem(table_key); + if (!state) return {}; + + state = JSON.parse(state); + + if (!default_save_state_search ) { + delete state.search; + state.columns.forEach(c => delete c.search ); + } + return state; } - return columns_settings; + + return {stateSave: true, stateSaveCallback, stateLoadCallback}; } (function($) { @@ -1009,33 +1023,8 @@ function _dt_get_saved_state( localstorage_config, columns_settings ){ } if ( table_settings ) { - - let columns_settings = table_settings["columns"]; - let table_key = 'DataTables_%s_%s_%s'.format( - table_settings["module"], - table_settings["page"], - table_settings["table"]); - - let default_save_state = table_settings.default_save_state; - let default_save_state_search = table_settings.default_save_state_search; - - if ( default_save_state ) { - settings["stateSave"] = true; - settings["stateSaveCallback"] = function( settings, data ) { - if (!default_save_state_search ) { - delete data.search; - data.columns.forEach(c => delete c.search ); - } - localStorage.setItem( table_key, JSON.stringify(data) ) - } - settings["stateLoadCallback"] = function(settings) { - return JSON.parse( localStorage.getItem(table_key) ) - } - let local_settings = localStorage.getItem(table_key); - columns_settings = _dt_get_saved_state(local_settings, columns_settings); - } else { - localStorage.removeItem(table_key); - } + let state_settings = _dt_save_restore_state(table_settings); + settings = {...settings, ...state_settings}; if ( table_settings.hasOwnProperty('default_display_length') && table_settings['default_display_length'] != null ) { settings["pageLength"] = table_settings['default_display_length']; diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/KohaTable.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/KohaTable.vue index 5e6e9d6d9e7..9064f677c44 100644 --- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/KohaTable.vue +++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/KohaTable.vue @@ -37,37 +37,10 @@ export default { } if (this.table_settings) { - let columns_settings = this.table_settings["columns"] - let table_key = "DataTables_%s_%s_%s".format( - this.table_settings.module, - this.table_settings.page, - this.table_settings.table - ) - - let default_save_state = this.table_settings.default_save_state - let default_save_state_search = - this.table_settings.default_save_state_search - - if (default_save_state) { - this.options.stateSave = true - this.options.stateSaveCallback = function (settings, data) { - if (!default_save_state_search) { - delete data.search - data.columns.forEach(c => delete c.search) - } - localStorage.setItem(table_key, JSON.stringify(data)) - } - this.options.stateLoadCallback = function (settings) { - return JSON.parse(localStorage.getItem(table_key)) - } - let local_settings = localStorage.getItem(table_key) - columns_settings = _dt_get_saved_state( - local_settings, - columns_settings - ) - } else { - localStorage.removeItem(table_key) - } + let state_settings = _dt_save_restore_state(this.table_settings) + this.options.stateSave = state_settings.stateSave + this.options.stateSaveCallback = state_settings.stateSaveCallback + this.options.stateLoadCallback = state_settings.stateLoadCallback if ( this.table_settings.hasOwnProperty("default_display_length") && -- 2.34.1