mirror of
https://github.com/Combodo/iTop.git
synced 2026-02-12 23:14:18 +01:00
N°2847 - Datatables for forms
This commit is contained in:
Eric
@@ -24,6 +24,9 @@
|
||||
* @license http://opensource.org/licenses/AGPL-3.0
|
||||
*/
|
||||
|
||||
use Combodo\iTop\Application\UI\Component\DataTable\DataTableFactory;
|
||||
use Combodo\iTop\Renderer\BlockRenderer;
|
||||
|
||||
require_once(APPROOT.'application/displayblock.class.inc.php');
|
||||
|
||||
class UILinksWidget
|
||||
@@ -335,68 +338,24 @@ JS
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Display one row of the whole form
|
||||
*
|
||||
* @param WebPage $oP
|
||||
* @param array $aConfig
|
||||
* @param array $aRow
|
||||
* @param int $iRowId
|
||||
*
|
||||
* @return string
|
||||
*/
|
||||
protected function DisplayFormRow(WebPage $oP, $aConfig, $aRow, $iRowId)
|
||||
{
|
||||
$sHtml = '';
|
||||
$sHtml .= "<tr id=\"{$this->m_sAttCode}{$this->m_sNameSuffix}_row_$iRowId\">\n";
|
||||
foreach($aConfig as $sName=>$void)
|
||||
{
|
||||
$sHtml .= "<td>".$aRow[$sName]."</td>\n";
|
||||
}
|
||||
$sHtml .= "</tr>\n";
|
||||
|
||||
return $sHtml;
|
||||
}
|
||||
|
||||
/**
|
||||
* Display the table with the form for editing all the links at once
|
||||
*
|
||||
* @param WebPage $oP The web page used for the output
|
||||
* @param array $aConfig The table's header configuration
|
||||
* @param array $aData The tabular data to be displayed
|
||||
*
|
||||
* @return string Html fragment representing the form table
|
||||
* @throws \ReflectionException
|
||||
* @throws \Twig\Error\LoaderError
|
||||
* @throws \Twig\Error\RuntimeError
|
||||
* @throws \Twig\Error\SyntaxError
|
||||
*/
|
||||
protected function DisplayFormTable(WebPage $oP, $aConfig, $aData)
|
||||
{
|
||||
$sHtml = "<input type=\"hidden\" name=\"attr_{$this->m_sAttCode}{$this->m_sNameSuffix}\" value=\"\">";
|
||||
$sHtml .= "<table class=\"listResults\" id='dt_{$this->m_sAttCode}{$this->m_sNameSuffix}' width='100%'>\n";
|
||||
$oP->add_ready_script("$('#dt_{$this->m_sAttCode}{$this->m_sNameSuffix}').DataTable({\"language\": {\"emptyTable\": \"".str_replace("\"","\\\"",Dict::S('UI:Message:EmptyList:UseAdd'))."\"},search:false});");
|
||||
// Header
|
||||
$sHtml .= "<thead>\n";
|
||||
$sHtml .= "<tr>\n";
|
||||
foreach($aConfig as $sName=>$aDef)
|
||||
{
|
||||
$sHtml .= "<th title=\"".$aDef['description']."\">".$aDef['label']."</th>\n";
|
||||
}
|
||||
$sHtml .= "</tr>\n";
|
||||
$sHtml .= "</thead>\n";
|
||||
$oTable = DataTableFactory::MakeForForm("{$this->m_sAttCode}{$this->m_sNameSuffix}", $aConfig, $aData);
|
||||
|
||||
// Content
|
||||
$sHtml .= "</tbody>\n";
|
||||
$sEmptyRowStyle = '';
|
||||
if (count($aData) != 0)
|
||||
{
|
||||
$sEmptyRowStyle = 'style="display:none;"';
|
||||
}
|
||||
|
||||
foreach ($aData as $iRowId => $aRow)
|
||||
{
|
||||
$sHtml .= $this->DisplayFormRow($oP, $aConfig, $aRow, $iRowId);
|
||||
}
|
||||
//$sHtml .= "<tr $sEmptyRowStyle id=\"{$this->m_sAttCode}{$this->m_sNameSuffix}_empty_row\"><td colspan=\"".count($aConfig)."\" style=\"text-align:center;\">".Dict::S('UI:Message:EmptyList:UseAdd')."</td></tr>";
|
||||
$sHtml .= "</tbody>\n";
|
||||
|
||||
// Footer
|
||||
$sHtml .= "</table></br>\n";
|
||||
$sHtml = BlockRenderer::RenderBlockTemplates($oTable);
|
||||
|
||||
return $sHtml;
|
||||
}
|
||||
|
||||
@@ -23,4 +23,5 @@
|
||||
@import "fieldset";
|
||||
@import "field";
|
||||
@import "toolbar";
|
||||
@import "richtext";
|
||||
@import "richtext";
|
||||
@import "formtable";
|
||||
4
css/backoffice/components/_formtable.scss
Normal file
4
css/backoffice/components/_formtable.scss
Normal file
@@ -0,0 +1,4 @@
|
||||
/*!
|
||||
* copyright Copyright (C) 2010-2020 Combodo SARL
|
||||
* license http://opensource.org/licenses/AGPL-3.0
|
||||
*/
|
||||
@@ -2645,7 +2645,6 @@
|
||||
}
|
||||
|
||||
> .field_input_btn {
|
||||
display: table-cell;
|
||||
width: 25px;
|
||||
padding-left: 0.4em;
|
||||
|
||||
|
||||
@@ -164,6 +164,7 @@ return array(
|
||||
'Combodo\\iTop\\Application\\UI\\Component\\DataTable\\DataTableBlock' => $baseDir . '/sources/application/UI/Component/DataTable/DataTable.php',
|
||||
'Combodo\\iTop\\Application\\UI\\Component\\DataTable\\DataTableFactory' => $baseDir . '/sources/application/UI/Component/DataTable/DataTableFactory.php',
|
||||
'Combodo\\iTop\\Application\\UI\\Component\\DataTable\\DataTableSettings' => $baseDir . '/sources/application/UI/Component/DataTable/DataTableSettings.php',
|
||||
'Combodo\\iTop\\Application\\UI\\Component\\DataTable\\StaticTable\\FormTable\\FormTable' => $baseDir . '/sources/application/UI/Component/DataTable/StaticTable/FormTable/FormTable.php',
|
||||
'Combodo\\iTop\\Application\\UI\\Component\\DataTable\\StaticTable\\StaticTable' => $baseDir . '/sources/application/UI/Component/DataTable/StaticTable/StaticTable.php',
|
||||
'Combodo\\iTop\\Application\\UI\\Component\\FieldSet\\FieldSet' => $baseDir . '/sources/application/UI/Component/FieldSet/FieldSet.php',
|
||||
'Combodo\\iTop\\Application\\UI\\Component\\Field\\Field' => $baseDir . '/sources/application/UI/Component/Field/Field.php',
|
||||
|
||||
@@ -394,6 +394,7 @@ class ComposerStaticInit0018331147de7601e7552f7da8e3bb8b
|
||||
'Combodo\\iTop\\Application\\UI\\Component\\DataTable\\DataTableBlock' => __DIR__ . '/../..' . '/sources/application/UI/Component/DataTable/DataTable.php',
|
||||
'Combodo\\iTop\\Application\\UI\\Component\\DataTable\\DataTableFactory' => __DIR__ . '/../..' . '/sources/application/UI/Component/DataTable/DataTableFactory.php',
|
||||
'Combodo\\iTop\\Application\\UI\\Component\\DataTable\\DataTableSettings' => __DIR__ . '/../..' . '/sources/application/UI/Component/DataTable/DataTableSettings.php',
|
||||
'Combodo\\iTop\\Application\\UI\\Component\\DataTable\\StaticTable\\FormTable\\FormTable' => __DIR__ . '/../..' . '/sources/application/UI/Component/DataTable/StaticTable/FormTable/FormTable.php',
|
||||
'Combodo\\iTop\\Application\\UI\\Component\\DataTable\\StaticTable\\StaticTable' => __DIR__ . '/../..' . '/sources/application/UI/Component/DataTable/StaticTable/StaticTable.php',
|
||||
'Combodo\\iTop\\Application\\UI\\Component\\FieldSet\\FieldSet' => __DIR__ . '/../..' . '/sources/application/UI/Component/FieldSet/FieldSet.php',
|
||||
'Combodo\\iTop\\Application\\UI\\Component\\Field\\Field' => __DIR__ . '/../..' . '/sources/application/UI/Component/Field/Field.php',
|
||||
|
||||
@@ -10,6 +10,7 @@ use ApplicationException;
|
||||
use AttributeLinkedSet;
|
||||
use CMDBObjectSet;
|
||||
use cmdbAbstractObject;
|
||||
use Combodo\iTop\Application\UI\Component\DataTable\StaticTable\FormTable\FormTable;
|
||||
use Combodo\iTop\Application\UI\Component\DataTable\StaticTable\StaticTable;
|
||||
use Combodo\iTop\Application\UI\Component\Panel\PanelFactory;
|
||||
use Combodo\iTop\Application\UI\Component\Title\TitleFactory;
|
||||
@@ -656,4 +657,13 @@ class DataTableFactory
|
||||
|
||||
return $oBlock;
|
||||
}
|
||||
|
||||
public Static function MakeForForm(string $sRef, array $aColumns, array $aData)
|
||||
{
|
||||
$oTable = new FormTable($sRef);
|
||||
$oTable->SetColumns($aColumns);
|
||||
$oTable->SetData($aData);
|
||||
|
||||
return $oTable;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
<?php
|
||||
/**
|
||||
* @copyright Copyright (C) 2010-2020 Combodo SARL
|
||||
* @license http://opensource.org/licenses/AGPL-3.0
|
||||
*/
|
||||
|
||||
namespace Combodo\iTop\Application\UI\Component\DataTable\StaticTable\FormTable;
|
||||
|
||||
|
||||
use Combodo\iTop\Application\UI\Component\DataTable\StaticTable\StaticTable;
|
||||
|
||||
/**
|
||||
* Class FormTable
|
||||
*
|
||||
* @package Combodo\iTop\Application\UI\Component\FormTable
|
||||
*/
|
||||
class FormTable extends StaticTable
|
||||
{
|
||||
// Overloaded constants
|
||||
public const BLOCK_CODE = 'ibo-formtable';
|
||||
public const HTML_TEMPLATE_REL_PATH = 'components/datatable/static/formtable/layout';
|
||||
public const JS_TEMPLATE_REL_PATH = 'components/datatable/static/formtable/layout';
|
||||
|
||||
/** @var string */
|
||||
private $sRef;
|
||||
|
||||
public function __construct(string $sRef, string $sContainerCSSClass = '')
|
||||
{
|
||||
parent::__construct("dt_{$sRef}", $sContainerCSSClass);
|
||||
$this->SetRef($sRef);
|
||||
}
|
||||
|
||||
/**
|
||||
* @return string
|
||||
*/
|
||||
public function GetRef(): string
|
||||
{
|
||||
return $this->sRef;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param string $sRef
|
||||
*/
|
||||
public function SetRef(string $sRef): void
|
||||
{
|
||||
$this->sRef = $sRef;
|
||||
}
|
||||
}
|
||||
@@ -1,256 +1,243 @@
|
||||
function checkAllDataTable(table, value)
|
||||
{
|
||||
if (value) {
|
||||
$(table).DataTable().rows().select();
|
||||
}
|
||||
else {
|
||||
$(table).DataTable().rows({ page: 'current' }).deselect();
|
||||
}
|
||||
// Mark all the displayed items as check or unchecked depending on the value
|
||||
$(table).find(':checkbox[name^=selectObj]:not([disabled])').each(function (index, element) {
|
||||
var $currentCheckbox = $(this);
|
||||
$currentCheckbox.prop('checked', value);
|
||||
$currentLine = $currentCheckbox.closest("tr");
|
||||
(value) ? $currentLine.addClass("selected") : $currentLine.removeClass("selected");
|
||||
});
|
||||
// Set the 'selectionMode' for the future objects to load
|
||||
var selectionMode = 'positive';
|
||||
if (value)
|
||||
{
|
||||
selectionMode = 'negative';
|
||||
}
|
||||
$(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");
|
||||
//updateCounter(table);
|
||||
return true;
|
||||
function checkAllDataTable(table, value) {
|
||||
if (value) {
|
||||
$(table).DataTable().rows().select();
|
||||
} else {
|
||||
$(table).DataTable().rows({page: 'current'}).deselect();
|
||||
}
|
||||
// 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");
|
||||
});
|
||||
// Set the 'selectionMode' for the future objects to load
|
||||
var selectionMode = 'positive';
|
||||
if (value) {
|
||||
selectionMode = 'negative';
|
||||
}
|
||||
$(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");
|
||||
//updateCounter(table);
|
||||
return true;
|
||||
}
|
||||
|
||||
$('#{{ oUIBlock.GetId() }}').closest( "[role=dialog]" ).on( "dialogbeforeclose", function( event, ui ) {
|
||||
console.warn("destroy on close");
|
||||
$('#{{ oUIBlock.GetId() }}').DataTable().clear();
|
||||
$('#{{ oUIBlock.GetId() }}').closest("[role=dialog]").on("dialogbeforeclose", function () {
|
||||
console.warn("destroy on close");
|
||||
$('#{{ oUIBlock.GetId() }}').DataTable().clear();
|
||||
// $('#{{ oUIBlock.GetId() }}').DataTable().destroy(false);
|
||||
} );
|
||||
});
|
||||
|
||||
{% if oUIBlock.GetOptions()["select"] is defined %}
|
||||
var oSelectedItems{{ oUIBlock.GetOptions()['sTableId'] }} = [];
|
||||
var oSelectedItems{{ oUIBlock.GetOptions()['sTableId'] }} = [];
|
||||
{% endif %}
|
||||
|
||||
if ( $.fn.dataTable.isDataTable( '#{{ oUIBlock.GetId() }}' ) ) {
|
||||
console.warn("destroy on load");
|
||||
$('#{{ oUIBlock.GetId() }}').DataTable().destroy(false);
|
||||
if ($.fn.dataTable.isDataTable('#{{ oUIBlock.GetId() }}')) {
|
||||
console.warn("destroy on load");
|
||||
$('#{{ oUIBlock.GetId() }}').DataTable().destroy(false);
|
||||
}
|
||||
|
||||
var oTable{{ oUIBlock.GetId() }} = $('#{{ oUIBlock.GetId() }}').DataTable({
|
||||
"language": {
|
||||
"processing": "{{ 'UI:Datatables:Language:Processing'|dict_s }}",
|
||||
"search": "{{ 'UI:Datatables:Language:Search'|dict_s }}",
|
||||
"lengthMenu": " Showing _MENU_ out",// "{{ 'UI:Datatables:Language:LengthMenu'|dict_s }}",
|
||||
"zeroRecords": "{{ 'UI:Datatables:Language:ZeroRecords'|dict_s }}",
|
||||
"info": "of _TOTAL_ items",//"{{ '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": "<<",
|
||||
"previous": "<",
|
||||
"next": ">",
|
||||
"last": ">>"
|
||||
},
|
||||
"aria": {
|
||||
"sortAscending": ": {{ 'UI:Datatables:Language:Sort:Ascending'|dict_s }}",
|
||||
"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 }}"]],
|
||||
"dom": "<'ibo-datatable-toolbar'pil>t<'ibo-datatable-toolbar'pil>",
|
||||
"order": [[1, "asc"]],
|
||||
{% if oUIBlock.GetOptions()["select"] is defined %}
|
||||
"select": {
|
||||
"style": "{{ oUIBlock.GetOptions()["select"] }}"
|
||||
},
|
||||
"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.GetOptions()['sTableId'] }})
|
||||
{
|
||||
$(oRow).select();
|
||||
$(oRow).find('td:first-child input').prop('checked', true);
|
||||
}
|
||||
//$(table).DataTable().rows({ page: 'current' }).select();
|
||||
}
|
||||
else {
|
||||
if(oData.id in oSelectedItems{{ oUIBlock.GetOptions()['sTableId'] }})
|
||||
{
|
||||
$(oRow).select();
|
||||
$(oRow).find('td:first-child input').prop('checked', true);
|
||||
}
|
||||
}
|
||||
},
|
||||
"drawCallback": function (settings) {
|
||||
// Hiding pagination if only one page
|
||||
if ($(this).closest('.ibo-panel--body').find('[name=selectionMode]')=="negative") {
|
||||
$(this).find('[name=selectAll]').checked();
|
||||
$(table).DataTable().rows({ page: 'current' }).select();
|
||||
}
|
||||
else {
|
||||
$(this).closest('.dataTables_wrapper').find('.dataTables_paginate, .dataTables_info').show();
|
||||
}
|
||||
},
|
||||
{% endif %}
|
||||
"rowId": "id",
|
||||
"filter":false,
|
||||
"retrieve": true,
|
||||
"destroy": true,
|
||||
"processing": true,
|
||||
"serverSide": true,
|
||||
"columns":[
|
||||
{% if oUIBlock.GetOptions()["select"] is defined %}
|
||||
{"width": "auto",
|
||||
"searchable": false,
|
||||
"sortable": false,
|
||||
"title": '<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>',
|
||||
"type": "html",
|
||||
"data": "",
|
||||
"render": function(data, type, row)
|
||||
{
|
||||
var oCheckboxElem = $('<span class="row_input"><input type="checkbox" class="selectList{{ oUIBlock.GetId() }}" name="selectObject[]" /></span>');
|
||||
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": "auto",
|
||||
"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"] }}",
|
||||
"render": {
|
||||
"display": function ( data, type, row ) { {{ aColumn["render"]|raw }}},
|
||||
"_":"{{ aColumn["class_alias"] }}/{{ aColumn["attribute_code"] }}",
|
||||
},
|
||||
},
|
||||
{% endfor %}
|
||||
],
|
||||
"ajax": $.fn.dataTable.pipeline( {
|
||||
"url": "{{ oUIBlock.GetAjaxUrl() }}",
|
||||
"data": {{ oUIBlock.GetAjaxData() |raw}},
|
||||
"method": "post",
|
||||
"pages": 5 // number of pages to cache
|
||||
} )
|
||||
"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": "<<",
|
||||
"previous": "<",
|
||||
"next": ">",
|
||||
"last": ">>"
|
||||
},
|
||||
"aria": {
|
||||
"sortAscending": ": {{ 'UI:Datatables:Language:Sort:Ascending'|dict_s }}",
|
||||
"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 }}"]],
|
||||
"dom": "<'ibo-datatable-toolbar'pil>t<'ibo-datatable-toolbar'pil>",
|
||||
"order": [],
|
||||
{% if oUIBlock.GetOptions()["select"] is defined %}
|
||||
"select": {
|
||||
"style": "{{ oUIBlock.GetOptions()["select"] }}"
|
||||
},
|
||||
"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.GetOptions()['sTableId'] }}) {
|
||||
$(oRow).select();
|
||||
$(oRow).find('td:first-child input').prop('checked', true);
|
||||
}
|
||||
//$(table).DataTable().rows({ page: 'current' }).select();
|
||||
} else {
|
||||
if (oData.id in oSelectedItems{{ oUIBlock.GetOptions()['sTableId'] }}) {
|
||||
$(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") {
|
||||
$(this).find('[name=selectAll]').checked();
|
||||
$(table).DataTable().rows({page: 'current'}).select();
|
||||
} else {
|
||||
$(this).closest('.dataTables_wrapper').find('.dataTables_paginate, .dataTables_info').show();
|
||||
}
|
||||
},
|
||||
{% endif %}
|
||||
"rowId": "id",
|
||||
"filter": false,
|
||||
"retrieve": true,
|
||||
"destroy": true,
|
||||
"processing": true,
|
||||
"serverSide": true,
|
||||
"columns": [
|
||||
{% if oUIBlock.GetOptions()["select"] is defined %}
|
||||
{
|
||||
"width": "auto",
|
||||
"searchable": false,
|
||||
"sortable": false,
|
||||
"title": '<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>',
|
||||
"type": "html",
|
||||
"data": "",
|
||||
"render": function (data, type, row) {
|
||||
var oCheckboxElem = $('<span class="row_input"><input type="checkbox" class="selectList{{ oUIBlock.GetId() }}" name="selectObject[]" /></span>');
|
||||
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": "auto",
|
||||
"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"] }}",
|
||||
"render": {
|
||||
"display": function (data, type, row) { {{ aColumn["render"]|raw }}},
|
||||
"_": "{{ aColumn["class_alias"] }}/{{ aColumn["attribute_code"] }}"
|
||||
}
|
||||
},
|
||||
{% endfor %}
|
||||
],
|
||||
"ajax": $.fn.dataTable.pipeline({
|
||||
"url": "{{ oUIBlock.GetAjaxUrl() }}",
|
||||
"data": {{ oUIBlock.GetAjaxData() |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();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
oTable{{ oUIBlock.GetId() }}.off('select').on('select', function(oEvent, dt, type, indexes){
|
||||
var aData = oTable{{ oUIBlock.GetId() }}.rows(indexes).data().toArray();
|
||||
oTable{{ oUIBlock.GetId() }}.off('select').on('select', function (oEvent, dt, type, indexes) {
|
||||
var aData = oTable{{ oUIBlock.GetId() }}.rows(indexes).data().toArray();
|
||||
|
||||
// Checking input
|
||||
$('#{{ oUIBlock.GetId() }} tr[role="row"].selected td:first-child input').prop('checked', true);
|
||||
// Saving values in temp array
|
||||
for(var i in aData)
|
||||
{
|
||||
var iItemId = aData[i].id;
|
||||
if(!(iItemId in oSelectedItems{{ oUIBlock.GetOptions()['sTableId'] }}))
|
||||
{
|
||||
oSelectedItems{{ oUIBlock.GetOptions()['sTableId'] }}.push(iItemId);
|
||||
}
|
||||
}
|
||||
if ((oSelectedItems{{ oUIBlock.GetOptions()['sTableId'] }}.length == oTable{{ oUIBlock.GetId() }}.page.info()["recordsTotal"] && $(this).closest('.ibo-panel--body').find('[name=selectionMode]').val()=="negative"))
|
||||
{
|
||||
$('#btn_ok_{{ oUIBlock.GetOptions()['sTableId'] }}').prop('disabled', true);
|
||||
}
|
||||
else{
|
||||
$('#btn_ok_{{ oUIBlock.GetOptions()['sTableId'] }}').prop('disabled', false);
|
||||
}
|
||||
// Checking input
|
||||
$('#{{ oUIBlock.GetId() }} tr[role="row"].selected td:first-child input').prop('checked', true);
|
||||
// Saving values in temp array
|
||||
for (var i in aData) {
|
||||
var iItemId = aData[i].id;
|
||||
if (!(iItemId in oSelectedItems{{ oUIBlock.GetOptions()['sTableId'] }})) {
|
||||
oSelectedItems{{ oUIBlock.GetOptions()['sTableId'] }}.push(iItemId);
|
||||
}
|
||||
}
|
||||
if ((oSelectedItems{{ oUIBlock.GetOptions()['sTableId'] }}.length === oTable{{ oUIBlock.GetId() }}.page.info()["recordsTotal"] && $(this).closest('.ibo-panel--body').find('[name=selectionMode]').val() === "negative")) {
|
||||
$('#btn_ok_{{ oUIBlock.GetOptions()['sTableId'] }}').prop('disabled', true);
|
||||
} else {
|
||||
$('#btn_ok_{{ oUIBlock.GetOptions()['sTableId'] }}').prop('disabled', false);
|
||||
}
|
||||
});
|
||||
oTable{{ oUIBlock.GetId() }}.off('deselect').on('deselect', function(oEvent, dt, type, indexes){
|
||||
var aData = oTable{{ oUIBlock.GetId() }}.rows(indexes).data().toArray();
|
||||
oTable{{ oUIBlock.GetId() }}.off('deselect').on('deselect', function (oEvent, dt, type, indexes) {
|
||||
var aData = oTable{{ oUIBlock.GetId() }}.rows(indexes).data().toArray();
|
||||
|
||||
// Checking input
|
||||
$('#{{ oUIBlock.GetId() }} tr[role="row"]:not(.selected) td:first-child input').prop('checked', false);
|
||||
// Saving values in temp array
|
||||
for(var i in aData)
|
||||
{
|
||||
var iItemId = aData[i].id;
|
||||
if(iItemId in oSelectedItems{{ oUIBlock.GetOptions()['sTableId'] }})
|
||||
{
|
||||
oSelectedItems{{ oUIBlock.GetOptions()['sTableId'] }}.splice( $.inArray(removeItem, oSelectedItems{{ oUIBlock.GetOptions()['sTableId'] }}), 1 );
|
||||
}
|
||||
}
|
||||
if ((oSelectedItems{{ oUIBlock.GetOptions()['sTableId'] }}.length == 0 && $(this).closest('.ibo-panel--body').find('[name=selectionMode]').val()=="positive"))
|
||||
{
|
||||
$('#btn_ok_{{ oUIBlock.GetOptions()['sTableId'] }}').prop('disabled', true);
|
||||
}
|
||||
else{
|
||||
$('#btn_ok_{{ oUIBlock.GetOptions()['sTableId'] }}').prop('disabled', false);
|
||||
}
|
||||
// Checking input
|
||||
$('#{{ oUIBlock.GetId() }} tr[role="row"]:not(.selected) td:first-child input').prop('checked', false);
|
||||
// Saving values in temp array
|
||||
for (var i in aData) {
|
||||
var iItemId = aData[i].id;
|
||||
if (iItemId in oSelectedItems{{ oUIBlock.GetOptions()['sTableId'] }}) {
|
||||
oSelectedItems{{ oUIBlock.GetOptions()['sTableId'] }}.splice($.inArray(removeItem, oSelectedItems{{ oUIBlock.GetOptions()['sTableId'] }}), 1);
|
||||
}
|
||||
}
|
||||
if ((oSelectedItems{{ oUIBlock.GetOptions()['sTableId'] }}.length === 0 && $(this).closest('.ibo-panel--body').find('[name=selectionMode]').val() === "positive")) {
|
||||
$('#btn_ok_{{ oUIBlock.GetOptions()['sTableId'] }}').prop('disabled', true);
|
||||
} else {
|
||||
$('#btn_ok_{{ oUIBlock.GetOptions()['sTableId'] }}').prop('disabled', false);
|
||||
}
|
||||
});
|
||||
|
||||
// Handles submit button
|
||||
//$('#form_{{ oUIBlock.GetId() }} .form_buttons .form_btn_submit').off('click').on('click', function(oEvent){
|
||||
// Extracting value(s) to be send back to the source form
|
||||
{% if bMultipleSelect %}
|
||||
//var oData = {values: oSelectedItems};
|
||||
{% else %}
|
||||
/*var oData = {value: {}};
|
||||
var sItemId = Object.keys(oSelectedItems)[0];
|
||||
var sItemName = oSelectedItems[sItemId];
|
||||
// Extracting value(s) to be send back to the source form
|
||||
{% if bMultipleSelect %}
|
||||
//var oData = {values: oSelectedItems};
|
||||
{% else %}
|
||||
/*var oData = {value: {}};
|
||||
var sItemId = Object.keys(oSelectedItems)[0];
|
||||
var sItemName = oSelectedItems[sItemId];
|
||||
|
||||
oData.value[sItemId] = sItemName;*/
|
||||
{% endif %}
|
||||
oData.value[sItemId] = sItemName;*/
|
||||
{% endif %}
|
||||
|
||||
// Triggering value setting on the source field
|
||||
//$('[data-form-path="{{aSource.sFormPath}}"][data-field-id="{{aSource.sFieldId}}"]').triggerHandler('set_current_value', oData);
|
||||
// Triggering value setting on the source field
|
||||
//$('[data-form-path="{{ aSource.sFormPath }}"][data-field-id="{{ aSource.sFieldId }}"]').triggerHandler('set_current_value', oData);
|
||||
|
||||
// Closing the modal
|
||||
{% if tIsModal is defined and tIsModal == true %}
|
||||
//$('#{{ sFormId }}').closest('.modal').modal('hide');
|
||||
{% endif %}
|
||||
// Closing the modal
|
||||
{% if tIsModal is defined and tIsModal == true %}
|
||||
//$('#{{ sFormId }}').closest('.modal').modal('hide');
|
||||
{% endif %}
|
||||
//});
|
||||
|
||||
$('#datatable_dlg_{{ oUIBlock.GetId() }}').dialog(
|
||||
{
|
||||
autoOpen: false,
|
||||
title: "{{ 'UI:ListConfigurationTitle'|dict_s }}",
|
||||
width: 500,
|
||||
close: function() { //save data and refresh
|
||||
$('#datatable_dlg_{{ oUIBlock.GetId() }}').DataTableSettings('onDlgCancel');
|
||||
}
|
||||
});
|
||||
{
|
||||
autoOpen: false,
|
||||
title: "{{ 'UI:ListConfigurationTitle'|dict_s }}",
|
||||
width: 500,
|
||||
close: function () { //save data and refresh
|
||||
$('#datatable_dlg_{{ oUIBlock.GetId() }}').DataTableSettings('onDlgCancel');
|
||||
}
|
||||
});
|
||||
|
||||
$aOptions = {
|
||||
'sListId' : '{{ oUIBlock.GetId() }}',
|
||||
'oColumns' : {{ oUIBlock.GetResultColumnsAsJson()|raw }},
|
||||
'sViewLink': '{{ oUIBlock.GetOptions()["bViewLink"] }}' ,
|
||||
'iPageSize' : '{{ oUIBlock.GetOptions()["iPageSize"]}}',
|
||||
'sTableId' :'{{ oUIBlock.GetOptions()["sTableId"]}}',
|
||||
"sRenderUrl": "{{ oUIBlock.GetAjaxUrl() }}",
|
||||
"sSelectMode": "{{ oUIBlock.GetOptions()["select"] }}",
|
||||
"oData": {{ oUIBlock.GetAjaxData() |raw}},
|
||||
'oLabels' : {"moveup": "{{'UI:Button:MoveUp'|dict_s}}", "movedown": "{{'UI:Button:MoveDown'|dict_s}}"},
|
||||
'oDefaultSettings' : {{ oUIBlock.GetOptions()["oDefaultSettings"]|raw}},
|
||||
'sListId': '{{ oUIBlock.GetId() }}',
|
||||
'oColumns': {{ oUIBlock.GetResultColumnsAsJson()|raw }},
|
||||
'sViewLink': '{{ oUIBlock.GetOptions()["bViewLink"] }}',
|
||||
'iPageSize': '{{ oUIBlock.GetOptions()["iPageSize"] }}',
|
||||
'sTableId': '{{ oUIBlock.GetOptions()["sTableId"] }}',
|
||||
"sRenderUrl": "{{ oUIBlock.GetAjaxUrl() }}",
|
||||
"sSelectMode": "{{ oUIBlock.GetOptions()["select"] }}",
|
||||
"oData": {{ oUIBlock.GetAjaxData() |raw }},
|
||||
'oLabels': {"moveup": "{{ 'UI:Button:MoveUp'|dict_s }}", "movedown": "{{ 'UI:Button:MoveDown'|dict_s }}"},
|
||||
'oDefaultSettings': {{ oUIBlock.GetOptions()["oDefaultSettings"]|raw }}
|
||||
};
|
||||
console.warn($aOptions);
|
||||
//if (!typeof $('#datatable_dlg_{{ oUIBlock.GetId() }}').DataTableSettings() !== "undefined")
|
||||
if ($('#datatable_dlg_{{ oUIBlock.GetId() }}').DataTableSettings())
|
||||
{
|
||||
$('#datatable_dlg_{{ oUIBlock.GetId() }}').DataTableSettings( "destroy");
|
||||
if ($('#datatable_dlg_{{ oUIBlock.GetId() }}').DataTableSettings()) {
|
||||
$('#datatable_dlg_{{ oUIBlock.GetId() }}').DataTableSettings("destroy");
|
||||
}
|
||||
$('#datatable_dlg_{{ oUIBlock.GetId() }}').DataTableSettings( $aOptions);
|
||||
$('#datatable_dlg_{{ oUIBlock.GetId() }}').DataTableSettings($aOptions);
|
||||
@@ -0,0 +1,35 @@
|
||||
{# @copyright Copyright (C) 2010-2020 Combodo SARL #}
|
||||
{# @license http://opensource.org/licenses/AGPL-3.0 #}
|
||||
|
||||
<input type="hidden" name="attr_{{ oUIBlock.GetRef() }}" value="">
|
||||
|
||||
{% set columns = oUIBlock.GetColumns() %}
|
||||
<table id="{{ oUIBlock.GetId() }}" class="ibo-datatable listResults" style="width:100%;">
|
||||
<thead>
|
||||
<tr>
|
||||
{% for column in columns %}
|
||||
<th class="ibo-datatable-header" title="{{ column.description }}">{{ column.label|raw }}</th>
|
||||
{% endfor %}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for rowId,data in oUIBlock.GetData() %}
|
||||
<tr role="row" id="{{ oUIBlock.GetRef() }}_row_{{ rowId }}">
|
||||
{% for name,column in columns %}
|
||||
<td>
|
||||
{% set cellValueHtml = '' %}
|
||||
{% for cellName,cellValue in data %}
|
||||
{% if cellName == name %}
|
||||
{% set cellValueHtml = cellValue %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% if cellValueHtml is empty %}
|
||||
{% set cellValueHtml = ' ' %}
|
||||
{% endif %}
|
||||
{{ cellValueHtml|raw }}
|
||||
</td>
|
||||
{% endfor %}
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -0,0 +1,6 @@
|
||||
$('#{{ oUIBlock.GetId() }}').DataTable({
|
||||
language: {
|
||||
emptyTable: {{ 'UI:Message:EmptyList:UseAdd'|dict_s }}
|
||||
},
|
||||
search:false
|
||||
});
|
||||
Reference in New Issue
Block a user