feature/Agregar_Multiples_Rectificaciones_Al_Mismo_Trafico_20240109
parent
5ebde71d32
commit
8a798d2249
@ -0,0 +1,85 @@ |
|||||||
|
import { useEffect, useState } from "react" |
||||||
|
import { Alert, Card, Col, 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" |
||||||
|
|
||||||
|
interface IProps{ |
||||||
|
//pedimento: number
|
||||||
|
IdPedimentoConsolidado: string |
||||||
|
} |
||||||
|
|
||||||
|
export const HistorialRectificaciones: React.FC<IProps> = (props) => { |
||||||
|
const [columnDefs] = useState([ |
||||||
|
{ field: 'patente', width: 110, sortable: true, filter: true }, |
||||||
|
{ field: 'aduana', width: 110, sortable: true, filter: true }, |
||||||
|
{ field: 'pedimento', width: 120, sortable: true, filter: true }, |
||||||
|
{ field: 'clave', width: 100, sortable: true, filter: true }, |
||||||
|
{ |
||||||
|
field: 'fechaPago', |
||||||
|
sortable: true, |
||||||
|
filter: true, |
||||||
|
cellRenderer: (params: any) => { |
||||||
|
if (params.value) return params.value.substring(0, 10) |
||||||
|
else return '' |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
field: 'fhCreacion', |
||||||
|
sortable: true, |
||||||
|
filter: true, |
||||||
|
cellRenderer: (params: any) => { |
||||||
|
if (params.value) return params.value |
||||||
|
else return '' |
||||||
|
}, |
||||||
|
flex:1 |
||||||
|
}, |
||||||
|
]) |
||||||
|
const mcRectificaciones = useSelector((state:RootState) => state.CRectificaciones.RectificacionesPedimentos) |
||||||
|
const [Rectificaciones, setRectificaciones] = useState<ICorresponsalRectificacionHistorico[]>([]); |
||||||
|
useEffect(()=>{ |
||||||
|
if(props.IdPedimentoConsolidado !== '#') |
||||||
|
setRectificaciones(mcRectificaciones.filter(x => x.idPedimentoConsolidado === + props.IdPedimentoConsolidado)) |
||||||
|
else |
||||||
|
setRectificaciones(mcRectificaciones) |
||||||
|
},[mcRectificaciones, props.IdPedimentoConsolidado]) |
||||||
|
|
||||||
|
return( |
||||||
|
<div> |
||||||
|
<Row> |
||||||
|
<Col xs={12}> |
||||||
|
<b>Historial de Pedimentos Rectificados</b> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
<br/> |
||||||
|
<div className="table-wrapper" style={{width:'100%', maxHeight:'100%'}}> |
||||||
|
<Table |
||||||
|
className="table table-earnings table-earnings__challenge" |
||||||
|
hover |
||||||
|
size="sm" |
||||||
|
> |
||||||
|
<thead> |
||||||
|
<tr><th>#</th><th>Aduana</th><th>Patente</th><th>Pedimento</th><th>Clave</th><th>Fecha de Pago</th></tr> |
||||||
|
</thead> |
||||||
|
<tbody> |
||||||
|
{Rectificaciones |
||||||
|
? Rectificaciones.map((item, index) => { |
||||||
|
return( |
||||||
|
<tr> |
||||||
|
<td>{index + 1}</td> |
||||||
|
<td>{item.aduana}</td> |
||||||
|
<td>{item.patente}</td> |
||||||
|
<td>{item.pedimento}</td> |
||||||
|
<td>{item.clave}</td> |
||||||
|
<td>{item.fechaPago ? item.fechaPago.substring(0,10) : ''}</td> |
||||||
|
</tr> |
||||||
|
) |
||||||
|
}) |
||||||
|
: ''} |
||||||
|
</tbody> |
||||||
|
</Table> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
@ -0,0 +1,348 @@ |
|||||||
|
import { useState } from "react"; |
||||||
|
import { Button, Card, Col, Form, FormControl, FormLabel, Row } from "react-bootstrap" |
||||||
|
import CurrencyFormat from "react-currency-format"; |
||||||
|
import { IconContext } from "react-icons"; |
||||||
|
import { FaEraser } from "react-icons/fa"; |
||||||
|
import CTrafDataService from "../../../Services/Corresponsalias/Corresponsales.Trafico.Services" |
||||||
|
import { useDispatch, useSelector } from "react-redux"; |
||||||
|
import { ICatClavesPedimentos } from "../../../Interfaces/Catalogos/ICatClavesPedimentos"; |
||||||
|
import { DTOPedimentosConsolidados } from "../../../DTO/Corresponsales/DTOPedimentosConsolidados"; |
||||||
|
import DTORectificacionHistorico from "../../../DTO/Corresponsales/DTORectificacionHistorico"; |
||||||
|
import { updatePedimento } from "../../../store/features/Corresponsales/CorresponsalesPedimentosConsolidadosSlice"; |
||||||
|
import { addRectificacion } from "../../../store/features/Corresponsales/CorresponsalesPedimentosRectificacionesSlice"; |
||||||
|
import ICorresponsalRectificacionHistorico from "../../../Interfaces/Corresponsales/ICorresponsalRectificacionHistorico"; |
||||||
|
import { RootState } from "../../../store/store"; |
||||||
|
import { HistorialRectificaciones } from "./HistorialRectificaciones"; |
||||||
|
import { MsgInformativo } from "../../Utils/Toast/msgInformativo"; |
||||||
|
|
||||||
|
interface IProps { |
||||||
|
IdTrafico: number |
||||||
|
Aduana: number |
||||||
|
Patente: number |
||||||
|
ClavesPedimento: ICatClavesPedimentos[] |
||||||
|
Pedimentos: DTOPedimentosConsolidados[] |
||||||
|
Depto: string |
||||||
|
UserId: number |
||||||
|
onAppendRectificacion: (data: DTORectificacionHistorico) => void |
||||||
|
} |
||||||
|
|
||||||
|
export const NuevaRectificacion:React.FC<IProps> = (props) => { |
||||||
|
const dispatch = useDispatch() |
||||||
|
const [header, setHeader] = useState('') |
||||||
|
const [show, setShowMsg] = useState(false) |
||||||
|
const [msg, setMsg] = useState('') |
||||||
|
const msgColor = 'primary' |
||||||
|
|
||||||
|
const [showHistorial, setShowHistorial] = useState(false) |
||||||
|
|
||||||
|
const [Id, setId] = useState(0) |
||||||
|
const [Aduana, setAduana] = useState(props.Aduana) |
||||||
|
const [Patente, setPatente] = useState(props.Patente) |
||||||
|
const [Pedimento, setPedimento] = useState(0) |
||||||
|
const [ClavePedimento, setClavePedimento] = useState(''); |
||||||
|
const [FechaPago, setFechaPago] = useState('') |
||||||
|
|
||||||
|
const [IdPedimentoH, setIdPedimentoH] = useState(0) |
||||||
|
const [AduanaH, setAduanaH] = useState(props.Aduana) |
||||||
|
const [PatenteH, setPatenteH] = useState(props.Patente) |
||||||
|
const [PedimentoH, setPedimentoH] = useState(0) |
||||||
|
const [ClavePedimentoH, setClavePedimentoH] = useState('') |
||||||
|
const [FechaPagoH, setFechaPagoH] = useState('') |
||||||
|
|
||||||
|
const [IdPedimentoConsolidadoSelected, setIdPedimentoConsolidadoSelected] = useState("#") |
||||||
|
|
||||||
|
|
||||||
|
function setDate(fecha: string | undefined): string { |
||||||
|
if (!fecha) return '' |
||||||
|
else { |
||||||
|
var dd = fecha?.substring(8, 10) |
||||||
|
var mm = fecha?.substring(5, 7) |
||||||
|
var yyyy = fecha?.substring(0, 4) |
||||||
|
return yyyy + '-' + mm + '-' + dd |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const generaRectificacion = () => { |
||||||
|
if (Aduana && Patente && Pedimento && ClavePedimento.length>0 && FechaPago) { |
||||||
|
const data : DTORectificacionHistorico = { |
||||||
|
IdTrafico: props.IdTrafico, |
||||||
|
IdUsuario: props.UserId, |
||||||
|
IdPedimento: IdPedimentoH, |
||||||
|
Aduana: Aduana, |
||||||
|
Patente: Patente, |
||||||
|
Pedimento: Pedimento, |
||||||
|
Clave: ClavePedimento, |
||||||
|
FechaPago: FechaPago, |
||||||
|
AduanaH: AduanaH, |
||||||
|
PatenteH: PatenteH, |
||||||
|
PedimentoH: PedimentoH, |
||||||
|
ClaveH: ClavePedimentoH, |
||||||
|
FechaPagoH: FechaPagoH |
||||||
|
} |
||||||
|
CTrafDataService.AppendRectificacionHistorico(data) |
||||||
|
.then((response) => { |
||||||
|
setHeader('Informativo') |
||||||
|
setMsg('La rectificación se creó correctamente') |
||||||
|
setShowMsg(true) |
||||||
|
dispatch( |
||||||
|
updatePedimento({ |
||||||
|
id: data.IdPedimento, |
||||||
|
idTrafico: data.IdTrafico, |
||||||
|
aduana: data.Aduana, |
||||||
|
patente: data.Patente, |
||||||
|
pedimento: data.Pedimento, |
||||||
|
clave: data.Clave, |
||||||
|
fechaPago: data.FechaPago |
||||||
|
}) |
||||||
|
) |
||||||
|
dispatch( |
||||||
|
addRectificacion({ |
||||||
|
id: response.data.id, |
||||||
|
usuario: response.data.usuario, |
||||||
|
idTrafico: response.data.idTrafico, |
||||||
|
aduana: response.data.aduana, |
||||||
|
patente: response.data.patente, |
||||||
|
pedimento: response.data.pedimento, |
||||||
|
clave: response.data.clave, |
||||||
|
fechaPago: response.data.fechaPago, |
||||||
|
fhCreacion: response.data.fhCreacion, |
||||||
|
activo: response.data.activo, |
||||||
|
idPedimentoConsolidado: response.data.idPedimentoConsolidado |
||||||
|
}) |
||||||
|
) |
||||||
|
cleanForm() |
||||||
|
props.onAppendRectificacion(data) |
||||||
|
return |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
setHeader('Error') |
||||||
|
setMsg('Ocurrió un error al crear la rectificación. Favor de actualizar la página e intentarlo nuevamente.') |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
}) |
||||||
|
} else { |
||||||
|
setHeader('Error') |
||||||
|
setMsg('Parea poder generar este proceso es necesario que los siguientes campos tengan informacion: Patente, Aduana, Pedimento, Clave, Fecha pago') |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const PrepareRectificacion = (idPedimentoConsolidado: number) => { |
||||||
|
var dto = props.Pedimentos.filter(x => x.id === idPedimentoConsolidado)[0] |
||||||
|
setIdPedimentoH(dto.id) |
||||||
|
setAduanaH(dto.aduana) |
||||||
|
setPatenteH(dto.patente) |
||||||
|
setPedimentoH(dto.pedimento) |
||||||
|
setClavePedimentoH(dto.clave) |
||||||
|
setFechaPagoH(dto.fechaPago) |
||||||
|
setShowHistorial(true) |
||||||
|
} |
||||||
|
|
||||||
|
const CancelIsRectificacion = () => { |
||||||
|
setAduanaH(0) |
||||||
|
setPatenteH(0) |
||||||
|
setPedimentoH(0) |
||||||
|
setClavePedimentoH('') |
||||||
|
setFechaPagoH('') |
||||||
|
setIdPedimentoH(0) |
||||||
|
} |
||||||
|
|
||||||
|
const cleanForm = () => { |
||||||
|
setIdPedimentoConsolidadoSelected("#") |
||||||
|
setIdPedimentoH(0) |
||||||
|
setPedimentoH(0) |
||||||
|
setClavePedimentoH('') |
||||||
|
setFechaPagoH('') |
||||||
|
setId(0) |
||||||
|
setPedimento(0) |
||||||
|
setClavePedimento('') |
||||||
|
setFechaPago('') |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
return ( |
||||||
|
<Card style={{height:'100%'}}> |
||||||
|
<Card.Body style={{overflowY:'scroll'}}> |
||||||
|
{ props.Depto === 'Corresponsalias' ? <> |
||||||
|
<Row className="justify-content-end align-items-center"> |
||||||
|
<Col xs={1}><span>Original</span></Col> |
||||||
|
<Col xs={1}> |
||||||
|
</Col> |
||||||
|
<Col xs={1}> |
||||||
|
<FormLabel> |
||||||
|
Aduana |
||||||
|
<FormControl type='text' size='sm' disabled value={AduanaH}></FormControl> |
||||||
|
</FormLabel> |
||||||
|
</Col> |
||||||
|
<Col xs={1}> |
||||||
|
<FormLabel> |
||||||
|
Patente |
||||||
|
<FormControl type='text' size='sm' disabled value={PatenteH}></FormControl> |
||||||
|
</FormLabel> |
||||||
|
</Col> |
||||||
|
<Col xs={2}> |
||||||
|
<FormLabel> |
||||||
|
Pedimento |
||||||
|
<Form.Control |
||||||
|
as="select" |
||||||
|
id="CmbCliente" |
||||||
|
onChange={(e) => { |
||||||
|
setIdPedimentoConsolidadoSelected(e.target.value) |
||||||
|
PrepareRectificacion(+e.target.value) |
||||||
|
}} |
||||||
|
value={IdPedimentoConsolidadoSelected} |
||||||
|
className="form-select form-select-sm" |
||||||
|
> |
||||||
|
<option value="#">-SELECCIONE-</option> |
||||||
|
{props.Pedimentos |
||||||
|
? props.Pedimentos.map((p) => { |
||||||
|
return ( |
||||||
|
<option key={p.id} value={p.id}> |
||||||
|
{p.pedimento} |
||||||
|
</option> |
||||||
|
) |
||||||
|
}) |
||||||
|
: null} |
||||||
|
</Form.Control> |
||||||
|
</FormLabel> |
||||||
|
</Col> |
||||||
|
<Col xs={2}> |
||||||
|
<Form.Label> |
||||||
|
Clave |
||||||
|
<FormControl type='text' size='sm' disabled value={ClavePedimentoH}></FormControl> |
||||||
|
</Form.Label> |
||||||
|
</Col> |
||||||
|
<Col xs={2}> |
||||||
|
<Form.Label> |
||||||
|
Fec. Pago |
||||||
|
<Form.Control |
||||||
|
type="date" |
||||||
|
id="FechaPago" |
||||||
|
size="sm" |
||||||
|
value={setDate(FechaPagoH)} |
||||||
|
readOnly={true} |
||||||
|
disabled={true} |
||||||
|
/> |
||||||
|
</Form.Label> |
||||||
|
</Col> |
||||||
|
<Col xs={2}> |
||||||
|
<Button onClick={() => generaRectificacion()}>Agregar</Button> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
<Row className="justify-content-end align-items-center"> |
||||||
|
<Col xs={1}><span style={{wordWrap:'normal'}}>Rectificación</span></Col> |
||||||
|
<Col |
||||||
|
xs={1} |
||||||
|
style={{ |
||||||
|
textAlign: 'right', |
||||||
|
paddingTop: '5px', |
||||||
|
cursor: 'pointer', |
||||||
|
}} |
||||||
|
onClick={() => { |
||||||
|
cleanForm(); |
||||||
|
}} |
||||||
|
> |
||||||
|
<IconContext.Provider value={{ color: 'orange', size: '25px' }}> |
||||||
|
<FaEraser /> |
||||||
|
</IconContext.Provider> |
||||||
|
</Col> |
||||||
|
<Col xs={1}> |
||||||
|
<FormLabel> |
||||||
|
Aduana |
||||||
|
<FormControl type='text' size='sm' disabled value={Aduana} onChange={(e) => setAduana(+e.target.value)}></FormControl> |
||||||
|
</FormLabel> |
||||||
|
</Col> |
||||||
|
<Col xs={1}> |
||||||
|
<FormLabel> |
||||||
|
Patente |
||||||
|
<FormControl type='text' size='sm' disabled value={Patente} onChange={(e) => setPatente(+e.target.value)}></FormControl> |
||||||
|
</FormLabel> |
||||||
|
</Col> |
||||||
|
<Col xs={2}> |
||||||
|
<FormLabel> |
||||||
|
Pedimento |
||||||
|
<CurrencyFormat |
||||||
|
value={Pedimento} |
||||||
|
displayType='input' |
||||||
|
format={'### ####'} |
||||||
|
mask="_" |
||||||
|
onValueChange={(values: any) => { |
||||||
|
const { value } = values |
||||||
|
if(value.length === 7 ){ |
||||||
|
CTrafDataService.ValidaTraficoDuplicado(Aduana, Patente, value, props.IdTrafico).then( response => { |
||||||
|
if(response.data !== ""){ |
||||||
|
setHeader('Informativo') |
||||||
|
setMsg(`Pedimento Duplicado.\n\rLa referencia ${response.data} ya cuenta con los mismos datos de aduana, patente y pedimento`) |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
} |
||||||
|
setPedimento(value.length === 0 ? 0 : value) |
||||||
|
}) |
||||||
|
} |
||||||
|
}} |
||||||
|
style={{ |
||||||
|
fontSize: '18px', |
||||||
|
backgroundColor: '#FEFDF5', |
||||||
|
border: '2px solid #837F5D', |
||||||
|
width: '100%', |
||||||
|
textAlign: 'right', |
||||||
|
borderRadius: '10px' |
||||||
|
}} |
||||||
|
/> |
||||||
|
</FormLabel> |
||||||
|
</Col> |
||||||
|
<Col xs={2}> |
||||||
|
<Form.Label> |
||||||
|
Clave |
||||||
|
<Form.Control |
||||||
|
as="select" |
||||||
|
id="CmbClavePedimento" |
||||||
|
onChange={(e) => { |
||||||
|
setClavePedimento(e.target.value) |
||||||
|
}} |
||||||
|
className="form-select form-select-sm" |
||||||
|
value={ClavePedimento} |
||||||
|
> |
||||||
|
<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>
|
||||||
|
</Form.Label> |
||||||
|
</Col> |
||||||
|
<Col xs={2}> |
||||||
|
<Form.Label> |
||||||
|
Fec. Pago |
||||||
|
<Form.Control |
||||||
|
type="date" |
||||||
|
id="FechaPago" |
||||||
|
size="sm" |
||||||
|
value={FechaPago} |
||||||
|
onChange={(e) => setFechaPago(e.target.value)} |
||||||
|
/> |
||||||
|
</Form.Label> |
||||||
|
</Col> |
||||||
|
<Col xs={2}></Col> |
||||||
|
</Row> |
||||||
|
<hr/> </>: '' } |
||||||
|
<HistorialRectificaciones IdPedimentoConsolidado={IdPedimentoConsolidadoSelected} ></HistorialRectificaciones> |
||||||
|
<MsgInformativo |
||||||
|
show={show} |
||||||
|
msg={msg} |
||||||
|
header={header} |
||||||
|
msgColor={msgColor} |
||||||
|
closeToast={() => { |
||||||
|
setShowMsg(false) |
||||||
|
}} |
||||||
|
/> |
||||||
|
</Card.Body> |
||||||
|
</Card> |
||||||
|
) |
||||||
|
} |
||||||
@ -1,4 +1,15 @@ |
|||||||
export default interface DTORectificacionHistorico { |
export default interface DTORectificacionHistorico { |
||||||
IdTrafico: number, |
IdTrafico: number, |
||||||
IdUsuario: number |
IdUsuario: number, |
||||||
|
IdPedimento: number, |
||||||
|
Aduana: number,
|
||||||
|
Patente:number, |
||||||
|
Pedimento: number, |
||||||
|
Clave: string, |
||||||
|
FechaPago: string, |
||||||
|
AduanaH: number, |
||||||
|
PatenteH: number, |
||||||
|
PedimentoH: number, |
||||||
|
ClaveH: string, |
||||||
|
FechaPagoH: string |
||||||
} |
} |
||||||
|
|||||||
@ -0,0 +1,40 @@ |
|||||||
|
import ICorresponsalRectificacionHistorico from "../../../Interfaces/Corresponsales/ICorresponsalRectificacionHistorico"; |
||||||
|
import { createSlice, PayloadAction } from "@reduxjs/toolkit"; |
||||||
|
|
||||||
|
const RectificacionesPedimentos: ICorresponsalRectificacionHistorico[] = [] |
||||||
|
|
||||||
|
const initialState = {RectificacionesPedimentos}; |
||||||
|
|
||||||
|
export const RectificacionesPedimentosSlice = createSlice({ |
||||||
|
name: 'RectificacionesPedimentos', |
||||||
|
initialState: initialState, |
||||||
|
reducers: { |
||||||
|
populateRectificaciones : (state, action: PayloadAction<ICorresponsalRectificacionHistorico[]>) => { |
||||||
|
state.RectificacionesPedimentos = [] |
||||||
|
state.RectificacionesPedimentos.push(... action.payload) |
||||||
|
}, |
||||||
|
addRectificacion : (state, action: PayloadAction<ICorresponsalRectificacionHistorico>) => { |
||||||
|
var Existe = state.RectificacionesPedimentos.find(function(item) { |
||||||
|
return item.id === action.payload.id; |
||||||
|
}); |
||||||
|
if (!Existe) state.RectificacionesPedimentos.push(action.payload) |
||||||
|
}, |
||||||
|
updateRectificacion : (state, action: PayloadAction<ICorresponsalRectificacionHistorico>) => { |
||||||
|
const i = state.RectificacionesPedimentos.findIndex(_element => _element.id === action.payload.id); |
||||||
|
if (i > -1) state.RectificacionesPedimentos[i] = action.payload; |
||||||
|
else state.RectificacionesPedimentos.push(action.payload); |
||||||
|
}, |
||||||
|
deleteRectificacion : (state, action: PayloadAction<number>) => { |
||||||
|
const newArr = state.RectificacionesPedimentos.filter(data => data.id != action.payload); |
||||||
|
state.RectificacionesPedimentos=newArr |
||||||
|
}, |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
|
||||||
|
export const { populateRectificaciones,
|
||||||
|
addRectificacion,
|
||||||
|
updateRectificacion,
|
||||||
|
deleteRectificacion, |
||||||
|
} = RectificacionesPedimentosSlice.actions; |
||||||
|
export default RectificacionesPedimentosSlice.reducer; |
||||||
Loading…
Reference in new issue