refs #22341 [fid] added datatable for better user lists

* additional stylings for datatables and implementation of language aware interface
* removed reference to bbi feature 'icon' and export button alltogether as it wasnt present before anyway
* added datatable for better user lists
* implementation of language aware interface
* changed datatables implementation, now via headscript/style, reverted various changes

co-authored by: Alexander Purr <purr@ub.uni-leipzig.de>
* re-adding reverse ordering from ref 16383
* dataTable footer search-inputs always with 100%
* set relative lang-file path

themes/fid/js/vendor/dataTables_de-DE.json

+{
+    "emptyTable": "Keine Daten in der Tabelle vorhanden",
+    "info": "_START_ bis _END_ von _TOTAL_ Einträgen",
+    "infoEmpty": "Keine Daten vorhanden",
+    "infoFiltered": "(gefiltert von _MAX_ Einträgen)",
+    "infoThousands": ".",
+    "loadingRecords": "Wird geladen ..",
+    "processing": "Bitte warten ..",
+    "paginate": {
+        "first": "Erste",
+        "previous": "Zurück",
+        "next": "Nächste",
+        "last": "Letzte"
+    },
+    "aria": {
+        "sortAscending": ": aktivieren, um Spalte aufsteigend zu sortieren",
+        "sortDescending": ": aktivieren, um Spalte absteigend zu sortieren"
+    },
+    "select": {
+        "rows": {
+            "_": "%d Zeilen ausgewählt",
+            "1": "1 Zeile ausgewählt"
+        },
+        "cells": {
+            "1": "1 Zelle ausgewählt",
+            "_": "%d Zellen ausgewählt"
+        },
+        "columns": {
+            "1": "1 Spalte ausgewählt",
+            "_": "%d Spalten ausgewählt"
+        }
+    },
+    "buttons": {
+        "print": "Drucken",
+        "copy": "Kopieren",
+        "copyTitle": "In Zwischenablage kopieren",
+        "copySuccess": {
+            "_": "%d Zeilen kopiert",
+            "1": "1 Zeile kopiert"
+        },
+        "collection": "Aktionen <span class=\"ui-button-icon-primary ui-icon ui-icon-triangle-1-s\"><\/span>",
+        "colvis": "Spaltensichtbarkeit",
+        "colvisRestore": "Sichtbarkeit wiederherstellen",
+        "copyKeys": "Drücken Sie die Taste <i>ctrl<\/i> oder <i>⌘<\/i> + <i>C<\/i> um die Tabelle<br \/>in den Zwischenspeicher zu kopieren.<br \/><br \/>Um den Vorgang abzubrechen, klicken Sie die Nachricht an oder drücken Sie auf Escape.",
+        "csv": "CSV",
+        "excel": "Excel",
+        "pageLength": {
+            "-1": "Alle Zeilen anzeigen",
+            "_": "%d Zeilen anzeigen"
+        },
+        "pdf": "PDF"
+    },
+    "autoFill": {
+        "cancel": "Abbrechen",
+        "fill": "Alle Zellen mit <i>%d<i> füllen<\/i><\/i>",
+        "fillHorizontal": "Alle horizontalen Zellen füllen",
+        "fillVertical": "Alle vertikalen Zellen füllen"
+    },
+    "decimal": ",",
+    "search": "Suche:",
+    "searchBuilder": {
+        "add": "Bedingung hinzufügen",
+        "button": {
+            "0": "Such-Baukasten",
+            "_": "Such-Baukasten (%d)"
+        },
+        "condition": "Bedingung",
+        "conditions": {
+            "date": {
+                "after": "Nach",
+                "before": "Vor",
+                "between": "Zwischen",
+                "empty": "Leer",
+                "not": "Nicht",
+                "notBetween": "Nicht zwischen",
+                "notEmpty": "Nicht leer",
+                "equals": "Gleich"
+            },
+            "number": {
+                "between": "Zwischen",
+                "empty": "Leer",
+                "equals": "Entspricht",
+                "gt": "Größer als",
+                "gte": "Größer als oder gleich",
+                "lt": "Kleiner als",
+                "lte": "Kleiner als oder gleich",
+                "not": "Nicht",
+                "notBetween": "Nicht zwischen",
+                "notEmpty": "Nicht leer"
+            },
+            "string": {
+                "contains": "Beinhaltet",
+                "empty": "Leer",
+                "endsWith": "Endet mit",
+                "equals": "Entspricht",
+                "not": "Nicht",
+                "notEmpty": "Nicht leer",
+                "startsWith": "Startet mit",
+                "notContains": "enthält nicht",
+                "notStarts": "startet nicht mit",
+                "notEnds": "endet nicht mit"
+            },
+            "array": {
+                "equals": "ist gleich",
+                "empty": "ist leer",
+                "contains": "enthält",
+                "not": "ist ungleich",
+                "notEmpty": "ist nicht leer",
+                "without": "aber nicht"
+            }
+        },
+        "data": "Daten",
+        "deleteTitle": "Filterregel entfernen",
+        "leftTitle": "Äußere Kriterien",
+        "logicAnd": "UND",
+        "logicOr": "ODER",
+        "rightTitle": "Innere Kriterien",
+        "title": {
+            "0": "Such-Baukasten",
+            "_": "Such-Baukasten (%d)"
+        },
+        "value": "Wert",
+        "clearAll": "Alle löschen"
+    },
+    "searchPanes": {
+        "clearMessage": "Leeren",
+        "collapse": {
+            "0": "Suchmasken",
+            "_": "Suchmasken (%d)"
+        },
+        "countFiltered": "{shown} ({total})",
+        "emptyPanes": "Keine Suchmasken",
+        "loadMessage": "Lade Suchmasken..",
+        "title": "Aktive Filter: %d",
+        "showMessage": "zeige Alle",
+        "collapseMessage": "Alle einklappen",
+        "count": "{total}"
+    },
+    "thousands": ".",
+    "zeroRecords": "Keine passenden Einträge gefunden",
+    "lengthMenu": "_MENU_ Zeilen anzeigen",
+    "datetime": {
+        "previous": "Vorher",
+        "next": "Nachher",
+        "hours": "Stunden",
+        "minutes": "Minuten",
+        "seconds": "Sekunden",
+        "unknown": "Unbekannt",
+        "weekdays": [
+            "Sonntag",
+            "Montag",
+            "Dienstag",
+            "Mittwoch",
+            "Donnerstag",
+            "Freitag",
+            "Samstag"
+        ],
+        "months": [
+            "Januar",
+            "Februar",
+            "März",
+            "April",
+            "Mai",
+            "Juni",
+            "Juli",
+            "August",
+            "September",
+            "Oktober",
+            "November",
+            "Dezember"
+        ]
+    },
+    "editor": {
+        "close": "Schließen",
+        "create": {
+            "button": "Neu",
+            "title": "Neuen Eintrag erstellen",
+            "submit": "Neu"
+        },
+        "edit": {
+            "button": "Ändern",
+            "title": "Eintrag ändern",
+            "submit": "ändern"
+        },
+        "remove": {
+            "button": "Löschen",
+            "title": "Löschen",
+            "submit": "Löschen",
+            "confirm": {
+                "_": "Sollen %d Zeilen gelöscht werden?",
+                "1": "Soll diese Zeile gelöscht werden?"
+            }
+        },
+        "error": {
+            "system": "Ein Systemfehler ist aufgetreten"
+        },
+        "multi": {
+            "title": "Mehrere Werte",
+            "info": "Die ausgewählten Elemente enthalten mehrere Werte für dieses Feld. Um alle Elemente für dieses Feld zu bearbeiten und auf denselben Wert zu setzen, klicken oder tippen Sie hier, andernfalls behalten diese ihre individuellen Werte bei.",
+            "restore": "Änderungen zurücksetzen",
+            "noMulti": "Dieses Feld kann nur einzeln bearbeitet werden, nicht als Teil einer Mengen-Änderung."
+        }
+    }
+}
\ No newline at end of file

