composer/iTop
6
0
Fork 0
mirror of https://github.com/Combodo/iTop.git synced 2026-04-23 18:48:51 +02:00
Code Issues Packages Projects Releases Wiki Activity

N°3123 - DataTables rework (WIP)

Browse Source
This commit is contained in:
Eric
2020-12-10 17:13:15 +01:00
parent b03c5232b0
commit 2bef89137e
24 changed files with 293 additions and 218 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
templates/base/components/datatable/layout.html.twig
View File

@@ -1,21 +1,24 @@
{% for oSubBlock in oUIBlock.GetSubBlocks() %}{{ render_block(oSubBlock, {aPage: aPage}) }}{% endfor %}
{% if oUIBlock.GetOptions()["select_mode"] is defined %}
<input type="hidden" name="selectionMode" value="positive"/>
{% if oUIBlock.GetAjaxData()["extra_params"] is not empty %}
<input type="hidden" name="extra_params" value="{{ oUIBlock.GetAjaxData()["extra_params"] }}"/>
{% endif %}
{% if oUIBlock.GetAjaxData()["filter"] is not empty %}
<input type="hidden" name="filter" value="{{ oUIBlock.GetAjaxData()["filter"] }}"/>
{% endif %}
{% if oUIBlock.GetOptions("select_mode") is not empty %}
<input type="hidden" name="selectionMode" value="positive"/>
<input type="hidden" name="selectionCount" value="0"/>
<div data-target="ibo-datatable--selection"></div>
{% if oUIBlock.GetAjaxData("extra_params") is not empty %}
<input type="hidden" name="extra_params" value="{{ oUIBlock.GetAjaxData("extra_params")|raw|json_encode }}"/>
{% endif %}
{% if oUIBlock.GetAjaxData("filter") is not empty %}
<input type="hidden" name="filter" value="{{ oUIBlock.GetAjaxData("filter")|raw }}"/>
{% endif %}
{% endif %}
<table id="{{ oUIBlock.GetId() }}" width="100%" class="{{ oUIBlock.GetBlockCode() }}">
<thead>
{% if oUIBlock.GetOptions()["select_mode"] is defined %}
<th></th>
{% endif %}
{% for aColumn in oUIBlock.GetDisplayColumns() %}
<th class="ibo-datatable-header" {% if aColumn["description"] is not empty %}title="{{ aColumn["description"] }}"{% endif %}>{{ aColumn["attribute_label"] }} </th>
{% endfor %}
</thead>
</table>
<thead>
{% if oUIBlock.GetOption("select_mode") is not empty %}
<th></th>
{% endif %}
{% for aColumn in oUIBlock.GetDisplayColumns() %}
<th class="ibo-datatable-header" {% if aColumn["description"] is not empty %}title="{{ aColumn["description"] }}"{% endif %}>{{ aColumn["attribute_label"] }} </th>
{% endfor %}
</thead>
</table>

83
templates/base/components/datatable/layout.js.twig
View File

