mirror of
https://git.imnavajas.es/jjimenez/safekat.git
synced 2025-07-25 22:52:08 +00:00
287 lines
12 KiB
JavaScript
287 lines
12 KiB
JavaScript
import Table from '../../components/table.js';
|
|
import Ajax from '../../components/ajax.js';
|
|
|
|
|
|
|
|
class Ticket {
|
|
|
|
constructor() {
|
|
|
|
// check if url includes "add"
|
|
this.action = 'list';
|
|
if (window.location.href.includes("add"))
|
|
this.action = "add";
|
|
else if (window.location.href.includes("edit"))
|
|
this.action = "edit";
|
|
|
|
this.table = null;
|
|
|
|
this.init();
|
|
}
|
|
|
|
|
|
init() {
|
|
|
|
if (this.action == "edit") {
|
|
|
|
$('.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',
|
|
render: function (data, type, row) {
|
|
return window.language.Tickets[row.categoria];
|
|
}
|
|
},
|
|
{
|
|
'data': 'seccion_id',
|
|
render: function (data, type, row) {
|
|
return window.language.Tickets[row.seccion];
|
|
}
|
|
},
|
|
{
|
|
'data': 'estado_id',
|
|
render: function (data, type, row) {
|
|
return window.language.Tickets[row.estado];
|
|
}
|
|
},
|
|
{
|
|
'data': 'prioridad',
|
|
render: function (data, type, row) {
|
|
return window.language.Tickets[data];
|
|
},
|
|
visible: false,
|
|
},
|
|
{ 'data': 'titulo' },
|
|
{
|
|
'data': 'usuario_id',
|
|
render: function (data, type, row) {
|
|
return row.usuario;
|
|
},
|
|
visible: false,
|
|
},
|
|
{
|
|
'data': 'user_soporte_id',
|
|
render: function (data, type, row) {
|
|
return row.user_soporte;
|
|
},
|
|
visible: false,
|
|
},
|
|
{ 'data': 'created_at' },
|
|
];
|
|
|
|
|
|
this.table = new Table(
|
|
$('#tableOfTickets'),
|
|
'tickets',
|
|
'/soporte/ticketlist',
|
|
columns,
|
|
);
|
|
|
|
|
|
this.table.init({
|
|
actions: actions,
|
|
buttonsExport: true,
|
|
});
|
|
|
|
this.table.table.on('init.dt', function () {
|
|
self.table.table.page.len(50).draw();
|
|
if (window.userType == 1) {
|
|
|
|
self.table.table.column(4).visible(true);
|
|
self.table.table.column(6).visible(true);
|
|
self.table.table.column(7).visible(true);
|
|
|
|
self.table.table.column(4).header().style.display = 'table-cell';
|
|
self.table.table.column(6).header().style.display = 'table-cell';
|
|
self.table.table.column(7).header().style.display = 'table-cell';
|
|
}
|
|
});
|
|
|
|
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, datePicker'] }, {},
|
|
function (translations) {
|
|
window.language = JSON.parse(translations);
|
|
new Ticket();
|
|
},
|
|
function (error) {
|
|
console.log("Error getting translations:", error);
|
|
}
|
|
).post();
|
|
});
|
|
|
|
export default Ticket; |