themes/fid/scss/compiled.scss

@@ -52,4 +52,9 @@
   text-align: center;
   background: rgba(#000, 0.6);
   color: #fff;
+}
+
+// #22341 - dataTable footer search-inputs always with 100%
+table.dataTable tfoot input {
+  width: 100%;
 }
\ No newline at end of file

themes/fid/templates/fid/admin/list.phtml

@@ -17,27 +17,65 @@
  */
 ?>
 <?php
-/* #16383: added tablesorter - GG*/
-$this->headScript()->appendFile('jquery.tablesorter.min.js');
+$this->headScript()->appendFile('vendor/datatables.min.js');
+$this->headLink()->appendStylesheet('vendor/datatables.min.css');
+
+$language = '';
+if( $this->layout()->userLang == "de" ) {
+    $language = <<<JS
+      language: {
+        url: '{$this->url('home')}themes/fid/js/vendor/dataTables_de-DE.json'
+      },
+JS;
+}
+
 $script = <<<JS
 $(document).ready(function() {
-            // Tablesorter
-           $('table').tablesorter({
-               sortList: [[0,1]],
-               // widgets: ['zebra', 'filter']
-           });
-        });
+   $('#fid-user-list').DataTable({
+      order: [[0, 'desc']], // #16383 inverted ordering; newest user at first
+      {$language}
+      initComplete: function () {
+        this.api()
+            .columns()
+            .every(function () {
+                let column = this;
+                let title = column.footer().textContent;
+ 
+                if( title === "") { return; } // skip empty rows
+                // Create input element
+                let input = document.createElement('input');
+                input.placeholder = title;
+                column.footer().replaceChildren(input);
+ 
+                // Event listener for user input
+                input.addEventListener('keyup', () => {
+                    if (column.search() !== this.value) {
+                        column.search(input.value).draw();
+                    }
+                });
+            });
+        },
+        columnDefs: [
+            {
+                "targets": [0],
+                "orderable": false,
+                "searcheable": false
+            }
+        ]
+    });
+  });
 JS;
 ?>
 <?=$this->inlineScript(\Laminas\View\Helper\HeadScript::SCRIPT, $script, 'SET')?>
