Change tables to datatables

core/admin/assets/app.js

@@ -1,10 +1,17 @@
 require('./app.css');
 
 import 'select2';
+import 'admin-lte/plugins/datatables/jquery.dataTables.js';
+import 'admin-lte/plugins/datatables-bs4/js/dataTables.bootstrap4.js';
+import 'admin-lte/plugins/datatables-responsive/js/dataTables.responsive.js';
+import 'admin-lte/plugins/datatables-responsive/js/responsive.bootstrap4.js';
+
 jQuery("document").ready(function() {
     jQuery(".mailselect").select2({
         tags: true,
         tokenSeparators: [',', ' ']
-    })
     });
-
+    jQuery(".table").DataTable({
+        "responsive": true,
+    });
+});

core/admin/assets/vendor.js

@@ -14,6 +14,8 @@ import 'admin-lte/plugins/fontawesome-free/css/solid.css';
 
 // AdminLTE
 import 'admin-lte/build/scss/adminlte.scss';
+import 'admin-lte/plugins/datatables-bs4/css/dataTables.bootstrap4.css';
+import 'admin-lte/plugins/datatables-responsive/css/responsive.bootstrap4.css';
 // import 'admin-lte/build/less/AdminLTE-without-plugins.less'; // doesn't exist
 // import 'admin-lte/build/less/select2.less'; // doesn't exist
 // import 'admin-lte/build/less/skins/skin-blue.less'; // doesn't exist

core/admin/mailu/ui/templates/admin/list.html

@@ -12,10 +12,13 @@
 
 {% block content %}
 {% call macros.table() %}
+<thead>
   <tr>
     <th>{% trans %}Actions{% endtrans %}</th>
     <th>{% trans %}Email{% endtrans %}</th>
   </tr>
+</thead>
+<tbody>
   {% for admin in admins %}
   <tr>
     <td>
@@ -24,5 +27,6 @@
     <td>{{ admin }}</td>
   </tr>
   {% endfor %}
+</tbody>
 {% endcall %}
 {% endblock %}

core/admin/mailu/ui/templates/alias/list.html

@@ -14,6 +14,7 @@
 
 {% block content %}
 {% call macros.table() %}
+<thead>
   <tr>
     <th>{% trans %}Actions{% endtrans %}</th>
     <th>{% trans %}Email{% endtrans %}</th>
@@ -22,6 +23,8 @@
     <th>{% trans %}Created{% endtrans %}</th>
     <th>{% trans %}Last edit{% endtrans %}</th>
   </tr>
+</thead>
+<tbody>
   {% for alias in domain.aliases %}
   <tr>
     <td>
@@ -35,5 +38,6 @@
     <td>{{ alias.updated_at or '' }}</td>
   </tr>
   {% endfor %}
+</tbody>
 {% endcall %}
 {% endblock %}

core/admin/mailu/ui/templates/alternative/list.html

@@ -14,11 +14,14 @@
 
 {% block content %}
 {% call macros.table() %}
+<thead>
   <tr>
     <th>{% trans %}Actions{% endtrans %}</th>
     <th>{% trans %}Name{% endtrans %}</th>
     <th>{% trans %}Created{% endtrans %}</th>
   </tr>
+</thead>
+<tbody>
   {% for alternative in domain.alternatives %}
   <tr>
     <td>
@@ -28,5 +31,6 @@
     <td>{{ alternative.created_at }}</td>
   </tr>
   {% endfor %}
+</tbody>
 {% endcall %}
 {% endblock %}

core/admin/mailu/ui/templates/domain/list.html

@@ -12,6 +12,7 @@
 
 {% block content %}
 {% call macros.table() %}
+<thead>
   <tr>
     <th>{% trans %}Actions{% endtrans %}</th>
     <th>{% trans %}Manage{% endtrans %}</th>
@@ -22,17 +23,19 @@
     <th>{% trans %}Created{% endtrans %}</th>
     <th>{% trans %}Last edit{% endtrans %}</th>
   </tr>
+</thead>
+<tbody>
   {% for domain in current_user.get_managed_domains() %}
   <tr>
     <td>
       <a href="{{ url_for('.domain_details', domain_name=domain.name) }}" title="{% trans %}Details{% endtrans %}"><i class="fa fa-list"></i></a>&nbsp;
       {% if current_user.global_admin %}
-    <a href="{{ url_for('.domain_edit', domain_name=domain.name) }}" title="{% trans %}Edit{% endtrans %}"><i class="fa fa-pencil"></i></a>&nbsp;
+      <a href="{{ url_for('.domain_edit', domain_name=domain.name) }}" title="{% trans %}Edit{% endtrans %}"><i class="fas fa-pencil-alt"></i></a>&nbsp;
       <a href="{{ url_for('.domain_delete', domain_name=domain.name) }}" title="{% trans %}Delete{% endtrans %}"><i class="fa fa-trash"></i></a>&nbsp;
       {% endif %}
     </td>
     <td>
