From 5f70b1f8223919c1caa9008efcb1fc29198938be Mon Sep 17 00:00:00 2001
From: mko <mko@scireum.de>
Date: Tue, 22 Oct 2024 15:41:57 +0200
Subject: [PATCH] Adds components for a selectable table

Fixes: OX-11093
---
 .../tycho/scripts/selectableTable.js.pasta    | 49 +++++++++++++++++++
 .../assets/tycho/scripts/tycho.js.pasta       |  1 +
 .../t/selectableTableHeaderRow.html.pasta     | 14 ++++++
 .../taglib/t/selectableTableRow.html.pasta    | 19 +++++++
 src/main/resources/web_de.properties          |  2 +
 5 files changed, 85 insertions(+)
 create mode 100644 src/main/resources/default/assets/tycho/scripts/selectableTable.js.pasta
 create mode 100644 src/main/resources/default/taglib/t/selectableTableHeaderRow.html.pasta
 create mode 100644 src/main/resources/default/taglib/t/selectableTableRow.html.pasta

diff --git a/src/main/resources/default/assets/tycho/scripts/selectableTable.js.pasta b/src/main/resources/default/assets/tycho/scripts/selectableTable.js.pasta
new file mode 100644
index 000000000..1ebb9eeb6
--- /dev/null
+++ b/src/main/resources/default/assets/tycho/scripts/selectableTable.js.pasta
@@ -0,0 +1,49 @@
+sirius.ready(function () {
+    document.querySelectorAll('.select-all-visible-table-rows-checkbox-js').forEach(function (_selectAllCheckbox) {
+        const _table = _selectAllCheckbox.closest('table');
+        // Handle changing the state of the select-all checkbox found in the table head row
+        _selectAllCheckbox.addEventListener('change', function () {
+            _table.querySelectorAll('.select-table-row-checkbox-js').forEach(_checkbox => {
+                _checkbox.checked = _selectAllCheckbox.checked;
+                toggleRowSelection(_checkbox);
+            });
+        });
+
+        _table.querySelectorAll('.select-table-row-checkbox-js').forEach(function (_checkbox) {
+            // Handle changing the state of the select-all checkbox found in the table head row
+            // When all rows are selected, the select-all checkbox should be checked as well
+            _checkbox.addEventListener('change', function () {
+                toggleRowSelection(_checkbox);
+                changeSelectAllCheckboxState(_table);
+            });
+
+            const _tr = _checkbox.closest('tr');
+            // Handle clicks on the row for convenience
+            _tr.addEventListener('click', function (event) {
+                if (event.target.tagName.toLowerCase() !== 'input' &&
+                    event.target.tagName.toLowerCase() !== 'a' &&
+                    event.target.tagName.toLowerCase() !== 'button') {
+                    _checkbox.checked = !_checkbox.checked;
+                    _checkbox.dispatchEvent(new Event('change'));
+                }
+            });
+
+        });
+    });
+
+    function toggleRowSelection(_checkbox) {
+        const _tr = _checkbox.closest('tr');
+        if (_checkbox.checked) {
+            _tr.style.backgroundColor = 'lightgray';
+        } else {
+            _tr.style.backgroundColor = '';
+        }
+    }
+
+    function changeSelectAllCheckboxState(_table) {
+        const allChecked = _table.querySelectorAll('.select-table-row-checkbox-js:checked').length === _table.querySelectorAll('.select-table-row-checkbox-js').length;
+        _table.querySelectorAll('.select-all-visible-table-rows-checkbox-js').forEach(_node => {
+            _node.checked = allChecked;
+        });
+    }
+});
diff --git a/src/main/resources/default/assets/tycho/scripts/tycho.js.pasta b/src/main/resources/default/assets/tycho/scripts/tycho.js.pasta
index 7e1b56bb3..0665d1514 100644
--- a/src/main/resources/default/assets/tycho/scripts/tycho.js.pasta
+++ b/src/main/resources/default/assets/tycho/scripts/tycho.js.pasta
@@ -10,5 +10,6 @@ ___invoke("/assets/tycho/scripts/history.js.pasta")
 ___invoke("/assets/tycho/scripts/messages.js.pasta")
 ___invoke("/assets/tycho/scripts/colors.js.pasta")
 ___invoke("/assets/tycho/scripts/charts.js.pasta")
+___invoke("/assets/tycho/scripts/selectableTable.js.pasta")
 
 <i:extensions target="tycho-script" point="tycho-script" />
diff --git a/src/main/resources/default/taglib/t/selectableTableHeaderRow.html.pasta b/src/main/resources/default/taglib/t/selectableTableHeaderRow.html.pasta
new file mode 100644
index 000000000..99f656e41
--- /dev/null
+++ b/src/main/resources/default/taglib/t/selectableTableHeaderRow.html.pasta
@@ -0,0 +1,14 @@
+<i:pragma name="description">
+    Adds a table header row to a selectable table. The row will contain a checkbox in the first column which can be used to select or deselect all rows.
+</i:pragma>
+
+<thead>
+<tr>
+    <th class="align-top">
+        <input class="cursor-pointer select-all-visible-table-rows-checkbox-js"
+               type="checkbox"
+               title="@i18n('selectableTable.row.selection.all')"/>
+    </th>
+    <i:render name="body"/>
+</tr>
+</thead>
diff --git a/src/main/resources/default/taglib/t/selectableTableRow.html.pasta b/src/main/resources/default/taglib/t/selectableTableRow.html.pasta
new file mode 100644
index 000000000..f5b97fb7a
--- /dev/null
+++ b/src/main/resources/default/taglib/t/selectableTableRow.html.pasta
@@ -0,0 +1,19 @@
+<i:arg name="entityId" type="String" description="The id of the entity to which this table row is associated with"/>
+
+
+<i:pragma name="description">
+    Renders a table row which can be selected by the user. The row will have a checkbox in the first column.
+    The checkbox visualizes the selection state of the row and can be used to select or deselect the row.
+    The table row can also be selected by simply clicking on it.
+    Note: Links and buttons in the row will not trigger the selection of the row.
+</i:pragma>
+
+<tr class="cursor-pointer">
+    <td>
+        <input class="cursor-pointer select-table-row-checkbox-js"
+               type="checkbox"
+               title="@i18n('selectableTable.row.selection')"
+               data-entity-id="@entityId"/>
+    </td>
+    <i:render name="body"/>
+</tr>
diff --git a/src/main/resources/web_de.properties b/src/main/resources/web_de.properties
index 071fff491..0ac4e4857 100644
--- a/src/main/resources/web_de.properties
+++ b/src/main/resources/web_de.properties
@@ -44,6 +44,8 @@ fileUpload.URL = URL
 fileUpload.specifyURL = URL angeben
 footer-menu.html.help = Hilfesystem
 help = Hilfe
+selectableTable.row.selection = Aus-/Abwählen
+selectableTable.row.selection.all = Alle aus-/abwählen
 table.html.empty = Keine Inhalte gefunden
 template.html.additionalActions = Weitere Aktionen
 template.html.confirmHeader = Sind Sie sicher?