Change all lists to use ajax data source and high perf datatable + improve all consuming listing queries + add indexes on numbers for perf improvment

This commit is contained in:
osaajani 2020-09-23 03:02:13 +02:00
parent 52ac5b459b
commit b98d5a22ef
34 changed files with 1238 additions and 767 deletions

View file

@ -34,28 +34,24 @@
<h3 class="panel-title"><i class="fa fa-comments-o fa-fw"></i> Liste des discussions</h3>
</div>
<div class="panel-body">
<?php if (!$discussions) { ?>
Aucune discussion n'est en cours actuellement.
<?php } else { ?>
<div class="table-responsive">
<table class="table table-bordered table-hover table-striped datatable" id="table-discussions">
<thead>
<tr>
<th>Date du dernier message</th>
<th>Numéro</th>
</tr>
</thead>
<tbody>
<?php foreach ($discussions as $discussion) { ?>
<tr class="goto" url="<?php $this->s(\descartes\Router::url('Discussion', 'show', ['number' => $discussion['number']])); ?>">
<td><?php $this->s($discussion['at']); ?></td>
<td><?php $this->s(isset($discussion['contact']) ? $discussion['contact'] . ' (' . \controllers\internals\Tool::phone_format($discussion['number']) . ')' : \controllers\internals\Tool::phone_format($discussion['number'])); ?></td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
<?php } ?>
<div class="table-responsive">
<table class="table table-bordered table-hover table-striped datatable" id="table-discussions">
<thead>
<tr>
<th>Date du dernier message</th>
<th>Numéro</th>
</tr>
</thead>
<tbody>
<?php /*foreach ($discussions as $discussion) { ?>
<tr class="goto" url="<?php $this->s(\descartes\Router::url('Discussion', 'show', ['number' => $discussion['number']])); ?>">
<td><?php $this->s($discussion['at']); ?></td>
<td><?php $this->s(isset($discussion['contact']) ? $discussion['contact'] . ' (' . \controllers\internals\Tool::phone_format($discussion['number']) . ')' : \controllers\internals\Tool::phone_format($discussion['number'])); ?></td>
</tr>
<?php } */?>
</tbody>
</table>
</div>
</div>
</div>
</div>
@ -63,5 +59,44 @@
</div>
</div>
</div>
<script>
jQuery(document).ready(function ()
{
jQuery('.datatable').DataTable({
"pageLength": 25,
"bLengthChange": false,
"language": {
"url": HTTP_PWD + "/assets/js/datatables/french.json",
},
"columnDefs": [{
'targets': 'checkcolumn',
'orderable': false,
}],
"ajax": {
'url': '<?php echo \descartes\Router::url('Discussion', 'list_json'); ?>',
'dataSrc': 'data',
},
"columns" : [
{data: 'at', render: jQuery.fn.dataTable.render.text()},
{
data: 'number',
render: function (data, type, row, meta) {
if (row.contact_name) {
return jQuery.fn.dataTable.render.text().display(row.contact_name) + ' (' + row.number_formatted + ')';
}
return row.number_formatted;
},
},
],
"createdRow": function (row, data, dataIndex) {
jQuery(row).addClass('goto').attr('url', data.link);
},
"deferRender": true
});
});
</script>
<?php
$this->render('incs/footer');

View file

@ -136,7 +136,10 @@
var messageInputContainer = jQuery('.message-input-container').outerHeight();
var footerHeight = jQuery('footer').outerHeight();
var containerHeight = Math.floor(windowHeight - (containerPosition.top + footerHeight * 2 + messageInputContainer));
console.log(windowHeight);
console.log(containerPosition.top);
var containerHeight = Math.floor(windowHeight - (containerPosition.top + messageInputContainer) - 20); //-20 px for aesthetic
jQuery('.discussion-container').outerHeight(containerHeight);
}