mirror of
https://github.com/Combodo/iTop.git
synced 2026-07-13 10:16:37 +02:00
639 lines
30 KiB
Twig
639 lines
30 KiB
Twig
{# @copyright Copyright (C) 2010-2024 Combodo SAS #}
|
|
{# @license http://opensource.org/licenses/AGPL-3.0 #}
|
|
{% set sListId = oUIBlock.GetOption('sListId') %}
|
|
{% set sListIDForVarSuffix = ('' ~ sListId)|sanitize(constant('utils::ENUM_SANITIZATION_FILTER_VARIABLE_NAME')) %}
|
|
{% if oUIBlock.GetOption("iPageSize") is not empty %}
|
|
{% set iPageSize = oUIBlock.GetOption("iPageSize") %}
|
|
{% else %}
|
|
{% set iPageSize = 10 %}
|
|
{% endif %}
|
|
|
|
$('#{{ oUIBlock.GetId() }}').closest("[role=dialog]").on("dialogbeforeclose", function () {
|
|
$('#{{ oUIBlock.GetId() }}').DataTable().clear();
|
|
});
|
|
|
|
$('#{{ sListId }}').data('target', 'ibo-datatables--outer');
|
|
|
|
if ($('#{{ oUIBlock.GetId() }}') != 'undefined' && $.fn.dataTable.isDataTable('#{{ oUIBlock.GetId() }}')) {
|
|
$('#{{ oUIBlock.GetId() }}').DataTable().destroy(false);
|
|
}
|
|
|
|
{% if oUIBlock.GetOption('sTreeGroupingAttr') is not empty %}
|
|
{# ── HIERARCHICAL TREE MODE ─────────────────────────────────────────────────── #}
|
|
var oTable{{ sListIDForVarSuffix }} = $('#{{ oUIBlock.GetId() }}').DataTable({
|
|
language: {
|
|
processing: "{{ 'UI:Datatables:Language:Processing'|dict_s }}",
|
|
search: "{{ 'UI:Datatables:Language:Search'|dict_s }}",
|
|
lengthMenu: "{{ 'UI:Datatables:Language:LengthMenu'|dict_s }}",
|
|
zeroRecords: "{{ 'UI:Datatables:Language:ZeroRecords'|dict_s }}",
|
|
info: "{{ 'UI:Datatables:Language:Info'|dict_s }}",
|
|
infoEmpty: "{{ 'UI:Datatables:Language:InfoEmpty'|dict_s }}",
|
|
infoFiltered: "({{ 'UI:Datatables:Language:InfoFiltered'|dict_s }})",
|
|
emptyTable: "{{ 'UI:Datatables:Language:EmptyTable'|dict_s }}",
|
|
paginate: {
|
|
first: "<i class=\"fas fa-angle-double-left\"></i>",
|
|
previous: "<i class=\"fas fa-angle-left\"></i>",
|
|
next: "<i class=\"fas fa-angle-right\"></i>",
|
|
last: "<i class=\"fas fa-angle-double-right\"></i>"
|
|
}
|
|
},
|
|
scrollX: true,
|
|
{% if oUIBlock.GetOption('sMaxHeight') is not empty %}
|
|
scrollY: "{{ oUIBlock.GetOption('sMaxHeight') }}",
|
|
{% endif %}
|
|
scrollCollapse: true,
|
|
paging: false,
|
|
ordering: false,
|
|
dom: "<'ibo-datatable--toolbar'<'ibo-datatable--toolbar-left'><'ibo-datatable--toolbar-right' i>>t",
|
|
rowId: "id",
|
|
filter: false,
|
|
retrieve: true,
|
|
destroy: true,
|
|
processing: false,
|
|
serverSide: false,
|
|
data: [],
|
|
columns: [
|
|
{% for aColumn in oUIBlock.GetDisplayColumns() %}
|
|
{
|
|
autoWidth: true,
|
|
searchable: false,
|
|
orderable: false,
|
|
title: "{{ aColumn["attribute_label"] }}",
|
|
defaultContent: "",
|
|
type: "html",
|
|
metadata: {
|
|
object_class: "{{ aColumn["object_class"] }}",
|
|
attribute_code: "{{ aColumn["attribute_code"] }}",
|
|
attribute_type: "{{ aColumn["attribute_type"] }}",
|
|
attribute_label: "{{ aColumn["attribute_label"] }}"
|
|
},
|
|
data: "{{ aColumn["class_alias"] }}/{{ aColumn["attribute_code"] }}",
|
|
createdCell: function (td, cellData, rowData, row, col) {
|
|
$(td).attr('data-object-class', '{{ aColumn["object_class"] }}');
|
|
$(td).attr('data-attribute-label', '{{ aColumn["attribute_label"] }}');
|
|
{% if aColumn["attribute_code"] != "_key_" %}
|
|
$(td).attr('data-attribute-code', '{{ aColumn["attribute_code"] }}');
|
|
$(td).attr('data-attribute-type', '{{ aColumn["attribute_type"] }}');
|
|
{% endif %}
|
|
if (rowData["{{ aColumn["class_alias"] }}/{{ aColumn["attribute_code"] }}/raw"]) {
|
|
$(td).attr('data-value-raw', rowData["{{ aColumn["class_alias"] }}/{{ aColumn["attribute_code"] }}/raw"]);
|
|
}
|
|
},
|
|
render: {
|
|
display: function (data, type, row) { {{ aColumn["render"]|raw }}},
|
|
_: "{{ aColumn["class_alias"] }}/{{ aColumn["attribute_code"] }}"
|
|
}
|
|
},
|
|
{% endfor %}
|
|
],
|
|
drawCallback: function (settings) {
|
|
$(this).closest('.dataTables_wrapper').unblock();
|
|
},
|
|
createdRow: function (row, data, dataIndex) {
|
|
if (data['@class'] !== undefined) {
|
|
$(row).addClass(data['@class']);
|
|
}
|
|
},
|
|
initComplete: function () {
|
|
this.attr('data-status', 'loaded');
|
|
this.closest('.dataTables_scroll').find('.dataTables_scrollHead .ibo-datatable').attr('data-status', 'loaded');
|
|
|
|
iTopDataTableTreeGrouping.setup('{{ oUIBlock.GetId() }}', this.api(), {
|
|
parentKey: '{{ oUIBlock.GetOption("sTreeGroupingParentKey") }}',
|
|
ajaxUrl: '{{ oUIBlock.GetAjaxUrl() }}',
|
|
ajaxData: {{ oUIBlock.GetJsonAjaxData() | raw }},
|
|
initData: {{ oUIBlock.GetJsonInitDisplayData() | raw }}
|
|
});
|
|
|
|
if (window.ResizeObserver) {
|
|
let oTable{{ sListIDForVarSuffix }}ResizeTimeout = null;
|
|
const oTable{{ sListIDForVarSuffix }}Resize = new ResizeObserver(function () {
|
|
clearTimeout(oTable{{ sListIDForVarSuffix }}ResizeTimeout);
|
|
oTable{{ sListIDForVarSuffix }}ResizeTimeout = setTimeout(function () {
|
|
$('#{{ oUIBlock.GetId() }}').DataTable().columns.adjust();
|
|
}, 120);
|
|
});
|
|
oTable{{ sListIDForVarSuffix }}Resize.observe($('#{{ oUIBlock.GetId() }}')[0]);
|
|
}
|
|
}
|
|
});
|
|
{% else %}
|
|
{# ── NORMAL SERVER-SIDE MODE ────────────────────────────────────────────────── #}
|
|
var oTable{{ sListIDForVarSuffix }} = $('#{{ oUIBlock.GetId() }}').DataTable({
|
|
language: {
|
|
processing: "{{ 'UI:Datatables:Language:Processing'|dict_s }}",
|
|
search: "{{ 'UI:Datatables:Language:Search'|dict_s }}",
|
|
lengthMenu: "{{ 'UI:Datatables:Language:LengthMenu'|dict_s }}",
|
|
zeroRecords: "{{ 'UI:Datatables:Language:ZeroRecords'|dict_s }}",
|
|
info: "{{ 'UI:Datatables:Language:Info'|dict_s }}",
|
|
infoEmpty: "{{ 'UI:Datatables:Language:InfoEmpty'|dict_s }}",
|
|
infoFiltered: "({{ 'UI:Datatables:Language:InfoFiltered'|dict_s }})",
|
|
emptyTable: "{{ 'UI:Datatables:Language:EmptyTable'|dict_s }}",
|
|
errorMessage: "{{ 'UI:Datatables:Language:Error'|dict_s }}",
|
|
buttonOk: "{{ 'UI:Button:Ok'|dict_s }}",
|
|
paginate: {
|
|
first: "<i class=\"fas fa-angle-double-left\"></i>",
|
|
previous: "<i class=\"fas fa-angle-left\"></i>",
|
|
next: "<i class=\"fas fa-angle-right\"></i>",
|
|
last: "<i class=\"fas fa-angle-double-right\"></i>"
|
|
},
|
|
aria: {
|
|
sortAscending: ": {{ 'UI:Datatables:Language:Sort:Ascending'|dict_s }}",
|
|
sortDescending: ": {{ 'UI:Datatables:Language:Sort:Descending'|dict_s }}"
|
|
}
|
|
},
|
|
scrollX: true,
|
|
{% if oUIBlock.GetOption('sMaxHeight') is not empty %}
|
|
scrollY: "{{ oUIBlock.GetOption('sMaxHeight') }}",
|
|
{% endif %}
|
|
scrollCollapse: true,
|
|
{% if oUIBlock.GetOption('printVersion') is not empty %}
|
|
paging: false,
|
|
info: false,
|
|
{% endif %}
|
|
lengthMenu: [[ {{ iPageSize }}, {{ iPageSize*2 }}, {{ iPageSize*3 }}, {{ iPageSize*4 }}, -1], [ {{ iPageSize }}, {{ iPageSize*2 }}, {{ iPageSize*3 }}, {{ iPageSize*4 }}, "{{ 'UI:Datatables:Language:DisplayLength:All'|dict_s }}"]],
|
|
dom: "<'ibo-datatable--toolbar'<'ibo-datatable--toolbar-left' pl><'ibo-datatable--toolbar-right' i>>t<'ibo-datatable--toolbar'<'ibo-datatable--toolbar-left' pl><'ibo-datatable--toolbar-right' i>>",
|
|
{% if( oUIBlock.GetOption("sort")[0] is defined ) %}
|
|
order: [[{{ oUIBlock.GetOptions()["sort"][0] }}, '{{ oUIBlock.GetOptions()["sort"][1] }}']],
|
|
{% else %}
|
|
order: [],
|
|
{% endif %}
|
|
ordering: true,
|
|
{% if oUIBlock.GetOption("select_mode") is not empty %}
|
|
select: {
|
|
style: "{% if oUIBlock.GetOption("select_mode") == "multiple" %}multi{% else %}single{% endif %}",
|
|
info: false
|
|
},
|
|
rowCallback: function (oRow, oData) {
|
|
if ($(this).closest('.ibo-panel--body').find('[name=selectionMode]').val() === "negative")
|
|
{
|
|
if (oSelectedItems{{ sListIDForVarSuffix }}.indexOf(oData.id) === -1)
|
|
{
|
|
this.api().row($(oRow)).select();
|
|
// $(oRow).addClass('selected');
|
|
$(oRow).find('td:first-child input').prop('checked', true);
|
|
}
|
|
}
|
|
else
|
|
{
|
|
if (oSelectedItems{{ sListIDForVarSuffix }}.indexOf(oData.id) > -1)
|
|
{
|
|
this.api().row($(oRow)).select();
|
|
$(oRow).find('td:first-child input').prop('checked', true);
|
|
}
|
|
}
|
|
},
|
|
drawCallback: function (settings) {
|
|
if(settings.json)
|
|
{
|
|
$(this).closest('.ibo-panel').find('.ibo-datatable--result-count').html(settings.json.recordsTotal);
|
|
}
|
|
if ($(this).closest('.ibo-panel--body').find('[name=selectionMode]').val() === "negative")
|
|
{
|
|
$(this).closest('.dataTables_wrapper').find('.checkAll')[0].checked = true;
|
|
}
|
|
bSelectAllowed{{ sListIDForVarSuffix }} = true;
|
|
|
|
// Hiding pagination if only one page
|
|
if ($(this).closest('.dataTables_wrapper').find('.dataTables_paginate:last .paginate_button:not(.previous):not(.next)').length < 2)
|
|
{
|
|
$(this).closest('.dataTables_wrapper').find('.dataTables_paginate, .dataTables_info').hide();
|
|
}
|
|
else
|
|
{
|
|
$(this).closest('.dataTables_wrapper').find('.dataTables_paginate, .dataTables_info').show();
|
|
}
|
|
|
|
$(this).closest('.dataTables_wrapper').unblock();
|
|
|
|
// Disable hyperlinks if necessary
|
|
{% if oUIBlock.GetOption("disable_hyperlinks") is not same as false %}
|
|
$("#{{ oUIBlock.GetId() }} a").on('click', function (e) {
|
|
e.preventDefault();
|
|
});
|
|
{% endif %}
|
|
|
|
},
|
|
{% else %}
|
|
drawCallback: function (settings) {
|
|
if(settings.json)
|
|
{
|
|
$(this).closest('.ibo-panel').find('.ibo-datatable--result-count').html(settings.json.recordsTotal);
|
|
}
|
|
$(this).closest('.dataTables_wrapper').unblock();
|
|
// Hiding pagination if only one page
|
|
if ($(this).closest('.dataTables_wrapper').find('.dataTables_paginate:last .paginate_button:not(.previous):not(.next)').length < 2)
|
|
{
|
|
$(this).closest('.dataTables_wrapper').find('.dataTables_paginate, .dataTables_info').hide();
|
|
}
|
|
else
|
|
{
|
|
$(this).closest('.dataTables_wrapper').find('.dataTables_paginate, .dataTables_info').show();
|
|
}
|
|
|
|
// Disable hyperlinks if necessary
|
|
{% if oUIBlock.GetOption("disable_hyperlinks") is same as true %}
|
|
$("#{{ oUIBlock.GetId() }} a").on('click', function (e) {
|
|
e.preventDefault();
|
|
});
|
|
{% endif %}
|
|
},
|
|
{% endif %}
|
|
rowId: "id",
|
|
filter: false,
|
|
retrieve: true,
|
|
destroy: true,
|
|
processing: true,
|
|
serverSide: true,
|
|
columns: [
|
|
{% if oUIBlock.GetOption("select_mode") is not empty %}
|
|
{
|
|
width: "20px",
|
|
searchable: false,
|
|
sortable: false,
|
|
orderable: false,
|
|
title:
|
|
{% if oUIBlock.GetOption("select_mode") != "single" %}
|
|
'<span class="row_input"><input type="checkbox" onclick="checkAllDataTable(\'{{ oUIBlock.GetId() }}\',this.checked,\'{{ oUIBlock.GetOption("sListId") }}\');" class="checkAll" id="field_{{ oUIBlock.GetId() }}_check_all" name="field_{{ oUIBlock.GetId() }}_check_all" title="{{ 'UI:SearchValue:CheckAll'|dict_s }} / {{ 'UI:SearchValue:UncheckAll'|dict_s }}"/></span>'
|
|
{% else %}
|
|
'<span class="row_input"><input type="checkbox" style="display: none;" onclick="checkAllDataTable(\'{{ oUIBlock.GetId() }}\',this.checked,\'{{ oUIBlock.GetOption("sListId") }}\');" class="checkAll" id="field_{{ oUIBlock.GetId() }}_check_all" name="field_{{ oUIBlock.GetId() }}_check_all" title="{{ 'UI:SearchValue:CheckAll'|dict_s }} / {{ 'UI:SearchValue:UncheckAll'|dict_s }}"/></span>'
|
|
{% endif %},
|
|
type: "html",
|
|
data: "id",
|
|
render: function (data, type, row) {
|
|
let oCheckboxElem =
|
|
{% if oUIBlock.GetOption("select_mode") != "single" %}
|
|
$('<span class="row_input"><input type="checkbox" class="selectList{{ oUIBlock.GetId() }}" name="selectObject[]" value="'+row.id+'"></span>');
|
|
{% else %}
|
|
$('<span class="row_input"><input type="radio" class="selectList{{ oUIBlock.GetId() }}" name="selectObject[]" value="'+row.id+'"></span>');
|
|
{% endif %}
|
|
if (row.limited_access) {
|
|
oCheckboxElem.html('-');
|
|
} else {
|
|
oCheckboxElem.find(':input').attr('data-object-id', row.id).attr('data-target-object-id', row.target_id);
|
|
}
|
|
return oCheckboxElem.prop('outerHTML');
|
|
}
|
|
},
|
|
{% endif %}
|
|
{% for aColumn in oUIBlock.GetDisplayColumns() %}
|
|
{
|
|
// width: 100,
|
|
autoWidth: true,
|
|
searchable: false,
|
|
sortable: true,
|
|
title: "{{ aColumn["attribute_label"] }}",
|
|
defaultContent: "",
|
|
type: "html",
|
|
metadata: {
|
|
object_class: "{{ aColumn["object_class"] }}",
|
|
attribute_code: "{{ aColumn["attribute_code"] }}",
|
|
attribute_type: "{{ aColumn["attribute_type"] }}",
|
|
attribute_label: "{{ aColumn["attribute_label"] }}"
|
|
},
|
|
data: "{{ aColumn["class_alias"] }}/{{ aColumn["attribute_code"] }}",
|
|
createdCell: function (td, cellData, rowData, row, col) {
|
|
$(td).attr('data-object-class', '{{ aColumn["object_class"] }}');
|
|
$(td).attr('data-attribute-label', '{{ aColumn["attribute_label"] }}');
|
|
{% if aColumn["attribute_code"] != "_key_" %}
|
|
$(td).attr('data-attribute-code', '{{ aColumn["attribute_code"] }}');
|
|
$(td).attr('data-attribute-type', '{{ aColumn["attribute_type"] }}');
|
|
{% endif %}
|
|
if (rowData["{{ aColumn["class_alias"] }}/{{ aColumn["attribute_code"] }}/raw"]) {
|
|
$(td).attr('data-value-raw', rowData["{{ aColumn["class_alias"] }}/{{ aColumn["attribute_code"] }}/raw"]);
|
|
}
|
|
},
|
|
render: {
|
|
display: function (data, type, row) { {{ aColumn["render"]|raw }}},
|
|
_: "{{ aColumn["class_alias"] }}/{{ aColumn["attribute_code"] }}"
|
|
}
|
|
},
|
|
{% endfor %}
|
|
{% if oUIBlock.HasRowActions() %}
|
|
getRowActionsColumnDefinition('{{ oUIBlock.GetId() }}'),
|
|
{% endif %}
|
|
],
|
|
ajax: $.fn.dataTable.pipeline({
|
|
url: "{{ oUIBlock.GetAjaxUrl() }}",
|
|
data: {{ oUIBlock.GetJsonAjaxData() |raw }},
|
|
method: "post",
|
|
pages: 1
|
|
}, // number of pages to cache
|
|
{{ oUIBlock.GetJsonInitDisplayData() |raw }}
|
|
),
|
|
createdRow: function (row, data, dataIndex) {
|
|
if (data['@class'] !== undefined)
|
|
{
|
|
$(row).addClass(data['@class']);
|
|
}
|
|
},
|
|
initComplete: function () {
|
|
if (this.api().page.info().pages < 2)
|
|
{
|
|
this.closest('.dataTables_wrapper').find('.dataTables_length').hide();
|
|
}
|
|
this.closest('.dataTables_wrapper').unblock();
|
|
|
|
{% if oUIBlock.GetOption("select_mode") is not empty %}
|
|
updateDataTableSelection('{{ sListId }}', '{{ oUIBlock.GetId() }}');
|
|
{% if oUIBlock.GetOption("select_mode") != "single" %}
|
|
this.api().on('select', function (oEvent, dt, type, indexes) {
|
|
if (bSelectAllowed{{ sListIDForVarSuffix }})
|
|
{
|
|
let aData = oTable{{ sListIDForVarSuffix }}.rows(indexes).data().toArray();
|
|
if ($(this).closest('.ibo-panel--body').find('[name=selectionMode]').val() === "negative")
|
|
{
|
|
// Checking input
|
|
$('#{{ oUIBlock.GetId() }} tbody tr.selected td:first-child input').prop('checked', true);
|
|
// Saving values in temp array
|
|
for (let i in aData)
|
|
{
|
|
let iItemId = aData[i].id;
|
|
if (oSelectedItems{{ sListIDForVarSuffix }}.indexOf(iItemId) > -1)
|
|
{
|
|
oSelectedItems{{ sListIDForVarSuffix }}.splice(oSelectedItems{{ sListIDForVarSuffix }}.indexOf(iItemId), 1);
|
|
updateDataTableSelection('{{ sListId }}', '{{ oUIBlock.GetId() }}');
|
|
}
|
|
}
|
|
}
|
|
else
|
|
{
|
|
// Checking input
|
|
$('#{{ oUIBlock.GetId() }} tbody tr.selected td:first-child input').prop('checked', true);
|
|
// Saving values in temp array
|
|
for (let i in aData)
|
|
{
|
|
let iItemId = aData[i].id;
|
|
if (oSelectedItems{{ sListIDForVarSuffix }}.indexOf(iItemId) === -1)
|
|
{
|
|
oSelectedItems{{ sListIDForVarSuffix }}.push(iItemId);
|
|
updateDataTableSelection('{{ sListId }}', '{{ oUIBlock.GetId() }}');
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
this.api().off('deselect').on('deselect', function (oEvent, dt, type, indexes) {
|
|
if (bSelectAllowed{{ sListIDForVarSuffix }} )
|
|
{
|
|
let aData = oTable{{ sListIDForVarSuffix }}.rows(indexes).data().toArray();
|
|
// Checking input
|
|
$('#{{ oUIBlock.GetId() }} tbody tr:not(.selected) td:first-child input').prop('checked', false);
|
|
// Saving values in temp array
|
|
if ($(this).closest('.ibo-panel--body').find('[name=selectionMode]').val() === "negative")
|
|
{
|
|
for (let i in aData)
|
|
{
|
|
let iItemId = aData[i].id;
|
|
if (oSelectedItems{{ sListIDForVarSuffix }}.indexOf(iItemId) === -1)
|
|
{
|
|
oSelectedItems{{ sListIDForVarSuffix }}.push(iItemId);
|
|
updateDataTableSelection('{{ sListId }}', '{{ oUIBlock.GetId() }}');
|
|
}
|
|
}
|
|
}
|
|
else
|
|
{
|
|
for (let i in aData)
|
|
{
|
|
let iItemId = aData[i].id;
|
|
if (oSelectedItems{{ sListIDForVarSuffix }}.indexOf(iItemId) > -1)
|
|
{
|
|
oSelectedItems{{ sListIDForVarSuffix }}.splice(oSelectedItems{{ sListIDForVarSuffix }}.indexOf(iItemId), 1);
|
|
updateDataTableSelection('{{ sListId }}', '{{ oUIBlock.GetId() }}');
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
{% else %}
|
|
this.api().off('select').on('select', function (oEvent, dt, type, indexes) {
|
|
if (bSelectAllowed{{ sListIDForVarSuffix }} )
|
|
{
|
|
let aData = oTable{{ sListIDForVarSuffix }}.rows(indexes).data().toArray();
|
|
// Checking input
|
|
$('#{{ oUIBlock.GetId() }} tbody tr.selected td:first-child input').prop('checked', true);
|
|
// Saving values in temp array
|
|
for (let i in aData)
|
|
{
|
|
let iItemId = aData[i].id;
|
|
if (oSelectedItems{{ sListIDForVarSuffix }}.indexOf(iItemId) === -1)
|
|
{
|
|
oSelectedItems{{ sListIDForVarSuffix }}.push(iItemId);
|
|
updateDataTableSelection('{{ sListId }}', '{{ oUIBlock.GetId() }}');
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
this.api().off('deselect').on('deselect', function (oEvent, dt, type, indexes) {
|
|
if (bSelectAllowed{{ sListIDForVarSuffix }} )
|
|
{
|
|
let aData = oTable{{ sListIDForVarSuffix }}.rows(indexes).data().toArray();
|
|
|
|
// Checking input
|
|
$('#{{ oUIBlock.GetId() }} tr tbody tr:not(.selected) td:first-child input').prop('checked', false);
|
|
// Saving values in temp array
|
|
for (let i in aData)
|
|
{
|
|
let iItemId = aData[i].id;
|
|
if (oSelectedItems{{ sListIDForVarSuffix }}.indexOf(iItemId) > -1)
|
|
{
|
|
oSelectedItems{{ sListIDForVarSuffix }}.splice(oSelectedItems{{ sListIDForVarSuffix }}.indexOf(iItemId), 1);
|
|
updateDataTableSelection('{{ sListId }}', '{{ oUIBlock.GetId() }}');
|
|
}
|
|
}
|
|
}
|
|
});
|
|
{% endif %}
|
|
|
|
{% if oUIBlock.GetDisabledSelect() is not empty %}
|
|
{% for key in oUIBlock.GetDisabledSelect() %}
|
|
$('.selectList{{ oUIBlock.GetId() }}[value={{ key }}]').prop("disabled", "disabled");
|
|
{% endfor %}
|
|
{% endif %}
|
|
{% endif %}
|
|
|
|
// Set header and body datatables status as loaded
|
|
this.attr('data-status', 'loaded');
|
|
this.closest('.dataTables_scroll').find('.dataTables_scrollHead .ibo-datatable').attr('data-status', 'loaded');
|
|
}
|
|
});
|
|
{% endif %}{# end {% else %} normal mode #}
|
|
|
|
{% if oUIBlock.GetOption('sTreeGroupingAttr') is empty %}
|
|
{# ── POST-INIT: normal-mode-only behaviors ───────────────────────────────── #}
|
|
oTable{{ sListIDForVarSuffix }}.select();
|
|
|
|
$('#{{ oUIBlock.GetId() }}').on('refresh.datatable.itop', function (){
|
|
oTable{{ sListIDForVarSuffix }}.clearPipeline();
|
|
oTable{{ sListIDForVarSuffix }}.ajax.reload(null, false);
|
|
});
|
|
|
|
{% if oUIBlock.GetModalCreationHandler() is not empty %}
|
|
$('body').on('open_creation_modal.object.itop','#{{ oUIBlock.GetId() }}', function (){
|
|
{{ oUIBlock.GetModalCreationHandler() | raw}}
|
|
});
|
|
{% endif %}
|
|
|
|
{% if oUIBlock.GetOption('sCountSelector') is not empty %}
|
|
$('#{{ sListId }} [name="selectionCount"]').on('change', function () {
|
|
$('{{ oUIBlock.GetOption('sCountSelector') }}').val($('#{{ sListId }} [name="selectionCount"]').val());
|
|
$('{{ oUIBlock.GetOption('sCountSelector') }}').trigger('change');
|
|
});
|
|
{% endif %}
|
|
{% endif %}{# end normal-mode-only post-init #}
|
|
|
|
{# ── CONFIGURE THIS LIST DIALOG (both modes) ──────────────────────────────── #}
|
|
$('#datatable_dlg_{{ oUIBlock.GetId() }}').dialog(
|
|
{
|
|
autoOpen: false,
|
|
title: "{{ 'UI:ListConfigurationTitle'|dict_s }}",
|
|
width: 500,
|
|
modal: true,
|
|
open: function () {
|
|
$('#datatable_dlg_{{ oUIBlock.GetId() }}').find('[name=action]').val("none");
|
|
},
|
|
close: function (event, ui) {
|
|
var sAction = $('#datatable_dlg_{{ oUIBlock.GetId() }}').find('[name=action]').val();
|
|
if (sAction === "none")
|
|
{
|
|
$('#datatable_dlg_{{ oUIBlock.GetId() }}').DataTableSettings('onDlgCancel');
|
|
}
|
|
},
|
|
buttons: [
|
|
{
|
|
text: "{{ 'UI:Button:Cancel'|dict_s }}",
|
|
class: "ibo-is-alternative ibo-is-neutral",
|
|
click: function() {
|
|
$(this).dialog( "close" );
|
|
}
|
|
},
|
|
{
|
|
text: "{{ 'UI:Button:Ok'|dict_s }}",
|
|
class: "ibo-is-regular ibo-is-primary",
|
|
click: function() {
|
|
$(this).DataTableSettings('onDlgOk');
|
|
}
|
|
}
|
|
]
|
|
});
|
|
|
|
var aOptions{{ sListIDForVarSuffix }} = {
|
|
sListId: '{{ oUIBlock.GetId() }}',
|
|
oColumns: {{ oUIBlock.GetResultColumnsAsJson()|raw }},
|
|
sSelectMode: "{{ oUIBlock.GetOption("select_mode") }}",
|
|
sSelectedItemsName: "oSelectedItems{{ sListIDForVarSuffix }}",
|
|
sViewLink: '{{ oUIBlock.GetOption("bViewLink") }}',
|
|
iPageSize: {{ iPageSize }},
|
|
oClassAliases: JSON.parse('{{ oUIBlock.GetOption("oClassAliases") |raw }}'),
|
|
sTableId: '{{ oUIBlock.GetOption("sTableId") }}',
|
|
sRenderUrl: "{{ oUIBlock.GetAjaxUrl() }}",
|
|
oData: {{ oUIBlock.GetJsonAjaxData() |raw }},
|
|
oDefaultSettings: {{ oUIBlock.GetOption("oDefaultSettings")|raw }},
|
|
oLabels: {moveup: "{{ 'UI:Button:MoveUp'|dict_s }}", movedown: "{{ 'UI:Button:MoveDown'|dict_s }}"},
|
|
bHasRowActions: {{ oUIBlock.HasRowActions()|var_export }},
|
|
};
|
|
|
|
if ($('#datatable_dlg_{{ oUIBlock.GetId() }}').hasClass('itop-datatable'))
|
|
{
|
|
$('#datatable_dlg_{{ oUIBlock.GetId() }}').DataTableSettings('destroy');
|
|
}
|
|
$('#datatable_dlg_{{ oUIBlock.GetId() }}').DataTableSettings(aOptions{{ sListIDForVarSuffix }});
|
|
|
|
{% if oUIBlock.GetOption('sTreeGroupingAttr') is not empty %}
|
|
{# Tree mode: replace DataTableSettings._refresh() so "Configure this list" rebuilds
|
|
the DataTable client-side in tree mode, instead of switching it to server-side. #}
|
|
var sTreeParentKey{{ sListIDForVarSuffix }} = '{{ oUIBlock.GetOption("sTreeGroupingParentKey") }}';
|
|
var oTreePlugin{{ sListIDForVarSuffix }} = $('#datatable_dlg_{{ oUIBlock.GetId() }}').data('itop-DataTableSettings');
|
|
if (oTreePlugin{{ sListIDForVarSuffix }}) {
|
|
oTreePlugin{{ sListIDForVarSuffix }}._refresh = function() {
|
|
var me = this;
|
|
var oParams = me.options.oData;
|
|
oParams.operation = 'search_and_refresh';
|
|
oParams.start = 0;
|
|
oParams.end = me.options.iPageSize;
|
|
oParams.select_mode = me.options.sSelectMode;
|
|
oParams.display_key = me.options.sViewLink;
|
|
oParams.class_aliases = me.options.oClassAliases;
|
|
oParams.columns = me.options.oColumns;
|
|
oParams.list_id = me.options.sListId;
|
|
me.element.block();
|
|
$.post(me.options.sRenderUrl, oParams, function(data) {
|
|
var $table = $('#' + me.options.sListId);
|
|
var $parent = $table.closest('.dataTables_wrapper').parent();
|
|
var aPrevOptions = $table.DataTable().context[0].oInit;
|
|
$table.DataTable().destroy(true);
|
|
|
|
var aOptions = $.extend({}, aPrevOptions, JSON.parse(data));
|
|
|
|
// Compile per-column render functions returned as strings by the server
|
|
$.each(aOptions['columns'], function (i) {
|
|
aOptions['columns'][i]['render']['display'] = new Function("data, type, row", aOptions['columns'][i]['render']['display']);
|
|
if (aOptions['columns'][i]['createdCell'] != undefined) {
|
|
aOptions['columns'][i]['createdCell'] = new Function("td, cellData, rowData, row, col", aOptions['columns'][i]['createdCell']);
|
|
}
|
|
// Tree mode handles its own sorting — disable native ordering per column
|
|
aOptions['columns'][i].orderable = false;
|
|
aOptions['columns'][i].sortable = false;
|
|
});
|
|
|
|
// Rebuild <thead> from the new column list
|
|
var sThead = '';
|
|
$.each(aOptions['allColumns'], function (i, item) {
|
|
$.each(item, function (j, champs) {
|
|
if (champs.checked == 'true') {
|
|
sThead += '<th>' + champs.label + '</th>';
|
|
}
|
|
});
|
|
});
|
|
$parent.append('<table id="' + me.options.sListId + '" width="100%" class="ibo-datatable"><thead><tr>' + sThead + '</tr></thead></table>');
|
|
|
|
// Force tree-mode options (the server response is shaped for server-side mode)
|
|
aOptions.serverSide = false;
|
|
aOptions.paging = false;
|
|
aOptions.ordering = false;
|
|
aOptions.data = [];
|
|
aOptions.dom = "<'ibo-datatable--toolbar'<'ibo-datatable--toolbar-left'><'ibo-datatable--toolbar-right' i>>t";
|
|
delete aOptions.ajax;
|
|
|
|
// ajaxData passed to tree-grouping setup: same params, but operation=search to fetch rows
|
|
var oTreeAjaxData = $.extend({}, oParams);
|
|
oTreeAjaxData.operation = 'search';
|
|
|
|
aOptions.initComplete = function () {
|
|
this.attr('data-status', 'loaded');
|
|
this.closest('.dataTables_scroll').find('.dataTables_scrollHead .ibo-datatable').attr('data-status', 'loaded');
|
|
iTopDataTableTreeGrouping.setup(me.options.sListId, this.api(), {
|
|
parentKey: sTreeParentKey{{ sListIDForVarSuffix }},
|
|
ajaxUrl: me.options.sRenderUrl,
|
|
ajaxData: oTreeAjaxData,
|
|
initData: null
|
|
});
|
|
// Fetch rows and rebuild the tree
|
|
$('#' + me.options.sListId).trigger('refresh.datatable.itop');
|
|
};
|
|
|
|
$('#' + me.options.sListId).DataTable(aOptions);
|
|
me.element.unblock();
|
|
}, 'html');
|
|
};
|
|
}
|
|
{% else %}
|
|
{# Normal mode: ResizeObserver and row actions #}
|
|
if(window.ResizeObserver){
|
|
let oTable{{ sListIDForVarSuffix }}ResizeTimeout = null;
|
|
const oTable{{ sListIDForVarSuffix }}Resize = new ResizeObserver(function(){
|
|
clearTimeout(oTable{{ sListIDForVarSuffix }}ResizeTimeout);
|
|
oTable{{ sListIDForVarSuffix }}ResizeTimeout = setTimeout(function(){
|
|
$('#{{ oUIBlock.GetId() }}').DataTable().columns.adjust();
|
|
}, 120);
|
|
});
|
|
oTable{{ sListIDForVarSuffix }}Resize.observe($('#{{ oUIBlock.GetId() }}')[0]);
|
|
}
|
|
|
|
{% if oUIBlock.HasRowActions() %}
|
|
{% include 'base/components/datatable/row-actions/handler.js.twig' %}
|
|
{% endif %}
|
|
{% endif %}{# end mode-specific post-init #} |