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/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' %}