-<?=$this->translate('Users')?>
+<h1><?=$this->translate('Users')?></h1>
 <?= $this->flashmessages() ?>
+
 <?php if (!empty($this->list)): ?>
-    <table class="fid fid-admin table user-table table-striped">
+    <table class="fid fid-admin table user-table table-striped" id="fid-user-list">
       <?php /* #16383 */ ?>
       <thead>
       <tr>
-        <td><!-- empty cell --></td>
+        <th><!-- empty cell --></th>
         <th>#</th>
           <?php foreach ($fields as $fieldname): ?>
             <th><?=$this->translate('fid::' . $fieldname)?></th>
@@ -52,7 +90,17 @@ JS;
       <?php endforeach; ?>
       <?php /* #16383 */ ?>
       </tbody>
+      <tfoot>
+      <tr>
+        <th><!-- empty cell --></th>
+        <th>#</th>
+          <?php foreach ($fields as $fieldname): ?>
+            <th><?=$this->translate('fid::'.$fieldname)?></th>
+          <?php endforeach; ?>
+      </tr>
+      </tfoot>
     </table>
+    <hr>
     <div class="btn-group">
       <button type="button" class="btn btn-info"><a href="<?=$this->url('fid/admin/exportList', ['mode' => 'default'])?>" class="btn btn-primary" target="_blank"><i class="fa fa-download"></i> <?=$this->translate('fid::user_list_export')?></a></button>
       <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">