|
|
|
@ -1,14 +1,17 @@ |
|
|
|
|
import React, { useState, useEffect } from 'react'; |
|
|
|
|
import axios from 'axios'; |
|
|
|
|
import { Invoice, InvoiceDetail } from '../Interfaces/Invoice'; |
|
|
|
|
import { BsFillPencilFill } from 'react-icons/bs'; |
|
|
|
|
import '../HojasDeEstilo/AmazonInovice.css'; |
|
|
|
|
|
|
|
|
|
const AmazonInvoice: React.FC = () => { |
|
|
|
|
const [invoices, setInvoices] = useState<Invoice[]>([]); |
|
|
|
|
const [currentPage, setCurrentPage] = useState(1); |
|
|
|
|
const [itemsPerPage] = useState(20); |
|
|
|
|
const [itemsPerPage] = useState(27); |
|
|
|
|
const [selectedInvoiceId, setSelectedInvoiceId] = useState<number | null>(null); |
|
|
|
|
const [invoiceDetails, setInvoiceDetails] = useState<InvoiceDetail[]>([]); |
|
|
|
|
const [editedReference, setEditedReference] = useState(''); |
|
|
|
|
const [editedClasificador, setEditedClasificador] = useState(0); |
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
axios |
|
|
|
@ -28,7 +31,7 @@ const AmazonInvoice: React.FC = () => { |
|
|
|
|
|
|
|
|
|
const paginate = (pageNumber: number) => { |
|
|
|
|
setCurrentPage(pageNumber); |
|
|
|
|
setSelectedInvoiceId(null); // Restablece el detalle de la factura seleccionada al cambiar de página
|
|
|
|
|
setSelectedInvoiceId(null); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const handleInvoiceClick = (id: number) => { |
|
|
|
@ -44,7 +47,7 @@ const AmazonInvoice: React.FC = () => { |
|
|
|
|
}) |
|
|
|
|
.then((response) => { |
|
|
|
|
const invoiceDetailData: InvoiceDetail[] = response.data; |
|
|
|
|
console.log(invoiceDetailData); // Verificar los datos recibidos en la consola
|
|
|
|
|
console.log(invoiceDetailData); |
|
|
|
|
setInvoiceDetails(invoiceDetailData); |
|
|
|
|
}) |
|
|
|
|
.catch((error) => { |
|
|
|
@ -53,6 +56,58 @@ const AmazonInvoice: React.FC = () => { |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const handleEditClick = (id: number, referencia: string, clasificador: number) => { |
|
|
|
|
setEditedReference(referencia); |
|
|
|
|
setEditedClasificador(clasificador); |
|
|
|
|
|
|
|
|
|
const newReference = prompt('Ingrese la nueva referencia:', referencia); |
|
|
|
|
const newClasificador = prompt('Ingrese el nuevo clasificador:', clasificador.toString()); |
|
|
|
|
|
|
|
|
|
if (newReference !== null && newClasificador !== null) { |
|
|
|
|
const updatedData = { |
|
|
|
|
id: id, |
|
|
|
|
referencia: newReference, |
|
|
|
|
clasificador: parseInt(newClasificador) |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
setSelectedInvoiceId(id); |
|
|
|
|
|
|
|
|
|
axios |
|
|
|
|
.put(`https://localhost:5051/api/AmazonInvoice/AmazonInvoiceMasterPut/`, updatedData, { |
|
|
|
|
headers: { |
|
|
|
|
'Content-Type': 'application/json' |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
.then(() => { |
|
|
|
|
// Realizar una solicitud adicional para obtener la factura actualizada
|
|
|
|
|
axios |
|
|
|
|
.get<Invoice[]>(`https://localhost:5051/api/AmazonInvoice/AmazonInvoiceGET`, { |
|
|
|
|
params: { |
|
|
|
|
id: id |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
.then((response) => { |
|
|
|
|
const updatedInvoice: Invoice = response.data[0]; |
|
|
|
|
// Actualizar el estado local de la factura modificada con la respuesta del servidor
|
|
|
|
|
setInvoices((prevInvoices) => { |
|
|
|
|
const updatedInvoices = prevInvoices.map((invoice) => { |
|
|
|
|
if (invoice.id === updatedInvoice.id) { |
|
|
|
|
return updatedInvoice; |
|
|
|
|
} |
|
|
|
|
return invoice; |
|
|
|
|
}); |
|
|
|
|
return updatedInvoices; |
|
|
|
|
}); |
|
|
|
|
}) |
|
|
|
|
.catch((error) => { |
|
|
|
|
console.log(error); |
|
|
|
|
}); |
|
|
|
|
}) |
|
|
|
|
.catch((error) => { |
|
|
|
|
console.log(error); |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<div className="container"> |
|
|
|
@ -67,6 +122,7 @@ const AmazonInvoice: React.FC = () => { |
|
|
|
|
<th>Clasificador</th> |
|
|
|
|
<th>Estatus</th> |
|
|
|
|
<th>Trailer Id</th> |
|
|
|
|
<th>Acciones</th> |
|
|
|
|
</tr> |
|
|
|
|
</thead> |
|
|
|
|
<tbody> |
|
|
|
@ -80,6 +136,14 @@ const AmazonInvoice: React.FC = () => { |
|
|
|
|
<td>{invoice.clasificador}</td> |
|
|
|
|
<td>{invoice.estatus}</td> |
|
|
|
|
<td>{invoice.trailerId || 'N/A'}</td> |
|
|
|
|
<td> |
|
|
|
|
<span |
|
|
|
|
className="edit-icon" |
|
|
|
|
onClick={() => handleEditClick(invoice.id, invoice.referencia, invoice.clasificador)} |
|
|
|
|
> |
|
|
|
|
<BsFillPencilFill /> |
|
|
|
|
</span> |
|
|
|
|
</td> |
|
|
|
|
</tr> |
|
|
|
|
{selectedInvoiceId === invoice.id && ( |
|
|
|
|
<tr> |
|
|
|
|