14-Junio-TermiandoEjercisio

src/Componentes/AmazonInvoice.tsx

@@ -4,7 +4,7 @@ import { Invoice, InvoiceDetail } from '../Interfaces/Invoice';
 import { BsFillPencilFill } from 'react-icons/bs';
 import '../HojasDeEstilo/AmazonInovice.css';
 
-const AmazonInvoice: React.FC = () => {
+const AmazonInvoice: React.FC = () => {   
   const [invoices, setInvoices] = useState<Invoice[]>([]);
   const [currentPage, setCurrentPage] = useState(1);
   const [itemsPerPage] = useState(27);
@@ -13,6 +13,8 @@ const AmazonInvoice: React.FC = () => {
   const [editedReference, setEditedReference] = useState('');
   const [editedClasificador, setEditedClasificador] = useState(0);
 
+
+
   useEffect(() => {
     axios
       .get<Invoice[]>(`https://localhost:5051/api/AmazonInvoice/AmazonInvoiceIdMaster`)
@@ -60,8 +62,8 @@ const AmazonInvoice: React.FC = () => {
     setEditedReference(referencia);
     setEditedClasificador(clasificador);
 
-    const newReference = prompt('Ingrese La nueva Referencia:', referencia);
+    const newReference = prompt('Ingrese la nueva referencia:', referencia);
-    const newClasificador = prompt('Ingrese el nuevo numero del clasificador:', clasificador.toString());
+    const newClasificador = prompt('Ingrese el nuevo número del clasificador:', clasificador.toString());
 
     if (newReference !== null && newClasificador !== null) {
       const updatedData = {
@@ -99,6 +101,40 @@ const AmazonInvoice: React.FC = () => {
     }
   };
 
+  const handleEditDetailClick = (itemId: string) => {
+    const invoiceDetailToUpdate = invoiceDetails.find((detail) => detail.itemId === itemId);
+    if (invoiceDetailToUpdate) {
+      const { invoiceNumber, amazonShipmentReferenceId } = invoiceDetailToUpdate;
+
+      const newInvoiceNumber = prompt('Ingrese el nuevo número de factura:', invoiceNumber);
+      const newAmazonShipmentReferenceId = prompt('Ingrese la nueva referencia de envío de Amazon:', amazonShipmentReferenceId);
+
+      if (newInvoiceNumber !== null && newAmazonShipmentReferenceId !== null) {
+        const updatedDetail = {
+          ...invoiceDetailToUpdate,
+          invoiceNumber: newInvoiceNumber,
+          amazonShipmentReferenceId: newAmazonShipmentReferenceId,
+        };
+
+        const updatedDetails = invoiceDetails.map((detail) =>
+          detail.itemId === itemId ? updatedDetail : detail
+        );
+
+        setInvoiceDetails(updatedDetails);
+
+        axios
+          .put(`https://localhost:5051/api/AmazonInvoice/AmazonInvoiceDetailPut`, updatedDetail, {
+            headers: {
+              'Content-Type': 'application/json',
+            },
+          })
+          .catch((error) => {
+            console.log(error);
+          });
+      }
+    }
+  };
+
   return (
     <div className="container">
       <h1>Amazon Invoice</h1>
@@ -146,6 +182,7 @@ const AmazonInvoice: React.FC = () => {
                           <th>Amazon Shipment Reference ID</th>
                           <th>Item ID</th>
                           <th>FCreacion</th>
+                          <th>Acciones</th>
                         </tr>
                       </thead>
                       <tbody>
@@ -156,6 +193,14 @@ const AmazonInvoice: React.FC = () => {
                             <td>{detail.amazonShipmentReferenceId}</td>
                             <td>{detail.itemId}</td>
                             <td>{detail.fCreacion}</td>
+                            <td>
+                              <span
+                                className="edit-icon"
+                                onClick={() => handleEditDetailClick(detail.itemId)}
+                              >
+                                <BsFillPencilFill />
+                              </span>
+                            </td>
                           </tr>
                         ))}
                       </tbody>
@@ -181,3 +226,4 @@ const AmazonInvoice: React.FC = () => {
 };
 
 export default AmazonInvoice;
+