public
nobgit
read
NobMail
Based on mailcow: dockerized
Languages
Repository composition by tracked source files.
PHP
49%
JavaScript
35%
HTML
9%
CSS
4%
Shell
2%
Python
1%
Lua
0%
Perl
0%
Ruby
0%
SCSS
0%
Create file
Wiki Documentation
Clone
https://nobgit.com/orgs/nobgit/nobmail.git
ssh://[email protected]:2222/orgs/nobgit/nobmail.git
Commit
[BS5] replace footable with jquery datatables (edit.twig)
6a027b70
data/web/edit.php | 1 +
data/web/js/site/edit.js | 137 +++++++++++++++++++++++-------------
data/web/templates/edit.twig | 1 +
data/web/templates/edit/domain.twig | 8 +--
4 files changed, 93 insertions(+), 54 deletions(-)Diff
diff --git a/data/web/edit.php b/data/web/edit.php
index dfba8479..742d2d64 100644
--- a/data/web/edit.php
+++ b/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';
diff --git a/data/web/js/site/edit.js b/data/web/js/site/edit.js
index 786a5995..5c9755b3 100644
--- a/data/web/js/site/edit.js
+++ b/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());
});
diff --git a/data/web/templates/edit.twig b/data/web/templates/edit.twig
index f1b9e651..1d5a4e0e 100644
--- a/data/web/templates/edit.twig
+++ b/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 }}';
diff --git a/data/web/templates/edit/domain.twig b/data/web/templates/edit/domain.twig
index 5e4ebc84..bb004191 100644
--- a/data/web/templates/edit/domain.twig
+++ b/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>