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,17 +12,21 @@
 
 {% block content %}
 {% call macros.table() %}
-<tr>
+<thead>
+  <tr>
     <th>{% trans %}Actions{% endtrans %}</th>
     <th>{% trans %}Email{% endtrans %}</th>
-</tr>
-{% for admin in admins %}
-<tr>
+  </tr>
+</thead>
+<tbody>
+  {% for admin in admins %}
+  <tr>
     <td>
       <a href="{{ url_for('.admin_delete', admin=admin.email) }}" title="{% trans %}Delete{% endtrans %}"><i class="fa fa-trash"></i></a>
     </td>
     <td>{{ admin }}</td>
-</tr>
-{% endfor %}
+  </tr>
+  {% endfor %}
+</tbody>
 {% endcall %}
 {% endblock %}

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

@@ -14,16 +14,19 @@
 
 {% block content %}
 {% call macros.table() %}
-<tr>
+<thead>
+  <tr>
     <th>{% trans %}Actions{% endtrans %}</th>
     <th>{% trans %}Email{% endtrans %}</th>
     <th>{% trans %}Destination{% endtrans %}</th>
     <th>{% trans %}Comment{% endtrans %}</th>
     <th>{% trans %}Created{% endtrans %}</th>
     <th>{% trans %}Last edit{% endtrans %}</th>
-</tr>
-{% for alias in domain.aliases %}
-<tr>
+  </tr>
+</thead>
+<tbody>
+  {% for alias in domain.aliases %}
+  <tr>
     <td>
       <a href="{{ url_for('.alias_edit', alias=alias.email) }}" title="{% trans %}Edit{% endtrans %}"><i class="fa fa-pencil"></i></a>&nbsp;
       <a href="{{ url_for('.alias_delete', alias=alias.email) }}" title="{% trans %}Delete{% endtrans %}"><i class="fa fa-trash"></i></a>
@@ -33,7 +36,8 @@
     <td>{{ alias.comment or '' }}</td>
     <td>{{ alias.created_at }}</td>
     <td>{{ alias.updated_at or '' }}</td>
-</tr>
-{% endfor %}
+  </tr>
+  {% endfor %}
+</tbody>
 {% endcall %}
 {% endblock %}

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

@@ -14,19 +14,23 @@
 
 {% block content %}
 {% call macros.table() %}
-<tr>
+<thead>
+  <tr>
     <th>{% trans %}Actions{% endtrans %}</th>
     <th>{% trans %}Name{% endtrans %}</th>
     <th>{% trans %}Created{% endtrans %}</th>
-</tr>
-{% for alternative in domain.alternatives %}
-<tr>
+  </tr>
+</thead>
+<tbody>
+  {% for alternative in domain.alternatives %}
+  <tr>
     <td>
       <a href="{{ url_for('.alternative_delete', alternative=alternative.name) }}" title="{% trans %}Delete{% endtrans %}"><i class="fa fa-trash"></i></a>
     </td>
     <td>{{ alternative }}</td>
     <td>{{ alternative.created_at }}</td>
-</tr>
-{% endfor %}
+  </tr>
+  {% endfor %}
+</tbody>
 {% endcall %}
 {% endblock %}

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

@@ -12,7 +12,8 @@
 
 {% block content %}
 {% call macros.table() %}
-<tr>
+<thead>
+  <tr>
     <th>{% trans %}Actions{% endtrans %}</th>
     <th>{% trans %}Manage{% endtrans %}</th>
     <th>{% trans %}Domain name{% endtrans %}</th>
@@ -21,18 +22,20 @@
     <th>{% trans %}Comment{% endtrans %}</th>
     <th>{% trans %}Created{% endtrans %}</th>
     <th>{% trans %}Last edit{% endtrans %}</th>
-</tr>
-{% for domain in current_user.get_managed_domains() %}
-<tr>
+  </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 %}
@@ -45,7 +48,8 @@
     <td>{{ domain.comment or '' }}</td>
     <td>{{ domain.created_at }}</td>
     <td>{{ domain.updated_at or '' }}</td>
-</tr>
-{% endfor %}
+  </tr>
+  {% endfor %}
+</tbody>
 {% endcall %}
 {% endblock %}

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

@@ -14,7 +14,8 @@
 
 {% block content %}
 {% call macros.table() %}
-<tr>
+<thead>
+  <tr>
     <th>{% trans %}Actions{% endtrans %}</th>
     <th>{% trans %}Endpoint{% endtrans %}</th>
     <th>{% trans %}Username{% endtrans %}</th>
@@ -23,9 +24,11 @@
     <th>{% trans %}Status{% endtrans %}</th>
     <th>{% trans %}Created{% endtrans %}</th>
     <th>{% trans %}Last edit{% endtrans %}</th>
