Attachment #173459 for bug #33484

View | Details | Raw Unified | Return to bug 33484
Collapse All | Expand All




}

function _dt_on_visibility(add_filters, table_node, table_dt){
    // FIXME REPLACE ME
        let visible_columns = table_dt.columns().visible();
        $(table_node).find('thead tr:eq(1) th').each( function (i) {
            let th_id = $(this).data('th-id');
            if ( visible_columns[th_id] == false ) {
                $(this).hide();
            } else {
                $(this).show();
            }
        });
    }

    if( typeof columnsInit == 'function' ){
        // This function can be created separately and used to trigger
        // an event after the DataTable has loaded AND column visibility

}

function _dt_add_filters(table_node, table_dt, filters_options = {}) {
    $(table_node).find('thead tr').clone().appendTo( $(table_node).find('thead') );

    $(table_node).find('thead tr:eq(1)').remove(); // Remove if one exists already
    $(table_node).find('thead tr').clone().appendTo( $(table_node).find('thead') );
        j++
        var is_visible = table_dt.settings()[0].aoColumns[j].bVisible;
        if ( !is_visible ) { j++ }
        i = j;

    let visibility = table_dt.columns().visible();
    let columns = table_dt.settings()[0].aoColumns;
    table_dt.columns().every( function () {
        var column = this;
        let i = column.index();
        var visible_i = table_dt.column.index('fromData', i);
        let th = $(table_node).find('thead tr:eq(1) th:eq(%s)'.format(visible_i));
        var is_searchable = columns[i].bSearchable;
        $(th).removeClass('sorting').removeClass("sorting_asc").removeClass("sorting_desc");
        if ( is_searchable ) {
            let input_type = 'input';
            if ( $(th).data('filter') || filters_options.hasOwnProperty(i)) {
                input_type = 'select'
                let filter_type = $(th).data('filter');
                let existing_search = column.search();
                let select = $('<select class="dt-select-filter"><option value=""></option></select');

                // FIXME eval here is bad and dangerous, how do we workaround that?

                }
                $(filters_options[i]).each(function(){
                    let o = $('<option value="%s">%s</option>'.format(this._id, this._str));
                    if ( existing_search === this._id || (existing_search && this._id.match(existing_search)) ) {
                        o.prop("selected", "selected");
                    }
                    o.appendTo(select);
                });
                $(th).html( select );
            } else {
                var title = $(th).text();
                var existing_search = table_dt.column(i).search();
                if ( existing_search ) {
                    $(th).html( '<input type="text" value="%s" style="width: 100%" />'.format(existing_search) );
                } else {
                    var search_title = __("%s search").format(title);
                    $(th).html( '<input type="text" placeholder="%s" style="width: 100%" />'.format(search_title) );
                }
            }


                };
            }

            $(input_type, th).on('keyup change', (delay(function () {
                if (table_dt.column(i).search() !== this.value) {
                    if (input_type == "input") {
                        table_dt

                }
            }, 500)));
        } else {
            $(th).html('');
        }
    } );
}

    let stateSaveCallback = function( settings, data ) {
        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));
        hidden_ids.forEach((id, i) => { columns[id] = { visible: false } } );
        // State is not loaded if time is not passed
        return { columns, time: new Date() };
    }
    let stateLoadCallback = function(settings) {

        // Load state from URL

            return JSON.parse(atob(state_from_url));
        }

        if (!default_save_state) return set_default(table_settings, settings);

        let state = localStorage.getItem(table_key);
        if (!state) return set_default(table_settings, settings);

        state = JSON.parse(state);


            _dt_add_filters(this, table_dt, filters_options);
        }

        table_dt.on("column-visibility.dt", function(){
            if ( add_filters ) {
                _dt_add_filters(this, table_dt, filters_options);
            }
        });

        table_dt.on( 'search.dt', function ( e, settings ) {
            // When the DataTables search function is triggered,
- 

Return to bug 33484

Lines 830-847 function _dt_visibility(table_settings, settings, node){ Link Here

(-)a/koha-tmpl/intranet-tmpl/prog/js/datatables.js (-37 / +38 lines)
830	}	830	}
831		831
832	function _dt_on_visibility(add_filters, table_node, table_dt){	832	function _dt_on_visibility(add_filters, table_node, table_dt){
833	if ( add_filters ) {	833	// FIXME REPLACE ME
834	let visible_columns = table_dt.columns().visible();
835	$(table_node).find('thead tr:eq(1) th').each( function (i) {
836	let th_id = $(this).data('th-id');
837	if ( visible_columns[th_id] == false ) {
838	$(this).hide();
839	} else {
840	$(this).show();
841	}
842	});
843	}
844
845	if( typeof columnsInit == 'function' ){	834	if( typeof columnsInit == 'function' ){
846	// This function can be created separately and used to trigger	835	// This function can be created separately and used to trigger
847	// an event after the DataTable has loaded AND column visibility	836	// an event after the DataTable has loaded AND column visibility
Lines 851-874 function _dt_on_visibility(add_filters, table_node, table_dt){ Link Here
851	}	840	}
852		841
853	function _dt_add_filters(table_node, table_dt, filters_options = {}) {	842	function _dt_add_filters(table_node, table_dt, filters_options = {}) {
854	$(table_node).find('thead tr').clone().appendTo( $(table_node).find('thead') );
855		843
856	let j = -1;	844	$(table_node).find('thead tr:eq(1)').remove(); // Remove if one exists already
857	$(table_node).find('thead tr:eq(1) th').each( function (i) {	845	$(table_node).find('thead tr').clone().appendTo( $(table_node).find('thead') );
858	j++
859	var is_visible = table_dt.settings()[0].aoColumns[j].bVisible;
860	if ( !is_visible ) { j++ }
861	i = j;
862		846
863	var is_searchable = table_dt.settings()[0].aoColumns[i].bSearchable;	847	let visibility = table_dt.columns().visible();
864	$(this).removeClass('sorting').removeClass("sorting_asc").removeClass("sorting_desc");	848	let columns = table_dt.settings()[0].aoColumns;
865	$(this).data('th-id', i);	849	table_dt.columns().every( function () {
		850	var column = this;
		851	let i = column.index();
		852	var visible_i = table_dt.column.index('fromData', i);
		853	let th = $(table_node).find('thead tr:eq(1) th:eq(%s)'.format(visible_i));
		854	var is_searchable = columns[i].bSearchable;
		855	$(th).removeClass('sorting').removeClass("sorting_asc").removeClass("sorting_desc");
866	if ( is_searchable ) {	856	if ( is_searchable ) {
867	let input_type = 'input';	857	let input_type = 'input';
868	if ( $(this).data('filter') \|\| filters_options.hasOwnProperty(i)) {	858	if ( $(th).data('filter') \|\| filters_options.hasOwnProperty(i)) {
869	input_type = 'select'	859	input_type = 'select'
870	let filter_type = $(this).data('filter');	860	let filter_type = $(th).data('filter');
871	let existing_search = table_dt.column(i).search();	861	let existing_search = column.search();
872	let select = $('<select class="dt-select-filter"><option value=""></option></select');	862	let select = $('<select class="dt-select-filter"><option value=""></option></select');
873		863
874	// FIXME eval here is bad and dangerous, how do we workaround that?	864	// FIXME eval here is bad and dangerous, how do we workaround that?
Lines 879-898 function _dt_add_filters(table_node, table_dt, filters_options = {}) { Link Here
879	}	869	}
880	$(filters_options[i]).each(function(){	870	$(filters_options[i]).each(function(){
881	let o = $('<option value="%s">%s</option>'.format(this._id, this._str));	871	let o = $('<option value="%s">%s</option>'.format(this._id, this._str));
882	if ( existing_search === this._id ) {	872	if ( existing_search === this._id \|\| (existing_search && this._id.match(existing_search)) ) {
883	o.prop("selected", "selected");	873	o.prop("selected", "selected");
884	}	874	}
885	o.appendTo(select);	875	o.appendTo(select);
886	});	876	});
887	$(this).html( select );	877	$(th).html( select );
888	} else {	878	} else {
889	var title = $(this).text();	879	var title = $(th).text();
890	var existing_search = table_dt.column(i).search();	880	var existing_search = table_dt.column(i).search();
891	if ( existing_search ) {	881	if ( existing_search ) {
892	$(this).html( '<input type="text" value="%s" style="width: 100%" />'.format(existing_search) );	882	$(th).html( '<input type="text" value="%s" style="width: 100%" />'.format(existing_search) );
893	} else {	883	} else {
894	var search_title = __("%s search").format(title);	884	var search_title = __("%s search").format(title);
895	$(this).html( '<input type="text" placeholder="%s" style="width: 100%" />'.format(search_title) );	885	$(th).html( '<input type="text" placeholder="%s" style="width: 100%" />'.format(search_title) );
896	}	886	}
897	}	887	}
898		888
Lines 907-913 function _dt_add_filters(table_node, table_dt, filters_options = {}) { Link Here
907	};	897	};
908	}	898	}
909		899
910	$(input_type, this).on('keyup change', (delay(function () {	900	$(input_type, th).on('keyup change', (delay(function () {
911	if (table_dt.column(i).search() !== this.value) {	901	if (table_dt.column(i).search() !== this.value) {
912	if (input_type == "input") {	902	if (input_type == "input") {
913	table_dt	903	table_dt
Lines 923-929 function _dt_add_filters(table_node, table_dt, filters_options = {}) { Link Here
923	}	913	}
924	}, 500)));	914	}, 500)));
925	} else {	915	} else {
926	$(this).html('');	916	$(th).html('');
927	}	917	}
928	} );	918	} );
929	}	919	}
Lines 974-979 function _dt_save_restore_state(table_settings){ Link Here
974	let stateSaveCallback = function( settings, data ) {	964	let stateSaveCallback = function( settings, data ) {
975	localStorage.setItem( table_key, JSON.stringify(data) )	965	localStorage.setItem( table_key, JSON.stringify(data) )
976	}	966	}
		967
		968	function set_default(table_settings, settings){
		969	let columns = new Array(table_settings.columns.length).fill({visible: true});
		970	let hidden_ids, included_ids;
		971	[hidden_ids, included_ids] = _dt_visibility(table_settings, settings, $("#"+settings.nTable.id));
		972	hidden_ids.forEach((id, i) => { columns[id] = { visible: false } } );
		973	// State is not loaded if time is not passed
		974	return { columns, time: new Date() };
		975	}
977	let stateLoadCallback = function(settings) {	976	let stateLoadCallback = function(settings) {
978		977
979	// Load state from URL	978	// Load state from URL
Lines 983-992 function _dt_save_restore_state(table_settings){ Link Here
983	return JSON.parse(atob(state_from_url));	982	return JSON.parse(atob(state_from_url));
984	}	983	}
985		984
986	if (!default_save_state) return {};	985	if (!default_save_state) return set_default(table_settings, settings);
987		986
988	let state = localStorage.getItem(table_key);	987	let state = localStorage.getItem(table_key);
989	if (!state) return {};	988	if (!state) return set_default(table_settings, settings);
990		989
991	state = JSON.parse(state);	990	state = JSON.parse(state);
992		991
Lines 1072-1079 function _dt_save_restore_state(table_settings){ Link Here
1072	_dt_add_filters(this, table_dt, filters_options);	1071	_dt_add_filters(this, table_dt, filters_options);
1073	}	1072	}
1074		1073
1075	table_dt.on("column-visibility.dt", function(){_dt_on_visibility(add_filters, table, table_dt);})	1074	table_dt.on("column-visibility.dt", function(){
1076	.columns( hidden_ids ).visible( false );	1075	if ( add_filters ) {
		1076	_dt_add_filters(this, table_dt, filters_options);
		1077	}
		1078	});
1077		1079
1078	table_dt.on( 'search.dt', function ( e, settings ) {	1080	table_dt.on( 'search.dt', function ( e, settings ) {
1079	// When the DataTables search function is triggered,	1081	// When the DataTables search function is triggered,
1080	-