haciendo el buscador

This commit is contained in:
2025-02-19 15:00:20 +01:00
parent 1da50e9f01
commit fea409b5ad
6 changed files with 246 additions and 38 deletions

View File

@ -8,75 +8,83 @@ class Ticket {
constructor() {
// check if url includes "add"
this.action = 'list';
if(window.location.href.includes("add"))
this.action = 'list';
if (window.location.href.includes("add"))
this.action = "add";
else if(window.location.href.includes("edit"))
else if (window.location.href.includes("edit"))
this.action = "edit";
this.table = null;
this.init();
}
init() {
if(this.action == "edit") {
if (this.action == "edit") {
$('.gallery-img').on('click', function() {
$('.gallery-img').on('click', function () {
let imageUrl = $(this).data('src'); // Obtiene la URL de la imagen
$('#modalImage').attr('src', imageUrl); // Cambia la imagen en el modal
$('#imageModal').modal('show'); // Muestra el modal
});
}
else if (this.action == "list") {
this.#initDatatable();
}
}
#initDatatable() {
this.#headerSearcher();
const self = this;
const actions = ['view'];
const columns = [
{ 'data': 'id' },
{ 'data': 'categoria_id',
{
'data': 'categoria_id',
render: function (data, type, row) {
return window.language.Tickets[row.categoria];
}
},
{ 'data': 'seccion_id' ,
},
{
'data': 'seccion_id',
render: function (data, type, row) {
return window.language.Tickets[row.seccion];
}
},
{ 'data': 'estado_id' ,
{
'data': 'estado_id',
render: function (data, type, row) {
return window.language.Tickets[row.estado];
}
},
{ 'data': 'prioridad' ,
{
'data': 'prioridad',
render: function (data, type, row) {
return window.language.Tickets[data];
},
visible: false,
},
{ 'data': 'titulo' },
{ 'data': 'usuario_id' ,
{
'data': 'usuario_id',
render: function (data, type, row) {
return row.usuario;
},
visible: false,
},
{ 'data': 'user_soporte_id',
{
'data': 'user_soporte_id',
render: function (data, type, row) {
return row.user_soporte;
},
visible: false,
},
},
{ 'data': 'created_at' },
];
@ -88,7 +96,7 @@ class Ticket {
columns,
);
this.table.init({
actions: actions,
buttonsExport: true,
@ -96,7 +104,7 @@ class Ticket {
this.table.table.on('init.dt', function () {
self.table.table.page.len(50).draw();
if(window.userType==1){
if (window.userType == 1) {
self.table.table.column(4).visible(true);
self.table.table.column(6).visible(true);
@ -108,25 +116,172 @@ class Ticket {
}
});
this.table.setEditCallback(function(id){
this.table.setEditCallback(function (id) {
window.location.href = '/soporte/edit/' + id;
})
}
#headerSearcher() {
const self = this;
$('#tableOfTickets thead tr').clone(true).appendTo('#tableOfTickets thead');
$('#tableOfTickets thead tr:eq(1) th').each(function (i) {
if (!$(this).hasClass("noFilter")) {
var title = $(this).text();
if (i == 8) {
$(this).html('<input id="bs-rangepicker-range" type="text" class="form-control " style="min-width:100px;max-width:120px;font-size:0.8rem !important;" />');
var bsRangePickerRange = $('#bs-rangepicker-range')
bsRangePickerRange.daterangepicker({
ranges: {
[window.language.datePicker.hoy]: [moment(), moment()],
[window.language.datePicker.ayer]: [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
[window.language.datePicker.ultimos7]: [moment().subtract(6, 'days'), moment()],
[window.language.datePicker.ultimos30]: [moment().subtract(29, 'days'), moment()],
[window.language.datePicker.esteMes]: [moment().startOf('month'), moment().endOf('month')],
[window.language.datePicker.ultimoMes]: [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
},
opens: 'right',
language: '<?= config('Basics')->i18n ?>',
"locale": {
"customRangeLabel": "<?= lang('datePicker.personalizar') ?>",
"format": "YYYY-MM-DD",
"separator": " ",
"applyLabel": "<?= lang('datePicker.aplicar') ?>",
"cancelLabel": "<?= lang('datePicker.limpiar') ?>",
},
"alwaysShowCalendars": true,
autoUpdateInput: false,
});
bsRangePickerRange.on('apply.daterangepicker', function (ev, picker) {
$(this).val(picker.startDate.format('YYYY-MM-DD') + ' ' + picker.endDate.format('YYYY-MM-DD'));
self.table
.column(i)
.search(this.value)
.draw();
});
bsRangePickerRange.on('cancel.daterangepicker', function (ev, picker) {
$(this).val('');
self.table
.column(i)
.search(this.value)
.draw();
});
}
else if (i == 1) {
// Agregar un selector en la tercera columna
$(this).html('<select class="form-control" style="min-width:100px;max-width:120px;font-size:0.8rem !important;"></select>');
// Agregar opciones al selector
var selectorTipo = $('select', this);
selectorTipo.append('<option value="">Todos</option>'); // Opción vacía
selectorTipo.append('<option value="errores">' + window.language.Tickets.errores + '</option>');
selectorTipo.append('<option value="consultas">' + window.language.Tickets.consultas + '</option>');
selectorTipo.append('<option value="sugerencias">' + window.language.Tickets.sugerencias + '</option>');
selectorTipo.on('change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
self.table.column(i).search(val).draw();
});
}
else if (i == 2) {
// Agregar un selector en la tercera columna
$(this).html('<select class="form-control" style="min-width:100px;max-width:120px;font-size:0.8rem !important;"></select>');
// Agregar opciones al selector
var selectorSeccion = $('select', this);
selectorSeccion.append('<option value="">Todos</option>'); // Opción vacía
selectorSeccion.append('<option value="presupuestos">' + window.language.Tickets.presupuestos + '</option>');
selectorSeccion.append('<option value="pedidos">' + window.language.Tickets.pedidos + '</option>');
selectorSeccion.append('<option value="facturacion">' + window.language.Tickets.facturacion + '</option>');
selectorSeccion.append('<option value="logistica">' + window.language.Tickets.logistica + '</option>');
selectorSeccion.append('<option value="configuracion">' + window.language.Tickets.configuracion + '</option>');
selectorSeccion.append('<option value="general">' + window.language.Tickets.general + '</option>');
selectorSeccion.on('change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
self.table.column(i).search(val).draw();
});
}
else if (i == 2) {
// Agregar un selector en la tercera columna
$(this).html('<select class="form-control" style="min-width:100px;max-width:120px;font-size:0.8rem !important;"></select>');
// Agregar opciones al selector
var selectorEstado = $('select', this);
selectorEstado.append('<option value="">Todos</option>'); // Opción vacía
selectorEstado.append('<option value="abierto">' + window.language.Tickets.abierto + '</option>');
selectorEstado.append('<option value="en_proceso">' + window.language.Tickets.en_proceso + '</option>');
selectorEstado.append('<option value="resuelto">' + window.language.Tickets.resuelto + '</option>');
selectorEstado.on('change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
self.table.column(i).search(val).draw();
});
}
else if (i == 8) {
// Agregar un selector en la tercera columna
$(this).html('<select class="form-control" style="min-width:100px;max-width:120px;font-size:0.8rem !important;"></select>');
// Agregar opciones al selector
var selectorPrioridad = $('select', this);
selectorPrioridad.append('<option value="">Todos</option>'); // Opción vacía
selectorPrioridad.append('<option value="baja">' + window.language.Tickets.baja + '</option>');
selectorPrioridad.append('<option value="media">' + window.language.Tickets.media + '</option>');
selectorPrioridad.append('<option value="baja">' + window.language.Tickets.alta + '</option>');
selectorPrioridad.on('change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
self.table.column(i).search(val).draw();
});
}
else {
$(this).html('<input type="text" class="form-control " style="min-width:100px;max-width:120px;font-size:0.8rem !important;" />');
$('input', this).on('change clear', function () {
if (self.table.column(i).search() !== this.value) {
self.table
.column(i)
.search(this.value)
.draw();
}
});
}
}
else {
$(this).html('<span></span>');
}
});
}
}
document.addEventListener('DOMContentLoaded', function () {
const locale = document.querySelector('meta[name="locale"]').getAttribute('content');
new Ajax('/translate/getTranslation', { locale: locale, translationFile: ['Tickets'] }, {},
function(translations) {
new Ajax('/translate/getTranslation', { locale: locale, translationFile: ['Tickets, datePicker'] }, {},
function (translations) {
window.language = JSON.parse(translations);
new Ticket();
},
function (error) {
console.log("Error getting translations:", error);
}
).post();
});
).post();
});
export default Ticket;