12 Junio 2023

package.json

@@ -16,6 +16,7 @@
     "ag-grid-react": "^29.3.5",
     "axios": "^1.4.0",
     "bootstrap": "^5.3.0",
+    "botstrap": "^0.20.1",
     "buffer": "^6.0.3",
     "devextreme": "^22.2.4",
     "devextreme-react": "^22.2.6",

src/App.tsx

@@ -9,6 +9,8 @@ import Formulario from './Componentes/Formulario';
 import AmazonInvoice from './Componentes/AmazonInvoice';
 import ImagenLogo from './Imagenes/descarga.png';
 import ImagenFondo from './Imagenes/fondo.jpg';
+// import "bootstrap/dist/css/bootsrap.min.css"; 
+
 
 axios.interceptors.response.use(
   function (response) {

src/Componentes/AmazonInvoice.tsx

@@ -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) => {
@@ -52,8 +55,60 @@ 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">
       <h1>Amazon Invoice</h1>
@@ -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>
@@ -95,15 +159,15 @@ const AmazonInvoice: React.FC = () => {
                         </tr>
                       </thead>
                       <tbody>
-                      {invoiceDetails.map((detail: InvoiceDetail, index: number) => (
+                        {invoiceDetails.map((detail: InvoiceDetail, index: number) => (
-                      <tr key={index}>
+                          <tr key={index}>
-                        <td>{detail.idHeader}</td>
+                            <td>{detail.idHeader}</td>
-                        <td>{detail.invoiceNumber}</td>
+                            <td>{detail.invoiceNumber}</td>
-                        <td>{detail.amazonShipmentReferenceId}</td>
+                            <td>{detail.amazonShipmentReferenceId}</td>
-                        <td>{detail.itemId}</td>
+                            <td>{detail.itemId}</td>
-                        <td>{detail.fCreacion}</td>
+                            <td>{detail.fCreacion}</td>
-                      </tr>
+                          </tr>
-                    ))}
+                        ))}
                       </tbody>
                     </table>
                   </td>

src/Interfaces/InvoiceMasterPut.ts

@@ -0,0 +1,23 @@
+export interface InvoiceMasterPut {
+
+Id : Number 
+Referencia  : string 
+ComercialInvoiceDate : string 
+FechaCreacion : string 
+Clasificador : number 
+Estatus : number
+TrailerId : string 
+
+}
+
+
+
+export interface InvoiceDetailPut{
+IdHeader : number 
+
+
+
+
+
+
+}