mirror of
https://github.com/Combodo/iTop.git
synced 2026-02-13 07:24:13 +01:00
Fix Css problems
This commit is contained in:
acognet
@@ -1,25 +1,11 @@
|
|||||||
/*!
|
/*!
|
||||||
* Copyright (C) 2013-2020 Combodo SARL
|
* @copyright Copyright (C) 2010-2021 Combodo SARL
|
||||||
*
|
* @license http://opensource.org/licenses/AGPL-3.0
|
||||||
* This file is part of iTop.
|
|
||||||
*
|
|
||||||
* iTop is free software; you can redistribute it and/or modify
|
|
||||||
* it under the terms of the GNU Affero General Public License as published by
|
|
||||||
* the Free Software Foundation, either version 3 of the License, or
|
|
||||||
* (at your option) any later version.
|
|
||||||
*
|
|
||||||
* iTop is distributed in the hope that it will be useful,
|
|
||||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
||||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
||||||
* GNU Affero General Public License for more details.
|
|
||||||
*
|
|
||||||
* You should have received a copy of the GNU Affero General Public License
|
|
||||||
*/
|
*/
|
||||||
|
|
||||||
@import "base";
|
@import "base";
|
||||||
@import "preferences";
|
@import "preferences";
|
||||||
@import "attachments";
|
@import "attachments";
|
||||||
@import "tabularfieldsselector";
|
|
||||||
@import "impact-analysis";
|
@import "impact-analysis";
|
||||||
@import "audit";
|
@import "audit";
|
||||||
@import "data-synchro";
|
@import "data-synchro";
|
||||||
@@ -1,35 +0,0 @@
|
|||||||
/*!
|
|
||||||
* @copyright Copyright (C) 2010-2021 Combodo SARL
|
|
||||||
* @license http://opensource.org/licenses/AGPL-3.0
|
|
||||||
*/
|
|
||||||
|
|
||||||
.ibo-table-preview {
|
|
||||||
margin-top: 20px;
|
|
||||||
|
|
||||||
th {
|
|
||||||
padding: 5px;
|
|
||||||
border-width: 1px 1px 0;
|
|
||||||
border-style: groove groove none;
|
|
||||||
background: $ibo-body-background-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
td {
|
|
||||||
padding-right: 5px;
|
|
||||||
padding-left: 5px;
|
|
||||||
border-width: 0 1px;
|
|
||||||
border-style: none groove;
|
|
||||||
}
|
|
||||||
|
|
||||||
tr:last-child td {
|
|
||||||
border-bottom-width: 1px;
|
|
||||||
border-bottom-style: groove;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.ibo-preview-header {
|
|
||||||
margin-bottom: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#form_part_interactive_fields_xlsx, #form_part_interactive_fields_csv, #form_part_interactive_fields_pdf {
|
|
||||||
margin-top: $ibo-panel--spacing-top;
|
|
||||||
}
|
|
||||||
@@ -1,68 +1,72 @@
|
|||||||
|
/*
|
||||||
|
* @copyright Copyright (C) 2010-2021 Combodo SARL
|
||||||
|
* @license http://opensource.org/licenses/AGPL-3.0
|
||||||
|
*/
|
||||||
|
|
||||||
// jQuery UI style "widget" for managing the "xlsx-exporter"
|
// jQuery UI style "widget" for managing the "xlsx-exporter"
|
||||||
$(function()
|
$(function () {
|
||||||
{
|
|
||||||
// the widget definition, where "itop" is the namespace,
|
// the widget definition, where "itop" is the namespace,
|
||||||
// "tabularfieldsselector" the widget name
|
// "tabularfieldsselector" the widget name
|
||||||
$.widget( "itop.tabularfieldsselector",
|
$.widget("itop.tabularfieldsselector",
|
||||||
{
|
|
||||||
// default options
|
|
||||||
options:
|
|
||||||
{
|
{
|
||||||
fields: [],
|
// default options
|
||||||
value_holder: '#tabular_fields',
|
options:
|
||||||
sample_data: [],
|
{
|
||||||
total_count: 0,
|
fields: [],
|
||||||
preview_limit: 3,
|
value_holder: '#tabular_fields',
|
||||||
labels: {
|
sample_data: [],
|
||||||
preview_header: "Drag and drop the columns to change their order. Preview of %1$s lines. Total number of lines to export: %2$s",
|
total_count: 0,
|
||||||
empty_preview: "Select the columns to be exported from the list above",
|
preview_limit: 3,
|
||||||
columns_order: "Columns order",
|
labels: {
|
||||||
columns_selection: 'Available columns from %1$s',
|
preview_header: "Drag and drop the columns to change their order. Preview of %1$s lines. Total number of lines to export: %2$s",
|
||||||
check_all: 'Check all',
|
empty_preview: "Select the columns to be exported from the list above",
|
||||||
uncheck_all: 'Uncheck all',
|
columns_order: "Columns order",
|
||||||
no_field_selected: 'Select at least one column to be exported'
|
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
|
// the constructor
|
||||||
_create: function () {
|
_create: function () {
|
||||||
var me = this;
|
var me = this;
|
||||||
this._flatten_fields(this.options.fields);
|
this._flatten_fields(this.options.fields);
|
||||||
this.sId = this.element.attr('id');
|
this.sId = this.element.attr('id');
|
||||||
this.element.addClass('itop-tabularfieldsselector');
|
this.element.addClass('itop-tabularfieldsselector');
|
||||||
this.element.parent().bind('form-part-activate', function () {
|
this.element.parent().bind('form-part-activate', function () {
|
||||||
me._update_from_holder();
|
me._update_from_holder();
|
||||||
me._update_preview();
|
me._update_preview();
|
||||||
});
|
});
|
||||||
this.element.parent().bind('validate', function () {
|
this.element.parent().bind('validate', function () {
|
||||||
me.validate();
|
me.validate();
|
||||||
});
|
});
|
||||||
|
|
||||||
this.aSelected = [];
|
this.aSelected = [];
|
||||||
|
|
||||||
for (var i in this.options.fields) {
|
for (var i in this.options.fields) {
|
||||||
var sContent = `<div class="ibo-panel ibo-is-blue ">
|
var sContent = `<div class="ibo-panel ibo-is-blue ibo-is-opened">
|
||||||
<div class="ibo-panel--header">
|
<div class="ibo-panel--header">
|
||||||
<div class="ibo-panel--header-left">
|
<div class="ibo-panel--header-left">
|
||||||
<div class= "ibo-panel--title" > `+this._format(this.options.labels.columns_selection, i)+`</div>
|
<div class= "ibo-panel--title" > `+this._format(this.options.labels.columns_selection, i)+`</div>
|
||||||
</div>`;
|
</div>`;
|
||||||
sContent += `
|
sContent += `
|
||||||
<div className="ibo-panel--header-right">
|
<div className="ibo-panel--header-right">
|
||||||
<div className="ibo-panel--toolbar">
|
<div className="ibo-panel--toolbar">
|
||||||
<button class="check_all ibo-button ibo-is-regular ibo-is-neutral action" type="button"><span class=""ibo-button-label">`+this.options.labels.check_all+`</span></button>
|
<button class="check_all ibo-button ibo-is-regular ibo-is-neutral action" type="button"><span class=""ibo-button-label">`+this.options.labels.check_all+`</span></button>
|
||||||
<button class="uncheck_all ibo-button ibo-is-regular ibo-is-neutral action" type="button"><span class=""ibo-button-label">`+this.options.labels.uncheck_all+`</span></button>
|
<button class="uncheck_all ibo-button ibo-is-regular ibo-is-neutral action" type="button"><span class=""ibo-button-label">`+this.options.labels.uncheck_all+`</span></button>
|
||||||
</div>
|
</div>
|
||||||
</div>`;
|
</div>`;
|
||||||
sContent += `</div>
|
sContent += `</div>
|
||||||
<div class="ibo-panel--body">`;
|
<div class="ibo-panel--body">`;
|
||||||
for (var j in this.options.fields[i]) {
|
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 += 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 += `</div>
|
sContent += `</div>
|
||||||
</div>`;
|
</div>`;
|
||||||
this.element.append(sContent);
|
this.element.append(sContent);
|
||||||
}
|
}
|
||||||
sContent = `<div class="ibo-panel ibo-is-blue ">
|
sContent = `<div class="ibo-panel ibo-is-blue ibo-is-opened">
|
||||||
<div class="ibo-panel--header">
|
<div class="ibo-panel--header">
|
||||||
<div class="ibo-panel--header-left">
|
<div class="ibo-panel--header-left">
|
||||||
<div class="ibo-panel--title">`+this.options.labels.columns_order+`</div>
|
<div class="ibo-panel--title">`+this.options.labels.columns_order+`</div>
|
||||||
@@ -71,354 +75,354 @@ $(function()
|
|||||||
<div class="ibo-panel--body"> `;
|
<div class="ibo-panel--body"> `;
|
||||||
|
|
||||||
|
|
||||||
sContent += '<div class="ibo-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="ibo-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="ibo-table-preview"></div>';
|
sContent += '<div class="ibo-table-preview"></div>';
|
||||||
sContent += '</div></div>';
|
sContent += '</div></div>';
|
||||||
this.element.append(sContent);
|
this.element.append(sContent);
|
||||||
|
|
||||||
this._update_from_holder();
|
this._update_from_holder();
|
||||||
|
|
||||||
$('body').on('click change', '.tfs_checkbox', function () {
|
$('body').on('click change', '.tfs_checkbox', function () {
|
||||||
var sInstanceId = $(this).attr('data-instance-id');
|
var sInstanceId = $(this).attr('data-instance-id');
|
||||||
if (sInstanceId != me.sId) {
|
if (sInstanceId != me.sId) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
me._on_click($(this));
|
me._on_click($(this));
|
||||||
});
|
});
|
||||||
|
|
||||||
var maxWidth = 0;
|
var maxWidth = 0;
|
||||||
$('#'+this.sId+' .tfs_checkbox, #'+this.sId+' .tfs_checkbox_multi').each(function () {
|
$('#'+this.sId+' .tfs_checkbox, #'+this.sId+' .tfs_checkbox_multi').each(function () {
|
||||||
maxWidth = Math.max(maxWidth, $(this).parent().width());
|
maxWidth = Math.max(maxWidth, $(this).parent().width());
|
||||||
});
|
});
|
||||||
$('#'+this.sId+' .tfs_checkbox, #'+this.sId+' .tfs_checkbox_multi').each(function () {
|
$('#'+this.sId+' .tfs_checkbox, #'+this.sId+' .tfs_checkbox_multi').each(function () {
|
||||||
$(this).parent().parent().width(maxWidth).css({display: 'inline-block'});
|
$(this).parent().parent().width(maxWidth).css({display: 'inline-block'});
|
||||||
});
|
});
|
||||||
|
|
||||||
$('#'+this.sId+' .tfs_checkbox_multi').click(function () {
|
$('#'+this.sId+' .tfs_checkbox_multi').click(function () {
|
||||||
me._on_multi_click($(this).val(), this.checked);
|
me._on_multi_click($(this).val(), this.checked);
|
||||||
});
|
});
|
||||||
$('#'+this.sId+' .check_all').click(function () {
|
$('#'+this.sId+' .check_all').click(function () {
|
||||||
me._on_check_all($(this).closest('.ibo-panel'), true);
|
me._on_check_all($(this).closest('.ibo-panel'), true);
|
||||||
});
|
});
|
||||||
$('#'+this.sId+' .uncheck_all').click(function () {
|
$('#'+this.sId+' .uncheck_all').click(function () {
|
||||||
me._on_check_all($(this).closest('.ibo-panel'), false);
|
me._on_check_all($(this).closest('.ibo-panel'), false);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
this._update_preview();
|
this._update_preview();
|
||||||
this._make_tooltips();
|
this._make_tooltips();
|
||||||
},
|
},
|
||||||
_on_click: function (jItemClicked) {
|
_on_click: function (jItemClicked) {
|
||||||
|
|
||||||
var bChecked = jItemClicked.prop('checked');
|
var bChecked = jItemClicked.prop('checked');
|
||||||
var sValue = jItemClicked.val();
|
var sValue = jItemClicked.val();
|
||||||
this._mark_as_selected(sValue, bChecked);
|
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_holder();
|
||||||
this._update_preview();
|
this._update_preview();
|
||||||
}
|
var sDataParent = jItemClicked.attr('data-parent');
|
||||||
},
|
if (sDataParent != '') {
|
||||||
_on_check_all: function (jSelector, bChecked) {
|
this._update_tristate(sDataParent+'_multi');
|
||||||
var me = this;
|
}
|
||||||
jSelector.find('.tfs_checkbox').each(function () {
|
},
|
||||||
$(this).prop('checked', bChecked);
|
_on_multi_click: function (sMultiFieldCode, bChecked) {
|
||||||
me._mark_as_selected($(this).val(), bChecked);
|
var oField = this._get_main_field_by_code(sMultiFieldCode);
|
||||||
});
|
|
||||||
jSelector.find('.tfs_checkbox_multi').each(function () {
|
|
||||||
var oField = me._get_main_field_by_code($(this).val());
|
|
||||||
if (oField != null) {
|
if (oField != null) {
|
||||||
$(this).prop('checked', bChecked);
|
|
||||||
$(this).prop('indeterminate', false);
|
|
||||||
var sPrefix = '#tfs_'+this.sId+'_';
|
var sPrefix = '#tfs_'+this.sId+'_';
|
||||||
for (var k in oField.subattr) {
|
for (var k in oField.subattr) {
|
||||||
me._mark_as_selected(oField.subattr[k].code, bChecked);
|
this._mark_as_selected(oField.subattr[k].code, bChecked);
|
||||||
// In case the tooltip is visible, also update the checkboxes
|
// In case the tooltip is visible, also update the checkboxes
|
||||||
sElementId = (sPrefix+oField.subattr[k].code).replace('.', '_');
|
sElementId = (sPrefix+oField.subattr[k].code).replace('.', '_');
|
||||||
$(sElementId).prop('checked', bChecked);
|
$(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._update_holder();
|
||||||
|
this._update_preview();
|
||||||
}
|
}
|
||||||
$('#'+this.sId+' .tfs_checkbox').each(function () {
|
},
|
||||||
if ($.inArray($(this).val(), me.aSelected) != -1) {
|
_on_check_all: function (jSelector, bChecked) {
|
||||||
$(this).prop('checked', true);
|
var me = this;
|
||||||
} else {
|
jSelector.find('.tfs_checkbox').each(function () {
|
||||||
$(this).prop('checked', false);
|
$(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();
|
||||||
var me = this;
|
this._update_preview();
|
||||||
$('#'+this.sId+' .tfs_checkbox_multi').each(function () {
|
},
|
||||||
me._update_tristate($(this).attr('id'));
|
_update_tristate: function (sParentId) {
|
||||||
});
|
// Check if the parent is checked, unchecked or indeterminate
|
||||||
|
var sParentId = sParentId.replace('.', '_');
|
||||||
},
|
var sAttCode = $('#'+sParentId).val();
|
||||||
_update_preview: function () {
|
var oField = this._get_main_field_by_code(sAttCode);
|
||||||
var sHtml = '';
|
if (oField != null) {
|
||||||
if (this.aSelected.length > 0) {
|
var iNbChecked = 0;
|
||||||
sHtml += '<table><thead><tr>';
|
var aDebug = [];
|
||||||
for (var k in this.aSelected) {
|
for (var j in oField.subattr) {
|
||||||
var sField = this.aSelected[k];
|
if ($.inArray(oField.subattr[j].code, this.aSelected) != -1) {
|
||||||
if ($.inArray(sField, this.aSelected) != -1) {
|
aDebug.push(oField.subattr[j].code);
|
||||||
var sRemoveBtn = ' <span style="display:inline-block;float:right;cursor:pointer;" class="export-field-close" data-attcode="'+sField+'">×</span>';
|
iNbChecked++;
|
||||||
sHtml += '<th data-attcode="'+sField+'"><span class="drag-handle">'+this.aFieldsByCode[sField].unique_label+'</span>'+sRemoveBtn+'</th>';
|
}
|
||||||
|
}
|
||||||
|
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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
sHtml += '</tr></thead><tbody>';
|
},
|
||||||
|
_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);
|
||||||
|
|
||||||
for (var i = 0; i < Math.min(this.options.preview_limit, this.options.total_count); i++) {
|
if (sFields != '') {
|
||||||
sHtml += '<tr>';
|
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) {
|
for (var k in this.aSelected) {
|
||||||
var sField = this.aSelected[k];
|
var sField = this.aSelected[k];
|
||||||
sHtml += '<td>'+this.options.sample_data[i][sField]+'</td>';
|
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>';
|
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+' .ibo-table-preview').html(sHtml);
|
||||||
|
var me = this;
|
||||||
|
$('#'+this.sId+' .ibo-table-preview table').dragtable({
|
||||||
|
persistState: function (table) {
|
||||||
|
me._on_drag_columns(table);
|
||||||
|
}, dragHandle: '.drag-handle'
|
||||||
|
});
|
||||||
|
$('#'+this.sId+' .ibo-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+' .ibo-table-preview').html('<div class="export_empty_preview">'+this.options.labels.empty_preview+'</div>');
|
||||||
}
|
}
|
||||||
|
$('.form_part:visible').trigger('preview_updated');
|
||||||
sHtml += '</tbody></table>';
|
},
|
||||||
|
_get_field_by_code: function (sFieldCode) {
|
||||||
$('#'+this.sId+' .preview_header').show();
|
for (var k in this.aFieldsByCode) {
|
||||||
$('#'+this.sId+' .ibo-table-preview').html(sHtml);
|
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;
|
var me = this;
|
||||||
$('#'+this.sId+' .ibo-table-preview table').dragtable({
|
me.aSelected = [];
|
||||||
persistState: function (table) {
|
table.el.find('th').each(function (i) {
|
||||||
me._on_drag_columns(table);
|
me.aSelected.push($(this).attr('data-attcode'));
|
||||||
}, dragHandle: '.drag-handle'
|
|
||||||
});
|
});
|
||||||
$('#'+this.sId+' .ibo-table-preview table .export-field-close').click(function (event) {
|
this._update_holder();
|
||||||
me._on_remove_column($(this).attr('data-attcode'));
|
},
|
||||||
event.preventDefault();
|
_on_remove_column: function (sField) {
|
||||||
return false;
|
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'));
|
||||||
});
|
});
|
||||||
} else {
|
},
|
||||||
$('#'+this.sId+' .preview_header').hide();
|
_format: function () {
|
||||||
$('#'+this.sId+' .ibo-table-preview').html('<div class="export_empty_preview">'+this.options.labels.empty_preview+'</div>');
|
var s = arguments[0];
|
||||||
}
|
for (var i = 0; i < arguments.length-1; i++) {
|
||||||
$('.form_part:visible').trigger('preview_updated');
|
var reg = new RegExp("%"+(i+1)+"\\$s", "gm");
|
||||||
},
|
s = s.replace(reg, arguments[i+1]);
|
||||||
_get_field_by_code: function (sFieldCode) {
|
|
||||||
for (var k in this.aFieldsByCode) {
|
|
||||||
if (k == sFieldCode) {
|
|
||||||
return this.aFieldsByCode[k];
|
|
||||||
}
|
}
|
||||||
}
|
return s;
|
||||||
return null;
|
},
|
||||||
},
|
validate: function () {
|
||||||
_get_main_field_by_code: function (sFieldCode) {
|
if (this.aSelected.length == 0) {
|
||||||
for (var i in this.options.fields) {
|
var aMessages = $('#export-form').data('validation_messages');
|
||||||
for (var j in this.options.fields[i]) {
|
aMessages.push(this.options.labels.no_field_selected);
|
||||||
if (this.options.fields[i][j].code == sFieldCode) {
|
$('#export-form').data('validation_messages', aMessages);
|
||||||
return this.options.fields[i][j];
|
}
|
||||||
|
},
|
||||||
|
// 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 = {}; // Must be an object since indexes are non-numeric
|
||||||
|
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];
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
return null;
|
_make_tooltips: function () {
|
||||||
},
|
var me = this;
|
||||||
_on_drag_columns: function (table) {
|
$('#'+this.sId+' .tfs_advanced').each(function (index, elt) {
|
||||||
var me = this;
|
var sDataAttcode = $(elt).attr('data-attcode');
|
||||||
me.aSelected = [];
|
var sTooltipContent = me._get_tooltip_content(sDataAttcode);
|
||||||
table.el.find('th').each(function (i) {
|
tippy(elt, {
|
||||||
me.aSelected.push($(this).attr('data-attcode'));
|
'content': sTooltipContent,
|
||||||
});
|
allowHTML: true,
|
||||||
this._update_holder();
|
interactive: true,
|
||||||
},
|
zIndex: 9999,
|
||||||
_on_remove_column: function (sField) {
|
role: 'tooltip',
|
||||||
var sElementId = this.sId+'_'+sField;
|
popperOptions: {
|
||||||
sElementId = '#tfs_'+sElementId.replace('.', '_');
|
strategy: 'fixed'
|
||||||
$(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 = {}; // Must be an object since indexes are non-numeric
|
|
||||||
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').each(function (index, elt) {
|
|
||||||
var sDataAttcode = $(elt).attr('data-attcode');
|
|
||||||
var sTooltipContent = me._get_tooltip_content(sDataAttcode);
|
|
||||||
tippy(elt, {
|
|
||||||
'content': sTooltipContent,
|
|
||||||
allowHTML: true,
|
|
||||||
interactive: true,
|
|
||||||
zIndex: 9999,
|
|
||||||
role: 'tooltip',
|
|
||||||
popperOptions: {
|
|
||||||
strategy: 'fixed'
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
});
|
|
||||||
|
|
||||||
},
|
},
|
||||||
_get_tooltip_content: function (sDataAttCode) {
|
_get_tooltip_content: function (sDataAttCode) {
|
||||||
var oField = this._get_main_field_by_code(sDataAttCode);
|
var oField = this._get_main_field_by_code(sDataAttCode);
|
||||||
var sContent = '';
|
var sContent = '';
|
||||||
if (oField != null) {
|
if (oField != null) {
|
||||||
sContent += '<div display:block;">'+oField.label+'</div>';
|
sContent += '<div display:block;">'+oField.label+'</div>';
|
||||||
for (var k in oField.subattr) {
|
for (var k in oField.subattr) {
|
||||||
bChecked = ($.inArray(oField.subattr[k].code, this.aSelected) != -1);
|
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);
|
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;
|
||||||
}
|
}
|
||||||
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;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -5,7 +5,7 @@
|
|||||||
<input id="dtbl_dlg_settings_{{ oUIBlock.GetTableId() }}" type="radio" name="settings" {% if (oUIBlock.GetOption("bUseCustomSettings") == false) %} checked {% endif %} value="defaults">
|
<input id="dtbl_dlg_settings_{{ oUIBlock.GetTableId() }}" type="radio" name="settings" {% if (oUIBlock.GetOption("bUseCustomSettings") == false) %} checked {% endif %} value="defaults">
|
||||||
<label for="dtbl_dlg_settings_{{ oUIBlock.GetTableId() }}"> {{ 'UI:UseDefaultSettings'|dict_s }}</label>
|
<label for="dtbl_dlg_settings_{{ oUIBlock.GetTableId() }}"> {{ 'UI:UseDefaultSettings'|dict_s }}</label>
|
||||||
</p>
|
</p>
|
||||||
<div class="ibo-panel ibo-is-neutral">
|
<div class="ibo-panel ibo-is-neutral ibo-is-opened">
|
||||||
<div class="ibo-panel--header">
|
<div class="ibo-panel--header">
|
||||||
<div class="ibo-panel--header-left">
|
<div class="ibo-panel--header-left">
|
||||||
<input id="dtbl_dlg_specific_{{ oUIBlock.GetTableId() }}" type="radio" class="specific_settings" name="settings" {% if oUIBlock.GetOption("bUseCustomSettings") %} checked {% endif %} value="specific">
|
<input id="dtbl_dlg_specific_{{ oUIBlock.GetTableId() }}" type="radio" class="specific_settings" name="settings" {% if oUIBlock.GetOption("bUseCustomSettings") %} checked {% endif %} value="specific">
|
||||||
@@ -25,7 +25,7 @@
|
|||||||
<p> {{ 'UI:Display_X_ItemsPerPage_prefix'|dict_s }}<input type="text" size="4" name="page_size" value="{{ oUIBlock.GetOption("iPageSize") }}">{{ 'UI:Display_X_ItemsPerPage_suffix'|dict_s }}</p>
|
<p> {{ 'UI:Display_X_ItemsPerPage_prefix'|dict_s }}<input type="text" size="4" name="page_size" value="{{ oUIBlock.GetOption("iPageSize") }}">{{ 'UI:Display_X_ItemsPerPage_suffix'|dict_s }}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="ibo-panel ibo-is-neutral">
|
<div class="ibo-panel ibo-is-neutral ibo-is-opened">
|
||||||
<div class="ibo-panel--header">
|
<div class="ibo-panel--header">
|
||||||
<div class="ibo-panel--header-left">
|
<div class="ibo-panel--header-left">
|
||||||
<input id="dtbl_dlg_save_{{ oUIBlock.GetTableId() }}" type="checkbox" {% if oUIBlock.GetOption("sTableId") != null %}checked{% endif %} name="save_settings">
|
<input id="dtbl_dlg_save_{{ oUIBlock.GetTableId() }}" type="checkbox" {% if oUIBlock.GetOption("sTableId") != null %}checked{% endif %} name="save_settings">
|
||||||
|
|||||||
Reference in New Issue
Block a user