|
|
@ -1,20 +1,18 @@ |
|
|
|
import React, { useState, useEffect } from 'react'; |
|
|
|
import React, { useState, useEffect } from 'react'; |
|
|
|
import axios from 'axios'; |
|
|
|
import axios from 'axios'; |
|
|
|
import { Invoice, InvoiceDetail } from '../Interfaces/Invoice'; |
|
|
|
import { Invoice, InvoiceDetail } from '../Interfaces/Invoice'; |
|
|
|
import { BsFillPencilFill } from 'react-icons/bs'; |
|
|
|
import { BsFillPencilFill, BsCaretDownFill, BsChevronLeft, BsChevronRight } from 'react-icons/bs'; |
|
|
|
import '../HojasDeEstilo/AmazonInovice.css'; |
|
|
|
import '../HojasDeEstilo/AmazonInovice.css'; |
|
|
|
|
|
|
|
|
|
|
|
const AmazonInvoice: React.FC = () => { |
|
|
|
const AmazonInvoice: React.FC = () => { |
|
|
|
const [invoices, setInvoices] = useState<Invoice[]>([]); |
|
|
|
const [invoices, setInvoices] = useState<Invoice[]>([]); |
|
|
|
const [currentPage, setCurrentPage] = useState(1); |
|
|
|
const [currentPage, setCurrentPage] = useState(1); |
|
|
|
const [itemsPerPage] = useState(27); |
|
|
|
const [itemsPerPage] = useState(17); |
|
|
|
const [selectedInvoiceId, setSelectedInvoiceId] = useState<number | null>(null); |
|
|
|
const [selectedInvoiceId, setSelectedInvoiceId] = useState<number | null>(null); |
|
|
|
const [invoiceDetails, setInvoiceDetails] = useState<InvoiceDetail[]>([]); |
|
|
|
const [invoiceDetails, setInvoiceDetails] = useState<InvoiceDetail[]>([]); |
|
|
|
const [editedReference, setEditedReference] = useState(''); |
|
|
|
const [editedReference, setEditedReference] = useState(''); |
|
|
|
const [editedClasificador, setEditedClasificador] = useState(0); |
|
|
|
const [editedClasificador, setEditedClasificador] = useState(0); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
useEffect(() => { |
|
|
|
axios |
|
|
|
axios |
|
|
|
.get<Invoice[]>(`https://localhost:5051/api/AmazonInvoice/AmazonInvoiceIdMaster`) |
|
|
|
.get<Invoice[]>(`https://localhost:5051/api/AmazonInvoice/AmazonInvoiceIdMaster`) |
|
|
@ -44,8 +42,8 @@ const AmazonInvoice: React.FC = () => { |
|
|
|
axios |
|
|
|
axios |
|
|
|
.get<InvoiceDetail[]>(`https://localhost:5051/api/AmazonInvoice/AmazonInvoicedetailid`, { |
|
|
|
.get<InvoiceDetail[]>(`https://localhost:5051/api/AmazonInvoice/AmazonInvoicedetailid`, { |
|
|
|
params: { |
|
|
|
params: { |
|
|
|
id: id |
|
|
|
id: id, |
|
|
|
} |
|
|
|
}, |
|
|
|
}) |
|
|
|
}) |
|
|
|
.then((response) => { |
|
|
|
.then((response) => { |
|
|
|
const invoiceDetailData: InvoiceDetail[] = response.data; |
|
|
|
const invoiceDetailData: InvoiceDetail[] = response.data; |
|
|
@ -69,7 +67,7 @@ const AmazonInvoice: React.FC = () => { |
|
|
|
const updatedData = { |
|
|
|
const updatedData = { |
|
|
|
id: id, |
|
|
|
id: id, |
|
|
|
referencia: newReference, |
|
|
|
referencia: newReference, |
|
|
|
clasificador: parseInt(newClasificador) |
|
|
|
clasificador: parseInt(newClasificador), |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
setSelectedInvoiceId(id); |
|
|
|
setSelectedInvoiceId(id); |
|
|
@ -81,7 +79,7 @@ const AmazonInvoice: React.FC = () => { |
|
|
|
return { |
|
|
|
return { |
|
|
|
...invoice, |
|
|
|
...invoice, |
|
|
|
referencia: updatedData.referencia, |
|
|
|
referencia: updatedData.referencia, |
|
|
|
clasificador: updatedData.clasificador |
|
|
|
clasificador: updatedData.clasificador, |
|
|
|
}; |
|
|
|
}; |
|
|
|
} |
|
|
|
} |
|
|
|
return invoice; |
|
|
|
return invoice; |
|
|
@ -92,8 +90,8 @@ const AmazonInvoice: React.FC = () => { |
|
|
|
axios |
|
|
|
axios |
|
|
|
.put(`https://localhost:5051/api/AmazonInvoice/AmazonInvoiceMasterPut/`, updatedData, { |
|
|
|
.put(`https://localhost:5051/api/AmazonInvoice/AmazonInvoiceMasterPut/`, updatedData, { |
|
|
|
headers: { |
|
|
|
headers: { |
|
|
|
'Content-Type': 'application/json' |
|
|
|
'Content-Type': 'application/json', |
|
|
|
} |
|
|
|
}, |
|
|
|
}) |
|
|
|
}) |
|
|
|
.catch((error) => { |
|
|
|
.catch((error) => { |
|
|
|
console.log(error); |
|
|
|
console.log(error); |
|
|
@ -107,7 +105,10 @@ const AmazonInvoice: React.FC = () => { |
|
|
|
const { invoiceNumber, amazonShipmentReferenceId } = invoiceDetailToUpdate; |
|
|
|
const { invoiceNumber, amazonShipmentReferenceId } = invoiceDetailToUpdate; |
|
|
|
|
|
|
|
|
|
|
|
const newInvoiceNumber = prompt('Ingrese el nuevo número de factura:', invoiceNumber); |
|
|
|
const newInvoiceNumber = prompt('Ingrese el nuevo número de factura:', invoiceNumber); |
|
|
|
const newAmazonShipmentReferenceId = prompt('Ingrese la nueva referencia de envío de Amazon:', amazonShipmentReferenceId); |
|
|
|
const newAmazonShipmentReferenceId = prompt( |
|
|
|
|
|
|
|
'Ingrese la nueva referencia de envío de Amazon:', |
|
|
|
|
|
|
|
amazonShipmentReferenceId |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
|
|
if (newInvoiceNumber !== null && newAmazonShipmentReferenceId !== null) { |
|
|
|
if (newInvoiceNumber !== null && newAmazonShipmentReferenceId !== null) { |
|
|
|
const updatedDetail = { |
|
|
|
const updatedDetail = { |
|
|
@ -135,6 +136,11 @@ const AmazonInvoice: React.FC = () => { |
|
|
|
} |
|
|
|
} |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const handlePageChange = (page: number) => { |
|
|
|
|
|
|
|
setCurrentPage(page); |
|
|
|
|
|
|
|
setSelectedInvoiceId(null); |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
return ( |
|
|
|
<div className="container"> |
|
|
|
<div className="container"> |
|
|
|
<h1>Amazon Invoice</h1> |
|
|
|
<h1>Amazon Invoice</h1> |
|
|
@ -212,18 +218,38 @@ const AmazonInvoice: React.FC = () => { |
|
|
|
))} |
|
|
|
))} |
|
|
|
</tbody> |
|
|
|
</tbody> |
|
|
|
</table> |
|
|
|
</table> |
|
|
|
|
|
|
|
<nav aria-label="Page navigation example"> |
|
|
|
<ul className="pagination"> |
|
|
|
<ul className="pagination"> |
|
|
|
|
|
|
|
<li className={`page-item ${currentPage === 1 ? 'disabled' : ''}`}> |
|
|
|
|
|
|
|
<button className="page-link" onClick={() => handlePageChange(currentPage - 1)}> |
|
|
|
|
|
|
|
Previous |
|
|
|
|
|
|
|
</button> |
|
|
|
|
|
|
|
</li> |
|
|
|
{Array.from({ length: Math.ceil(invoices.length / itemsPerPage) }).map((_, index) => ( |
|
|
|
{Array.from({ length: Math.ceil(invoices.length / itemsPerPage) }).map((_, index) => ( |
|
|
|
<li key={index} className={`page-item ${currentPage === index + 1 ? 'active' : ''}`}> |
|
|
|
<li |
|
|
|
<button className="page-link" onClick={() => paginate(index + 1)}> |
|
|
|
key={index} |
|
|
|
|
|
|
|
className={`page-item ${currentPage === index + 1 ? 'active' : ''}`} |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
<button |
|
|
|
|
|
|
|
className={`page-link ${currentPage === index + 1 ? 'current-page' : ''}`} |
|
|
|
|
|
|
|
onClick={() => handlePageChange(index + 1)} |
|
|
|
|
|
|
|
> |
|
|
|
{index + 1} |
|
|
|
{index + 1} |
|
|
|
</button> |
|
|
|
</button> |
|
|
|
</li> |
|
|
|
</li> |
|
|
|
))} |
|
|
|
))} |
|
|
|
|
|
|
|
<li |
|
|
|
|
|
|
|
className={`page-item ${currentPage === Math.ceil(invoices.length / itemsPerPage) ? 'disabled' : ''}`} |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
<button className="page-link" onClick={() => handlePageChange(currentPage + 1)}> |
|
|
|
|
|
|
|
Next |
|
|
|
|
|
|
|
</button> |
|
|
|
|
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
</ul> |
|
|
|
|
|
|
|
</nav> |
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
); |
|
|
|
); |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
export default AmazonInvoice; |
|
|
|
export default AmazonInvoice; |
|
|
|
|
|
|
|
|