N°5073 - Implements line actions in a datatable (#337)

* datatable row actions Below is a sample of extra param to enable feature: $aExtraParams['row_actions'] = [ [ 'tooltip' => 'add an element', 'icon_css_class' => 'fa-plus', 'css_class' => 'ibo-is-success', 'level' => 'secondary', 'on_action_js' => 'console.log(aData);', ], [ 'tooltip' => 'remove an element', 'icon_css_class' => 'fa-minus', 'css_class' => 'ibo-is-danger', 'level' => 'secondary', 'on_action_js' => 'console.log("You clicked the remove button");', ], [ 'tooltip' => 'open in new tab', 'icon_css_class' => 'fa-external-link-square-alt', 'on_action_js' => 'window.open("http://localhost/itop-branchs/dev/pages/UI.php?operation=details&class=UserRequest&id=" + aData.id + "&c[menu]=UserRequest%3AOpenRequests");', ], [ 'tooltip' => 'other actions', 'icon_css_class' => 'fa-ellipsis-v', 'on_action_js' => 'console.log(event);', ], ]; * datatable row actions (update) * datatable row actions (update) * datatable row actions (add template role) * datatable row actions (align actions) * datatable row actions (change template factory make to make standard) * datatable row actions (use trait to handle row actions) * datatable row actions (row actions templates) * datatable row actions (row actions templates) * datatable row actions (row actions templates) * datatable row actions (extends to static and form) * datatable row actions (extends to static and form) * datatable row actions (code review S) * datatable row actions (code review S) * datatable row actions (code review S) * Update js/dataTables.main.js Co-authored-by: Molkobain <lajarige.guillaume@free.fr> * Update js/dataTables.main.js Co-authored-by: Molkobain <lajarige.guillaume@free.fr> * Update sources/Application/UI/Base/Component/DataTable/StaticTable/StaticTable.php Co-authored-by: Molkobain <lajarige.guillaume@free.fr> * Update templates/base/components/datatable/row-actions/handler.js.twig Co-authored-by: Molkobain <lajarige.guillaume@free.fr> * datatable row actions (code review M) * Update js/dataTables.main.js Co-authored-by: Molkobain <lajarige.guillaume@free.fr> * Update js/dataTables.main.js Co-authored-by: Molkobain <lajarige.guillaume@free.fr> * Update js/dataTables.main.js Co-authored-by: Molkobain <lajarige.guillaume@free.fr> * Update sources/Application/UI/Base/Component/DataTable/StaticTable/StaticTable.php Co-authored-by: Molkobain <lajarige.guillaume@free.fr> * Update sources/Application/UI/Base/Component/DataTable/StaticTable/StaticTable.php Co-authored-by: Molkobain <lajarige.guillaume@free.fr> * Update sources/Application/UI/Base/Component/DataTable/StaticTable/StaticTable.php Co-authored-by: Molkobain <lajarige.guillaume@free.fr> * Update js/dataTables.main.js Co-authored-by: Molkobain <lajarige.guillaume@free.fr> * Update sources/Application/UI/Base/Component/DataTable/DataTableUIBlockFactory.php Co-authored-by: Molkobain <lajarige.guillaume@free.fr> * Update sources/Application/UI/Base/Component/DataTable/StaticTable/StaticTable.php Co-authored-by: Molkobain <lajarige.guillaume@free.fr> * Update application/utils.inc.php Co-authored-by: Molkobain <lajarige.guillaume@free.fr> * datatable row actions (code review M2) * datatable row actions (code review M3) Co-authored-by: Molkobain <lajarige.guillaume@free.fr>
2026-04-23 02:28:44 +02:00 · 2022-09-26 08:20:28 +02:00
parent 3196e105a1
commit 5157f511fc
23 changed files with 467 additions and 71 deletions
--- a/sources/Application/UI/Base/Component/DataTable/DataTable.php
+++ b/sources/Application/UI/Base/Component/DataTable/DataTable.php
@@ -21,6 +21,7 @@ use DataTableConfig;
 class DataTable extends UIContentBlock
 {
 	use tJSRefreshCallback;
+	use tTableRowActions;

 	// Overloaded constants
 	public const BLOCK_CODE = 'ibo-datatable';
@@ -51,6 +52,7 @@ class DataTable extends UIContentBlock
 	 */
 	protected $aInitDisplayData;

+
 	/**
 	 * Panel constructor.
 	 *
@@ -250,4 +252,5 @@ class DataTable extends UIContentBlock

 		return [];
 	}
+
 }
--- a/sources/Application/UI/Base/Component/DataTable/DataTableUIBlockFactory.php
+++ b/sources/Application/UI/Base/Component/DataTable/DataTableUIBlockFactory.php
@@ -12,6 +12,7 @@ use appUserPreferences;
 use AttributeLinkedSet;
 use cmdbAbstractObject;
 use Combodo\iTop\Application\UI\Base\AbstractUIBlockFactory;
+use Combodo\iTop\Application\UI\Base\Component\Button\ButtonUIBlockFactory;
 use Combodo\iTop\Application\UI\Base\Component\CollapsibleSection\CollapsibleSection;
 use Combodo\iTop\Application\UI\Base\Component\DataTable\StaticTable\FormTable\FormTable;
 use Combodo\iTop\Application\UI\Base\Component\DataTable\StaticTable\FormTableRow\FormTableRow;
@@ -19,8 +20,10 @@ use Combodo\iTop\Application\UI\Base\Component\DataTable\StaticTable\StaticTable
 use Combodo\iTop\Application\UI\Base\Component\Html\Html;
 use Combodo\iTop\Application\UI\Base\Component\Html\HtmlFactory;
 use Combodo\iTop\Application\UI\Base\Component\Panel\PanelUIBlockFactory;
+use Combodo\iTop\Application\UI\Base\Component\Template\TemplateUIBlockFactory;
 use Combodo\iTop\Application\UI\Base\Component\Title\TitleUIBlockFactory;
 use Combodo\iTop\Application\UI\Base\Component\Toolbar\ToolbarUIBlockFactory;
+use Combodo\iTop\Application\UI\Base\iUIBlock;
 use Combodo\iTop\Application\UI\Base\Layout\UIContentBlock;
 use Combodo\iTop\Controller\AjaxRenderController;
 use DBObjectSet;
@@ -180,6 +183,46 @@ class DataTableUIBlockFactory extends AbstractUIBlockFactory
 		return $oContainer;
 	}

+	/**
+	 * Make a row actions toolbar template.
+	 *
+	 * @param iUIBlock $oTable datatable object that needs to use tTableRowActions trait
+	 *
+	 * @return \Combodo\iTop\Application\UI\Base\Component\Template\Template
+	 * @throws \Exception
+	 * @since 3.1.0
+	 */
+	public static function MakeActionRowToolbarTemplate(iUIBlock $oTable)
+	{
+		// test trait
+		$sTableClass = get_class($oTable);
+		if (!utils::IsTraitUsedByClass(tTableRowActions::class, $sTableClass)) {
+			throw new \Exception("DataTableUIBlockFactory::MakeActionRowToolbarTemplate: {$sTableClass} iUIBlock needs tTableRowActions trait");
+		}
+
+		// row actions template
+		$oTemplate = TemplateUIBlockFactory::MakeStandard($oTable->GetId().'_actions_buttons_template');
+
+		// row actions toolbar container
+		$oToolbar = ToolbarUIBlockFactory::MakeStandard();
+		$oToolbar->AddCSSClass('ibo-datatable--row-actions-toolbar');
+
+		// for each action...create an icon button
+		foreach ($oTable->GetRowActions() as $iKey => $aAction) {
+			$oButton = ButtonUIBlockFactory::MakeIconAction(
+				array_key_exists('icon_classes', $aAction) ? $aAction['icon_classes'] : 'fas fa-question',
+				array_key_exists('tooltip', $aAction) ? $aAction['tooltip'] : '',
+				array_key_exists('name', $aAction) ? $aAction['name'] : 'undefined'
+			);
+			$oButton->SetDataAttributes(['action-id' => $iKey]);
+			$oToolbar->AddSubBlock($oButton);
+		}
+
+		$oTemplate->AddSubBlock($oToolbar);
+
+		return $oTemplate;
+	}
+
 	/**
 	 * Make a basis Panel component
 	 *
@@ -457,9 +500,8 @@ class DataTableUIBlockFactory extends AbstractUIBlockFactory
 		} else {
 			$aOptions['sSelectedRows'] = '[]';
 		}
-		$aExtraParams['table_id']=$sTableId;
-		$aExtraParams['list_id']=$sListId;
-
+		$aExtraParams['table_id'] = $sTableId;
+		$aExtraParams['list_id'] = $sListId;

 		$oDataTable->SetOptions($aOptions);
 		$oDataTable->SetAjaxUrl(utils::GetAbsoluteUrlAppRoot()."pages/ajax.render.php");
@@ -475,6 +517,12 @@ class DataTableUIBlockFactory extends AbstractUIBlockFactory
 		$oDataTable->SetResultColumns($oCustomSettings->aColumns);
 		$oDataTable->SetInitDisplayData(AjaxRenderController::GetDataForTable($oSet, $aClassAliases, $aColumnsToLoad, $sIdName, $aExtraParams));

+		// row actions
+		if (isset($aExtraParams['row_actions'])) {
+			$oDataTable->SetRowActions($aExtraParams['row_actions']);
+		}
+
+
 		return $oDataTable;
 	}

@@ -713,6 +761,11 @@ class DataTableUIBlockFactory extends AbstractUIBlockFactory
 		$oDataTable->SetResultColumns($oCustomSettings->aColumns);
 		$oDataTable->SetInitDisplayData(AjaxRenderController::GetDataForTable($oSet, $aClassAliases, $aColumnsToLoad, $sIdName, $aExtraParams));

+		// row actions
+		if (isset($aExtraParams['row_actions'])) {
+			$oDataTable->SetRowActions($aExtraParams['row_actions']);
+		}
+
 		return $oDataTable;
 	}

@@ -908,6 +961,7 @@ JS;
 	 * @param array $aExtraParams
 	 * @param string $sFilter
 	 * @param array $aOptions
+	 * @param array $aRowActions @since 3.1.0
 	 * *
 	 * $aColumns =[
 	 *           'nameField1' => ['label' => labelFIeld1, 'description' => descriptionField1],
@@ -917,7 +971,7 @@ JS;
 	 *
 	 * @return \Combodo\iTop\Application\UI\Base\Layout\UIContentBlock
 	 */
-	public static function MakeForStaticData(string $sTitle, array $aColumns, array $aData, ?string $sId = null, array $aExtraParams = [], string $sFilter = "", array $aOptions = [])
+	public static function MakeForStaticData(string $sTitle, array $aColumns, array $aData, ?string $sId = null, array $aExtraParams = [], string $sFilter = "", array $aOptions = [], array $aRowActions = null)
 	{
 		$oBlock = new UIContentBlock();
 		if ($sTitle != "") {
@@ -925,6 +979,13 @@ JS;
 			$oBlock->AddSubBlock($oTitle);
 		}
 		$oTable = new StaticTable($sId, [], $aExtraParams);
+		if ($aRowActions != null) {
+			$oTable->SetRowActions($aRowActions);
+			$aColumns['actions'] = [
+				'label'       => Dict::S('UI:Datatables:Column:RowActions:Label'),
+				'description' => Dict::S('UI:Datatables:Column:RowActions:Description'),
+			];
+		}
 		$oTable->SetColumns($aColumns);
 		$oTable->SetData($aData);
 		$oTable->SetFilter($sFilter);
@@ -940,6 +1001,7 @@ JS;
 	 * @param array $aColumns
 	 * @param array $aData
 	 * @param string $sFilter
+	 * @param array $aRowActions @since 3.1.0
 	 *
 	 * $aColumns =[
 	 *           'nameField1' => ['label' => labelFIeld1, 'description' => descriptionField1],
@@ -949,10 +1011,17 @@ JS;
 	 *
 	 * @return \Combodo\iTop\Application\UI\Base\Component\DataTable\StaticTable\FormTable\FormTable
 	 */
-	public static function MakeForForm(string $sRef, array $aColumns, array $aData = [], string $sFilter = '')
+	public static function MakeForForm(string $sRef, array $aColumns, array $aData = [], string $sFilter = '', array $aRowActions = null)
 	{
 		$oTable = new FormTable("datatable_".$sRef);
 		$oTable->SetRef($sRef);
+		if ($aRowActions != null) {
+			$oTable->SetRowActions($aRowActions);
+			$aColumns['actions'] = [
+				'label'       => Dict::S('UI:Datatables:Column:RowActions:Label'),
+				'description' => Dict::S('UI:Datatables:Column:RowActions:Description'),
+			];
+		}
 		$oTable->SetColumns($aColumns);
 		$oTable->SetFilter($sFilter);

@@ -970,24 +1039,44 @@ JS;
 	public static function GetAllowedParams(): array
 	{
 		return [
-			'surround_with_panel',  /** bool embed table into a Panel */
-			'menu',                 /** bool display table menu */
-			'view_link',            /** bool display the friendlyname column with links to the objects details */
-			'link_attr',            /** string link att code */
-			'object_id',            /** int Id of the object linked */
-			'target_attr',          /** string target att code of the link */
-			'selection_mode',       /** bool activate selection */
-			'selection_type',       /** string 'multiple' or 'single' */
-			'extra_fields',         /** string comma separated list of link att code to display ('alias.attcode')*/
-			'zlist',                /** string name of the zlist to display when 'extra_fields' is not set */
-			'display_limit',        /** bool if true pagination is used (default = true)  */
-			'table_id',             /** string datatable id */
-			'cssCount',             /** string external counter (input hidden) js selector */
-			'selected_rows',        /** array list of Ids already selected when displaying the datatable */
-			'display_aliases',      /** string comma separated list of class aliases to display */
-			'list_id',              /** string list outer id */
-			'selection_enabled',    	/** list of id in witch select is allowed, if not exists all lines are selectable */
-			'id_for_select', /**give definition of id for select checkbox*/
+			'surround_with_panel',
+			/** bool embed table into a Panel */
+			'menu',
+			/** bool display table menu */
+			'view_link',
+			/** bool display the friendlyname column with links to the objects details */
+			'link_attr',
+			/** string link att code */
+			'object_id',
+			/** int Id of the object linked */
+			'target_attr',
+			/** string target att code of the link */
+			'selection_mode',
+			/** bool activate selection */
+			'selection_type',
+			/** string 'multiple' or 'single' */
+			'extra_fields',
+			/** string comma separated list of link att code to display ('alias.attcode')*/
+			'zlist',
+			/** string name of the zlist to display when 'extra_fields' is not set */
+			'display_limit',
+			/** bool if true pagination is used (default = true)  */
+			'table_id',
+			/** string datatable id */
+			'cssCount',
+			/** string external counter (input hidden) js selector */
+			'selected_rows',
+			/** array list of Ids already selected when displaying the datatable */
+			'display_aliases',
+			/** string comma separated list of class aliases to display */
+			'list_id',
+			/** string list outer id */
+			'selection_enabled',
+			/** list of id in witch select is allowed, if not exists all lines are selectable */
+			'id_for_select',
+			/**give definition of id for select checkbox*/
+			'row_actions',
+			/** array of blocks displayed on every row */
 		];
 	}
 }
--- a/sources/Application/UI/Base/Component/DataTable/StaticTable/FormTable/FormTable.php
+++ b/sources/Application/UI/Base/Component/DataTable/StaticTable/FormTable/FormTable.php
@@ -9,6 +9,7 @@ namespace Combodo\iTop\Application\UI\Base\Component\DataTable\StaticTable\FormT

 use Combodo\iTop\Application\UI\Base\Component\DataTable\StaticTable\FormTableRow\FormTableRow;
 use Combodo\iTop\Application\UI\Base\Component\DataTable\StaticTable\StaticTable;
+use Combodo\iTop\Application\UI\Base\Component\DataTable\tTableRowActions;
 use Combodo\iTop\Application\UI\Base\iUIBlock;

 /**
@@ -19,10 +20,10 @@ use Combodo\iTop\Application\UI\Base\iUIBlock;
 class FormTable extends StaticTable
 {
 	// Overloaded constants
-	public const BLOCK_CODE = 'ibo-formtable';
-	public const REQUIRES_ANCESTORS_DEFAULT_JS_FILES = true;
-	public const REQUIRES_ANCESTORS_DEFAULT_CSS_FILES = true;
-	public const DEFAULT_HTML_TEMPLATE_REL_PATH = 'base/components/datatable/static/formtable/layout';
+	public const BLOCK_CODE                            = 'ibo-formtable';
+	public const REQUIRES_ANCESTORS_DEFAULT_JS_FILES   = true;
+	public const REQUIRES_ANCESTORS_DEFAULT_CSS_FILES  = true;
+	public const DEFAULT_HTML_TEMPLATE_REL_PATH        = 'base/components/datatable/static/formtable/layout';
 	public const DEFAULT_JS_ON_READY_TEMPLATE_REL_PATH = 'base/components/datatable/static/formtable/layout';

 	/** @var string */
--- a/sources/Application/UI/Base/Component/DataTable/StaticTable/StaticTable.php
+++ b/sources/Application/UI/Base/Component/DataTable/StaticTable/StaticTable.php
@@ -2,6 +2,7 @@

 namespace Combodo\iTop\Application\UI\Base\Component\DataTable\StaticTable;

+use Combodo\iTop\Application\UI\Base\Component\DataTable\tTableRowActions;
 use Combodo\iTop\Application\UI\Base\Layout\UIContentBlock;
 use Combodo\iTop\Application\UI\Base\tJSRefreshCallback;
 use utils;
@@ -18,12 +19,13 @@ use utils;
 class StaticTable extends UIContentBlock
 {
 	use tJSRefreshCallback;
+	use tTableRowActions;

 	// Overloaded constants
-	public const BLOCK_CODE = 'ibo-datatable';
-	public const DEFAULT_HTML_TEMPLATE_REL_PATH = 'base/components/datatable/static/layout';
+	public const BLOCK_CODE                            = 'ibo-datatable';
+	public const DEFAULT_HTML_TEMPLATE_REL_PATH        = 'base/components/datatable/static/layout';
 	public const DEFAULT_JS_ON_READY_TEMPLATE_REL_PATH = 'base/components/datatable/static/layout';
-	public const DEFAULT_JS_FILES_REL_PATH = [
+	public const DEFAULT_JS_FILES_REL_PATH             = [
 		'node_modules/datatables.net/js/jquery.dataTables.min.js',
 		'node_modules/datatables.net-fixedheader/js/dataTables.fixedHeader.min.js',
 		'node_modules/datatables.net-responsive/js/dataTables.responsive.min.js',
@@ -59,7 +61,7 @@ class StaticTable extends UIContentBlock
 	private $aExtraParams;
 	/*@var string $sUrlForRefresh*/
 	private $sFilter;
-	/** @var array $aOptions 
+	/** @var array $aOptions
 	 * List of specific options for display datatable
 	 */
 	private $aOptions;
@@ -81,6 +83,17 @@ class StaticTable extends UIContentBlock
 		return $this->aColumns;
 	}

+	/**
+	 * Return columns count.
+	 *
+	 * @return int
+	 * @since 3.1.0
+	 */
+	public function GetColumnsCount(): int
+	{
+		return count($this->aColumns);
+	}
+
 	/**
 	 * @param array $aColumns
 	 *
@@ -129,8 +142,8 @@ class StaticTable extends UIContentBlock
 	{
 		//$('#".$this->sId."').DataTable().clear().rows.add(data).draw()
 		$aParams = [
-			'style' => 'list',
-			'filter' => $this->sFilter,
+			'style'        => 'list',
+			'filter'       => $this->sFilter,
 			'extra_params' => $this->aExtraParams,
 		];

@@ -140,7 +153,7 @@ class StaticTable extends UIContentBlock
 	                    $('#".$this->sId."').dataTable().fnAddData(data);
 					});";
 	}
-	
+
 	/**
 	 * @return mixed
 	 */
@@ -149,6 +162,7 @@ class StaticTable extends UIContentBlock
 		if (isset($this->aOptions[$sOption])) {
 			return $this->aOptions[$sOption];
 		}
+
 		return null;
 	}

--- a/sources/Application/UI/Base/Component/DataTable/tTableRowActions.php
+++ b/sources/Application/UI/Base/Component/DataTable/tTableRowActions.php
@@ -0,0 +1,73 @@
+<?php
+/*
+ * @copyright   Copyright (C) 2010-2022 Combodo SARL
+ * @license     http://opensource.org/licenses/AGPL-3.0
+ */
+
+namespace Combodo\iTop\Application\UI\Base\Component\DataTable;
+
+/**
+ * Trait tTableRowActions
+ *
+ * This brings the ability to add action rows to tables.
+ *
+ * @internal
+ * @package Combodo\iTop\Application\UI\Base\Component\DataTable
+ * @since 3.1.0
+ */
+trait tTableRowActions
+{
+	/**
+	 * @var $aRowActions array array of row actions
+	 * action => {
+	 *      tooltip: string,
+	 *      icon_classes: string,
+	 *      js_row_action: string
+	 * }
+	 */
+	protected $aRowActions;
+
+	/**
+	 * Set row actions.
+	 *
+	 * @param array $aRowActions
+	 *
+	 * @return $this
+	 */
+	public function SetRowActions(array $aRowActions)
+	{
+		$this->aRowActions = $aRowActions;
+
+		return $this;
+	}
+
+	/**
+	 * Get row actions.
+	 *
+	 * @return array
+	 */
+	public function GetRowActions(): array
+	{
+		return $this->aRowActions;
+	}
+
+	/**
+	 * Return true if row actions is set and not empty.
+	 *
+	 * @return bool
+	 */
+	public function HasRowActions(): bool
+	{
+		return isset($this->aRowActions) && count($this->aRowActions);
+	}
+
+	/**
+	 * Return row actions template.
+	 *
+	 * @return \Combodo\iTop\Application\UI\Base\Component\Template\Template
+	 */
+	public function GetRowActionsTemplate()
+	{
+		return DataTableUIBlockFactory::MakeActionRowToolbarTemplate($this);
+	}
+}