[BS5] Replace FooTable with jquery Datatables

data/web/js/site/mailbox.js

@@ -1179,10 +1179,6 @@ jQuery(function($){
     });
   };
 
-  $('body').on('click', 'span.footable-toggle', function () {
-    event.stopPropagation();
-  })
-
   // detect element visibility changes
   function onVisible(element, callback) {
     $(element).ready(function() {

data/web/js/site/user.js

@@ -128,23 +128,15 @@ jQuery(function($){
   }
 
   function draw_tla_table() {
-    ft_tla_table = FooTable.init('#tla_table', {
+    $('#tla_table').DataTable({
-      "columns": [
+      processing: true,
-        {"name":"chkbox","title":"","style":{"min-width":"60px","width":"60px","text-align":"center"},"filterable": false,"sortable": false,"type":"html"},
+      serverSide: false,
-        {"name":"address","title":lang.alias},
+      language: lang_datatables,
-        {"name":"validity","formatter":function unix_time_format(tm) { var date = new Date(tm ? tm * 1000 : 0); return date.toLocaleDateString(undefined, {year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit", second: "2-digit"});},"title":lang.alias_valid_until,"style":{"width":"170px"}},
+      ajax: {
-        {"sorted": true,"sortValue": function(value){res = new Date(value);return res.getTime();},"direction":"DESC","name":"created","formatter":function date_format(datetime) { var date = new Date(datetime.replace(/-/g, "/")); return date.toLocaleDateString(undefined, {year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit", second: "2-digit"});},"title":lang.created_on,"style":{"width":"170px"}},
+        type: "GET",
-        {"name":"action","filterable": false,"sortable": false,"style":{"text-align":"right","min-width":"220px","width":"220px"},"type":"html","title":lang.action,"breakpoints":"xs sm"}
+        url: "/api/v1/get/time_limited_aliases",
-      ],
+        dataSrc: function(data){
-      "empty": lang.empty,
+          console.log(data);
-      "rows": $.ajax({
-        dataType: 'json',
-        url: '/api/v1/get/time_limited_aliases',
-        jsonp: false,
-        error: function () {
-          console.log('Cannot draw tla table');
-        },
-        success: function (data) {
           $.each(data, function (i, item) {
             if (acl_data.spam_alias === 1) {
               item.action = '<div class="btn-group footable-actions">' +
@@ -158,46 +150,52 @@ jQuery(function($){
               item.action = '<span>-</span>';
             }
           });
+
+          return data;
         }
-      }),
-      "paging": {
-        "enabled": true,
-        "limit": 5,
-        "size": pagination_size
       },
-      "state": {"enabled": true},
+      columns: [          
-      "sorting": {
+        {
-        "enabled": true
+          // placeholder, so checkbox will not block child row toggle
+          title: '',
+          data: null,
+          searchable: false,
+          orderable: false,
+          defaultContent: ''
         },
-      "toggleSelector": "table tbody span.footable-toggle"
+        {
+          title: '',
+          data: 'chkbox'
+        },
+        {
+          title: lang.alias,
+          data: 'address'
+        },
+        {
+          title: lang.alias_valid_until,
+          data: 'validity',
+          render: function (data, type) {
+            var date = new Date(data ? data * 1000 : 0); 
+            return date.toLocaleDateString(undefined, {year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit", second: "2-digit"});
+          }
+        },
+        {
+          title: lang.action,
+          data: 'action'
+        }
+      ]
     });
   }
   function draw_sync_job_table() {
-    ft_syncjob_table = FooTable.init('#sync_job_table', {
+    $('#sync_job_table').DataTable({
-      "columns": [
+      processing: true,
-        {"name":"chkbox","title":"","style":{"min-width":"60px","width":"60px","text-align":"center"},"filterable": false,"sortable": false,"type":"html"},
+      serverSide: false,
-        {"sorted": true,"name":"id","title":"ID","style":{"maxWidth":"60px","width":"60px","text-align":"center"}},
+      language: lang_datatables,
-        {"name":"server_w_port","title":"Server","breakpoints":"xs sm md","style":{"word-break":"break-all"}},
+      ajax: {
-        {"name":"enc1","title":lang.encryption,"breakpoints":"all"},
+        type: "GET",
-        {"name":"user1","title":lang.username},
-        {"name":"exclude","title":lang.excludes,"breakpoints":"all"},
-        {"name":"mins_interval","title":lang.interval + " (min)","breakpoints":"all"},
-        {"name":"last_run","title":lang.last_run,"breakpoints":"xs sm md"},
-        {"name":"exit_status","filterable": false,"title":lang.syncjob_last_run_result},
-        {"name":"log","title":"Log"},
-        {"name":"active","filterable": false,"style":{"maxWidth":"70px","width":"70px"},"title":lang.active,"formatter": function(value){return 1==value?'<i class="bi bi-check-lg"></i>':0==value&&'<i class="bi bi-x-lg"></i>';}},
-        {"name":"is_running","filterable": false,"style":{"maxWidth":"120px","width":"100px"},"title":lang.status},
-        {"name":"action","filterable": false,"sortable": false,"style":{"text-align":"right","min-width":"260px","width":"260px"},"type":"html","title":lang.action,"breakpoints":"xs sm"}
-      ],
-      "empty": lang.empty,
-      "rows": $.ajax({
-        dataType: 'json',
         url: '/api/v1/get/syncjobs/' + encodeURIComponent(mailcow_cc_username) + '/no_log',
-        jsonp: false,
+        dataSrc: function(data){
-        error: function () {
+          console.log(data);
-          console.log('Cannot draw sync job table');
-        },
-        success: function (data) {
           $.each(data, function (i, item) {
             item.user1 = escapeHtml(item.user1);
             item.log = '<a href="#syncjobLogModal" data-bs-toggle="modal" data-syncjob-id="' + item.id + '">' + lang.open_logs + '</a>'
@@ -239,39 +237,87 @@ jQuery(function($){
             }
             item.exit_status = item.success + ' ' + item.exit_status;
           });
+
+          return data;
         }
-      }),
-      "paging": {
-        "enabled": true,
-        "limit": 5,
-        "size": pagination_size
       },
-      "state": {"enabled": true},
+      columns: [          
-      "sorting": {
+        {
-        "enabled": true
+          // placeholder, so checkbox will not block child row toggle
+          title: '',
+          data: null,
+          searchable: false,
+          orderable: false,
+          defaultContent: ''
         },
-      "toggleSelector": "table tbody span.footable-toggle"
+        {
+          title: '',
+          data: 'chkbox'
+        },
+        {
+          title: 'ID',
+          data: 'id'
+        },
+        {
+          title: 'Server',
+          data: 'server_w_port'
+        },
+        {
+          title: lang.encryption,
+          data: 'enc1'
+        },
+        {
+          title: lang.username,
+          data: 'user1'
+        },
+        {
+          title: lang.excludes,
+          data: 'exclude'
+        },
+        {
+          title: lang.interval + " (min)",
+          data: 'mins_interval'
+        },
+        {
+          title: lang.last_run,
+          data: 'last_run'
+        },
+        {
+          title: lang.syncjob_last_run_result,
+          data: 'exit_status'
+        },
+        {
+          title: 'Log',
+          data: 'log'
+        },
+        {
+          title: lang.active,
+          data: 'active',
+          render: function (data, type) {
+            return 1==data?'<i class="bi bi-check-lg"></i>':0==data&&'<i class="bi bi-x-lg"></i>'
+          }
+        },
+        {
+          title: lang.status,
+          data: 'is_running'
+        },
+        {
+          title: lang.action,
+          data: 'action'
+        }
+      ]
     });
   }
   function draw_app_passwd_table() {
-    ft_apppasswd_table = FooTable.init('#app_passwd_table', {
+    $('#app_passwd_table').DataTable({
-      "columns": [
+      processing: true,
-        {"name":"chkbox","title":"","style":{"maxWidth":"60px","width":"60px","text-align":"center"},"filterable": false,"sortable": false,"type":"html"},
+      serverSide: false,
-        {"sorted": true,"name":"id","title":"ID","style":{"maxWidth":"60px","width":"60px","text-align":"center"}},
+      language: lang_datatables,
-        {"name":"name","title":lang.app_name},
+      ajax: {
-        {"name":"protocols","title":lang.allowed_protocols},
+        type: "GET",
-        {"name":"active","filterable": false,"style":{"maxWidth":"70px","width":"70px"},"title":lang.active,"formatter": function(value){return 1==value?'<i class="bi bi-check-lg"></i>':0==value&&'<i class="bi bi-x-lg"></i>';}},
-        {"name":"action","filterable": false,"sortable": false,"style":{"text-align":"right","min-width":"220px","width":"220px"},"type":"html","title":lang.action,"breakpoints":"xs sm"}
-      ],
-      "empty": lang.empty,
-      "rows": $.ajax({
-        dataType: 'json',
         url: '/api/v1/get/app-passwd/all',
-        jsonp: false,
+        dataSrc: function(data){
-        error: function () {
+          console.log(data);
-          console.log('Cannot draw app passwd table');
-        },
-        success: function (data) {
           $.each(data, function (i, item) {
             item.name = escapeHtml(item.name)
             item.protocols = []
@@ -294,37 +340,59 @@ jQuery(function($){
               item.chkbox = '<input type="checkbox" disabled />';
             }
           });
+
+          return data;
         }
-      }),
-      "paging": {
-        "enabled": true,
-        "limit": 5,
-        "size": pagination_size
       },
-      "state": {"enabled": true},
+      columns: [          
-      "sorting": {
+        {
-        "enabled": true
+          // placeholder, so checkbox will not block child row toggle
+          title: '',
+          data: null,
+          searchable: false,
+          orderable: false,
+          defaultContent: ''
         },
-      "toggleSelector": "table tbody span.footable-toggle"
+        {
+          title: '',
+          data: 'chkbox'
+        },
+        {
+          title: 'ID',
+          data: 'id'
+        },
+        {
+          title: lang.app_name,
+          data: 'name'
+        },
+        {
+          title: lang.allowed_protocols,
+          data: 'protocols'
+        },
+        {
+          title: lang.active,
+          data: 'active',
+          render: function (data, type) {
+            return 1==data?'<i class="bi bi-check-lg"></i>':0==data&&'<i class="bi bi-x-lg"></i>'
+          }
+        },
+        {
+          title: lang.action,
+          data: 'action'
+        }
+      ]
     });
   }
   function draw_wl_policy_mailbox_table() {
-    ft_wl_policy_mailbox_table = FooTable.init('#wl_policy_mailbox_table', {
+    $('#wl_policy_mailbox_table').DataTable({
-      "columns": [
+      processing: true,
-        {"name":"chkbox","title":"","style":{"maxWidth":"40px","width":"40px","text-align":"center"},"filterable": false,"sortable": false,"type":"html"},
+      serverSide: false,
-        {"name":"prefid","style":{"maxWidth":"40px","width":"40px"},"title":"ID","filterable": false,"sortable": false},
+      language: lang_datatables,
-        {"sorted": true,"name":"value","title":lang.spamfilter_table_rule},
+      ajax: {
-        {"name":"object","title":"Scope"}
+        type: "GET",
-      ],
-      "empty": lang.empty,
-      "rows": $.ajax({
-        dataType: 'json',
         url: '/api/v1/get/policy_wl_mailbox',
-        jsonp: false,
+        dataSrc: function(data){
-        error: function () {
+          console.log(data);
-          console.log('Cannot draw mailbox policy wl table');
-        },
-        success: function (data) {
           $.each(data, function (i, item) {
             if (validateEmail(item.object)) {
               item.chkbox = '<input type="checkbox" data-id="policy_wl_mailbox" name="multi_select" value="' + item.prefid + '" />';
@@ -336,36 +404,48 @@ jQuery(function($){
               item.chkbox = '<input type="checkbox" disabled />';
             }
           });
+
+          return data;
         }
-      }),
-      "state": {"enabled": true},
-      "paging": {
-        "enabled": true,
-        "limit": 5,
-        "size": pagination_size
       },
-      "sorting": {
+      columns: [          
-        "enabled": true
+        {
+          // placeholder, so checkbox will not block child row toggle
+          title: '',
+          data: null,
+          searchable: false,
+          orderable: false,
+          defaultContent: ''
+        },
+        {
+          title: '',
+          data: 'chkbox'
+        },
+        {
+          title: 'ID',
+          data: 'prefid'
+        },
+        {
+          title: lang.spamfilter_table_rule,
+          data: 'name'
+        },
+        {
+          title:'Scope',
+          data: 'object'
         }
+      ]
     });
   }
   function draw_bl_policy_mailbox_table() {
-    ft_bl_policy_mailbox_table = FooTable.init('#bl_policy_mailbox_table', {
+    $('#bl_policy_mailbox_table').DataTable({
-      "columns": [
+      processing: true,
-        {"name":"chkbox","title":"","style":{"maxWidth":"40px","width":"40px","text-align":"center"},"filterable": false,"sortable": false,"type":"html"},
+      serverSide: false,
-        {"name":"prefid","style":{"maxWidth":"40px","width":"40px"},"title":"ID","filterable": false,"sortable": false},
+      language: lang_datatables,
-        {"sorted": true,"name":"value","title":lang.spamfilter_table_rule},
+      ajax: {
-        {"name":"object","title":"Scope"}
+        type: "GET",
-      ],
-      "empty": lang.empty,
-      "rows": $.ajax({
-        dataType: 'json',
         url: '/api/v1/get/policy_bl_mailbox',
-        jsonp: false,
+        dataSrc: function(data){
-        error: function () {
+          console.log(data);
-          console.log('Cannot draw mailbox policy bl table');
-        },
-        success: function (data) {
           $.each(data, function (i, item) {
             if (validateEmail(item.object)) {
               item.chkbox = '<input type="checkbox" data-id="policy_bl_mailbox" name="multi_select" value="' + item.prefid + '" />';
@@ -377,31 +457,39 @@ jQuery(function($){
               item.chkbox = '<input type="checkbox" disabled />';
             }
           });
+
+          return data;
         }
-      }),
-      "paging": {
-        "enabled": true,
-        "limit": 5,
-        "size": pagination_size
       },
-      "state": {"enabled": true},
+      columns: [          
-      "sorting": {
+        {
-        "enabled": true
+          // placeholder, so checkbox will not block child row toggle
+          title: '',
+          data: null,
+          searchable: false,
+          orderable: false,
+          defaultContent: ''
+        },
+        {
+          title: '',
+          data: 'chkbox'
+        },
+        {
+          title: 'ID',
+          data: 'prefid'
+        },
+        {
+          title: lang.spamfilter_table_rule,
+          data: 'name'
+        },
+        {
+          title:'Scope',
+          data: 'object'
         }
+      ]
     });
   }
 
-  $('body').on('click', 'span.footable-toggle', function () {
-    event.stopPropagation();
-  })
-
-  draw_sync_job_table();
-  draw_app_passwd_table();
-  draw_tla_table();
-  draw_wl_policy_mailbox_table();
-  draw_bl_policy_mailbox_table();
-  last_logins('get');
-
   // FIDO2 friendly name modal
   $('#fido2ChangeFn').on('show.bs.modal', function (e) {
     rename_link = $(e.relatedTarget)
@@ -433,4 +521,29 @@ jQuery(function($){
   $('#userFilterModal').on('hidden.bs.modal', function () {
     $('#user_sieve_filter').text(lang.loading);
   });
+
+  // detect element visibility changes
+  function onVisible(element, callback) {
+    $(element).ready(function() {
+      element_object = document.querySelector(element)
+      new IntersectionObserver((entries, observer) => {
+        entries.forEach(entry => {
+          if(entry.intersectionRatio > 0) {
+            callback(element_object);
+            observer.disconnect();
+          }
+        });
+      }).observe(element_object);
+    });
+  }
+
+  // Load only if the tab is visible
+  onVisible("[id^=SpamAliases]", () => draw_tla_table());
+  onVisible("[id^=Spamfilter]", () => { 
+    draw_wl_policy_mailbox_table();
+    draw_bl_policy_mailbox_table();
+  });
+  onVisible("[id^=Syncjobs]", () => draw_sync_job_table());
+  onVisible("[id^=AppPasswds]", () => draw_app_passwd_table());
+  last_logins('get');
 });

data/web/templates/user/AppPasswds.twig

@@ -1,4 +1,7 @@
 <div role="tabpanel" class="tab-pane fade" id="AppPasswds" role="tabpanel" aria-labelledby="AppPasswds">
+  <div class="card">
+    <div class="card-header">{{ lang.user.app_passwds }}</div>
+    <div class="card-body">
       <p>{{ lang.user.app_hint|raw }}</p>
       <div class="table-responsive">
         <table class="table table-striped" id="app_passwd_table"></table>
@@ -20,4 +23,6 @@
           </div>
         </div>
       </div>
+    </div>
+  </div>
 </div>

data/web/templates/user/Pushover.twig

@@ -1,4 +1,7 @@
 <div role="tabpanel" class="tab-pane fade" id="Pushover" role="tabpanel" aria-labelledby="Pushover">
+  <div class="card">
+    <div class="card-header">Pushover API</div>
+    <div class="card-body">
       <form data-id="pushover" class="form well" method="post">
         <input type="hidden" value="0" name="evaluate_x_prio">
         <input type="hidden" value="0" name="only_x_prio">
@@ -75,4 +78,6 @@
           </div>
         </div>
       </form>
+    </div>
+  </div>
 </div>

data/web/templates/user/SpamAliases.twig

@@ -1,9 +1,10 @@
 <div role="tabpanel" class="tab-pane fade" id="SpamAliases" role="tabpanel" aria-labelledby="SpamAliases">
+  <div class="card">
+    <div class="card-header">{{ lang.user.spam_aliases }}</div>
+    <div class="card-body">
       <div class="row">
         <div class="col-md-12 col-sm-12 col-12">
-      <div class="table-responsive">
+          <table id="tla_table" class="table table-striped dt-responsive w-100"></table>
-        <table class="table table-striped" id="tla_table"></table>
-      </div>
         </div>
       </div>
       <div class="mass-actions-user">
@@ -36,4 +37,6 @@
           </div>
         </div>
       </div>
+    </div>
+  </div>
 </div>

data/web/templates/user/Spamfilter.twig

@@ -1,4 +1,7 @@
 <div role="tabpanel" class="tab-pane fade" id="Spamfilter" role="tabpanel" aria-labelledby="Spamfilter">
+  <div class="card">
+    <div class="card-header">{{ lang.user.spamfilter }}</div>
+    <div class="card-body">
       <h4>{{ lang.user.spamfilter_behavior }}</h4>
       <div class="row">
         <div class="col-sm-12">
@@ -74,4 +77,6 @@
           </div>
         </div>
       </div>
+    </div>
+  </div>
 </div>

data/web/templates/user/Syncjobs.twig

@@ -1,7 +1,8 @@
 <div role="tabpanel" class="tab-pane fade" id="Syncjobs" role="tabpanel" aria-labelledby="Syncjobs">
-  <div class="table-responsive">
+  <div class="card">
-    <table class="table table-striped" id="sync_job_table"></table>
+    <div class="card-header">{{ lang.user.sync_jobs }}</div>
-  </div>
+    <div class="card-body">
+      <table id="sync_job_table" class="table table-striped dt-responsive w-100"></table>
       <div class="mass-actions-user">
         <div class="btn-group" data-acl="{{ acl.syncjobs }}">
           <div class="btn-group">
@@ -19,4 +20,6 @@
           </div>
         </div>
       </div>
+    </div>
+  </div>
 </div>

data/web/templates/user_domainadmin_common.twig

@@ -7,4 +7,5 @@
   var pagination_size = '{{ pagination_size }}';
   var mailcow_cc_username = '{{ mailcow_cc_username }}';
   var user_spam_score = [{{ user_spam_score }}];
+  var lang_datatables = {{ lang_datatables|raw }};
 </script>

data/web/user.php

@@ -88,6 +88,7 @@ elseif (isset($_SESSION['mailcow_cc_role']) && $_SESSION['mailcow_cc_role'] == '
     'pushover_data' => $pushover_data,
     'lang_user' => json_encode($lang['user']),
     'number_of_app_passwords' => $number_of_app_passwords,
+    'lang_datatables' => json_encode($lang['datatables']),
   ];
 }