mirror of
https://github.com/Combodo/iTop.git
synced 2026-02-12 23:14:18 +01:00
Bulk Export redesign, addressing the tickets:
#1071 Bulk Read access rights #1034 List of fields for Excel export #772 Some attributes not exportedvia export.php Main features: - list and order of the fields taken into account - interactive mode to specify all the parameters interactively (including the list and the order of fields) - same behavior for all the formats: html, CSV, spreadsheet, XML - new PDF export SVN:trunk[3606]
This commit is contained in:
Denis Flaven
513
js/tabularfieldsselector.js
Normal file
513
js/tabularfieldsselector.js
Normal file
@@ -0,0 +1,513 @@
|
||||
// jQuery UI style "widget" for managing the "xlsx-exporter"
|
||||
$(function()
|
||||
{
|
||||
// the widget definition, where "itop" is the namespace,
|
||||
// "tabularfieldsselector" the widget name
|
||||
$.widget( "itop.tabularfieldsselector",
|
||||
{
|
||||
// default options
|
||||
options:
|
||||
{
|
||||
fields: [],
|
||||
value_holder: '#tabular_fields',
|
||||
sample_data: [],
|
||||
total_count: 0,
|
||||
preview_limit: 3,
|
||||
labels: {
|
||||
preview_header: "Drag and drop the columns to change their order. Preview of %1$s lines. Total number of lines to export: %2$s",
|
||||
empty_preview: "Select the columns to be exported from the list above",
|
||||
columns_order: "Columns order",
|
||||
columns_selection: 'Available columns from %1$s',
|
||||
check_all: 'Check all',
|
||||
uncheck_all: 'Uncheck all',
|
||||
no_field_selected: 'Select at least one column to be exported'
|
||||
}
|
||||
},
|
||||
|
||||
// the constructor
|
||||
_create: function()
|
||||
{
|
||||
var me = this;
|
||||
this._flatten_fields(this.options.fields);
|
||||
this.sId = this.element.attr('id');
|
||||
this.element
|
||||
.addClass('itop-tabularfieldsselector');
|
||||
this.element.parent().bind('form-part-activate', function() { me._update_from_holder(); me._update_preview(); });
|
||||
this.element.parent().bind('validate', function() { me.validate(); });
|
||||
|
||||
this.aSelected = [];
|
||||
var sContent = '';
|
||||
|
||||
for(var i in this.options.fields)
|
||||
{
|
||||
sContent += '<fieldset><legend>'+this._format(this.options.labels.columns_selection, i)+'</legend>';
|
||||
sContent += '<div style="text-align:right"><button class="check_all" type="button">'+this.options.labels.check_all+'</button> <button class="uncheck_all" type="button">'+this.options.labels.uncheck_all+'</button></div>';
|
||||
for(var j in this.options.fields[i])
|
||||
{
|
||||
sContent += this._get_field_checkbox(this.options.fields[i][j].code, this.options.fields[i][j].label, (this.options.fields[i][j].subattr.length > 0), false, null);
|
||||
}
|
||||
sContent += '</fieldset>';
|
||||
this.element.append(sContent);
|
||||
}
|
||||
sContent = '<fieldset><legend>'+this.options.labels.columns_order+'</legend>';
|
||||
|
||||
sContent += '<div class="preview_header">'+this._format(this.options.labels.preview_header, Math.min(this.options.preview_limit, this.options.total_count), this.options.total_count)+'</div>';
|
||||
sContent += '<div class="table_preview"></div>';
|
||||
sContent += '</fieldset>';
|
||||
this.element.append(sContent);
|
||||
|
||||
this._update_from_holder();
|
||||
|
||||
$('body').on('click change', '.tfs_checkbox', function() {
|
||||
var sInstanceId = $(this).attr('data-instance-id');
|
||||
if (sInstanceId != me.sId) return;
|
||||
me._on_click($(this));
|
||||
});
|
||||
|
||||
var maxWidth = 0;
|
||||
$('#'+this.sId+' .tfs_checkbox, #'+this.sId+' .tfs_checkbox_multi').each(function() {
|
||||
maxWidth = Math.max(maxWidth, $(this).parent().width());
|
||||
});
|
||||
$('#'+this.sId+' .tfs_checkbox, #'+this.sId+' .tfs_checkbox_multi').each(function() {
|
||||
$(this).parent().parent().width(maxWidth).css({display: 'inline-block'});
|
||||
});
|
||||
|
||||
$('#'+this.sId+' .tfs_checkbox_multi').click(function() {
|
||||
me._on_multi_click($(this).val(), this.checked);
|
||||
});
|
||||
$('#'+this.sId+' .check_all').click(function() {
|
||||
me._on_check_all($(this).closest('fieldset'), true);
|
||||
});
|
||||
$('#'+this.sId+' .uncheck_all').click(function() {
|
||||
me._on_check_all($(this).closest('fieldset'), false);
|
||||
});
|
||||
|
||||
|
||||
this._update_preview();
|
||||
this._make_tooltips();
|
||||
},
|
||||
_on_click: function(jItemClicked)
|
||||
{
|
||||
|
||||
var bChecked = jItemClicked.prop('checked');
|
||||
var sValue = jItemClicked.val();
|
||||
this._mark_as_selected(sValue, bChecked);
|
||||
this._update_holder();
|
||||
this._update_preview();
|
||||
var sDataParent = jItemClicked.attr('data-parent');
|
||||
if (sDataParent != '')
|
||||
{
|
||||
this._update_tristate(sDataParent+'_multi');
|
||||
}
|
||||
},
|
||||
_on_multi_click: function(sMultiFieldCode, bChecked)
|
||||
{
|
||||
var oField = this._get_main_field_by_code(sMultiFieldCode);
|
||||
if (oField != null)
|
||||
{
|
||||
var sPrefix = '#tfs_'+this.sId+'_';
|
||||
for(var k in oField.subattr)
|
||||
{
|
||||
this._mark_as_selected(oField.subattr[k].code, bChecked);
|
||||
// In case the tooltip is visible, also update the checkboxes
|
||||
sElementId = (sPrefix+oField.subattr[k].code).replace('.', '_');
|
||||
$(sElementId).prop('checked', bChecked);
|
||||
}
|
||||
this._update_holder();
|
||||
this._update_preview();
|
||||
}
|
||||
},
|
||||
_on_check_all: function(jSelector, bChecked)
|
||||
{
|
||||
var me = this;
|
||||
jSelector.find('.tfs_checkbox').each(function() {
|
||||
$(this).prop('checked', bChecked);
|
||||
me._mark_as_selected($(this).val(), bChecked);
|
||||
});
|
||||
jSelector.find('.tfs_checkbox_multi').each(function() {
|
||||
var oField = me._get_main_field_by_code($(this).val());
|
||||
if (oField != null)
|
||||
{
|
||||
$(this).prop('checked', bChecked);
|
||||
$(this).prop('indeterminate', false);
|
||||
var sPrefix = '#tfs_'+this.sId+'_';
|
||||
for(var k in oField.subattr)
|
||||
{
|
||||
me._mark_as_selected(oField.subattr[k].code, bChecked);
|
||||
// In case the tooltip is visible, also update the checkboxes
|
||||
sElementId = (sPrefix+oField.subattr[k].code).replace('.', '_');
|
||||
$(sElementId).prop('checked', bChecked);
|
||||
}
|
||||
}
|
||||
});
|
||||
this._update_holder();
|
||||
this._update_preview();
|
||||
},
|
||||
_update_tristate: function(sParentId)
|
||||
{
|
||||
// Check if the parent is checked, unchecked or indeterminate
|
||||
var sParentId = sParentId.replace('.', '_');
|
||||
var sAttCode = $('#'+sParentId).val();
|
||||
var oField = this._get_main_field_by_code(sAttCode);
|
||||
if (oField != null)
|
||||
{
|
||||
var iNbChecked = 0;
|
||||
var aDebug = [];
|
||||
for(var j in oField.subattr)
|
||||
{
|
||||
if ($.inArray(oField.subattr[j].code, this.aSelected) != -1)
|
||||
{
|
||||
aDebug.push(oField.subattr[j].code);
|
||||
iNbChecked++;
|
||||
}
|
||||
}
|
||||
if (iNbChecked == oField.subattr.length)
|
||||
{
|
||||
$('#'+sParentId).prop('checked', true);
|
||||
$('#'+sParentId).prop('indeterminate', false);
|
||||
}
|
||||
else if (iNbChecked == 0)
|
||||
{
|
||||
$('#'+sParentId).prop('checked', false);
|
||||
$('#'+sParentId).prop('indeterminate', false);
|
||||
}
|
||||
else
|
||||
{
|
||||
$('#'+sParentId).prop('checked', false);
|
||||
$('#'+sParentId).prop('indeterminate', true);
|
||||
}
|
||||
}
|
||||
},
|
||||
_mark_as_selected: function(sValue, bSelected)
|
||||
{
|
||||
if(bSelected)
|
||||
{
|
||||
if ($.inArray(sValue, this.aSelected) == -1)
|
||||
{
|
||||
this.aSelected.push(sValue);
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
aSelected = [];
|
||||
for(var k in this.aSelected)
|
||||
{
|
||||
if (this.aSelected[k] != sValue)
|
||||
{
|
||||
aSelected.push(this.aSelected[k]);
|
||||
}
|
||||
}
|
||||
this.aSelected = aSelected;
|
||||
}
|
||||
},
|
||||
_update_holder: function()
|
||||
{
|
||||
$(this.options.value_holder).val(this.aSelected.join(','));
|
||||
},
|
||||
_update_from_holder: function()
|
||||
{
|
||||
var sFields = $(this.options.value_holder).val();
|
||||
var bAdvanced = parseInt($(this.options.advanced_holder).val(), 10);
|
||||
|
||||
if (sFields != '')
|
||||
{
|
||||
this.aSelected = sFields.split(',');
|
||||
var safeSelected = [];
|
||||
var me = this;
|
||||
var bModified = false;
|
||||
for(var k in this.aSelected)
|
||||
{
|
||||
var oField = this._get_field_by_code(this.aSelected[k])
|
||||
if (oField == null)
|
||||
{
|
||||
// Invalid field code supplied, don't copy it
|
||||
bModified = true;
|
||||
}
|
||||
else
|
||||
{
|
||||
safeSelected.push(this.aSelected[k]);
|
||||
}
|
||||
}
|
||||
if (bModified)
|
||||
{
|
||||
this.aSelected = safeSelected;
|
||||
this._update_holder();
|
||||
}
|
||||
$('#'+this.sId+' .tfs_checkbox').each(function() {
|
||||
if ($.inArray($(this).val(), me.aSelected) != -1)
|
||||
{
|
||||
$(this).prop('checked', true);
|
||||
}
|
||||
else
|
||||
{
|
||||
$(this).prop('checked', false);
|
||||
}
|
||||
});
|
||||
}
|
||||
var me = this;
|
||||
$('#'+this.sId+' .tfs_checkbox_multi').each(function() {
|
||||
me._update_tristate($(this).attr('id'));
|
||||
});
|
||||
|
||||
},
|
||||
_update_preview: function()
|
||||
{
|
||||
var sHtml = '';
|
||||
if(this.aSelected.length > 0)
|
||||
{
|
||||
sHtml += '<table><thead><tr>';
|
||||
for(var k in this.aSelected)
|
||||
{
|
||||
var sField = this.aSelected[k];
|
||||
if ($.inArray(sField, this.aSelected) != -1)
|
||||
{
|
||||
var sRemoveBtn = ' <span style="display:inline-block;float:right;cursor:pointer;" class="export-field-close" data-attcode="'+sField+'">×</span>';
|
||||
sHtml += '<th data-attcode="'+sField+'"><span class="drag-handle">'+this.aFieldsByCode[sField].unique_label+'</span>'+sRemoveBtn+'</th>';
|
||||
}
|
||||
}
|
||||
sHtml += '</tr></thead><tbody>';
|
||||
|
||||
for(var i=0; i<Math.min(this.options.preview_limit, this.options.total_count); i++)
|
||||
{
|
||||
sHtml += '<tr>';
|
||||
for(var k in this.aSelected)
|
||||
{
|
||||
var sField = this.aSelected[k];
|
||||
sHtml += '<td>'+this.options.sample_data[i][sField]+'</td>';
|
||||
}
|
||||
sHtml += '</tr>';
|
||||
}
|
||||
|
||||
sHtml += '</tbody></table>';
|
||||
|
||||
$('#'+this.sId+' .preview_header').show();
|
||||
$('#'+this.sId+' .table_preview').html(sHtml);
|
||||
var me = this;
|
||||
$('#'+this.sId+' .table_preview table').dragtable({persistState: function(table) { me._on_drag_columns(table); }, dragHandle: '.drag-handle'});
|
||||
$('#'+this.sId+' .table_preview table .export-field-close').click( function(event) { me._on_remove_column($(this).attr('data-attcode')); event.preventDefault(); return false; } );
|
||||
}
|
||||
else
|
||||
{
|
||||
$('#'+this.sId+' .preview_header').hide();
|
||||
$('#'+this.sId+' .table_preview').html('<div class="export_empty_preview">'+this.options.labels.empty_preview+'</div>');
|
||||
}
|
||||
},
|
||||
_get_field_by_code: function(sFieldCode)
|
||||
{
|
||||
for(var k in this.aFieldsByCode)
|
||||
{
|
||||
if (k == sFieldCode)
|
||||
{
|
||||
return this.aFieldsByCode[k];
|
||||
}
|
||||
}
|
||||
return null;
|
||||
},
|
||||
_get_main_field_by_code: function(sFieldCode)
|
||||
{
|
||||
for(var i in this.options.fields)
|
||||
{
|
||||
for(var j in this.options.fields[i])
|
||||
{
|
||||
if (this.options.fields[i][j].code == sFieldCode)
|
||||
{
|
||||
return this.options.fields[i][j];
|
||||
}
|
||||
}
|
||||
}
|
||||
return null;
|
||||
},
|
||||
_on_drag_columns: function(table)
|
||||
{
|
||||
var me = this;
|
||||
me.aSelected = [];
|
||||
table.el.find('th').each(function(i) {
|
||||
me.aSelected.push($(this).attr('data-attcode'));
|
||||
});
|
||||
this._update_holder();
|
||||
},
|
||||
_on_remove_column: function(sField)
|
||||
{
|
||||
var sElementId = this.sId+'_'+sField;
|
||||
sElementId = '#tfs_'+sElementId.replace('.', '_');
|
||||
$(sElementId).prop('checked', false);
|
||||
|
||||
this._mark_as_selected(sField, false);
|
||||
this._update_holder();
|
||||
this._update_preview();
|
||||
var me = this;
|
||||
$('#'+this.sId+' .tfs_checkbox_multi').each(function() {
|
||||
me._update_tristate($(this).attr('id'));
|
||||
});
|
||||
},
|
||||
_format: function()
|
||||
{
|
||||
var s = arguments[0];
|
||||
for (var i = 0; i < arguments.length - 1; i++) {
|
||||
var reg = new RegExp("%" + (i+1) + "\\$s", "gm");
|
||||
s = s.replace(reg, arguments[i+1]);
|
||||
}
|
||||
return s;
|
||||
},
|
||||
validate: function()
|
||||
{
|
||||
if (this.aSelected.length == 0)
|
||||
{
|
||||
var aMessages = $('#export-form').data('validation_messages');
|
||||
aMessages.push(this.options.labels.no_field_selected);
|
||||
$('#export-form').data('validation_messages', aMessages);
|
||||
}
|
||||
},
|
||||
// events bound via _bind are removed automatically
|
||||
// revert other modifications here
|
||||
destroy: function()
|
||||
{
|
||||
this.element
|
||||
.removeClass('itop-tabularfieldsselector');
|
||||
|
||||
this.element.parent().unbind('activate');
|
||||
this.element.parent().unbind('validate');
|
||||
},
|
||||
// _setOptions is called with a hash of all options that are changing
|
||||
_setOptions: function()
|
||||
{
|
||||
this._superApply(arguments);
|
||||
},
|
||||
// _setOption is called for each individual option that is changing
|
||||
_setOption: function( key, value )
|
||||
{
|
||||
if (key == 'fields')
|
||||
{
|
||||
this._flatten_fields(value);
|
||||
}
|
||||
this._superApply(arguments);
|
||||
},
|
||||
_flatten_fields: function(aFields)
|
||||
{
|
||||
// Update the "flattened" via of the fields
|
||||
this.aFieldsByCode = [];
|
||||
for(var k in aFields)
|
||||
{
|
||||
for(var i in aFields[k])
|
||||
{
|
||||
this.aFieldsByCode[aFields[k][i].code] = aFields[k][i];
|
||||
for(var j in aFields[k][i].subattr)
|
||||
{
|
||||
this.aFieldsByCode[aFields[k][i].subattr[j].code] = aFields[k][i].subattr[j];
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
_make_tooltips: function()
|
||||
{
|
||||
var me = this;
|
||||
$('#'+this.sId+' .tfs_advanced').tooltip({
|
||||
content: function() {
|
||||
var sDataAttcode = $(this).attr('data-attcode');
|
||||
var sTooltipContent = '';
|
||||
sTooltipContent += me._get_tooltip_content(sDataAttcode);
|
||||
return sTooltipContent;
|
||||
},
|
||||
items: '.tfs_advanced',
|
||||
position: {
|
||||
my: "center bottom-10",
|
||||
at: "center top",
|
||||
using: function( position, feedback ) {
|
||||
$(this).css( position );
|
||||
$( "<div>" )
|
||||
.addClass( "arrow" )
|
||||
.addClass( feedback.vertical )
|
||||
.addClass( feedback.horizontal )
|
||||
.appendTo( this );
|
||||
}
|
||||
}
|
||||
})
|
||||
.off( "mouseover mouseout" )
|
||||
.on( "mouseover", function(event){
|
||||
event.stopImmediatePropagation();
|
||||
var jMe = $(this);
|
||||
$(this).data('openTimeoutId', setTimeout(function() {
|
||||
var sDataId = jMe.attr('data-attcode');
|
||||
if ($('.tooltip-close-button[data-attcode="'+sDataId+'"]').length == 0)
|
||||
{
|
||||
jMe.tooltip('open');
|
||||
}
|
||||
}, 500));
|
||||
})
|
||||
.on( "mouseout", function(event){
|
||||
event.stopImmediatePropagation();
|
||||
clearTimeout($(this).data('openTimeoutId'));
|
||||
});
|
||||
/*
|
||||
.on( "click", function(){
|
||||
var sDataId = $(this).attr('data-attcode');
|
||||
if ($('.tooltip-close-button[data-attcode="'+sDataId+'"]').length == 0)
|
||||
{
|
||||
$(this).tooltip( 'open' );
|
||||
}
|
||||
else
|
||||
{
|
||||
$(this).tooltip( 'close' );
|
||||
}
|
||||
$( this ).unbind( "mouseleave" );
|
||||
return false;
|
||||
});
|
||||
*/
|
||||
|
||||
$('body').on('click', '.tooltip-close-button', function() {
|
||||
var sDataId = $(this).attr('data-attcode');
|
||||
$('#'+me.sId+' .tfs_advanced[data-attcode="'+sDataId+'"]').tooltip('close');
|
||||
});
|
||||
},
|
||||
_get_tooltip_content: function(sDataAttCode)
|
||||
{
|
||||
var oField = this._get_main_field_by_code(sDataAttCode);
|
||||
var sContent = '';
|
||||
if (oField != null)
|
||||
{
|
||||
sContent += '<div display:block;">'+oField.label+'<div class="tooltip-close-button" data-attcode="'+sDataAttCode+'" style="display:inline-block; float:right; cursor:pointer; padding-left:0.25em; padding-bottom:0.25em;">×</div></div>';
|
||||
for(var k in oField.subattr)
|
||||
{
|
||||
bChecked = ($.inArray(oField.subattr[k].code, this.aSelected) != -1);
|
||||
sContent += this._get_field_checkbox(oField.subattr[k].code, oField.subattr[k].label, false, bChecked, sDataAttCode);
|
||||
}
|
||||
}
|
||||
return sContent;
|
||||
},
|
||||
_get_field_checkbox: function(sCode, sLabel, bHasTooltip, bChecked, sParentId)
|
||||
{
|
||||
var sPrefix = 'tfs_'+this.sId+'_';
|
||||
sParentId = (sPrefix+sParentId).replace('.', '_');
|
||||
sElementId = (sPrefix+sCode).replace('.', '_');
|
||||
var aClasses = [];
|
||||
if (bHasTooltip)
|
||||
{
|
||||
aClasses.push('tfs_advanced');
|
||||
sLabel += ' [+]';
|
||||
}
|
||||
var sChecked = '';
|
||||
if (bChecked)
|
||||
{
|
||||
sChecked = ' checked ';
|
||||
}
|
||||
var sDataParent = '';
|
||||
if (sParentId != null)
|
||||
{
|
||||
sDataParent = ' data-parent="'+sParentId+'" ';
|
||||
}
|
||||
if (bHasTooltip)
|
||||
{
|
||||
sContent = '<div style="display:block; clear:both;"><span style="white-space: nowrap;"><input data-instance-id="'+this.sId+'" class="tfs_checkbox_multi" type="checkbox" id="'+sElementId+'_multi" value="'+sCode+'"'+sChecked+sDataParent+'><label data-attcode="'+sCode+'" class="'+aClasses.join(' ')+'" title="'+sCode+'"> '+sLabel+'</label></div>';
|
||||
}
|
||||
else
|
||||
{
|
||||
sContent = '<div style="display:block; clear:both;"><span style="white-space: nowrap;"><input data-instance-id="'+this.sId+'" class="tfs_checkbox" type="checkbox" id="'+sElementId+'" value="'+sCode+'"'+sChecked+sDataParent+'><label data-attcode="'+sCode+'" class="'+aClasses.join(' ')+'" title="'+sCode+'" for="'+sElementId+'"> '+sLabel+'</label></div>';
|
||||
}
|
||||
return sContent;
|
||||
},
|
||||
_close_all_tooltips: function()
|
||||
{
|
||||
this.element.find('.tfs_item').tooltip('close');
|
||||
}
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user