feature/Agregar_Multiples_Rectificaciones_Al_Mismo_Trafico_20240109
commit
cb3922d007
@ -0,0 +1,309 @@ |
|||||||
|
import { Button, Card, Col, Form, FormControl, FormLabel, Row } from "react-bootstrap" |
||||||
|
import CurrencyFormat from "react-currency-format" |
||||||
|
import { ICatClavesPedimentos } from "../../../Interfaces/Catalogos/ICatClavesPedimentos" |
||||||
|
import { useEffect, useState } from "react" |
||||||
|
import CorresponsalesTraficoServices from "../../../Services/Corresponsalias/Corresponsales.Trafico.Services" |
||||||
|
import { AgGridReact } from "ag-grid-react" |
||||||
|
import { DTOPedimentosConsolidados } from "../../../DTO/Corresponsales/DTOPedimentosConsolidados" |
||||||
|
import PedimentosConsolidadosService from "../../../Services/Corresponsalias/Corresponsales.Trafico.Pedimento.Consolidados.Service" |
||||||
|
import { IconContext } from "react-icons" |
||||||
|
import { BiDownload } from "react-icons/bi" |
||||||
|
import { BsPencilFill, BsFileEarmarkPdf, BsTrash } from "react-icons/bs" |
||||||
|
import { useDispatch, useSelector } from "react-redux" |
||||||
|
import { RootState } from "../../../store/store" |
||||||
|
import { addPedimento, deletePedimento, updatePedimento } from "../../../store/features/Corresponsales/CorresponsalesPedimentosConsolidadosSlice" |
||||||
|
import { MsgInformativo } from "../../Utils/Toast/msgInformativo" |
||||||
|
import { FaEraser } from "react-icons/fa" |
||||||
|
|
||||||
|
interface IProps { |
||||||
|
IdTrafico: number |
||||||
|
Aduana: number |
||||||
|
Patente: number |
||||||
|
ClavesPedimento: ICatClavesPedimentos[] |
||||||
|
Depto: string |
||||||
|
} |
||||||
|
|
||||||
|
export const PedimentosConsolidados:React.FC<IProps> = (props) => { |
||||||
|
const dispatch = useDispatch() |
||||||
|
const [header, setHeader] = useState('') |
||||||
|
const [show, setShowMsg] = useState(false) |
||||||
|
const [msg, setMsg] = useState('') |
||||||
|
const msgColor = 'primary' |
||||||
|
|
||||||
|
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 mCPedimentosConsolidados = useSelector((state:RootState) => state.CPedimentosConsolidados.PedimentosConsolidados) |
||||||
|
const [columnDefs] = useState([ |
||||||
|
props.Depto === 'Corresponsalias' ? |
||||||
|
{ |
||||||
|
field: 'id', |
||||||
|
headerName: 'Acciones', |
||||||
|
width: 120, |
||||||
|
sortable: true, |
||||||
|
filter: true, |
||||||
|
cellRenderer: (params: any) => { |
||||||
|
return ( |
||||||
|
<div> |
||||||
|
<IconContext.Provider value={{ color: 'blue', size: '18px' }}> |
||||||
|
<BsPencilFill |
||||||
|
onClick={() => { |
||||||
|
loadRow(params.data) |
||||||
|
}} |
||||||
|
style={{ cursor: 'pointer' }} |
||||||
|
/> |
||||||
|
</IconContext.Provider> |
||||||
|
|
||||||
|
<IconContext.Provider value={{ color: 'red', size: '20px' }}> |
||||||
|
<BsTrash |
||||||
|
onClick={() => { |
||||||
|
Delete(params.data.id) |
||||||
|
}} |
||||||
|
style={{ cursor: 'pointer' }} |
||||||
|
/> |
||||||
|
</IconContext.Provider> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
} : { |
||||||
|
field: 'id', |
||||||
|
headerName: 'Acciones', |
||||||
|
width: 110, |
||||||
|
sortable: true, |
||||||
|
filter: true, |
||||||
|
}, |
||||||
|
{ 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, |
||||||
|
flex: 1, //Se encarga de llenar el espacio sobrante de las columnas
|
||||||
|
cellRenderer: (params: any) => { |
||||||
|
if (params.value) return params.value.substring(0, 10) |
||||||
|
else return '' |
||||||
|
}, |
||||||
|
}, |
||||||
|
]) |
||||||
|
const [Data, setData] = useState<DTOPedimentosConsolidados[]>() |
||||||
|
|
||||||
|
const cleanForm = () => { |
||||||
|
setId(0) |
||||||
|
setPedimento(0) |
||||||
|
setClavePedimento('') |
||||||
|
setFechaPago('') |
||||||
|
} |
||||||
|
|
||||||
|
const loadRow = (data: DTOPedimentosConsolidados) => { |
||||||
|
setId(data.id) |
||||||
|
setAduana(data.aduana) |
||||||
|
setPatente(data.patente) |
||||||
|
setPedimento(data.pedimento) |
||||||
|
setClavePedimento(data.clave) |
||||||
|
setFechaPago(setDate(data.fechaPago)) |
||||||
|
} |
||||||
|
|
||||||
|
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 Append = () => { |
||||||
|
if(Aduana !== 0 && |
||||||
|
Patente !== 0 && |
||||||
|
Pedimento !== 0 && |
||||||
|
FechaPago !== '' && |
||||||
|
ClavePedimento !== '' ){ |
||||||
|
PedimentosConsolidadosService.Append({ |
||||||
|
id: Id, |
||||||
|
idTrafico: props.IdTrafico, |
||||||
|
aduana: Aduana, |
||||||
|
patente: Patente, |
||||||
|
pedimento: Pedimento, |
||||||
|
clave: ClavePedimento, |
||||||
|
fechaPago: FechaPago |
||||||
|
}).then(resp => { |
||||||
|
if(Id > 0){ |
||||||
|
dispatch(updatePedimento(resp.data)) |
||||||
|
setHeader('Informativo') |
||||||
|
setMsg('Datos actualizados correctamente') |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
} |
||||||
|
dispatch(addPedimento(resp.data)) |
||||||
|
setHeader('Informativo') |
||||||
|
setMsg('Pedimento guardado correctamente') |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
}).catch((e) => { |
||||||
|
setHeader('Error') |
||||||
|
setMsg('Ocurrió un error al guardar el pedimento, favor de intentarlo de nuevo.') |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
}) |
||||||
|
}else{ |
||||||
|
setHeader('Error') |
||||||
|
setMsg('Favor de llenar todos los datos del pedimento') |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const Delete = (id: number) => { |
||||||
|
PedimentosConsolidadosService.Delete(id) |
||||||
|
.then(resp => { |
||||||
|
dispatch(deletePedimento(id)) |
||||||
|
setHeader('Informativo') |
||||||
|
setMsg('Pedimento eliminado correctamente') |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
}) |
||||||
|
.catch((e) => { |
||||||
|
setHeader('Error') |
||||||
|
setMsg('Ocurrió un error al borrar el pedimento, favor de intentarlo de nuevo.') |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
}) |
||||||
|
} |
||||||
|
return ( |
||||||
|
<> |
||||||
|
<Card style={{height:'100%'}}> |
||||||
|
<Card.Body> |
||||||
|
{props.Depto === 'Corresponsalias' ? <> |
||||||
|
<Row className="justify-content-end align-items-center"> |
||||||
|
<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 ){ |
||||||
|
CorresponsalesTraficoServices.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)*/ |
||||||
|
alert('Ya existe un pedimento con los mismos datos en esta referencia') |
||||||
|
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}> |
||||||
|
<Button onClick={() => Append()}>Agregar</Button> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
<hr /></> : ("") } |
||||||
|
<div className='ag-theme-alpine' style={{ height: 400, width: '100%'}}> |
||||||
|
<AgGridReact |
||||||
|
rowData={mCPedimentosConsolidados} |
||||||
|
columnDefs={columnDefs} |
||||||
|
pagination={true} |
||||||
|
paginationAutoPageSize={true} |
||||||
|
rowSelection={'multiple'} |
||||||
|
rowMultiSelectWithClick={true} |
||||||
|
></AgGridReact> |
||||||
|
</div> |
||||||
|
</Card.Body> |
||||||
|
</Card> |
||||||
|
<MsgInformativo |
||||||
|
show={show} |
||||||
|
msg={msg} |
||||||
|
header={header} |
||||||
|
msgColor={msgColor} |
||||||
|
closeToast={() => { |
||||||
|
setShowMsg(false) |
||||||
|
}} |
||||||
|
/></> |
||||||
|
) |
||||||
|
} |
||||||
@ -0,0 +1,9 @@ |
|||||||
|
export interface DTOPedimentosConsolidados{ |
||||||
|
id:number |
||||||
|
idTrafico: number |
||||||
|
aduana: number |
||||||
|
patente: number |
||||||
|
pedimento: number |
||||||
|
clave: string |
||||||
|
fechaPago: string |
||||||
|
} |
||||||
@ -0,0 +1,16 @@ |
|||||||
|
import { DTOPedimentosConsolidados } from "../../DTO/Corresponsales/DTOPedimentosConsolidados"; |
||||||
|
import http from "../common/http-common"; |
||||||
|
|
||||||
|
class PedimentosConsolidadosService{ |
||||||
|
Append(data: DTOPedimentosConsolidados) { |
||||||
|
return http.post<DTOPedimentosConsolidados>("/Corresponsalias/PedimentosConsolidados/Append", data); |
||||||
|
} |
||||||
|
GetAll(idTrafico: number) { |
||||||
|
return http.get<DTOPedimentosConsolidados[]>(`/Corresponsalias/PedimentosConsolidados/GetAll?IdTrafico=${idTrafico}`); |
||||||
|
} |
||||||
|
Delete(id: number) { |
||||||
|
return http.delete<DTOPedimentosConsolidados>(`/Corresponsalias/PedimentosConsolidados/Delete/${id}`); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export default new PedimentosConsolidadosService(); |
||||||
@ -0,0 +1,40 @@ |
|||||||
|
import { createSlice, PayloadAction } from "@reduxjs/toolkit"; |
||||||
|
import { DTOPedimentosConsolidados } from "../../../DTO/Corresponsales/DTOPedimentosConsolidados"; |
||||||
|
|
||||||
|
const PedimentosConsolidados: DTOPedimentosConsolidados[] = [] |
||||||
|
|
||||||
|
const initialState = {PedimentosConsolidados}; |
||||||
|
|
||||||
|
export const PedimentosConsolidadosSlice = createSlice({ |
||||||
|
name: 'PedimentosConsolidados', |
||||||
|
initialState: initialState, |
||||||
|
reducers: { |
||||||
|
populatePedimentos : (state, action: PayloadAction<DTOPedimentosConsolidados[]>) => { |
||||||
|
state.PedimentosConsolidados = [] |
||||||
|
state.PedimentosConsolidados.push(... action.payload) |
||||||
|
}, |
||||||
|
addPedimento : (state, action: PayloadAction<DTOPedimentosConsolidados>) => { |
||||||
|
var Existe = state.PedimentosConsolidados.find(function(item) { |
||||||
|
return item.id === action.payload.id; |
||||||
|
}); |
||||||
|
if (!Existe) state.PedimentosConsolidados.push(action.payload) |
||||||
|
}, |
||||||
|
updatePedimento : (state, action: PayloadAction<DTOPedimentosConsolidados>) => { |
||||||
|
const i = state.PedimentosConsolidados.findIndex(_element => _element.id === action.payload.id); |
||||||
|
if (i > -1) state.PedimentosConsolidados[i] = action.payload; |
||||||
|
else state.PedimentosConsolidados.push(action.payload); |
||||||
|
}, |
||||||
|
deletePedimento : (state, action: PayloadAction<number>) => { |
||||||
|
const newArr = state.PedimentosConsolidados.filter(data => data.id != action.payload); |
||||||
|
state.PedimentosConsolidados=newArr |
||||||
|
}, |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
|
||||||
|
export const { populatePedimentos,
|
||||||
|
addPedimento,
|
||||||
|
updatePedimento,
|
||||||
|
deletePedimento, |
||||||
|
} = PedimentosConsolidadosSlice.actions; |
||||||
|
export default PedimentosConsolidadosSlice.reducer; |
||||||
Loading…
Reference in new issue