mirror of
https://git.imnavajas.es/jjimenez/safekat.git
synced 2025-07-25 22:52:08 +00:00
falta terminar albaranes
This commit is contained in:
481
httpdocs/assets/js/safekat/components/albaranComponent.js
Normal file
481
httpdocs/assets/js/safekat/components/albaranComponent.js
Normal file
@ -0,0 +1,481 @@
|
||||
class AlbaranComponent {
|
||||
|
||||
constructor(item) {
|
||||
this.item = item;
|
||||
this.id = item.id;
|
||||
this.numero = item.numero_albaran;
|
||||
this.cliente = item.cliente;
|
||||
this.att = item.att;
|
||||
this.direccion = item.direccion;
|
||||
this.envio_id = item.envio_id;
|
||||
this.selectorTabla = `#tablaAlbaran${this.id}`;
|
||||
|
||||
this.table = null;
|
||||
}
|
||||
|
||||
mount(selector) {
|
||||
const dom = this.render();
|
||||
$(selector).append(dom);
|
||||
requestAnimationFrame(() => this.init());
|
||||
}
|
||||
|
||||
render() {
|
||||
const { id, numero } = this;
|
||||
|
||||
const accordion = $('<div>', {
|
||||
class: 'accordion accordion-bordered mt-3 accordion-albaran',
|
||||
id: 'accordioAlbaran' + id,
|
||||
albaran: id
|
||||
});
|
||||
|
||||
const card = $('<div>', { class: 'card accordion-item active' });
|
||||
|
||||
const header = $('<h2>', {
|
||||
class: 'accordion-header',
|
||||
id: 'headingAlbaran' + id
|
||||
});
|
||||
|
||||
const button = $('<button>', {
|
||||
type: 'button',
|
||||
class: 'accordion-button collapsed',
|
||||
'data-bs-toggle': 'collapse',
|
||||
'data-bs-target': '#accordionAlbaranTip' + id,
|
||||
'aria-expanded': 'false',
|
||||
'aria-controls': 'accordionAlbaranTip' + id,
|
||||
'albaran': id,
|
||||
}).css({ 'background-color': '#F0F8FF' }).append($('<h5>').html(numero));
|
||||
|
||||
const collapseDiv = $('<div>', {
|
||||
id: 'accordionAlbaranTip' + id,
|
||||
class: 'accordion-collapse collapse',
|
||||
'data-bs-parent': '#accordioAlbaran' + id
|
||||
});
|
||||
|
||||
const body = $('<div>', { class: 'accordion-body' });
|
||||
|
||||
// Cabecera HTML
|
||||
const cabecera = this._buildCabecera();
|
||||
const tableWrapper = $('<div>', {
|
||||
class: 'table-responsive'
|
||||
}).append(this._buildTable());
|
||||
const botones = this._buildBotonera();
|
||||
|
||||
header.append(button);
|
||||
card.append(header);
|
||||
collapseDiv.append(body);
|
||||
body.append(cabecera, tableWrapper, botones);
|
||||
card.append(collapseDiv);
|
||||
accordion.append(card);
|
||||
|
||||
return accordion;
|
||||
}
|
||||
|
||||
_buildCabecera() {
|
||||
|
||||
return $(`
|
||||
<div class="col-12 d-flex justify-content-between align-items-center my-3">
|
||||
<!-- Fechas a la izquierda pegadas -->
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="d-flex align-items-center me-3">
|
||||
<label class="me-2 mb-0 white-space-nowrap">${window.language.Albaran.fechaCreacion}:</label>
|
||||
<label class="mb-0">${this.item.fecha_creacion}</label>
|
||||
</div>
|
||||
<div class="d-flex align-items-center ml-5">
|
||||
<label class="me-2 mb-0 white-space-nowrap">${window.language.Albaran.fechaAlbaran}:</label>
|
||||
<input id="fecha_albaran_${this.id}" class="cambios-albaran form-control form-control-sm"
|
||||
style="max-width: 130px;" albaran_id=${this.id} value="${this.item.fecha_albaran == null ? '' : this.item.fecha_albaran}">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Envío a la derecha -->
|
||||
<div class="d-flex align-items-center ms-auto">
|
||||
<label class="me-1 mb-0">${window.language.Albaran.numEnvio}:</label>
|
||||
<label class="mb-0">${this.envio_id}</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12 d-flex justify-content-between align-items-center mb-3">
|
||||
<!-- Cliente a la izquierda -->
|
||||
<div class="d-flex align-items-center">
|
||||
<label class="me-2 mb-0">${window.language.Albaran.cliente}:</label>
|
||||
<label class="mb-0 text-left">${this.cliente}</label>
|
||||
</div>
|
||||
|
||||
<!-- Nº Albarán a la derecha -->
|
||||
<div class="d-flex align-items-center ms-auto">
|
||||
<label class="me-2 mb-0">${window.language.Albaran.albaran}:</label>
|
||||
<label class="mb-0 text-end">${this.item.numero_albaran}</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 d-flex justify-content-between mb-3">
|
||||
<div class="col-1">
|
||||
<label>${window.language.Albaran.att}:</label>
|
||||
</div>
|
||||
<div class="col-11">
|
||||
<input id="att_${this.item.id}" class="cambios-albaran form-control" data-albaranId=${this.item.id} value="${this.att}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 d-flex justify-content-between mb-3">
|
||||
<div class="col-1">
|
||||
<label>${window.language.Albaran.direccion}:</label>
|
||||
</div>
|
||||
<div class="col-11">
|
||||
<input id="direccion_${this.item.id}" class="cambios-albaran form-control" data-albaranId=${this.item.id} value="${this.direccion}">
|
||||
</div>
|
||||
</div>
|
||||
`);
|
||||
}
|
||||
|
||||
_buildTable() {
|
||||
return $('<table>', {
|
||||
id: 'tablaAlbaran' + this.id,
|
||||
width: '100%',
|
||||
class: 'table table-responsive table-striped table-hover table-albaran'
|
||||
}).append(
|
||||
$('<thead>').append(
|
||||
$('<tr>').append(
|
||||
$('<th>').css({ 'max-width': '20px' }),
|
||||
$('<th>'),
|
||||
$('<th>', { class: 'lp-header', scope: 'col' }).css({ 'font-size': 'smaller', 'max-width':'8%' }).text(window.language.Albaran.pedido),
|
||||
$('<th>', { class: 'lp-header', scope: 'col' }).css({ 'font-size': 'smaller', 'max-width':'8%' }).text(window.language.Albaran.unidades),
|
||||
$('<th>', { class: 'lp-header', scope: 'col' }).css({ 'font-size': 'smaller' }).text(window.language.Albaran.titulo),
|
||||
$('<th>', { class: 'lp-header', scope: 'col' }).css({ 'font-size': 'smaller', 'max-width':'15%' }).text(window.language.Albaran.ISBN),
|
||||
$('<th>', { class: 'lp-header', scope: 'col' }).css({ 'font-size': 'smaller', 'max-width':'15%' }).text(window.language.Albaran.refCliente),
|
||||
$('<th>', { class: 'lp-header', scope: 'col' }).css({ 'font-size': 'smaller', 'max-width':'8%' }).text(window.language.Albaran.precioU),
|
||||
$('<th>', { class: 'lp-header', scope: 'col' }).css({ 'font-size': 'smaller', 'max-width':'8%' }).text(window.language.Albaran.subtotal),
|
||||
$('<th>'),
|
||||
)
|
||||
),
|
||||
$('<tbody>')
|
||||
);
|
||||
}
|
||||
|
||||
_buildBotonera() {
|
||||
const id = this.id;
|
||||
const mostrarPreciosChecked = this.item.mostrar_precios == 1 ? 'checked' : '';
|
||||
|
||||
return $(`
|
||||
<div class="row mt-5">
|
||||
<div class="col-12 d-flex align-items-center">
|
||||
|
||||
<div class="d-flex align-items-center">
|
||||
<label for="mostrar_precios_${id}" class="me-2 mb-0">${window.language.Albaran.mostrarPrecios}:</label>
|
||||
<input type="checkbox" id="mostrar_precios_${id}" class="form-check-input mostrar-precios" albaran_id="${id}" ${mostrarPreciosChecked}>
|
||||
</div>
|
||||
<div class="d-flex align-items-center mx-5">
|
||||
<label for="cajas_albaran_${id}" class="me-2 mb-0">${window.language.Albaran.cajas}:</label>
|
||||
<input type="number" id="cajas_albaran_${id}" class="form-control" albaran_id="${id}" value="${this.item.cajas}" min="0" max="200" step="1">
|
||||
</div>
|
||||
|
||||
<!-- Botones alineados a la derecha -->
|
||||
<div class="ms-auto d-flex gap-2 flex-wrap justify-content-end">
|
||||
<button id="add_iva_albaran_${id}" class="add-iva-albaran btn btn-sm btn-light" type="button">
|
||||
${window.language.Albaran.addIva} <i class="ti ti-plus"></i>
|
||||
</button>
|
||||
<button id="nueva_linea_albaran_${id}" class="nueva-linea-albaran btn btn-sm btn-light" type="button">
|
||||
${window.language.Albaran.nuevaLinea} <i class="ti ti-plus"></i>
|
||||
</button>
|
||||
<button id="imprimir_albaran_${id}" class="imprimir-albaran btn btn-sm btn-light" type="button">
|
||||
${window.language.Albaran.imprimirAlbaran} <i class="ti ti-printer"></i>
|
||||
</button>
|
||||
<button id="borrar_albaran_${id}" class="borrar-albaran btn btn-sm btn-danger" type="button">
|
||||
${window.language.Albaran.borrarAlbaran} <i class="ti ti-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`);
|
||||
}
|
||||
|
||||
init() {
|
||||
|
||||
this.table = $('#tablaAlbaran' + this.id).DataTable({
|
||||
processing: true,
|
||||
serverSide: true,
|
||||
autoWidth: true,
|
||||
responsive: true,
|
||||
scrollX: true,
|
||||
order: [[1, 'asc']],
|
||||
orderable: false,
|
||||
lengthMenu: [5, 10, 25, 50, 75, 100, 250, 500, 1000, 2500],
|
||||
pageLength: 50,
|
||||
dom: 'lrtip',
|
||||
ajax: {
|
||||
url: "/albaranes/datatablesAlbaranLinea?albaranId",
|
||||
data: {
|
||||
albaranId: this.id
|
||||
},
|
||||
type: 'GET',
|
||||
},
|
||||
language: {
|
||||
url: "/themes/vuexy/vendor/libs/datatables-sk/plugins/i18n/es-ES.json"
|
||||
},
|
||||
columns: [
|
||||
{ data: "action" },
|
||||
{ data: "id", visible: false },
|
||||
{ data: "pedido"},
|
||||
{ data: "unidades" },
|
||||
{ data: "titulo" },
|
||||
{ data: "isbn" },
|
||||
{ data: "ref_cliente" },
|
||||
{ data: "precio_unidad" },
|
||||
{ data: "total" },
|
||||
{ data: "iva_reducido", visible: false },
|
||||
],
|
||||
columnDefs: [
|
||||
{
|
||||
orderable: false,
|
||||
searchable: false,
|
||||
targets: [0]
|
||||
}
|
||||
],
|
||||
drawCallback: (settings) => {
|
||||
if ($('#mostrar_precios_' + this.id).is(':checked')) {
|
||||
this.table
|
||||
.column(7).visible(true)
|
||||
.column(8).visible(true);
|
||||
}
|
||||
else {
|
||||
this.table
|
||||
.column(7).visible(false)
|
||||
.column(8).visible(false);
|
||||
}
|
||||
|
||||
requestAnimationFrame(() => {
|
||||
this._initAutoNumericInputs();
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
|
||||
$('#accordionAlbaranTip' + this.id).on('shown.bs.collapse', () => {
|
||||
if (this.table) {
|
||||
this.table.columns.adjust().draw(false);
|
||||
}
|
||||
});
|
||||
|
||||
$('#tablaAlbaran' + this.id).on('click', '.btn-delete-albaran-lineas', (e) => {
|
||||
e.preventDefault();
|
||||
const table = $('#tablaAlbaran' + this.id).DataTable();
|
||||
const id = $(e.currentTarget).attr('data-id');
|
||||
const url = `/albaranes/borrarAlbaranLinea`;
|
||||
const data = { linea: id };
|
||||
|
||||
$.ajax({
|
||||
url: url,
|
||||
type: 'POST',
|
||||
data: data,
|
||||
success: (response) => {
|
||||
if (response.success) {
|
||||
table.draw(false);
|
||||
} else {
|
||||
Swal.fire({
|
||||
title: 'Error',
|
||||
text: 'No se ha podido borrar la línea del albarán',
|
||||
icon: 'error',
|
||||
showCancelButton: false,
|
||||
confirmButtonColor: '#3085d6',
|
||||
confirmButtonText: 'Ok',
|
||||
customClass: {
|
||||
confirmButton: 'btn btn-primary me-1',
|
||||
},
|
||||
buttonsStyling: false
|
||||
});
|
||||
table.draw(false);
|
||||
}
|
||||
},
|
||||
error: (xhr, status, error) => {
|
||||
console.error(error);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$('#mostrar_precios_' + this.id).on('change', (e) => {
|
||||
const checked = $(e.currentTarget).is(':checked');
|
||||
if (checked) {
|
||||
this.table
|
||||
.column(7).visible(true)
|
||||
.column(8).visible(true);
|
||||
} else {
|
||||
this.table
|
||||
.column(7).visible(false)
|
||||
.column(8).visible(false);
|
||||
}
|
||||
|
||||
$.post('/albaranes/updateAlbaran', {
|
||||
albaranId: this.id,
|
||||
fieldName: 'mostrar_precios',
|
||||
fieldValue: checked ? 1 : 0
|
||||
}, (response) => {
|
||||
if (response.success) {
|
||||
this.table.ajax.reload(null, false);
|
||||
} else {
|
||||
Swal.fire({
|
||||
title: 'Error',
|
||||
text: 'No se ha podido actualizar el albarán',
|
||||
icon: 'error',
|
||||
showCancelButton: false,
|
||||
confirmButtonColor: '#3085d6',
|
||||
confirmButtonText: 'Ok',
|
||||
customClass: {
|
||||
confirmButton: 'btn btn-primary me-1',
|
||||
},
|
||||
buttonsStyling: false
|
||||
});
|
||||
}
|
||||
}
|
||||
)
|
||||
});
|
||||
|
||||
$('#direccion_' + this.item.id).on('change', (e) => {
|
||||
const value = $(e.currentTarget).val();
|
||||
const albaranId = $(e.currentTarget).attr('data-albaranId');
|
||||
|
||||
$.post('/albaranes/updateAlbaran', {
|
||||
albaranId: albaranId,
|
||||
fieldName: 'direccion_albaran',
|
||||
fieldValue: value
|
||||
}, (response) => {
|
||||
if (response.success) {
|
||||
this.table.ajax.reload(null, false);
|
||||
} else {
|
||||
Swal.fire({
|
||||
title: 'Error',
|
||||
text: 'No se ha podido actualizar el albarán',
|
||||
icon: 'error',
|
||||
showCancelButton: false,
|
||||
confirmButtonColor: '#3085d6',
|
||||
confirmButtonText: 'Ok',
|
||||
customClass: {
|
||||
confirmButton: 'btn btn-primary me-1',
|
||||
},
|
||||
buttonsStyling: false
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$('#att_' + this.item.id).on('change', (e) => {
|
||||
const value = $(e.currentTarget).val();
|
||||
const albaranId = $(e.currentTarget).attr('data-albaranId');
|
||||
|
||||
$.post('/albaranes/updateAlbaran', {
|
||||
albaranId: albaranId,
|
||||
fieldName: 'att_albaran',
|
||||
fieldValue: value
|
||||
}, (response) => {
|
||||
if (response.success) {
|
||||
this.table.ajax.reload(null, false);
|
||||
} else {
|
||||
Swal.fire({
|
||||
title: 'Error',
|
||||
text: 'No se ha podido actualizar el albarán',
|
||||
icon: 'error',
|
||||
showCancelButton: false,
|
||||
confirmButtonColor: '#3085d6',
|
||||
confirmButtonText: 'Ok',
|
||||
customClass: {
|
||||
confirmButton: 'btn btn-primary me-1',
|
||||
},
|
||||
buttonsStyling: false
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
$("#borrar_albaran_" + this.item.id).on('click', (e) => {
|
||||
e.preventDefault();
|
||||
const albaranId = this.id;
|
||||
const url = `/albaranes/borrarAlbaran`;
|
||||
const data = { albaranId: albaranId };
|
||||
|
||||
Swal.fire({
|
||||
title: window.language.Albaran.borrarAlbaran,
|
||||
text: window.language.Albaran.borrarAlbaranConfirm,
|
||||
icon: 'warning',
|
||||
showCancelButton: true,
|
||||
confirmButtonColor: '#3085d6',
|
||||
cancelButtonColor: '#d33',
|
||||
confirmButtonText: window.language.Albaran.borrar,
|
||||
cancelButtonText: window.language.Albaran.cancelar,
|
||||
customClass: {
|
||||
confirmButton: 'btn btn-primary me-1',
|
||||
cancelButton: 'btn btn-outline-secondary'
|
||||
},
|
||||
buttonsStyling: false
|
||||
}).then((result) => {
|
||||
|
||||
|
||||
$.ajax({
|
||||
url: url,
|
||||
type: 'POST',
|
||||
data: data,
|
||||
success: (response) => {
|
||||
if (response.success) {
|
||||
// quitar del dom el albarán
|
||||
$(`#accordioAlbaran${albaranId}`).remove();
|
||||
} else {
|
||||
Swal.fire({
|
||||
title: 'Error',
|
||||
text: 'No se ha podido borrar el albarán',
|
||||
icon: 'error',
|
||||
showCancelButton: false,
|
||||
confirmButtonColor: '#3085d6',
|
||||
confirmButtonText: 'Ok',
|
||||
customClass: {
|
||||
confirmButton: 'btn btn-primary me-1',
|
||||
},
|
||||
buttonsStyling: false
|
||||
});
|
||||
}
|
||||
},
|
||||
error: (xhr, status, error) => {
|
||||
console.error(error);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
_initAutoNumericInputs() {
|
||||
const config_2 = {
|
||||
decimalPlaces: 2,
|
||||
digitGroupSeparator: '.',
|
||||
decimalCharacter: ',',
|
||||
unformatOnSubmit: true,
|
||||
decimalPlacesShownOnFocus: 2,
|
||||
decimalPlacesShownOnBlur: 2,
|
||||
watchExternalChanges: true
|
||||
};
|
||||
|
||||
const config_4 = {
|
||||
decimalPlaces: 4,
|
||||
digitGroupSeparator: '.',
|
||||
decimalCharacter: ',',
|
||||
unformatOnSubmit: true,
|
||||
decimalPlacesShownOnFocus: 4,
|
||||
decimalPlacesShownOnBlur: 4,
|
||||
watchExternalChanges: true
|
||||
};
|
||||
|
||||
// 🔥 Forzar limpieza completa de instancias anteriores
|
||||
document.querySelectorAll('.autonumeric-2, .autonumeric-4').forEach(el => {
|
||||
if (AutoNumeric.getAutoNumericElement(el)) {
|
||||
AutoNumeric.getAutoNumericElement(el).remove();
|
||||
}
|
||||
});
|
||||
|
||||
// Inicializar nuevos
|
||||
AutoNumeric.multiple('.autonumeric-2', config_2);
|
||||
AutoNumeric.multiple('.autonumeric-4', config_4);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
export default AlbaranComponent;
|
||||
Reference in New Issue
Block a user