Rev 4938 | Rev 15389 | Ir a la última revisión | Autoría | Comparar con el anterior | Ultima modificación | Ver Log |
<?php
$acl = $this->viewModel()->getRoot()->getVariable('acl');
$currentUser = $this->currentUserHelper();
$routeReports = $this->url('microlearning/reports/progress');
$roleName = $currentUser->getUserTypeId();
$this->headLink()->appendStylesheet($this->basePath('plugins/nprogress/nprogress.css'));
$this->inlineScript()->appendFile($this->basePath('plugins/nprogress/nprogress.js'));
$this->inlineScript()->appendFile($this->basePath('plugins/jsrender/jsrender.js'));
$this->headStyle()->captureStart();
echo <<<CSS
#tableStudents {
display: flex;
flex-flow: column;
width: 100%;
}
#tableStudents thead {
flex: 0 0 auto;
}
#tableStudents tbody {
flex: 1 1 auto;
display: block;
overflow-y: auto;
overflow-x: hidden;
}
#tableStudents tr {
width: 100%;
display: table;
table-layout: fixed;
}
CSS;
$this->headStyle()->captureEnd();
$this->inlineScript()->captureStart();
echo <<<JS
jQuery( document ).ready(function( $ ) {
$.fn.changeFilter = function() {
NProgress.start();
$.ajax({
'dataType' : 'json',
'accept' : 'application/json',
'method' : 'get',
'url' : $('#form-filter').attr('action'),
'data' : $('#form-filter').serialize(),
}).done(function(response) {
if(response['success']) {
if(response['data']['capsules']) {
$('#form-filter #capsule_uuid').empty();
$.each(response['data']['capsules'], function( value, label ) {
$('#form-filter #capsule_uuid').append(new Option(label, value));
});
}
if(response['data']['items']) {
$('#gridTable tbody').empty();
$('#gridTable tbody').append(
$( "#progressRowTemplate" ).render( response['data']['items'] )
);
}
} else {
if(jQuery.type(response['data']) == 'string') {
$.fn.showError(response['data']);
} else {
$.each(response['data'], function( fieldname, errors ) {
$.fn.showFormErrorValidator('#form-filter #' + fieldname, errors);
});
}
}
}).fail(function( jqXHR, textStatus, errorThrown) {
$.fn.showError(textStatus);
}).always(function() {
NProgress.done();
});
return false;
}
$('#form-filter #topic_uuid').change(function(e) {
e.preventDefault();
$('#form-filter #capsule_uuid').empty();
$.fn.changeFilter();
})
$('#form-filter #capsule_uuid').change(function(e) {
e.preventDefault();
$.fn.changeFilter();
})
$.fn.changeFilter();
});
JS;
$this->inlineScript()->captureEnd();
?>
<!-- Content Header (Page header) -->
<section class="content-header">
<div class="container-fluid">
<div class="row mb-2">
<div class="col-sm-12">
<h1>LABEL_PROGRESS_FOR_CAPSULE</h1>
</div>
</div>
</div><!-- /.container-fluid -->
</section>
<section class="content">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<?php
$form = $this->form;
$form->setAttributes([
'name' => 'form-filter',
'id' => 'form-filter',
]);
$form->prepare();
echo $this->form()->openTag($form);
?>
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="form-group">
<?php
$element = $form->get('topic_uuid');
$element->setOptions(['label' => 'LABEL_TOPIC']);
$element->setAttributes(['class' => 'form-control']);
echo $this->formLabel($element);
echo $this->formSelect($element);
?>
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="form-group">
<?php
$element = $form->get('capsule_uuid');
$element->setOptions(['label' => 'LABEL_CAPSULE']);
$element->setAttributes(['class' => 'form-control']);
echo $this->formLabel($element);
echo $this->formSelect($element);
?>
</div>
</div>
<!--
<div
class="col-md-12 col-sm-12"
>
<div style="float:right;">
<button type="button" class="btn btn-info btn-refresh"><i class="fa fa-refresh"></i> LABEL_REFRESH </button>
</div>
</div>
-->
</div>
<?php echo $this->form()->closeTag($form); ?>
</div>
<div class="card-body">
<table id="gridTable" class="table table-hover">
<thead>
<tr>
<th style="width: 12%">LABEL_FIRST_NAME</th>
<th style="width: 12%">LABEL_LAST_NAME</th>
<th style="width: 16%">LABEL_EMAIL</th>
<th style="width: 20%">LABEL_DATE</th>
<th style="width: 20%">LABEL_REPORTS_PROGRESS</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</section>
<script id="progressRowTemplate" type="text/x-jsrender">
<tr>
<td style="width: 12%">
{{>first_name}}
</td>
<td style="width: 12%">
{{>last_name}}
</td>
<td style="width: 16%">
{{>email}}
</td>
<td style="width: 20%">
LABEL_REPORTS_FIRST_DATE
<br>
{{>added_on}}
<br><br>
LABEL_REPORTS_LAST_DATE
<br>
{{>updated_on}}
</td>
<td style="width: 20%">
<div class="progress progress-xs progress-striped active" style="height: 15px">
<div class="progress-bar {{if completed == '1' }} bg-success {{ else }} bg-primary {{/if}}" style="width: {{>progress}}%">
{{>progress}} %
</div>
</div>
</td>
</tr>
</script>