-</tr>
-{% for fetch in user.fetches %}
-<tr>
+  </tr>
+</thead>
+<tbody>
+  {% for fetch in user.fetches %}
+  <tr>
     <td>
       <a href="{{ url_for('.fetch_edit', fetch_id=fetch.id) }}" title="{% trans %}Edit{% endtrans %}"><i class="fa fa-pencil"></i></a>&nbsp;
       <a href="{{ url_for('.fetch_delete', fetch_id=fetch.id) }}" title="{% trans %}Delete{% endtrans %}"><i class="fa fa-trash"></i></a>
@@ -37,7 +40,8 @@
     <td>{{ fetch.error or '-' }}</td>
     <td>{{ fetch.created_at }}</td>
     <td>{{ fetch.updated_at or '' }}</td>
-</tr>
-{% endfor %}
+  </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() %}
-<tr>
+<thead>
+  <tr>
     <th>{% trans %}Actions{% endtrans %}</th>
     <th>{% trans %}Email{% endtrans %}</th>
-</tr>
+  </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,18 +12,21 @@
 
 {% block content %}
 {% call macros.table() %}
-<tr>
+<thead>
+  <tr>
     <th>{% trans %}Actions{% endtrans %}</th>
     <th>{% trans %}Domain name{% endtrans %}</th>
     <th>{% trans %}Remote host{% endtrans %}</th>
     <th>{% trans %}Comment{% endtrans %}</th>
     <th>{% trans %}Created{% endtrans %}</th>
     <th>{% trans %}Last edit{% endtrans %}</th>
-</tr>
-{% for relay in relays %}
-<tr>
+  </tr>
+</thead>
+<tbody>
+  {% for relay in relays %}
+  <tr>
     <td>
-<a href="{{ url_for('.relay_edit', relay_name=relay.name) }}" title="{% trans %}Edit{% endtrans %}"><i class="fa fa-pencil"></i></a>&nbsp;
+      <a href="{{ url_for('.relay_edit', relay_name=relay.name) }}" title="{% trans %}Edit{% endtrans %}"><i class="fa fa-pencil"></i></a>&nbsp;
       <a href="{{ url_for('.relay_delete', relay_name=relay.name) }}" title="{% trans %}Delete{% endtrans %}"><i class="fa fa-trash"></i></a>&nbsp;
     </td>
     <td>{{ relay.name }}</td>
@@ -31,7 +34,8 @@
     <td>{{ relay.comment or '' }}</td>
     <td>{{ relay.created_at }}</td>
     <td>{{ relay.updated_at or '' }}</td>
-</tr>
-{% endfor %}
+  </tr>
+  {% endfor %}
+</tbody>
 {% endcall %}
 {% endblock %}

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

@@ -14,21 +14,25 @@
 
 {% block content %}
 {% call macros.table() %}
-<tr>
+<thead>
+  <tr>
     <th>{% trans %}Actions{% endtrans %}</th>
     <th>{% trans %}Comment{% endtrans %}</th>
     <th>{% trans %}Authorized IP{% endtrans %}</th>
     <th>{% trans %}Created{% endtrans %}</th>
-</tr>
-{% for token in user.tokens %}
-<tr>
+  </tr>
+</thead>
+<tbody>
+  {% for token in user.tokens %}
+  <tr>
     <td>
       <a href="{{ url_for('.token_delete', token_id=token.id) }}" title="{% trans %}Delete{% endtrans %}"><i class="fa fa-trash"></i></a>
     </td>
     <td>{{ token.comment }}</td>
     <td>{{ token.ip or "any" }}</td>
     <td>{{ token.created_at }}</td>
-</tr>
-{% endfor %}
+  </tr>
+  {% endfor %}
+</tbody>
 {% endcall %}
 {% endblock %}

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

@@ -14,7 +14,8 @@
 
 {% block content %}
 {% call macros.table() %}
-<tr>
+<thead>
+  <tr>
     <th>{% trans %}Actions{% endtrans %}</th>
     <th>{% trans %}User settings{% endtrans %}</th>
     <th>{% trans %}Email{% endtrans %}</th>
@@ -23,11 +24,13 @@
     <th>{% trans %}Comment{% endtrans %}</th>
     <th>{% trans %}Created{% endtrans %}</th>
     <th>{% trans %}Last edit{% endtrans %}</th>
-</tr>
-{% for user in domain.users %}
-<tr {% if not user.enabled %}class="warning"{% endif %}>
+  </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>
@@ -44,7 +47,8 @@
     <td>{{ user.comment or '-' }}</td>
     <td>{{ user.created_at }}</td>
     <td>{{ user.updated_at or '' }}</td>
-</tr>
-{% endfor %}
+  </tr>
+  {% endfor %}
+</tbody>
 {% endcall %}
 {% endblock %}