[BS5] replace footable with jquery datatables (edit.twig)

data/web/edit.php

@@ -187,5 +187,6 @@ $js_minifier->add('/web/js/site/pwgen.js');
 $template_data['result'] = $result;
 $template_data['return_to'] = $_SESSION['return_to'];
 $template_data['lang_user'] = json_encode($lang['user']);
+$template_data['lang_datatables'] = json_encode($lang['datatables']);
 
 require_once $_SERVER['DOCUMENT_ROOT'] . '/inc/footer.inc.php';

data/web/js/site/edit.js

@@ -66,22 +66,14 @@ jQuery(function($){
     return re.test(email);
   }
   function draw_wl_policy_domain_table() {
-    ft_wl_policy_mailbox_table = FooTable.init('#wl_policy_domain_table', {
-      "columns": [
-        {"name":"chkbox","title":"","style":{"maxWidth":"40px","width":"40px"},"filterable": false,"sortable": false,"type":"html"},
-        {"name":"prefid","style":{"maxWidth":"40px","width":"40px"},"title":"ID","filterable": false,"sortable": false},
-        {"sorted": true,"name":"value","title":lang_user.spamfilter_table_rule},
-        {"name":"object","title":"Scope"}
-      ],
-      "empty": lang_user.empty,
-      "rows": $.ajax({
-        dataType: 'json',
+    $('#wl_policy_domain_table').DataTable({
+      processing: true,
+      serverSide: false,
+      language: lang_datatables,
+      ajax: {
+        type: "GET",
         url: '/api/v1/get/policy_wl_domain/' + table_for_domain,
-        jsonp: false,
-        error: function () {
-          console.log('Cannot draw mailbox policy wl table');
-        },
-        success: function (data) {
+        dataSrc: function(data){
           $.each(data, function (i, item) {
             if (!validateEmail(item.object)) {
               item.chkbox = '<input type="checkbox" data-id="policy_wl_domain" name="multi_select" value="' + item.prefid + '" />';
@@ -90,35 +82,47 @@ jQuery(function($){
               item.chkbox = '<input type="checkbox" disabled title="' + lang_user.spamfilter_table_domain_policy + '" />';
             }
           });
+
+          return data;
         }
-      }),
-      "paging": {
-        "enabled": true,
-        "limit": 5,
-        "size": pagination_size
       },
-      "sorting": {
-        "enabled": true
-      }
+      columns: [
+          {
+            // 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_user.spamfilter_table_rule,
+            data: 'value'
+          },
+          {
+            title: 'Scope',
+            data: 'object'
+          }
+      ]
     });
   }
   function draw_bl_policy_domain_table() {
-    ft_bl_policy_mailbox_table = FooTable.init('#bl_policy_domain_table', {
-      "columns": [
-        {"name":"chkbox","title":"","style":{"maxWidth":"40px","width":"40px"},"filterable": false,"sortable": false,"type":"html"},
-        {"name":"prefid","style":{"maxWidth":"40px","width":"40px"},"title":"ID","filterable": false,"sortable": false},
-        {"sorted": true,"name":"value","title":lang_user.spamfilter_table_rule},
-        {"name":"object","title":"Scope"}
-      ],
-      "empty": lang_user.empty,
-      "rows": $.ajax({
-        dataType: 'json',
+    $('#bl_policy_domain_table').DataTable({
+      processing: true,
+      serverSide: false,
+      language: lang_datatables,
+      ajax: {
+        type: "GET",
         url: '/api/v1/get/policy_bl_domain/' + table_for_domain,
-        jsonp: false,
-        error: function () {
-          console.log('Cannot draw mailbox policy bl table');
-        },
-        success: function (data) {
+        dataSrc: function(data){
           $.each(data, function (i, item) {
             if (!validateEmail(item.object)) {
               item.chkbox = '<input type="checkbox" data-id="policy_bl_domain" name="multi_select" value="' + item.prefid + '" />';
@@ -127,18 +131,55 @@ jQuery(function($){
               item.chkbox = '<input type="checkbox" disabled tooltip="' + lang_user.spamfilter_table_domain_policy + '" />';
             }
           });
+
+          return data;
         }
-      }),
-      "paging": {
-        "enabled": true,
-        "limit": 5,
-        "size": pagination_size
       },
-      "sorting": {
-        "enabled": true
-      }
+      columns: [
+          {
+            // 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_user.spamfilter_table_rule,
+            data: 'value'
+          },
+          {
+            title: 'Scope',
+            data: 'object'
+          }
+      ]
+    });
+  }
+
+  
+  // 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);
     });
   }
-  draw_wl_policy_domain_table();
-  draw_bl_policy_domain_table();
+  // Draw Table if tab is active
+  onVisible("[id^=wl_policy_domain_table]", () => draw_wl_policy_domain_table());
+  onVisible("[id^=bl_policy_domain_table]", () => draw_bl_policy_domain_table());
 });

data/web/templates/edit.twig

@@ -23,6 +23,7 @@
 
 <script type='text/javascript'>
   var lang_user = {{ lang_user|raw }};
+  var lang_datatables = {{ lang_datatables|raw }};
   var csrf_token = '{{ csrf_token }}';
   var pagination_size = '{{ pagination_size }}';
   var table_for_domain = '{{ domain }}';

data/web/templates/edit/domain.twig

@@ -151,9 +151,7 @@
                     </span>
           </div>
         </form>
-        <div class="table-responsive">
-          <table class="table table-striped table-condensed" id="wl_policy_domain_table"></table>
-        </div>
+        <table id="wl_policy_domain_table" class="table table-striped dt-responsive w-100"></table>
         <div class="mass-actions-user">
           <div class="btn-group" data-acl="{{ acl.spam_policy }}">
             <a class="btn btn-xs-half d-block d-sm-inline btn-sm btn-secondary" id="toggle_multi_select_all" data-id="policy_wl_domain" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
@@ -172,9 +170,7 @@
                     </span>
           </div>
         </form>
-        <div class="table-responsive">
-          <table class="table table-striped table-condensed" id="bl_policy_domain_table"></table>
-        </div>
+        <table id="bl_policy_domain_table" class="table table-striped dt-responsive w-100"></table>
         <div class="mass-actions-user">
           <div class="btn-group" data-acl="{{ acl.spam_policy }}">
             <a class="btn btn-xs-half d-block d-sm-inline btn-sm btn-secondary" id="toggle_multi_select_all" data-id="policy_bl_domain" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>