Merge pull request #1472 from scireum/feature/mko/OX-11093-3

Selectable Table - Improves the UX by displaying the only applicable option in the titles
scireum · Nov 5, 2024 · 889188c · 889188c
2 parents 246563c + 98de432
commit 889188c
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 3 deletions.
diff --git a/src/main/resources/default/assets/tycho/scripts/selectableTable.js.pasta b/src/main/resources/default/assets/tycho/scripts/selectableTable.js.pasta
@@ -12,6 +12,7 @@ sirius.ready(function () {
         const _table = _selectAllCheckbox.closest('table');
         // Handle changing the state of the select-all checkbox found in the table head row
         _selectAllCheckbox.addEventListener('change', function () {
+            toggleSelectAllCheckboxTitle(_selectAllCheckbox);
             _table.querySelectorAll('.select-table-row-checkbox-js').forEach(_checkbox => {
                 _checkbox.checked = _selectAllCheckbox.checked;
                 toggleRowSelection(_checkbox);
@@ -43,16 +44,27 @@ sirius.ready(function () {
     function toggleRowSelection(_checkbox) {
         const _row = _checkbox.closest('tr');
         if (_checkbox.checked) {
+            _checkbox.title = "___i18n('selectableTable.row.deselection')";
             _row.classList.add('bg-sirius-blue-faint');
         } else {
+            _checkbox.title = "___i18n('selectableTable.row.selection')";
             _row.classList.remove('bg-sirius-blue-faint');
         }
     }
 
+    function toggleSelectAllCheckboxTitle(_selectAllCheckbox) {
+        if (_selectAllCheckbox.checked) {
+            _selectAllCheckbox.title = "___i18n('selectableTable.all.deselection')";
+        } else {
+            _selectAllCheckbox.title = "___i18n('selectableTable.all.selection')";
+        }
+    }
+
     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(_selectAllCheckbox => {
             _selectAllCheckbox.checked = allChecked;
+            toggleSelectAllCheckboxTitle(_selectAllCheckbox);
         });
     }
 });
diff --git a/src/main/resources/default/taglib/t/selectableTableHeaderRow.html.pasta b/src/main/resources/default/taglib/t/selectableTableHeaderRow.html.pasta
@@ -7,7 +7,7 @@
     <th class="align-top">
         <input class="cursor-pointer select-all-visible-table-rows-checkbox-js"
                type="checkbox"
-               title="@i18n('selectableTable.row.selection.all')"/>
+               title="@i18n('selectableTable.all.selection')"/>
     </th>
     <i:render name="body"/>
 </tr>

diff --git a/src/main/resources/web_de.properties b/src/main/resources/web_de.properties
@@ -44,8 +44,10 @@ 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
+selectableTable.all.deselection = Alle abwählen
+selectableTable.all.selection = Alle auswählen
+selectableTable.row.deselection = Abwählen
+selectableTable.row.selection = Auswählen
 table.html.empty = Keine Inhalte gefunden
 template.html.additionalActions = Weitere Aktionen
 template.html.confirmHeader = Sind Sie sicher?