Issue/5074 - Routage, Block UI relations, Links row actions (#369)

* datatable row actions

Below is a sample of extra param to enable feature:

		$aExtraParams['row_actions'] = [
			[
				'tooltip'        => 'remove an element',
				'icon_css_class' => 'fa-minus',
				'js_row_action'   => 'console.log("You clicked the remove button");',
				'confirmation'  => [
					'message'                  => 'UI:ConfirmationMessage',
					'message_row_data'         => "name",
					'remember_choice_pref_key' => 'remove_do_not_show_again',
				],
			],
			[
				'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);',
			],
		];

* Contrôleur pour la suppression et le détachement de liens
* Block UI pour l'édition des relations
* Block UI pour la visualisation des relations
* Boutons d'actions pour la suppression et le détachement de liens
* Gestion dialogue de confirmation pour les row actions

templates/base/components/datatable/layout.html.twig

@@ -21,11 +21,14 @@
         <th class="ibo-datatable-header" {% if aColumn["description"] is not empty %}title="{{ aColumn["description"] }}"{% endif %}>{{ aColumn["attribute_label"] }} </th>
     {% endfor %}
     {% if oUIBlock.HasRowActions() %}
-        <th class="ibo-datatable-header">{{ 'UI:Datatables:Column:RowActions:Label'|dict_s }} </th>
+        <th class="ibo-datatable-header" title="{{ 'UI:Datatables:Column:RowActions:Description'|dict_s }}">{{ 'UI:Datatables:Column:RowActions:Label'|dict_s }} </th>
     {% endif %}
     </thead>
 </table>
 
 {% if oUIBlock.HasRowActions() %}
     {{ render_block(oUIBlock.GetRowActionsTemplate()) }}
+    {% if not oUIBlock.GetRowActionsConfirmDialogInitializedFlag() %}
+        {{ render_block(oUIBlock.GetRowActionsConfirmDialog()) }}
+    {% endif %}
 {% endif %}

templates/base/components/datatable/layout.ready.js.twig

@@ -423,4 +423,6 @@ if(window.ResizeObserver){
         oTable{{ sListIDForVarSuffix }}Resize.observe($('#{{ oUIBlock.GetId() }}')[0]);
 }
 
-{% include 'base/components/datatable/row-actions/handler.js.twig' %}
+{% if oUIBlock.HasRowActions() %}
+    {% include 'base/components/datatable/row-actions/handler.js.twig' %}
+{% endif %}

templates/base/components/datatable/row-actions/handler.js.twig

@@ -1,15 +1,51 @@
 {# @copyright   Copyright (C) 2010-2022 Combodo SARL #}
 {# @license     http://opensource.org/licenses/AGPL-3.0 #}
 
-// for each row action
-{% if oUIBlock.HasRowActions() %}
-    {% for aAction in oUIBlock.GetRowActions() %}
-        $('#{{ oUIBlock.GetId() }} tbody').on('click', 'button[data-action-id="{{ loop.index0 }}"]', function() {
-            let iActionId = $(this).data('action-id');
-            let oDatatable = $('#{{ oUIBlock.GetId() }}').DataTable();
-            let oTrElement = $(this).closest('tr');
-            let aData = oDatatable.row(oTrElement).data();
-            {{ aAction.js_row_action|raw }};
-        });
-    {% endfor %}
-{% endif %}
+// for each row action...
+{% for aAction in oUIBlock.GetRowActions() %}
+
+    // register action buttons click
+    $('#{{ oUIBlock.GetId() }} tbody').on('click', 'button[data-action-id="{{ loop.index0 }}"]', function() {
+
+        // variables accessible from action row js
+        let oDatatable = $('#{{ oUIBlock.GetId() }}').DataTable();
+        let oTrElement = $(this).closest('tr');
+        let iActionId = $(this).data('action-id');
+        let aRowData = oDatatable.row(oTrElement).data();
+
+        {% if aAction.confirmation is defined %}
+
+            // Handle action row with confirmation
+            let sTitle = '{{ 'UI:Datatables:RowActions:ConfirmationDialog'|dict_s }}';
+            let sMessage = '{{ 'UI:Datatables:RowActions:ConfirmationMessage'|dict_s }}';
+            {% if aAction.confirmation.message is defined %}
+                sMessage = '{{ aAction.confirmation.message|dict_s|raw }}';
+                sMessage = sMessage.replaceAll('{item}', aRowData['{{ aAction.confirmation.message_row_data }}']);
+            {% endif %}
+            let sPrefKey = null;
+            {% if aAction.confirmation.remember_choice_pref_key is defined %}
+                sPrefKey = '{{ aAction.confirmation.remember_choice_pref_key }}';
+            {% endif %}
+            HandleActionRowConfirmation (sTitle, sMessage, sPrefKey, ActionRowFunction{{ oUIBlock.GetId() }}{{ loop.index0 }}, {
+                action_id: iActionId,
+                datatable: oDatatable,
+                tr_element: oTrElement,
+                row_data: aRowData
+            });
+
+        {% else %}
+
+            // Handle action row without confirmation
+            ActionRowFunction{{ oUIBlock.GetId() }}{{ loop.index0 }}(oDatatable, oTrElement, iActionId, aRowData);
+
+        {% endif %}
+
+    });
+
+    // action row function declaration
+    function ActionRowFunction{{ oUIBlock.GetId() }}{{ loop.index0 }}(oDatatable, oTrElement, iActionId, aRowData){
+        {{ aAction.js_row_action|raw }};
+        return true;
+    }
+
+{% endfor %}

templates/base/components/datatable/static/formtable/layout.html.twig

@@ -21,4 +21,7 @@
 
 {% if oUIBlock.HasRowActions() %}
     {{ render_block(oUIBlock.GetRowActionsTemplate()) }}
+    {% if not oUIBlock.GetRowActionsConfirmDialogInitializedFlag() %}
+        {{ render_block(oUIBlock.GetRowActionsConfirmDialog()) }}
+    {% endif %}
 {% endif %}

templates/base/components/datatable/static/layout.html.twig

@@ -48,4 +48,7 @@
 
 {% if oUIBlock.HasRowActions() %}
     {{ render_block(oUIBlock.GetRowActionsTemplate()) }}
+    {% if not oUIBlock.GetRowActionsConfirmDialogInitializedFlag() %}
+        {{ render_block(oUIBlock.GetRowActionsConfirmDialog()) }}
+    {% endif %}
 {% endif %}