Autoría | Ultima modificación | Ver Log |
<?php
$acl = $this->viewModel()->getRoot()->getVariable('acl');
$currentUser = $this->currentUserHelper();
$roleName = $currentUser->getUserTypeId();
$routeDatatable = $this->url('habits/progress');
$this->headLink()->appendStylesheet($this->basePath('assets/vendors/nprogress/nprogress.css'));
$this->inlineScript()->appendFile($this->basePath('assets/vendors/nprogress/nprogress.js'));
$this->inlineScript()->appendFile($this->basePath('assets/vendors/select2/js/select2.js'));
$this->inlineScript()->appendFile($this->basePath('assets/vendors/select2/js/i18n/es.js'));
$this->headLink()->appendStylesheet($this->basePath('assets/vendors/select2/css/select2.css'));
$columns = "var columns = new Array(); \r\n";
$columns .= "columns[0] = 'date'; \r\n";
$i = 1;
foreach($categories as $category_id => $category_name)
{
$columns .= "columns[$i] = 'cat_{$category_id}'; \r\n";
$i++;
}
$columns .= "columns[$i] = 'content'; \r\n";
$this->inlineScript()->captureStart();
echo <<<JS
jQuery( document ).ready(function( $ ) {
$columns
var page = 1;
var maxPage = 1;
$.fn.loadRecords = function() {
NProgress.start();
$.ajax({
'dataType' : 'json',
'accept' : 'application/json',
'method' : 'get',
'url' : '$routeDatatable',
'data' : {
'id' : $('#form-filter #user_id').val(),
'page' : page
}
}).done(function(response) {
if(response['success']) {
total = parseInt(response['data']['total'])
maxPage = total / 10;
if(maxPage * 10 < total) {
maxPage++;
}
if(page >= maxPage) {
$('button.btn-load-more').hide();
} else {
$('button.btn-load-more').show();
}
response['data']['items'].forEach(function(item) {
var s = '<tr>';
columns.forEach(function(column) {
s += '<td>' + item[column] + '</td>';
});
console.log(s)
$('#gridTable tbody').append(s)
});
} else {
$.fn.showError(response['data']);
}
}).fail(function( jqXHR, textStatus, errorThrown) {
$.fn.showError(textStatus);
}).always(function() {
NProgress.done();
});
return false;
}
$('body').on('click', 'button.btn-load-more', function(e) {
e.preventDefault();
page = page + 1;
$.fn.loadRecords();
});
$('#form-filter #user_id').change(function(e) {
e.preventDefault();
$('#gridTable tbody').empty();
page = 1;
maxPage = 1;
$.fn.loadRecords();
});
$('#form-filter #user_id').select2({
theme: 'bootstrap-5',
width: '100%',
//dropdownParent: $('#modal'),
});
$.fn.loadRecords();
});
JS;
$this->inlineScript()->captureEnd();
?>
<div class="container">
<div class="card">
<div class="card-header">
<h6 class="card-title">LABEL_PROGRESS</h6>
</div>
<div class="card-body">
<form name="form-filter" id="form-filter">
<div class="row">
<div class="col mt-3">
<label for="user_id" class="form-label">LABEL_USER</label>
<select name="user_id" id="user_id" class="form-control">
<?php foreach($users as $key => $value ) : ?>
<option value="<?php echo $key ?>"><?php echo $value ?></option>
<?php endforeach; ?>
</select>
</div>
</div>
</form>
<div class="row">
<div class="col mt-3">
<table id="gridTable" class="table table-bordered">
<thead>
<tr>
<th>LABEL_DATE</th>
<?php foreach($categories as $category_id => $category_name) : ?>
<th><?php echo $category_name ?></th>
<?php endforeach; ?>
<th>LABEL_CONTENT</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
<div class="card-footer text-right">
<button type="button" style="display: none" class="btn btn-info btn-load-more"><i class="fa fa-sync"></i> LABEL_LOAD_MORE </button>
</div>
</div>
</div>