|
|
|
@ -1,12 +1,14 @@ |
|
|
|
|
import React, { useState, useEffect } from 'react'; |
|
|
|
|
import axios from 'axios'; |
|
|
|
|
import { Invoice } from '../Interfaces/Invoice'; |
|
|
|
|
import '../HojasDeEstilo/AmazonInovice.css' |
|
|
|
|
import { Invoice, InvoiceDetail } from '../Interfaces/Invoice'; |
|
|
|
|
import '../HojasDeEstilo/AmazonInovice.css'; |
|
|
|
|
|
|
|
|
|
const AmazonInvoice: React.FC = () => { |
|
|
|
|
const [invoices, setInvoices] = useState<Invoice[]>([]); |
|
|
|
|
const [currentPage, setCurrentPage] = useState(1); |
|
|
|
|
const [itemsPerPage] = useState(20); |
|
|
|
|
const [selectedInvoiceId, setSelectedInvoiceId] = useState<number | null>(null); |
|
|
|
|
const [invoiceDetails, setInvoiceDetails] = useState<InvoiceDetail[]>([]); |
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
axios |
|
|
|
@ -24,7 +26,34 @@ const AmazonInvoice: React.FC = () => { |
|
|
|
|
const indexOfFirstItem = indexOfLastItem - itemsPerPage; |
|
|
|
|
const currentInvoices = invoices.slice(indexOfFirstItem, indexOfLastItem); |
|
|
|
|
|
|
|
|
|
const paginate = (pageNumber: number) => setCurrentPage(pageNumber); |
|
|
|
|
const paginate = (pageNumber: number) => { |
|
|
|
|
setCurrentPage(pageNumber); |
|
|
|
|
setSelectedInvoiceId(null); // Restablece el detalle de la factura seleccionada al cambiar de página
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const handleInvoiceClick = (id: number) => { |
|
|
|
|
if (id === selectedInvoiceId) { |
|
|
|
|
setSelectedInvoiceId(null); |
|
|
|
|
} else { |
|
|
|
|
setSelectedInvoiceId(id); |
|
|
|
|
axios |
|
|
|
|
.get<InvoiceDetail[]>(`https://localhost:5051/api/AmazonInvoice/AmazonInvoicedetailid`, { |
|
|
|
|
params: { |
|
|
|
|
id: id |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
.then((response) => { |
|
|
|
|
const invoiceDetailData: InvoiceDetail[] = response.data; |
|
|
|
|
console.log(invoiceDetailData); // Verificar los datos recibidos en la consola
|
|
|
|
|
setInvoiceDetails(invoiceDetailData); |
|
|
|
|
}) |
|
|
|
|
.catch((error) => { |
|
|
|
|
console.log(error); |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<div className="container"> |
|
|
|
@ -43,15 +72,45 @@ const AmazonInvoice: React.FC = () => { |
|
|
|
|
</thead> |
|
|
|
|
<tbody> |
|
|
|
|
{currentInvoices.map((invoice: Invoice) => ( |
|
|
|
|
<tr key={invoice.id}> |
|
|
|
|
<td>{invoice.id}</td> |
|
|
|
|
<td>{invoice.referencia}</td> |
|
|
|
|
<td>{invoice.commercialInvoiceDate}</td> |
|
|
|
|
<td>{invoice.fCreacion}</td> |
|
|
|
|
<td>{invoice.clasificador}</td> |
|
|
|
|
<td>{invoice.estatus}</td> |
|
|
|
|
<td>{invoice.trailerId || 'N/A'}</td> |
|
|
|
|
</tr> |
|
|
|
|
<React.Fragment key={invoice.id}> |
|
|
|
|
<tr onClick={() => handleInvoiceClick(invoice.id)}> |
|
|
|
|
<td>{invoice.id}</td> |
|
|
|
|
<td>{invoice.referencia}</td> |
|
|
|
|
<td>{invoice.commercialInvoiceDate}</td> |
|
|
|
|
<td>{invoice.fCreacion}</td> |
|
|
|
|
<td>{invoice.clasificador}</td> |
|
|
|
|
<td>{invoice.estatus}</td> |
|
|
|
|
<td>{invoice.trailerId || 'N/A'}</td> |
|
|
|
|
</tr> |
|
|
|
|
{selectedInvoiceId === invoice.id && ( |
|
|
|
|
<tr> |
|
|
|
|
<td colSpan={7}> |
|
|
|
|
<table className="subtable"> |
|
|
|
|
<thead> |
|
|
|
|
<tr> |
|
|
|
|
<th>IdHeader</th> |
|
|
|
|
<th>Invoice Number</th> |
|
|
|
|
<th>Amazon Shipment Reference ID</th> |
|
|
|
|
<th>Item ID</th> |
|
|
|
|
<th>FCreacion</th> |
|
|
|
|
</tr> |
|
|
|
|
</thead> |
|
|
|
|
<tbody> |
|
|
|
|
{invoiceDetails.map((detail: InvoiceDetail) => ( |
|
|
|
|
<tr key={detail.idHeader}> |
|
|
|
|
<td>{detail.idHeader}</td> |
|
|
|
|
<td>{detail.invoiceNumber}</td> |
|
|
|
|
<td>{detail.amazonShipmentReferenceId}</td> |
|
|
|
|
<td>{detail.itemId}</td> |
|
|
|
|
<td>{detail.fCreacion}</td> |
|
|
|
|
</tr> |
|
|
|
|
))} |
|
|
|
|
</tbody> |
|
|
|
|
</table> |
|
|
|
|
</td> |
|
|
|
|
</tr> |
|
|
|
|
)} |
|
|
|
|
</React.Fragment> |
|
|
|
|
))} |
|
|
|
|
</tbody> |
|
|
|
|
</table> |
|
|
|
@ -68,4 +127,4 @@ const AmazonInvoice: React.FC = () => { |
|
|
|
|
); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
export default AmazonInvoice; |
|
|
|
|
export default AmazonInvoice; |