@@ -1,8 +1,13 @@
{# @copyright Copyright (C) 2010-2020 Combodo SARL #}
{# @license http://opensource.org/licenses/AGPL-3.0 #}
{% set sListId = oUIBlock.GetOption('sListId') %}
{% set iPageSize = oUIBlock.GetOptions()["iPageSize"] %}
$('#{{ oUIBlock.GetId() }}').closest("[role=dialog]").on("dialogbeforeclose", function () {
$('#{{ oUIBlock.GetId() }}').DataTable().clear();
});
$('#{{ sListId }}').data('target', 'ibo-datatables--outer');
if ($.fn.dataTable.isDataTable('#{{ oUIBlock.GetId() }}')) {
$('#{{ oUIBlock.GetId() }}').DataTable().destroy(false);
@@ -29,35 +34,33 @@ var oTable{{ oUIBlock.GetId() }} = $('#{{ oUIBlock.GetId() }}').DataTable({
sortDescending: ": {{ 'UI:Datatables:Language:Sort:Descending'|dict_s }}"
}
},
lengthMenu: [[ {{ oUIBlock.GetOptions()["iPageSize"] }}, {{ oUIBlock.GetOptions()["iPageSize"]*2 }}, {{ oUIBlock.GetOptions()["iPageSize"]*3 }}, {{ oUIBlock.GetOptions()["iPageSize"]*4 }}, -1], [ {{ oUIBlock.GetOptions()["iPageSize"] }}, {{ oUIBlock.GetOptions()["iPageSize"]*2 }}, {{ oUIBlock.GetOptions()["iPageSize"]*3 }}, {{ oUIBlock.GetOptions()["iPageSize"]*4 }}, "{{ 'Portal:Datatables:Language:DisplayLength:All'|dict_s }}"]],
lengthMenu: [[ {{ iPageSize }}, {{ iPageSize*2 }}, {{ iPageSize*3 }}, {{ iPageSize*4 }}, -1], [ {{ iPageSize }}, {{ iPageSize*2 }}, {{ iPageSize*3 }}, {{ iPageSize*4 }}, "{{ 'Portal:Datatables:Language:DisplayLength:All'|dict_s }}"]],
dom: "<'ibo-datatable-toolbar'pil>t<'ibo-datatable-toolbar'pil>",
{% if( oUIBlock.GetOptions()["sort"][0] is defined ) %}
{% if( oUIBlock.GetOptions("sort")[0] is defined ) %}
order: [[{{ oUIBlock.GetOptions()["sort"][0] }}, '{{ oUIBlock.GetOptions()["sort"][1] }}']],
{% else %}
order: [],
{% endif %}
ordering: true,
{% if oUIBlock.GetOption("select_mode") is defined %}
{% if oUIBlock.GetOption("select_mode") is not empty %}
select: {
style: "{{ oUIBlock.GetOption("select_mode") }}"
},
rowCallback: function (oRow, oData) {
// Hiding pagination if only one page
if ($(this).closest('.ibo-panel--body').find('[name=selectionMode]') === "negative") {
if (!oData.id in oSelectedItems{{ oUIBlock.GetOption('sListId') }}) {
if ($(this).closest('.ibo-panel--body').find('[name=selectionMode]').val() === "negative") {
if (oSelectedItems{{ sListId }}.indexOf(oData.id) === -1) {
$(oRow).select();
$(oRow).find('td:first-child input').prop('checked', true);
}
} else {
if (oData.id in oSelectedItems{{ oUIBlock.GetOption('sListId') }}) {
if (oSelectedItems{{ sListId }}.indexOf(oData.id) > -1) {
$(oRow).select();
$(oRow).find('td:first-child input').prop('checked', true);
}
}
},
drawCallback: function () {
// Hiding pagination if only one page
if ($(this).closest('.ibo-panel--body').find('[name=selectionMode]') === "negative") {
if ($(this).closest('.ibo-panel--body').find('[name=selectionMode]').val() === "negative") {
$(this).find('[name=selectAll]').checked();
$(table).DataTable().rows({page: 'current'}).select();
} else {
@@ -74,23 +77,23 @@ var oTable{{ oUIBlock.GetId() }} = $('#{{ oUIBlock.GetId() }}').DataTable({
columns: [
{% if oUIBlock.GetOption("select_mode") is not empty %}
{
width: "auto",
width: "20px",
searchable: false,
sortable: false,
title:
{% if oUIBlock.GetOption("select_mode") != "single" %}
'<span class="row_input"><input type="checkbox" onclick="checkAllDataTable(\'#{{ oUIBlock.GetId() }}\',this.checked);" 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>'
{% 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);" 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>'
'<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: "",
render: function (data, type, row) {
var oCheckboxElem =
{% if oUIBlock.GetOption("select_mode") != "single" %}
$('<span class="row_input"><input type="checkbox" class="selectList{{ oUIBlock.GetId() }}" name="selectObject[]" /></span>');
$('<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[]" /></span>');
$('<span class="row_input"><input type="radio" class="selectList{{ oUIBlock.GetId() }}" name="selectObject[]" value="'+row.id+'"/></span>');
{% endif %}
if (row.limited_access) {
oCheckboxElem.html('-');
@@ -125,14 +128,14 @@ var oTable{{ oUIBlock.GetId() }} = $('#{{ oUIBlock.GetId() }}').DataTable({
],
ajax: $.fn.dataTable.pipeline({
url: "{{ oUIBlock.GetAjaxUrl() }}",
data: {{ oUIBlock.GetAjaxData() |raw }},
data: {{ oUIBlock.GetJsonAjaxData() |raw }},
method: "post",
pages: 5 // number of pages to cache
}),
initComplete: function () {
if (this.api().page.info().pages === 1) {
$('.dataTables_paginate').hide();
$('.dataTables_length').hide();
this.parent().find('.dataTables_paginate').hide();
this.parent().find('.dataTables_length').hide();
}
}
});
@@ -150,11 +153,12 @@ var oTable{{ oUIBlock.GetId() }} = $('#{{ oUIBlock.GetId() }}').DataTable({
// Saving values in temp array
for (var i in aData) {
var iItemId = aData[i].id;
if (oSelectedItems{{ oUIBlock.GetOption('sListId') }}.indexOf(iItemId) > -1) {
oSelectedItems{{ oUIBlock.GetOption('sListId') }}.splice(oSelectedItems{{ oUIBlock.GetOption('sListId') }}.indexOf(iItemId), 1);
if (oSelectedItems{{ sListId }}.indexOf(iItemId) > -1) {
oSelectedItems{{ sListId }}.splice(oSelectedItems{{ sListId }}.indexOf(iItemId), 1);
updateDataTableSelection('{{ sListId }}');
}
}
if (oSelectedItems{{ oUIBlock.GetOption('sListId') }}.length === oTable{{ oUIBlock.GetId() }}.page.info()["recordsTotal"] ) {
if (oSelectedItems{{ sListId }}.length === oTable{{ oUIBlock.GetId() }}.page.info()["recordsTotal"] ) {
$('#btn_ok_{{ oUIBlock.GetOption('sTableId') }}').prop('disabled', true);
} else {
$('#btn_ok_{{ oUIBlock.GetOption('sTableId') }}').prop('disabled', false);
@@ -166,8 +170,9 @@ var oTable{{ oUIBlock.GetId() }} = $('#{{ oUIBlock.GetId() }}').DataTable({
// Saving values in temp array
for (var i in aData) {
var iItemId = aData[i].id;
if (oSelectedItems{{ oUIBlock.GetOption('sListId') }}.indexOf(iItemId) === -1) {
oSelectedItems{{ oUIBlock.GetOption('sListId') }}.push(iItemId);
if (oSelectedItems{{ sListId }}.indexOf(iItemId) === -1) {
oSelectedItems{{ sListId }}.push(iItemId);
updateDataTableSelection('{{ sListId }}');
}
}
$('#btn_ok_{{ oUIBlock.GetOption('sTableId') }}').prop('disabled', false);
@@ -183,11 +188,12 @@ var oTable{{ oUIBlock.GetId() }} = $('#{{ oUIBlock.GetId() }}').DataTable({
if ($(this).closest('.ibo-panel--body').find('[name=selectionMode]').val() === "negative") {
for (var i in aData) {
var iItemId = aData[i].id;
if (oSelectedItems{{ oUIBlock.GetOption('sListId') }}.indexOf(iItemId) === -1) {
oSelectedItems{{ oUIBlock.GetOption('sListId') }}.push(iItemId);
if (oSelectedItems{{ sListId }}.indexOf(iItemId) === -1) {
oSelectedItems{{ sListId }}.push(iItemId);
updateDataTableSelection('{{ sListId }}');
}
}
if (oSelectedItems{{ oUIBlock.GetOption('sListId') }}.length === oTable{{ oUIBlock.GetId() }}.page.info()["recordsTotal"]) {
if (oSelectedItems{{ sListId }}.length === oTable{{ oUIBlock.GetId() }}.page.info()["recordsTotal"]) {
$('#btn_ok_{{ oUIBlock.GetOption('sTableId') }}').prop('disabled', true);
} else {
$('#btn_ok_{{ oUIBlock.GetOption('sTableId') }}').prop('disabled', false);
@@ -195,11 +201,12 @@ var oTable{{ oUIBlock.GetId() }} = $('#{{ oUIBlock.GetId() }}').DataTable({
} else {
for (var i in aData) {
var iItemId = aData[i].id;
if (oSelectedItems{{ oUIBlock.GetOption('sListId') }}.indexOf(iItemId) > -1) {
oSelectedItems{{ oUIBlock.GetOption('sListId') }}.splice(oSelectedItems{{ oUIBlock.GetOption('sListId') }}.indexOf(iItemId), 1);
if (oSelectedItems{{ sListId }}.indexOf(iItemId) > -1) {
oSelectedItems{{ sListId }}.splice(oSelectedItems{{ sListId }}.indexOf(iItemId), 1);
updateDataTableSelection('{{ sListId }}');
}
}
if (oSelectedItems{{ oUIBlock.GetOption('sListId') }}.length === 0) {
if (oSelectedItems{{ sListId }}.length === 0) {
$('#btn_ok_{{ oUIBlock.GetOption('sTableId') }}').prop('disabled', true);
} else {
$('#btn_ok_{{ oUIBlock.GetOption('sTableId') }}').prop('disabled', false);
@@ -214,11 +221,12 @@ var oTable{{ oUIBlock.GetId() }} = $('#{{ oUIBlock.GetId() }}').DataTable({
// Saving values in temp array
for (var i in aData) {
var iItemId = aData[i].id;
if (oSelectedItems{{ oUIBlock.GetOption('sListId') }}.indexOf(iItemId) === -1) {
oSelectedItems{{ oUIBlock.GetOption('sListId') }}.push(iItemId);
if (oSelectedItems{{ sListId }}.indexOf(iItemId) === -1) {
oSelectedItems{{ sListId }}.push(iItemId);
updateDataTableSelection('{{ sListId }}');
}
}
$('#btn_ok_{{ oUIBlock.GetOption('sListId') }}').prop('disabled', false);
$('#btn_ok_{{ sListId }}').prop('disabled', false);
});
oTable{{ oUIBlock.GetId() }}.off('deselect').on('deselect', function (oEvent, dt, type, indexes) {
@@ -229,8 +237,9 @@ var oTable{{ oUIBlock.GetId() }} = $('#{{ oUIBlock.GetId() }}').DataTable({
// Saving values in temp array
for (var i in aData) {
var iItemId = aData[i].id;
if (oSelectedItems{{ oUIBlock.GetOption('sListId') }}.indexOf(iItemId) > -1) {
oSelectedItems{{ oUIBlock.GetOption('sListId') }}.splice(oSelectedItems{{ oUIBlock.GetOption('sListId') }}.indexOf(iItemId), 1);
if (oSelectedItems{{ sListId }}.indexOf(iItemId) > -1) {
oSelectedItems{{ sListId }}.splice(oSelectedItems{{ sListId }}.indexOf(iItemId), 1);
updateDataTableSelection('{{ sListId }}');
}
}
});
@@ -246,7 +255,7 @@ $('#datatable_dlg_{{ oUIBlock.GetId() }}').dialog(
$('#datatable_dlg_{{ oUIBlock.GetId() }}').find('[name=action]').val("none");
},
close: function (event, ui) { //save data and refresh
if( $('#datatable_dlg_{{ oUIBlock.GetId() }}').find('[name=action]').val() == "none") {
if( $('#datatable_dlg_{{ oUIBlock.GetId() }}').find('[name=action]').val() === "none") {
$('#datatable_dlg_{{ oUIBlock.GetId() }}').DataTableSettings('onDlgCancel');
}
}
@@ -262,7 +271,7 @@ $aOptions = {
sTableId: '{{ oUIBlock.GetOption("sTableId") }}',
//oExtraParams
sRenderUrl: "{{ oUIBlock.GetAjaxUrl() }}",
oData: {{ oUIBlock.GetAjaxData() |raw }},//ttt
oData: {{ oUIBlock.GetJsonAjaxData() |raw }},
oDefaultSettings: {{ oUIBlock.GetOption("oDefaultSettings")|raw }},
oLabels: {moveup: "{{ 'UI:Button:MoveUp'|dict_s }}", movedown: "{{ 'UI:Button:MoveDown'|dict_s }}"},
};

35
templates/base/components/datatable/layout.live.js.twig
View File

@@ -1,34 +1,5 @@
function checkAllDataTable(table, value) {
// Set the 'selectionMode' for the future objects to load
var selectionMode = 'positive';
if (value) {
selectionMode = 'negative';
}
oSelectedItems{{ oUIBlock.GetOption('sListId') }} =[];
// Mark all the displayed items as check or unchecked depending on the value
$(table).find(':checkbox[name^=selectObj]:not([disabled])').each(function () {
var $currentCheckbox = $(this);
$currentCheckbox.prop('checked', value);
$currentLine = $currentCheckbox.closest("tr");
(value) ? $currentLine.addClass("selected") : $currentLine.removeClass("selected");
});
$(table).parent().parent().find(':input[name=selectionMode]').val(selectionMode);
// Reset the list of saved selection...
$(':input[name^=storedSelection]').remove();
$(table).parent().find(':checkbox[name^=selectObj]').trigger("change");
if (value) {
$(table).DataTable().rows().select();
$('#btn_ok_{{ oUIBlock.GetOption('sTableId') }}').prop('disabled', false);
} else {
$(table).DataTable().rows({page: 'current'}).deselect();
$('#btn_ok_{{ oUIBlock.GetOption('sTableId') }}').prop('disabled', true);
}
return true;
}
{% if oUIBlock.GetOption("select_mode") is defined %}
{% if oUIBlock.GetOption("select_mode") is not empty %}
var oSelectedItems{{ oUIBlock.GetOption('sListId') }} = [];
{% endif %}
{% endif %}