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 18:48:51 +02:00 · 2022-09-26 08:20:28 +02:00
parent 3196e105a1
commit 5157f511fc
23 changed files with 467 additions and 71 deletions
--- a/templates/base/components/datatable/layout.html.twig
+++ b/templates/base/components/datatable/layout.html.twig
@@ -20,5 +20,12 @@
    {% 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 %}
+    {% if oUIBlock.HasRowActions() %}
+        <th class="ibo-datatable-header">{{ 'UI:Datatables:Column:RowActions:Label'|dict_s }} </th>
+    {% endif %}
    </thead>
-</table>
+</table>
+
+{% if oUIBlock.HasRowActions() %}
+    {{ render_block(oUIBlock.GetRowActionsTemplate()) }}
+{% endif %}
--- a/templates/base/components/datatable/layout.ready.js.twig
+++ b/templates/base/components/datatable/layout.ready.js.twig
@@ -208,6 +208,9 @@ var oTable{{ sListIDForVarSuffix }} = $('#{{ oUIBlock.GetId() }}').DataTable({
            }
        },
        {% endfor %}
+        {% if oUIBlock.HasRowActions() %}
+            getRowActionsColumnDefinition('{{ oUIBlock.GetId() }}'),
+        {% endif %}
    ],
    ajax: $.fn.dataTable.pipeline({
                url: "{{ oUIBlock.GetAjaxUrl() }}",
@@ -415,4 +418,6 @@ if(window.ResizeObserver){
            }, 120);
        });
        oTable{{ sListIDForVarSuffix }}Resize.observe($('#{{ oUIBlock.GetId() }}')[0]);
-}
+}
+
+{% include 'base/components/datatable/row-actions/handler.js.twig' %}
--- a/templates/base/components/datatable/row-actions/handler.js.twig
+++ b/templates/base/components/datatable/row-actions/handler.js.twig
@@ -0,0 +1,15 @@
+{# @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 %}
--- a/templates/base/components/datatable/static/formtable/layout.html.twig
+++ b/templates/base/components/datatable/static/formtable/layout.html.twig
@@ -13,8 +13,12 @@
    </tr>
    </thead>
    <tbody>
-    {% for oSubBlock in oUIBlock.GetRows() %}
-        {{ render_block(oSubBlock, {aPage: aPage}) }}
+    {% for oRowBlock in oUIBlock.GetRows() %}
+        {{ render_block(oRowBlock, {aPage: aPage}) }}
    {% endfor %}
    </tbody>
-</table>
+</table>
+
+{% if oUIBlock.HasRowActions() %}
+    {{ render_block(oUIBlock.GetRowActionsTemplate()) }}
+{% endif %}
--- a/templates/base/components/datatable/static/formtable/layout.ready.js.twig
+++ b/templates/base/components/datatable/static/formtable/layout.ready.js.twig
@@ -20,7 +20,10 @@ var oTable{{ sListIDForVarSuffix }} = $('#{{ oUIBlock.GetId() }}').DataTable({
    },
    {% endif %}
    columnDefs: [
-        {orderable: false, targets: 0}
+        {orderable: false, targets: 0},
+        {% if oUIBlock.HasRowActions() %}
+            getRowActionsColumnDefinition('{{ oUIBlock.GetId() }}', {{ oUIBlock.GetColumnsCount() - 1 }}),
+        {% endif %}
    ],
    {% endif %}
    drawCallback: function (settings) {
@@ -123,4 +126,6 @@ if (window.ResizeObserver)

    {% endif %}

-}
+}
+
+{% include 'base/components/datatable/row-actions/handler.js.twig' %}
--- a/templates/base/components/datatable/static/layout.html.twig
+++ b/templates/base/components/datatable/static/layout.html.twig
@@ -44,4 +44,8 @@
        </tr>
    {% endfor %}
    </tbody>
-</table>
+</table>
+
+{% if oUIBlock.HasRowActions() %}
+    {{ render_block(oUIBlock.GetRowActionsTemplate()) }}
+{% endif %}
--- a/templates/base/components/datatable/static/layout.ready.js.twig
+++ b/templates/base/components/datatable/static/layout.ready.js.twig
@@ -54,6 +54,9 @@ var oTable{{ sListIDForVarSuffix }} = $('#{{ oUIBlock.GetId() }}').DataTable({
            sortable: true
        },
        {% endfor %}
+        {% if oUIBlock.HasRowActions() %}
+            getRowActionsColumnDefinition('{{ oUIBlock.GetId() }}'),
+        {% endif %}
    ],
    drawCallback: function (settings) {
        if(settings.json)
@@ -103,4 +106,6 @@ if (window.ResizeObserver)
        }, 120);
    });
    oStaticTable{{ sListIDForVarSuffix }}Resize.observe($('#{{ oUIBlock.GetId() }}')[0]);
-}
+}
+
+{% include 'base/components/datatable/row-actions/handler.js.twig' %}