feature/ConsolidarPedimentos_20231229
parent
3d96df5590
commit
ccc1b0eb37
@ -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