Rev 17008 | AutorÃa | Comparar con el anterior | Ultima modificación | Ver Log |
<?php
$acl = $this->viewModel()->getRoot()->getVariable('acl');
$currentUser = $this->currentUserHelper();
$roleName = $currentUser->getUserTypeId();
$routeAdd = $this->url('habits/users/add');
$routeUpload = $this->url('habits/users/upload');
$routeDatatable = $this->url('habits/users');
$allowAdd = $acl->isAllowed($roleName, 'habits/users/add') ? 1 : 0;
$allowDelete = $acl->isAllowed($roleName, 'habits/users/delete') ? 1 : 0;
$allowUpload = $acl->isAllowed($roleName, 'habits/users/upload') ? 1 : 0;
$this->headLink()->appendStylesheet($this->basePath('assets/vendors/nprogress/nprogress.css'));
$this->inlineScript()->appendFile($this->basePath('assets/vendors/nprogress/nprogress.js'));
$this->headLink()->appendStylesheet($this->basePath('assets/vendors/datatables.net-bs5/dataTables.bootstrap5.css'));
$this->inlineScript()->appendFile($this->basePath('assets/vendors/datatables.net/jquery.dataTables.js'));
$this->inlineScript()->appendFile($this->basePath('assets/vendors/datatables.net-bs5/dataTables.bootstrap5.js'));
$this->headLink()->appendStylesheet($this->basePath('assets/vendors/bootstrap4-toggle/css/bootstrap4-toggle.min.css'));
$this->inlineScript()->appendFile($this->basePath('assets/vendors/bootstrap4-toggle/js/bootstrap4-toggle.min.js'));
$this->headLink()->appendStylesheet($this->basePath('assets/vendors/bootstrap-fileinput/css/fileinput.min.css'));
$this->headLink()->appendStylesheet($this->basePath('assets/vendors/bootstrap-fileinput/themes/explorer-fas/theme.css'));
$this->inlineScript()->appendFile($this->basePath('assets/vendors/bootstrap-fileinput/js/plugins/piexif.js'));
$this->inlineScript()->appendFile($this->basePath('assets/vendors/bootstrap-fileinput/js/plugins/sortable.js'));
$this->inlineScript()->appendFile($this->basePath('assets/vendors/bootstrap-fileinput/js/fileinput.js'));
$this->inlineScript()->appendFile($this->basePath('assets/vendors/bootstrap-fileinput/js/locales/es.js'));
$this->inlineScript()->appendFile($this->basePath('assets/vendors/bootstrap-fileinput/themes/fas/theme.js'));
$this->inlineScript()->appendFile($this->basePath('assets/vendors/bootstrap-fileinput/themes/explorer-fas/theme.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'));
$this->headLink()->appendStylesheet($this->basePath('assets/vendors/select2-bootstrap5-theme/select2-bootstrap-5-theme.css'));
$this->headStyle()->captureStart();
echo <<<CSS
#gridTableUsers {
display: flex;
flex-flow: column;
width: 100%;
}
#gridTableUsers thead {
flex: 0 0 auto;
}
#gridTableUsers tbody {
flex: 1 1 auto;
display: block;
overflow-y: auto;
overflow-x: hidden;
}
#gridTableUsers tr {
width: 100%;
display: table;
table-layout: fixed;
}
.imagen-contaner{
border:1px solid rgb(200,200,200);
border-radius:5px;
padding:10px;
display:flex;
flex-flow:column;
align-items:center;
}
CSS;
$this->headStyle()->captureEnd();
$this->inlineScript()->captureStart();
echo <<<JS
jQuery( document ).ready(function( $ ) {
var routeAdd = '';
var routeUpload = '';
var allowDelete = $allowDelete;
var gridTable = $('#gridTable').dataTable( {
'processing': true,
'serverSide': true,
'searching': true,
'order': [[ 0, 'asc' ]],
'ordering': true,
'ordenable' : true,
'responsive': true,
'select' : false,
'paging': true,
'pagingType': 'simple_numbers',
'ajax': {
'url' : '$routeDatatable',
'type' : 'get',
'beforeSend': function (request) {
NProgress.start();
},
'dataFilter': function(response) {
var response = jQuery.parseJSON( response );
var json = {};
json.recordsTotal = 0;
json.recordsFiltered = 0;
json.data = [];
if(response.success) {
json.recordsTotal = response.data.total;
json.recordsFiltered = response.data.total;
json.data = response.data.items;
} else {
$.fn.showError(response.data)
}
return JSON.stringify( json );
}
},
'language' : {
'sProcessing': 'LABEL_DATATABLE_SPROCESSING',
'sLengthMenu': 'LABEL_DATATABLE_SLENGTHMENU',
'sZeroRecords': 'LABEL_DATATABLE_SZERORECORDS',
'sEmptyTable': 'LABEL_DATATABLE_SEMPTYTABLE',
'sInfo': 'LABEL_DATATABLE_SINFO',
'sInfoEmpty': 'LABEL_DATATABLE_SINFOEMPTY',
'sInfoFiltered': 'LABEL_DATATABLE_SINFOFILTERED',
'sInfoPostFix': '',
'sSearch': 'LABEL_DATATABLE_SSEARCH',
'sUrl': '',
'sInfoThousands': ',',
'sLoadingRecords': 'LABEL_DATATABLE_SLOADINGRECORDS',
'oPaginate': {
'sFirst': 'LABEL_DATATABLE_SFIRST',
'sLast': 'LABEL_DATATABLE_SLAST',
'sNext': 'LABEL_DATATABLE_SNEXT',
'sPrevious': 'LABEL_DATATABLE_SPREVIOUS'
},
'oAria': {
'sSortAscending': ': LABEL_DATATABLE_SSORTASCENDING',
'sSortDescending': ':LABEL_DATATABLE_SSORTDESCENDING'
},
},
'drawCallback': function( settings ) {
NProgress.done();
},
'aoColumns': [
{ 'mDataProp': 'first_name' },
{ 'mDataProp': 'last_name' },
{ 'mDataProp': 'email' },
{ 'mDataProp': 'actions' },
],
'columnDefs': [
{
'targets': 0,
'className' : 'text-vertical-middle',
},
{
'targets': 1,
'orderable': false,
'className' : 'text-vertical-middle',
},
{
'targets': 2,
'orderable': false,
'className' : 'text-vertical-middle',
},
{
'targets': -1,
'orderable': false,
'render' : function ( data, type, row ) {
s = '';
if(allowDelete) {
s = s + '<button class="btn btn-danger btn-delete" data-href="' + data['link_delete']+ '" data-toggle="tooltip" title="LABEL_DELETE"><i class="fa fa-trash"></i> LABEL_DELETE </button> ';
}
return s;
}
}
],
});
var validator = $('#form').validate({
debug: true,
onclick: false,
onkeyup: false,
ignore: [],
rules: {
'user_id': {
required: true,
},
},
submitHandler: function(form)
{
NProgress.start();
$('#submitBtn').prop('disabled', true);
$.ajax({
'dataType' : 'json',
'accept' : 'application/json',
'method' : 'post',
'url' : $('#form').attr('action'),
'data' : {
'user_id' : $('#form #user_id').val(),
}
}).done(function(response) {
if(response['success']) {
$.fn.showSuccess(response['data']);
$('#modal').modal('hide');
gridTable.api().ajax.reload(null, false);
} else {
validator.resetForm();
if(jQuery.type(response['data']) == 'string') {
$.fn.showError(response['data']);
} else {
$.each(response['data'], function( fieldname, errors ) {
$.fn.showFormErrorValidator('#form #' + fieldname, errors);
});
}
}
$('#submitBtn').prop('disabled', false);
}).fail(function( jqXHR, textStatus, errorThrown) {
$.fn.showError(textStatus);
}).always(function() {
$('#submitBtn').prop('disabled', false);
NProgress.done();
});
return false;
},
invalidHandler: function(form, validator) {
}
});
$('body').on('click', 'button.btn-add', function(e) {
e.preventDefault();
var action = $(this).data('href');
$('#form').attr('action', '$routeAdd');
$('#form #user_id').val('');
$('#form #user_id').trigger('change');
validator.resetForm();
$('#modal').modal('show');
return false;
});
$('body').on('click', 'button.btn-refresh', function(e) {
e.preventDefault();
gridTable.api().ajax.reload(null, false);
return false;
});
$('body').on('click', 'button.btn-cancel', function(e) {
e.preventDefault();
$('#modal').modal('hide');
$('#modalFormUploadUsers').modal('hide');
});
$('body').on('click', 'button.btn-delete', function(e) {
e.preventDefault();
var action = $(this).data('href');
swal.fire({
title: 'LABEL_ARE_YOU_SURE',
icon: 'question',
cancelButtonText: 'LABEL_NO',
showCancelButton: true,
confirmButtonText: 'LABEL_YES'
}).then((result) => {
if (result.isConfirmed) {
NProgress.start();
$.ajax({
'dataType' : 'json',
'accept' : 'application/json',
'method' : 'post',
'url' : action,
}).done(function(response) {
if(response['success']) {
$.fn.showSuccess(response['data']);
gridTable.api().ajax.reload(null, false);
} else {
$.fn.showError(response['data']);
}
}).fail(function( jqXHR, textStatus, errorThrown) {
$.fn.showError(textStatus);
}).always(function() {
NProgress.done();
});
}
});
});
$('#form #user_id').select2({
theme: 'bootstrap-5',
width: '100%',
dropdownParent: $('#modal'),
});
var validatorUploadUsers = $('#form-upload-users').validate({
debug: true,
onclick: false,
onkeyup: false,
onfocusout: false,
ignore: [],
rules: {
'file' : {
required: true,
extension: 'xls|xlsx',
accept: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel'
},
},
submitHandler: function(form)
{
NProgress.start();
var formdata = false;
if (window.FormData){
formdata = new FormData(form);
}
formdata.append('step','validation');
$.ajax({
'dataType' : 'json',
'accept' : 'application/json',
'method' : 'post',
'url' : '$routeUpload',
'data' : formdata,
'processData': false,
'contentType': false,
}).done(function(response) {
if(response['success']) {
$('#table-upload-users-key').val(response['data']['key']);
$('#gridTableUploadUsers tbody').empty();
$.each(response['data']['items'], function(index, item) {
var s = '<tr>';
s = s + '<td>' + item['first_name'] + '</td>';
s = s + '<td>' + item['last_name'] + '</td>';
s = s + '<td>' + item['email'] + '</td>';
s = s + '<td>' + item['password'] + '</td>';
s = s + '<td>' + item['is_adult'] + '</td>';
s = s + '</tr>';
$('#gridTableUploadUsers tbody').append(s);
});
$('#modalFormUploadUsers').modal('hide');
$('#modalUploadUsers').modal('show');
} else {
validatorUploadUsers.resetForm();
if(jQuery.type(response['data']) == 'string') {
$.fn.showError(response['data']);
} else {
$.each(response['data'], function( fieldname, errors ) {
$.fn.showFormErrorValidator('#form-upload-users #' + fieldname, errors);
});
}
}
}).fail(function( jqXHR, textStatus, errorThrown) {
$.fn.showError(textStatus);
}).always(function() {
NProgress.done();
});
return false;
},
invalidHandler: function(form, validator) {
}
});
$('#form-upload-users #file').fileinput({
theme: 'fa',
language: 'es',
showUpload: false,
dropZoneEnabled: false,
maxFileCount: 1,
allowedFileExtensions: ['xls', 'xlsx'],
});
$('body').on('click', 'button.btn-upload', function(e) {
e.preventDefault();
$('#form-upload-users #file').fileinput('reset');
$('#form-upload-users #file').val('');
$('#modalFormUploadUsers').modal('show');
});
$('body').on('click', 'button.btn-upload-users-step2', function(e) {
e.preventDefault();
NProgress.start();
$.ajax({
'dataType' : 'json',
'accept' : 'application/json',
'method' : 'post',
'url' : '$routeUpload',
'data' : {
'step' : 'process',
'key' : $('#table-upload-users-key').val(),
}
}).done(function(response) {
if(response['success']) {
if(response['data']['users_created'] == 1) {
$.fn.showSuccess(response['data']['users_created'] + ' LABEL_USER_CREATED');
} else {
$.fn.showSuccess(response['data']['users_created'] + ' LABEL_USERS_CREATED');
}
gridTable.api().ajax.reload(null, false);
$('#modalUploadUsers').modal('hide');
} else {
$.fn.showError(response['data']);
}
}).fail(function( jqXHR, textStatus, errorThrown) {
$.fn.showError(textStatus);
}).always(function() {
NProgress.done();
});
return false;
});
});
JS;
$this->inlineScript()->captureEnd();
?>
<div class="container">
<div class="card" id="">
<div class="card-header">
<h6 class="card-title">LABEL_USERS</h6>
</div>
<div class="card-body">
<div class="row">
<div class="col-12 mt-3">
<table id="gridTable" class="table table-bordered">
<thead>
<tr>
<th>LABEL_FIRST_NAME</th>
<th>LABEL_LAST_NAME</th>
<th>LABEL_EMAIL</th>
<th>LABEL_ACTIONS</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
<div class="card-footer text-right">
<?php if ($allowAdd) : ?>
<button type="button" class="btn btn-primary btn-add"><i class="fa fa-plus"></i> LABEL_ADD </button>
<?php endif; ?>
<?php if ($allowUpload) : ?>
<button type="button" class="btn btn-primary btn-upload"><i class="fa fa-upload"></i> LABEL_UPLOAD </button>
<?php endif; ?>
<button type="button" class="btn btn-info btn-refresh"><i class="fa fa-sync"></i> LABEL_REFRESH </button>
</div>
</div>
</div>
<!-- The Modal -->
<div class="modal" id="modal">
<div class="modal-dialog modal-lx">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h6 class="modal-title">LABEL_USER</h6>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
</div>
<!-- Modal body -->
<div class="modal-body">
<?php
$form = $this->form;
$form->setAttributes([
'method' => 'post',
'name' => 'form',
'id' => 'form'
]);
$form->prepare();
echo $this->form()->openTag($form);
?>
<div class="card-body">
<div class="row">
<div class="col-12 mt-3">
<?php
$element = $form->get('user_id');
$element->setOptions(['label' => 'LABEL_USER']);
$element->setAttributes(['class' => 'form-control']);
echo $this->formLabel($element);
echo $this->formSelect($element);
?>
</div>
</div>
</div>
</div>
<!-- Modal footer -->
<div class="modal-footer text-right">
<button type="submit" id="submitBtn" form="form" class="btn btn-primary">LABEL_SAVE</button>
<button type="button" class="btn btn-light" data-bs-dismiss="modal">LABEL_CLOSE</button>
</div>
<?php echo $this->form()->closeTag($form); ?>
</div>
</div>
</div>
<div class="modal" id="modalFormUploadUsers">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h6 class="modal-title">LABEL_UPLOAD</h6>
</div>
<?php
$form = $this->formUploadUsers;
$form->setAttributes([
'method' => 'post',
'name' => 'form-upload-users',
'id' => 'form-upload-users'
]);
$form->prepare();
echo $this->form()->openTag($form);
?>
<!-- Modal body -->
<div class="modal-body">
<div class="row">
<div class="col-12 mt-3">
<?php
$element = $form->get('file');
$element->setOptions(['label' => 'LABEL_EXCEL']);
echo $this->formLabel($element);
?>
<div class="file-loading">
<?php
$element->setAttributes(['class' => 'form-control', 'accept' => 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel']);
echo $this->formFile($element);
?>
</div>
</div>
</div>
</div>
<div class="modal-footer text-right">
<button type="submit" class="btn btn-sm btn-primary">LABEL_UPLOAD</button>
<button type="button" class="btn btn-sm btn-light btn-cancel">LABEL_CANCEL</button>
</div>
<?php echo $this->form()->closeTag($form); ?>
</div>
</div>
</div>
<!-- The Modal -->
<div class="modal" id="modalUploadUsers">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h6 class="modal-title">LABEL_USERS_FOR_COMPANY</h6>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
</div>
<!-- Modal body -->
<div class="modal-body">
<form>
<input type="hidden" name="table-upload-users-key" id="table-upload-users-key">
</form>
<div class="row">
<div class="col-12 mt-3" style="height: 300px;overflow: scroll;">
<table id="gridTableUploadUsers" style="width: 100%" class="table table-bordered">
<thead>
<tr>
<th>LABEL_FIRST_NAME</th>
<th>LABEL_LAST_NAME</th>
<th>LABEL_EMAIL</th>
<th>LABEL_PASSWORD</th>
<th>LABEL_IS_ADULT</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
<!-- Modal footer -->
<div class="modal-footer text-right">
<button type="submit" class="btn btn-sm btn-primary btn-upload-users-step2">LABEL_SAVE</button>
<button type="button" class="btn btn-sm btn-danger" data-dismiss="modal">LABEL_CLOSE</button>
</div>
</div>
</div>
</div>