Se agregan los botones para editar una rectificacion

src/Components/Corresponsales/Rectificaciones/HistorialRectificaciones.tsx

@@ -1,13 +1,18 @@
 import { useEffect, useState } from "react"
-import { Alert, Card, Col, Row, Table } from "react-bootstrap"
+import { Alert, Card, Col, Form, Row, Table } from "react-bootstrap"
 import { useSelector } from "react-redux"
 import { RootState } from "../../../store/store"
 import { AgGridReact } from "ag-grid-react"
 import ICorresponsalRectificacionHistorico from "../../../Interfaces/Corresponsales/ICorresponsalRectificacionHistorico"
+import { FaPencilAlt, FaSave } from "react-icons/fa"
+import { CiCircleAlert } from "react-icons/ci"
+import { ICatClavesPedimentos } from "../../../Interfaces/Catalogos/ICatClavesPedimentos"
+import { BsSave, BsSave2, BsXCircle } from "react-icons/bs"
 
 interface IProps{
     //pedimento: number
     IdPedimentoConsolidado: string
+    ClavesPedimento: ICatClavesPedimentos[]
 }
 
 export const HistorialRectificaciones: React.FC<IProps> = (props) => {
@@ -38,6 +43,7 @@ export const HistorialRectificaciones: React.FC<IProps> = (props) => {
     ])
     const mcRectificaciones = useSelector((state:RootState) => state.CRectificaciones.RectificacionesPedimentos)
     const [Rectificaciones, setRectificaciones] = useState<ICorresponsalRectificacionHistorico[]>([]);
+    const [EditMode, setIsEditMode] = useState(false)
     useEffect(()=>{
         if(props.IdPedimentoConsolidado !== '#')
             setRectificaciones(mcRectificaciones.filter(x => x.idPedimentoConsolidado === + props.IdPedimentoConsolidado))
@@ -60,19 +66,63 @@ export const HistorialRectificaciones: React.FC<IProps> = (props) => {
                         size="sm"
                     >
                         <thead>
-                            <tr><th>#</th><th>Aduana</th><th>Patente</th><th>Pedimento</th><th>Clave</th><th>Fecha de Pago</th></tr>
+                            <tr><th>#</th><th>Aduana</th><th>Patente</th><th>Pedimento</th><th>Clave</th><th>Fecha de Pago</th><th></th></tr>
                         </thead>
                         <tbody>
                             {Rectificaciones
                                 ? Rectificaciones.map((item, index) => {
                                     return(
+                                        !EditMode ? 
                                         <tr>
                                             <td>{index + 1}</td>
                                             <td>{item.aduana}</td>
                                             <td>{item.patente}</td>
                                             <td>{item.pedimento}</td>
-                                        <td>{item.clave}</td>
+                                            <td style={{width:'113px'}}>{item.clave}</td>
-                                        <td>{item.fechaPago ? item.fechaPago.substring(0,10) : ''}</td>
+                                            <td style={{width:'267px'}}>{item.fechaPago ? item.fechaPago.substring(0,10) : ''}</td>
+                                            <td style={{textAlign:'center'}}><FaPencilAlt style={{cursor: 'pointer', color:'blue'}} onClick={() => setIsEditMode(true)}/></td>
+                                        </tr> : 
+                                        <tr>
+                                            <td>{index + 1}</td>
+                                            <td>{item.aduana}</td>
+                                            <td>{item.patente}</td>
+                                            <td>{item.pedimento}</td>
+                                            <td style={{width:'113px'}}>
+                                                <Form.Control
+                                                    as="select"
+                                                    id="CmbClavePedimento"
+                                                    onChange={(e) => {
+                                                        item.clave = e.target.value
+                                                    }}
+                                                    className="form-select form-select-sm"
+                                                    value={item.clave}
+                                                >
+                                                    <option value="-Seleccione-">-Seleccione-</option>
+                                                    {props.ClavesPedimento
+                                                        ? props.ClavesPedimento.map((item, index) => {
+                                                            return (
+                                                            <option key={item.id} value={item.clave}>
+                                                                {item.clave}
+                                                            </option>
+                                                            )
+                                                        })
+                                                    : ''}
+                                                </Form.Control> 
+                                            </td>
+                                            <td style={{width:'267px'}}>
+                                                <Form.Control
+                                                    type="date"
+                                                    id="FechaPago"
+                                                    size="sm"
+                                                    value={item.fechaPago}
+                                                    onChange={(e) => item.fechaPago = e.target.value}
+                                                />
+                                            </td>
+                                            <td style={{textAlign:'center'}}>
+                                                <FaSave style={{cursor: 'pointer', color:'blue'}} onClick={() => setIsEditMode(false)}/>
+                                                &nbsp;
+                                                <BsXCircle style={{cursor: 'pointer', color:'red'}} onClick={() => setIsEditMode(false)}/>
+                                            </td>
                                         </tr>
                                     )
                                 })

src/Components/Corresponsales/Rectificaciones/NuevaRectificacion.tsx

@@ -332,7 +332,7 @@ export const NuevaRectificacion:React.FC<IProps> = (props) => {
                     <Col xs={2}></Col>
                 </Row>
                 <hr/> </>: '' }
-                    <HistorialRectificaciones IdPedimentoConsolidado={IdPedimentoConsolidadoSelected} ></HistorialRectificaciones>
+                    <HistorialRectificaciones IdPedimentoConsolidado={IdPedimentoConsolidadoSelected} ClavesPedimento={props.ClavesPedimento}></HistorialRectificaciones>
                 <MsgInformativo
                     show={show}
                     msg={msg}