refs #22341 [fid_bbi] adjustment to bbi code to allow datatables from fid core to exist

* stylistic adjustments to admin user table

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
* prevent listener action on DataTables-buttons
** solve interference of theme.js and DataTables
** prevents screen freeze caused by theme.scroll.lock() via theme.toggleSidebar()

themes/fid_bbi/js/theme.js

@@ -50,6 +50,12 @@ const theme = {
         return
       }
 
+      // #22341 prevent listener action on DataTables-buttons
+      // #22341 prevents screen freeze caused by theme.scroll.lock()
+      if (button.classList.contains('paginate_button')) {
+        return
+      }
+
       const targetId = button.getAttribute('aria-controls')
       if (!targetId) {
         return

themes/fid_bbi/scss/util/misc.scss

@@ -77,4 +77,17 @@ table {
 
 iframe#matomo {
   width: 97.5%;
-}
\ No newline at end of file
+}
+
+//#22341 boot strap select overwrite
+input[name="fid-user-list_length"], select[name="fid-user-list_length"] {
+  padding-left: g() !important;
+}
+
+table.dataTable {
+  max-width: none;
+
+  tfoot input {
+    width: 100%;
+  }
+}

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

@@ -5,27 +5,65 @@
  * replaces fa icons by SVG
  */
 
-/* #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;
 echo $this->inlineScript(\Laminas\View\Helper\HeadScript::SCRIPT, $script, 'SET');
 ?>
-<?=$this->translate('Users')?>
+<h1><?=$this->translate('Users')?></h1>
 <?= $this->flashmessages() ?>
+<a href="<?=$this->url('fid/admin/exportList')?>" class="btn btn-primary" target="_blank"><?=$this->icon('download')?> <?=$this->translate('fid::user_list_export')?></a>
 <?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>
@@ -40,8 +78,16 @@ echo $this->inlineScript(\Laminas\View\Helper\HeadScript::SCRIPT, $script, 'SET'
       <?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>
-    <a href="<?=$this->url('fid/admin/exportList')?>" class="btn btn-primary" target="_blank"><?=$this->icon('download')?> <?=$this->translate('fid::user_list_export')?></a>
 <?php else: ?>
     <?= $this->translate('fid::user_list_empty') ?>
 <?php endif; ?>

themes/fid_bbi/theme.config.php

 <?php
 return [
     'extends' => 'fid',
-    // TODO: 'favicon' => 'favicon.ico',
-    'css' => [],
+    'favicon' => 'favicon-32x32.png',
     'js' => [
         '../js/vendor/slim-select/dist/slimselect.min.js',
         'advanced_search_bbi.js',