mirror of
https://github.com/Combodo/iTop.git
synced 2026-04-24 11:08:45 +02: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
401
js/jquery.dragtable.js
Normal file
401
js/jquery.dragtable.js
Normal file
@@ -0,0 +1,401 @@
|
||||
/*!
|
||||
* dragtable
|
||||
*
|
||||
* @Version 2.0.14
|
||||
*
|
||||
* Copyright (c) 2010-2013, Andres akottr@gmail.com
|
||||
* Dual licensed under the MIT (MIT-LICENSE.txt)
|
||||
* and GPL (GPL-LICENSE.txt) licenses.
|
||||
*
|
||||
* Inspired by the the dragtable from Dan Vanderkam (danvk.org/dragtable/)
|
||||
* Thanks to the jquery and jqueryui comitters
|
||||
*
|
||||
* Any comment, bug report, feature-request is welcome
|
||||
* Feel free to contact me.
|
||||
*/
|
||||
|
||||
/* TOKNOW:
|
||||
* For IE7 you need this css rule:
|
||||
* table {
|
||||
* border-collapse: collapse;
|
||||
* }
|
||||
* Or take a clean reset.css (see http://meyerweb.com/eric/tools/css/reset/)
|
||||
*/
|
||||
|
||||
/* TODO: investigate
|
||||
* Does not work properly with css rule:
|
||||
* html {
|
||||
* overflow: -moz-scrollbars-vertical;
|
||||
* }
|
||||
* Workaround:
|
||||
* Fixing Firefox issues by scrolling down the page
|
||||
* http://stackoverflow.com/questions/2451528/jquery-ui-sortable-scroll-helper-element-offset-firefox-issue
|
||||
*
|
||||
* var start = $.noop;
|
||||
* var beforeStop = $.noop;
|
||||
* if($.browser.mozilla) {
|
||||
* var start = function (event, ui) {
|
||||
* if( ui.helper !== undefined )
|
||||
* ui.helper.css('position','absolute').css('margin-top', $(window).scrollTop() );
|
||||
* }
|
||||
* var beforeStop = function (event, ui) {
|
||||
* if( ui.offset !== undefined )
|
||||
* ui.helper.css('margin-top', 0);
|
||||
* }
|
||||
* }
|
||||
*
|
||||
* and pass this as start and stop function to the sortable initialisation
|
||||
* start: start,
|
||||
* beforeStop: beforeStop
|
||||
*/
|
||||
/*
|
||||
* Special thx to all pull requests comitters
|
||||
*/
|
||||
|
||||
(function($) {
|
||||
$.widget("akottr.dragtable", {
|
||||
options: {
|
||||
revert: false, // smooth revert
|
||||
dragHandle: '.table-handle', // handle for moving cols, if not exists the whole 'th' is the handle
|
||||
maxMovingRows: 40, // 1 -> only header. 40 row should be enough, the rest is usually not in the viewport
|
||||
excludeFooter: false, // excludes the footer row(s) while moving other columns. Make sense if there is a footer with a colspan. */
|
||||
onlyHeaderThreshold: 100, // TODO: not implemented yet, switch automatically between entire col moving / only header moving
|
||||
dragaccept: null, // draggable cols -> default all
|
||||
persistState: null, // url or function -> plug in your custom persistState function right here. function call is persistState(originalTable)
|
||||
restoreState: null, // JSON-Object or function: some kind of experimental aka Quick-Hack TODO: do it better
|
||||
exact: true, // removes pixels, so that the overlay table width fits exactly the original table width
|
||||
clickDelay: 10, // ms to wait before rendering sortable list and delegating click event
|
||||
containment: null, // @see http://api.jqueryui.com/sortable/#option-containment, use it if you want to move in 2 dimesnions (together with axis: null)
|
||||
cursor: 'move', // @see http://api.jqueryui.com/sortable/#option-cursor
|
||||
cursorAt: false, // @see http://api.jqueryui.com/sortable/#option-cursorAt
|
||||
distance: 0, // @see http://api.jqueryui.com/sortable/#option-distance, for immediate feedback use "0"
|
||||
tolerance: 'pointer', // @see http://api.jqueryui.com/sortable/#option-tolerance
|
||||
axis: 'x', // @see http://api.jqueryui.com/sortable/#option-axis, Only vertical moving is allowed. Use 'x' or null. Use this in conjunction with the 'containment' setting
|
||||
beforeStart: $.noop, // returning FALSE will stop the execution chain.
|
||||
beforeMoving: $.noop,
|
||||
beforeReorganize: $.noop,
|
||||
beforeStop: $.noop
|
||||
},
|
||||
originalTable: {
|
||||
el: null,
|
||||
selectedHandle: null,
|
||||
sortOrder: null,
|
||||
startIndex: 0,
|
||||
endIndex: 0
|
||||
},
|
||||
sortableTable: {
|
||||
el: $(),
|
||||
selectedHandle: $(),
|
||||
movingRow: $()
|
||||
},
|
||||
persistState: function() {
|
||||
var _this = this;
|
||||
this.originalTable.el.find('th').each(function(i) {
|
||||
if (this.id !== '') {
|
||||
_this.originalTable.sortOrder[this.id] = i;
|
||||
}
|
||||
});
|
||||
$.ajax({
|
||||
url: this.options.persistState,
|
||||
data: this.originalTable.sortOrder
|
||||
});
|
||||
},
|
||||
/*
|
||||
* persistObj looks like
|
||||
* {'id1':'2','id3':'3','id2':'1'}
|
||||
* table looks like
|
||||
* | id2 | id1 | id3 |
|
||||
*/
|
||||
_restoreState: function(persistObj) {
|
||||
for (var n in persistObj) {
|
||||
this.originalTable.startIndex = $('#' + n).closest('th').prevAll().size() + 1;
|
||||
this.originalTable.endIndex = parseInt(persistObj[n], 10) + 1;
|
||||
this._bubbleCols();
|
||||
}
|
||||
},
|
||||
// bubble the moved col left or right
|
||||
_bubbleCols: function() {
|
||||
var i, j, col1, col2;
|
||||
var from = this.originalTable.startIndex;
|
||||
var to = this.originalTable.endIndex;
|
||||
/* Find children thead and tbody.
|
||||
* Only to process the immediate tr-children. Bugfix for inner tables
|
||||
*/
|
||||
var thtb = this.originalTable.el.children();
|
||||
if (this.options.excludeFooter) {
|
||||
thtb = thtb.not('tfoot');
|
||||
}
|
||||
if (from < to) {
|
||||
for (i = from; i < to; i++) {
|
||||
col1 = thtb.find('> tr > td:nth-child(' + i + ')')
|
||||
.add(thtb.find('> tr > th:nth-child(' + i + ')'));
|
||||
col2 = thtb.find('> tr > td:nth-child(' + (i + 1) + ')')
|
||||
.add(thtb.find('> tr > th:nth-child(' + (i + 1) + ')'));
|
||||
for (j = 0; j < col1.length; j++) {
|
||||
swapNodes(col1[j], col2[j]);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
for (i = from; i > to; i--) {
|
||||
col1 = thtb.find('> tr > td:nth-child(' + i + ')')
|
||||
.add(thtb.find('> tr > th:nth-child(' + i + ')'));
|
||||
col2 = thtb.find('> tr > td:nth-child(' + (i - 1) + ')')
|
||||
.add(thtb.find('> tr > th:nth-child(' + (i - 1) + ')'));
|
||||
for (j = 0; j < col1.length; j++) {
|
||||
swapNodes(col1[j], col2[j]);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
_rearrangeTableBackroundProcessing: function() {
|
||||
var _this = this;
|
||||
return function() {
|
||||
_this._bubbleCols();
|
||||
_this.options.beforeStop(_this.originalTable);
|
||||
_this.sortableTable.el.remove();
|
||||
restoreTextSelection();
|
||||
// persist state if necessary
|
||||
if (_this.options.persistState !== null) {
|
||||
$.isFunction(_this.options.persistState) ? _this.options.persistState(_this.originalTable) : _this.persistState();
|
||||
}
|
||||
};
|
||||
},
|
||||
_rearrangeTable: function() {
|
||||
var _this = this;
|
||||
return function() {
|
||||
// remove handler-class -> handler is now finished
|
||||
_this.originalTable.selectedHandle.removeClass('dragtable-handle-selected');
|
||||
// add disabled class -> reorgorganisation starts soon
|
||||
_this.sortableTable.el.sortable("disable");
|
||||
_this.sortableTable.el.addClass('dragtable-disabled');
|
||||
_this.options.beforeReorganize(_this.originalTable, _this.sortableTable);
|
||||
// do reorganisation asynchronous
|
||||
// for chrome a little bit more than 1 ms because we want to force a rerender
|
||||
_this.originalTable.endIndex = _this.sortableTable.movingRow.prevAll().size() + 1;
|
||||
setTimeout(_this._rearrangeTableBackroundProcessing(), 50);
|
||||
};
|
||||
},
|
||||
/*
|
||||
* Disrupts the table. The original table stays the same.
|
||||
* But on a layer above the original table we are constructing a list (ul > li)
|
||||
* each li with a separate table representig a single col of the original table.
|
||||
*/
|
||||
_generateSortable: function(e) {
|
||||
!e.cancelBubble && (e.cancelBubble = true);
|
||||
var _this = this;
|
||||
// table attributes
|
||||
var attrs = this.originalTable.el[0].attributes;
|
||||
var attrsString = '';
|
||||
for (var i = 0; i < attrs.length; i++) {
|
||||
if (attrs[i].nodeValue && attrs[i].nodeName != 'id' && attrs[i].nodeName != 'width') {
|
||||
attrsString += attrs[i].nodeName + '="' + attrs[i].nodeValue + '" ';
|
||||
}
|
||||
}
|
||||
|
||||
// row attributes
|
||||
var rowAttrsArr = [];
|
||||
//compute height, special handling for ie needed :-(
|
||||
var heightArr = [];
|
||||
this.originalTable.el.find('tr').slice(0, this.options.maxMovingRows).each(function(i, v) {
|
||||
// row attributes
|
||||
var attrs = this.attributes;
|
||||
var attrsString = "";
|
||||
for (var j = 0; j < attrs.length; j++) {
|
||||
if (attrs[j].nodeValue && attrs[j].nodeName != 'id') {
|
||||
attrsString += " " + attrs[j].nodeName + '="' + attrs[j].nodeValue + '"';
|
||||
}
|
||||
}
|
||||
rowAttrsArr.push(attrsString);
|
||||
heightArr.push($(this).height());
|
||||
});
|
||||
|
||||
// compute width, no special handling for ie needed :-)
|
||||
var widthArr = [];
|
||||
// compute total width, needed for not wrapping around after the screen ends (floating)
|
||||
var totalWidth = 0;
|
||||
/* Find children thead and tbody.
|
||||
* Only to process the immediate tr-children. Bugfix for inner tables
|
||||
*/
|
||||
var thtb = _this.originalTable.el.children();
|
||||
if (this.options.excludeFooter) {
|
||||
thtb = thtb.not('tfoot');
|
||||
}
|
||||
thtb.find('> tr > th').each(function(i, v) {
|
||||
var w = $(this).outerWidth();
|
||||
widthArr.push(w);
|
||||
totalWidth += w;
|
||||
});
|
||||
if(_this.options.exact) {
|
||||
var difference = totalWidth - _this.originalTable.el.outerWidth();
|
||||
widthArr[0] -= difference;
|
||||
}
|
||||
// one extra px on right and left side
|
||||
totalWidth += 2
|
||||
|
||||
var sortableHtml = '<ul class="dragtable-sortable" style="position:absolute; width:' + totalWidth + 'px;">';
|
||||
// assemble the needed html
|
||||
thtb.find('> tr > th').each(function(i, v) {
|
||||
var width_li = $(this).outerWidth();
|
||||
sortableHtml += '<li style="width:' + width_li + 'px;">';
|
||||
sortableHtml += '<table ' + attrsString + '>';
|
||||
var row = thtb.find('> tr > th:nth-child(' + (i + 1) + ')');
|
||||
if (_this.options.maxMovingRows > 1) {
|
||||
row = row.add(thtb.find('> tr > td:nth-child(' + (i + 1) + ')').slice(0, _this.options.maxMovingRows - 1));
|
||||
}
|
||||
row.each(function(j) {
|
||||
// TODO: May cause duplicate style-Attribute
|
||||
var row_content = $(this).clone().wrap('<div></div>').parent().html();
|
||||
if (row_content.toLowerCase().indexOf('<th') === 0) sortableHtml += "<thead>";
|
||||
sortableHtml += '<tr ' + rowAttrsArr[j] + '" style="height:' + heightArr[j] + 'px;">';
|
||||
sortableHtml += row_content;
|
||||
if (row_content.toLowerCase().indexOf('<th') === 0) sortableHtml += "</thead>";
|
||||
sortableHtml += '</tr>';
|
||||
});
|
||||
sortableHtml += '</table>';
|
||||
sortableHtml += '</li>';
|
||||
});
|
||||
sortableHtml += '</ul>';
|
||||
this.sortableTable.el = this.originalTable.el.before(sortableHtml).prev();
|
||||
// set width if necessary
|
||||
this.sortableTable.el.find('> li > table').each(function(i, v) {
|
||||
$(this).css('width', widthArr[i] + 'px');
|
||||
});
|
||||
|
||||
// assign this.sortableTable.selectedHandle
|
||||
this.sortableTable.selectedHandle = this.sortableTable.el.find('th .dragtable-handle-selected');
|
||||
|
||||
var items = !this.options.dragaccept ? 'li' : 'li:has(' + this.options.dragaccept + ')';
|
||||
this.sortableTable.el.sortable({
|
||||
items: items,
|
||||
stop: this._rearrangeTable(),
|
||||
// pass thru options for sortable widget
|
||||
revert: this.options.revert,
|
||||
tolerance: this.options.tolerance,
|
||||
containment: this.options.containment,
|
||||
cursor: this.options.cursor,
|
||||
cursorAt: this.options.cursorAt,
|
||||
distance: this.options.distance,
|
||||
axis: this.options.axis
|
||||
});
|
||||
|
||||
// assign start index
|
||||
this.originalTable.startIndex = $(e.target).closest('th').prevAll().size() + 1;
|
||||
|
||||
this.options.beforeMoving(this.originalTable, this.sortableTable);
|
||||
// Start moving by delegating the original event to the new sortable table
|
||||
this.sortableTable.movingRow = this.sortableTable.el.find('> li:nth-child(' + this.originalTable.startIndex + ')');
|
||||
|
||||
// prevent the user from drag selecting "highlighting" surrounding page elements
|
||||
disableTextSelection();
|
||||
// clone the initial event and trigger the sort with it
|
||||
this.sortableTable.movingRow.trigger($.extend($.Event(e.type), {
|
||||
which: 1,
|
||||
clientX: e.clientX,
|
||||
clientY: e.clientY,
|
||||
pageX: e.pageX,
|
||||
pageY: e.pageY,
|
||||
screenX: e.screenX,
|
||||
screenY: e.screenY
|
||||
}));
|
||||
|
||||
// Some inner divs to deliver the posibillity to style the placeholder more sophisticated
|
||||
var placeholder = this.sortableTable.el.find('.ui-sortable-placeholder');
|
||||
if(!placeholder.height() <= 0) {
|
||||
placeholder.css('height', this.sortableTable.el.find('.ui-sortable-helper').height());
|
||||
}
|
||||
|
||||
placeholder.html('<div class="outer" style="height:100%;"><div class="inner" style="height:100%;"></div></div>');
|
||||
},
|
||||
bindTo: {},
|
||||
_create: function() {
|
||||
this.originalTable = {
|
||||
el: this.element,
|
||||
selectedHandle: $(),
|
||||
sortOrder: {},
|
||||
startIndex: 0,
|
||||
endIndex: 0
|
||||
};
|
||||
// bind draggable to 'th' by default
|
||||
this.bindTo = this.originalTable.el.find('th');
|
||||
// bind draggable to handle if exists
|
||||
if (this.bindTo.find(this.options.dragHandle).size() > 0) {
|
||||
this.bindTo = this.bindTo.find(this.options.dragHandle);
|
||||
}
|
||||
// filter only the cols that are accepted
|
||||
if (this.options.dragaccept) {
|
||||
this.bindTo = this.bindTo.filter(this.options.dragaccept);
|
||||
}
|
||||
// restore state if necessary
|
||||
if (this.options.restoreState !== null) {
|
||||
$.isFunction(this.options.restoreState) ? this.options.restoreState(this.originalTable) : this._restoreState(this.options.restoreState);
|
||||
}
|
||||
var _this = this;
|
||||
this.bindTo.mousedown(function(evt) {
|
||||
// listen only to left mouse click
|
||||
if(evt.which!==1) return;
|
||||
if (_this.options.beforeStart(_this.originalTable) === false) {
|
||||
return;
|
||||
}
|
||||
clearTimeout(this.downTimer);
|
||||
this.downTimer = setTimeout(function() {
|
||||
_this.originalTable.selectedHandle = $(this);
|
||||
_this.originalTable.selectedHandle.addClass('dragtable-handle-selected');
|
||||
_this._generateSortable(evt);
|
||||
}, _this.options.clickDelay);
|
||||
}).mouseup(function(evt) {
|
||||
clearTimeout(this.downTimer);
|
||||
});
|
||||
},
|
||||
redraw: function(){
|
||||
this.destroy();
|
||||
this._create();
|
||||
this.bindTo.unbind('mousedown');
|
||||
$.Widget.prototype.destroy.apply(this, arguments); // default destroy
|
||||
// now do other stuff particular to this widget
|
||||
}
|
||||
});
|
||||
|
||||
/** closure-scoped "private" functions **/
|
||||
|
||||
var body_onselectstart_save = $(document.body).attr('onselectstart'),
|
||||
body_unselectable_save = $(document.body).attr('unselectable');
|
||||
|
||||
// css properties to disable user-select on the body tag by appending a <style> tag to the <head>
|
||||
// remove any current document selections
|
||||
|
||||
function disableTextSelection() {
|
||||
// jQuery doesn't support the element.text attribute in MSIE 8
|
||||
// http://stackoverflow.com/questions/2692770/style-style-textcss-appendtohead-does-not-work-in-ie
|
||||
var $style = $('<style id="__dragtable_disable_text_selection__" type="text/css">body { -ms-user-select:none;-moz-user-select:-moz-none;-khtml-user-select:none;-webkit-user-select:none;user-select:none; }</style>');
|
||||
$(document.head).append($style);
|
||||
$(document.body).attr('onselectstart', 'return false;').attr('unselectable', 'on');
|
||||
if (window.getSelection) {
|
||||
window.getSelection().removeAllRanges();
|
||||
} else {
|
||||
document.selection.empty(); // MSIE http://msdn.microsoft.com/en-us/library/ms535869%28v=VS.85%29.aspx
|
||||
}
|
||||
}
|
||||
|
||||
// remove the <style> tag, and restore the original <body> onselectstart attribute
|
||||
|
||||
function restoreTextSelection() {
|
||||
$('#__dragtable_disable_text_selection__').remove();
|
||||
if (body_onselectstart_save) {
|
||||
$(document.body).attr('onselectstart', body_onselectstart_save);
|
||||
} else {
|
||||
$(document.body).removeAttr('onselectstart');
|
||||
}
|
||||
if (body_unselectable_save) {
|
||||
$(document.body).attr('unselectable', body_unselectable_save);
|
||||
} else {
|
||||
$(document.body).removeAttr('unselectable');
|
||||
}
|
||||
}
|
||||
|
||||
function swapNodes(a, b) {
|
||||
var aparent = a.parentNode;
|
||||
var asibling = a.nextSibling === b ? a : a.nextSibling;
|
||||
b.parentNode.insertBefore(a, b);
|
||||
aparent.insertBefore(b, asibling);
|
||||
}
|
||||
})(jQuery);
|
||||
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');
|
||||
}
|
||||
});
|
||||
});
|
||||
204
js/utils.js
204
js/utils.js
@@ -414,31 +414,215 @@ function ShortcutListDlg(sOQL, sDataTableId, sContext)
|
||||
|
||||
function ExportListDlg(sOQL, sDataTableId, sFormat, sDlgTitle)
|
||||
{
|
||||
var sDataTableName = 'datatable_'+sDataTableId;
|
||||
var oColumns = $('#'+sDataTableName).datatable('option', 'oColumns');
|
||||
var aFields = [];
|
||||
for(var j in oColumns)
|
||||
if (sDataTableId != '')
|
||||
{
|
||||
for(var k in oColumns[j])
|
||||
var sDataTableName = 'datatable_'+sDataTableId;
|
||||
var oColumns = $('#'+sDataTableName).datatable('option', 'oColumns');
|
||||
for(var j in oColumns)
|
||||
{
|
||||
if (oColumns[j][k].checked)
|
||||
for(var k in oColumns[j])
|
||||
{
|
||||
var sCode = oColumns[j][k].code;
|
||||
if (sCode == '_key_')
|
||||
if (oColumns[j][k].checked)
|
||||
{
|
||||
sCode = 'id';
|
||||
var sCode = oColumns[j][k].code;
|
||||
if (sCode == '_key_')
|
||||
{
|
||||
sCode = 'id';
|
||||
}
|
||||
aFields.push(j+'.'+sCode);
|
||||
}
|
||||
aFields.push(j+'.'+sCode);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
$.post(GetAbsoluteUrlAppRoot()+'webservices/export-v2.php', {interactive: 1, advanced: 1, mode: 'dialog', format: sFormat, expression: sOQL, suggested_fields: aFields.join(','), dialog_title: sDlgTitle}, function(data) {
|
||||
$('body').append(data);
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
function ExportToggleFormat(sFormat)
|
||||
{
|
||||
$('.form_part').hide();
|
||||
for(k in window.aFormParts[sFormat])
|
||||
{
|
||||
$('#form_part_'+window.aFormParts[sFormat][k]).show().trigger('form-part-activate');
|
||||
}
|
||||
}
|
||||
|
||||
function ExportStartExport()
|
||||
{
|
||||
var oParams = {};
|
||||
$('.form_part:visible :input').each(function() {
|
||||
if (this.name != '')
|
||||
{
|
||||
if ((this.type == 'radio') || (this.type == 'checkbox'))
|
||||
{
|
||||
if (this.checked)
|
||||
{
|
||||
oParams[this.name] = $(this).val();
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
oParams[this.name] = $(this).val();
|
||||
}
|
||||
}
|
||||
});
|
||||
$('#export-form').hide();
|
||||
$('#export-feedback').show();
|
||||
oParams.operation = 'export_build';
|
||||
oParams.format = $('#export-form :input[name=format]').val();
|
||||
var sQueryMode = $(':input[name=query_mode]:checked').val();
|
||||
if($(':input[name=query_mode]:checked').length > 0)
|
||||
{
|
||||
if (sQueryMode == 'oql')
|
||||
{
|
||||
oParams.expression = $('#export-form :input[name=expression]').val();
|
||||
}
|
||||
else
|
||||
{
|
||||
oParams.query = $('#export-form :input[name=query]').val();
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
oParams.expression = $('#export-form :input[name=expression]').val();
|
||||
oParams.query = $('#export-form :input[name=query]').val();
|
||||
}
|
||||
$.post(GetAbsoluteUrlAppRoot()+'pages/ajax.render.php', oParams, function(data) {
|
||||
ExportRun(data);
|
||||
}, 'json');
|
||||
}
|
||||
|
||||
function ExportRun(data)
|
||||
{
|
||||
switch(data.code)
|
||||
{
|
||||
case 'run':
|
||||
// Continue
|
||||
$('.export-progress-bar').progressbar({value: data.percentage });
|
||||
$('.export-message').html(data.message);
|
||||
oParams = {};
|
||||
oParams.token = data.token;
|
||||
var sDataState = $('#export-form').attr('data-state');
|
||||
if (sDataState == 'cancelled')
|
||||
{
|
||||
oParams.operation = 'export_cancel';
|
||||
}
|
||||
else
|
||||
{
|
||||
oParams.operation = 'export_build';
|
||||
}
|
||||
|
||||
$.post(GetAbsoluteUrlAppRoot()+'pages/ajax.render.php', oParams, function(data) {
|
||||
ExportRun(data);
|
||||
},
|
||||
'json');
|
||||
break;
|
||||
|
||||
case 'done':
|
||||
$('#export-btn').hide();
|
||||
sMessage = '<a href="'+GetAbsoluteUrlAppRoot()+'pages/ajax.render.php?operation=export_download&token='+data.token+'" target="_blank">'+data.message+'</a>';
|
||||
$('.export-message').html(sMessage);
|
||||
$('.export-progress-bar').hide();
|
||||
$('#export-btn').hide();
|
||||
$('#export-form').attr('data-state', 'done');
|
||||
if(data.text_result != undefined)
|
||||
{
|
||||
if (data.mime_type == 'text/html')
|
||||
{
|
||||
$('#export_content').parent().html(data.text_result);
|
||||
$('#export_text_result').show();
|
||||
$('#export_text_result .listResults').tableHover();
|
||||
$('#export_text_result .listResults').tablesorter( { widgets: ['myZebra']} );
|
||||
}
|
||||
else
|
||||
{
|
||||
if ($('#export_text_result').closest('ui-dialog').length == 0)
|
||||
{
|
||||
// not inside a dialog box, adjust the height... approximately
|
||||
var jPane = $('#export_text_result').closest('.ui-layout-content');
|
||||
var iTotalHeight = jPane.height();
|
||||
jPane.children(':visible').each(function() {
|
||||
if ($(this).attr('id') != '')
|
||||
{
|
||||
iTotalHeight -= $(this).height();
|
||||
}
|
||||
});
|
||||
$('#export_content').height(iTotalHeight - 80);
|
||||
}
|
||||
$('#export_content').val(data.text_result);
|
||||
$('#export_text_result').show();
|
||||
}
|
||||
}
|
||||
$('#export-dlg-submit').button('option', 'label', Dict.S('UI:Button:Done')).button('enable');
|
||||
break;
|
||||
|
||||
case 'error':
|
||||
$('#export-form').attr('data-state', 'error');
|
||||
$('.export-progress-bar').progressbar({value: data.percentage });
|
||||
$('.export-message').html(data.message);
|
||||
$('#export-dlg-submit').button('option', 'label', Dict.S('UI:Button:Done')).button('enable');
|
||||
$('#export-btn').hide();
|
||||
default:
|
||||
}
|
||||
}
|
||||
|
||||
function ExportInitButton(sSelector)
|
||||
{
|
||||
$(sSelector).on('click', function() {
|
||||
var sDataState = $('#export-form').attr('data-state');
|
||||
switch(sDataState)
|
||||
{
|
||||
case 'not-yet-started':
|
||||
$('.form_part:visible').each(function() {
|
||||
$('#export-form').data('validation_messages', []);
|
||||
var ret = $(this).trigger('validate');
|
||||
});
|
||||
var aMessages = $('#export-form').data('validation_messages');
|
||||
|
||||
if(aMessages.length > 0)
|
||||
{
|
||||
alert(aMessages.join(''));
|
||||
return;
|
||||
}
|
||||
if ($(this).hasClass('ui-button'))
|
||||
{
|
||||
$(this).button('option', 'label', Dict.S('UI:Button:Cancel'));
|
||||
}
|
||||
else
|
||||
{
|
||||
$(this).html(Dict.S('UI:Button:Cancel'));
|
||||
}
|
||||
$('#export-form').attr('data-state', 'running');
|
||||
ExportStartExport();
|
||||
break;
|
||||
|
||||
case 'running':
|
||||
if ($(this).hasClass('ui-button'))
|
||||
{
|
||||
$(this).button('disable');
|
||||
}
|
||||
else
|
||||
{
|
||||
$(this).attr('disabled', 'disabled');
|
||||
}
|
||||
$('#export-form').attr('data-state', 'cancelled');
|
||||
break;
|
||||
|
||||
case 'done':
|
||||
case 'error':
|
||||
$('#interactive_export_dlg').dialog('close');
|
||||
break;
|
||||
|
||||
default:
|
||||
// Do nothing
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function DisplayHistory(sSelector, sFilter, iCount, iStart)
|
||||
{
|
||||
$(sSelector).block();
|
||||
|
||||
@@ -1,185 +0,0 @@
|
||||
// jQuery UI style "widget" for managing the "xlsx-exporter"
|
||||
$(function()
|
||||
{
|
||||
// the widget definition, where "itop" is the namespace,
|
||||
// "xlsxexporter" the widget name
|
||||
$.widget( "itop.xlsxexporter",
|
||||
{
|
||||
// default options
|
||||
options:
|
||||
{
|
||||
filter: '',
|
||||
ajax_page_url: '',
|
||||
labels: {dialog_title: 'Excel Export', export_button: 'Export', cancel_button: 'Cancel', download_button: 'Download', complete: 'Complete', cancelled: 'Cancelled' }
|
||||
},
|
||||
|
||||
// the constructor
|
||||
_create: function()
|
||||
{
|
||||
this.element
|
||||
.addClass('itop-xlsxexporter');
|
||||
|
||||
this.sToken = null;
|
||||
this.ajaxCall = null;
|
||||
this.oProgressBar = $('.progress-bar', this.element);
|
||||
this.oStatusMessage = $('.status-message', this.element);
|
||||
$('.progress', this.element).hide();
|
||||
$('.statistics', this.element).hide();
|
||||
|
||||
var me = this;
|
||||
|
||||
this.element.dialog({
|
||||
title: this.options.labels.dialog_title,
|
||||
modal: true,
|
||||
width: 500,
|
||||
height: 300,
|
||||
buttons: [
|
||||
{ text: this.options.labels.export_button, 'class': 'export-button', click: function() {
|
||||
me._start();
|
||||
} },
|
||||
{ text: this.options.labels.cancel_button, 'class': 'cancel-button', click: function() {
|
||||
$(this).dialog( "close" );
|
||||
} },
|
||||
],
|
||||
close: function() { me._abort(); $(this).remove(); }
|
||||
});
|
||||
},
|
||||
// events bound via _bind are removed automatically
|
||||
// revert other modifications here
|
||||
destroy: function()
|
||||
{
|
||||
this.element
|
||||
.removeClass('itop-xlsxexporter');
|
||||
},
|
||||
// _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 )
|
||||
{
|
||||
this._superApply(arguments);
|
||||
},
|
||||
_start: function()
|
||||
{
|
||||
var me = this;
|
||||
$('.export-options', this.element).hide();
|
||||
$('.progress', this.element).show();
|
||||
var bAdvanced = $('#export-advanced-mode').prop('checked');
|
||||
this.bAutoDownload = $('#export-auto-download').prop('checked');
|
||||
$('.export-button', this.element.parent()).button('disable');
|
||||
|
||||
this.oProgressBar.progressbar({
|
||||
value: 0,
|
||||
change: function() {
|
||||
var progressLabel = $('.progress-label', me.element);
|
||||
progressLabel.text( $(this).progressbar( "value" ) + "%" );
|
||||
},
|
||||
complete: function() {
|
||||
var progressLabel = $('.progress-label', me.element);
|
||||
progressLabel.text( me.options.labels['complete'] );
|
||||
}
|
||||
});
|
||||
|
||||
//TODO disable the "export" button
|
||||
this.ajaxCall = $.post(this.options.ajax_page_url, {filter: this.options.filter, operation: 'xlsx_start', advanced: bAdvanced}, function(data) {
|
||||
this.ajaxCall = null;
|
||||
if (data && data.status == 'ok')
|
||||
{
|
||||
me.sToken = data.token;
|
||||
me._run();
|
||||
}
|
||||
else
|
||||
{
|
||||
if (data == null)
|
||||
{
|
||||
me.oStatusMessage.html('Unexpected error (operation=xlsx_start).');
|
||||
me.oProgressBar.progressbar({value: 100});
|
||||
}
|
||||
else
|
||||
{
|
||||
me.oStatusMessage.html(data.message);
|
||||
}
|
||||
}
|
||||
}, 'json');
|
||||
|
||||
},
|
||||
_abort: function()
|
||||
{
|
||||
$('.cancel-button', this.element.parent()).button('disable');
|
||||
this.oStatusMessage.html(this.options.labels['cancelled']);
|
||||
this.oProgressBar.progressbar({value: 100});
|
||||
if (this.sToken != null)
|
||||
{
|
||||
// Cancel the operation in progress... or cleanup a completed export
|
||||
// TODO
|
||||
if (this.ajaxCall)
|
||||
{
|
||||
this.ajaxCall.abort();
|
||||
this.ajaxClass = null;
|
||||
}
|
||||
var me = this;
|
||||
$.post(this.options.ajax_page_url, {token: this.sToken, operation: 'xlsx_abort'}, function(data) {
|
||||
me.sToken = null;
|
||||
});
|
||||
}
|
||||
},
|
||||
_run: function()
|
||||
{
|
||||
var me = this;
|
||||
this.ajaxCall = $.post(this.options.ajax_page_url, {token: this.sToken, operation: 'xlsx_run'}, function(data) {
|
||||
this.ajaxCall = null;
|
||||
if (data == null)
|
||||
{
|
||||
me.oStatusMessage.html('Unexpected error (operation=xlsx_run).');
|
||||
me.oProgressBar.progressbar({value: 100});
|
||||
}
|
||||
else if (data.status == 'error')
|
||||
{
|
||||
me.oStatusMessage.html(data.message);
|
||||
me.oProgressBar.progressbar({value: 100});
|
||||
}
|
||||
else if (data.status == 'done')
|
||||
{
|
||||
me.oStatusMessage.html(data.message);
|
||||
me.oProgressBar.progressbar({value: 100});
|
||||
$('.stats-data', this.element).html(data.statistics);
|
||||
me._on_completion();
|
||||
}
|
||||
else
|
||||
{
|
||||
// continue running the export in the background
|
||||
me.oStatusMessage.html(data.message);
|
||||
me.oProgressBar.progressbar({value: data.percentage});
|
||||
me._run();
|
||||
}
|
||||
}, 'json');
|
||||
},
|
||||
_on_completion: function()
|
||||
{
|
||||
var me = this;
|
||||
$('.progress', this.element).html('<form class="download-form" method="post" action="'+this.options.ajax_page_url+'"><input type="hidden" name="operation" value="xlsx_download"/><input type="hidden" name="token" value="'+this.sToken+'"/><button type="submit">'+this.options.labels['download_button']+'</button></form>');
|
||||
$('.download-form button', this.element).button().click(function() { me.sToken = null; window.setTimeout(function() { me.element.dialog('close'); }, 100); return true;});
|
||||
if (this.bAutoDownload)
|
||||
{
|
||||
me.sToken = null;
|
||||
$('.download-form').submit();
|
||||
this.element.dialog('close');
|
||||
}
|
||||
else
|
||||
{
|
||||
$('.statistics', this.element).show();
|
||||
$('.statistics .stats-toggle', this.element).click(function() { $(this).toggleClass('closed'); });
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
function XlsxExportDialog(sFilter)
|
||||
{
|
||||
var sUrl = GetAbsoluteUrlAppRoot()+'pages/ajax.render.php';
|
||||
$.post(sUrl, {operation: 'xlsx_export_dialog', filter: sFilter}, function(data) {
|
||||
$('body').append(data);
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user