-    <a href="{{ url_for('.user_list', domain_name=domain.name) }}" title="{% trans %}Users{% endtrans %}"><i class="fa fa-envelope-o"></i></a>&nbsp;
+      <a href="{{ url_for('.user_list', domain_name=domain.name) }}" title="{% trans %}Users{% endtrans %}"><i class="far fa-envelope"></i></a>&nbsp;
       <a href="{{ url_for('.alias_list', domain_name=domain.name) }}" title="{% trans %}Aliases{% endtrans %}"><i class="fa fa-at"></i></a>&nbsp;
       <a href="{{ url_for('.manager_list', domain_name=domain.name) }}" title="{% trans %}Managers{% endtrans %}"><i class="fa fa-user"></i></a>&nbsp;
       {% if current_user.global_admin %}
@@ -47,5 +50,6 @@
     <td>{{ domain.updated_at or '' }}</td>
   </tr>
   {% endfor %}
+</tbody>
 {% endcall %}
 {% endblock %}

core/admin/mailu/ui/templates/fetch/list.html

@@ -14,6 +14,7 @@
 
 {% block content %}
 {% call macros.table() %}
+<thead>
   <tr>
     <th>{% trans %}Actions{% endtrans %}</th>
     <th>{% trans %}Endpoint{% endtrans %}</th>
@@ -24,6 +25,8 @@
     <th>{% trans %}Created{% endtrans %}</th>
     <th>{% trans %}Last edit{% endtrans %}</th>
   </tr>
+</thead>
+<tbody>
   {% for fetch in user.fetches %}
   <tr>
     <td>
@@ -39,5 +42,6 @@
     <td>{{ fetch.updated_at or '' }}</td>
   </tr>
   {% endfor %}
+</tbody>
 {% endcall %}
 {% endblock %}

core/admin/mailu/ui/templates/macros.html

@@ -86,11 +86,9 @@
 {% macro table(theme="primary") %}
 <div class="row">
   <div class="col-lg-12">
-    <div class="box box-{{ theme }}">
+    <div class="card card-{{ theme }}">
       <table class="table table-bordered">
-        <tbody>
           {{ caller() }}
-        </tbody>
       </table>
     </div>
   </div>

core/admin/mailu/ui/templates/manager/list.html

@@ -14,10 +14,13 @@
 
 {% block content %}
 {% call macros.table() %}
+<thead>
   <tr>
     <th>{% trans %}Actions{% endtrans %}</th>
     <th>{% trans %}Email{% endtrans %}</th>
   </tr>
+</thead>
+<tbody>
 {% for manager in domain.managers %}
 <tr>
   <td>
@@ -26,5 +29,6 @@
   <td>{{ manager }}</td>
 </tr>
 {% endfor %}
+</tbody>
 {% endcall %}
 {% endblock %}

core/admin/mailu/ui/templates/relay/list.html

@@ -12,6 +12,7 @@
 
 {% block content %}
 {% call macros.table() %}
+<thead>
   <tr>
     <th>{% trans %}Actions{% endtrans %}</th>
     <th>{% trans %}Domain name{% endtrans %}</th>
@@ -20,6 +21,8 @@
     <th>{% trans %}Created{% endtrans %}</th>
     <th>{% trans %}Last edit{% endtrans %}</th>
   </tr>
+</thead>
+<tbody>
   {% for relay in relays %}
   <tr>
     <td>
@@ -33,5 +36,6 @@
     <td>{{ relay.updated_at or '' }}</td>
   </tr>
   {% endfor %}
+</tbody>
 {% endcall %}
 {% endblock %}

core/admin/mailu/ui/templates/token/list.html

@@ -14,12 +14,15 @@
 
 {% block content %}
 {% call macros.table() %}
+<thead>
   <tr>
     <th>{% trans %}Actions{% endtrans %}</th>
     <th>{% trans %}Comment{% endtrans %}</th>
     <th>{% trans %}Authorized IP{% endtrans %}</th>
     <th>{% trans %}Created{% endtrans %}</th>
   </tr>
+</thead>
+<tbody>
   {% for token in user.tokens %}
   <tr>
     <td>
@@ -30,5 +33,6 @@
     <td>{{ token.created_at }}</td>
   </tr>
   {% endfor %}
+</tbody>
 {% endcall %}
 {% endblock %}

core/admin/mailu/ui/templates/user/list.html

@@ -14,6 +14,7 @@
 
 {% block content %}
 {% call macros.table() %}
+<thead>
   <tr>
     <th>{% trans %}Actions{% endtrans %}</th>
     <th>{% trans %}User settings{% endtrans %}</th>
@@ -24,10 +25,12 @@
     <th>{% trans %}Created{% endtrans %}</th>
     <th>{% trans %}Last edit{% endtrans %}</th>
   </tr>
+</thead>
+<tbody>
   {% for user in domain.users %}
   <tr {% if not user.enabled %}class="warning"{% endif %}>
     <td>
-    <a href="{{ url_for('.user_edit', user_email=user.email) }}" title="{% trans %}Edit{% endtrans %}"><i class="fa fa-pencil"></i></a>&nbsp;
+      <a href="{{ url_for('.user_edit', user_email=user.email) }}" title="{% trans %}Edit{% endtrans %}"><i class="fas fa-pencil-alt"></i></a>&nbsp;
       <a href="{{ url_for('.user_delete', user_email=user.email) }}" title="{% trans %}Delete{% endtrans %}"><i class="fa fa-trash"></i></a>
     </td>
     <td>
@@ -46,5 +49,6 @@
     <td>{{ user.updated_at or '' }}</td>
   </tr>
   {% endfor %}
+</tbody>
 {% endcall %}
 {% endblock %}