parent
d62867ab69
commit
9cffa70f11
@ -0,0 +1,524 @@ |
||||
import React, { FC, useEffect, useState } from 'react' |
||||
import { Alert, Button, Card, Col, Form, Modal, Row } from 'react-bootstrap' |
||||
import DataTable from 'react-data-table-component' |
||||
import { IconContext } from 'react-icons' |
||||
import { BsFillPencilFill, BsPatchPlusFill, BsPlusSquareFill } from 'react-icons/bs' |
||||
import { useSelector } from 'react-redux' |
||||
import { setOriginalNode } from 'typescript' |
||||
import DTOOpViajes from '../../DTOs/Operaciones/DTOViajes' |
||||
import DSOpViajes from '../../Services/Operaciones/OpViajes.Services' |
||||
import { RootState } from '../../store/store' |
||||
|
||||
interface IProps {} |
||||
|
||||
export const OpViajes: FC<IProps> = (props) => { |
||||
const Info = JSON.parse(localStorage.getItem('tokenInfo') || '[]') |
||||
const UserID = Info.UserId |
||||
const CatClientes = useSelector((state: RootState) => state.CatClientes.CatClientes) |
||||
const CatProveedores = useSelector((state: RootState) => state.CatProveedores.CatProveedores) |
||||
const CatTipoUnidades = useSelector((state: RootState) => state.CatTipoUnidades.CatTipoUnidades) |
||||
const CatUbicaciones = useSelector((state: RootState) => state.CatUbicaciones.CatUbicaciones) |
||||
const CatServicios = useSelector((state: RootState) => state.CatServicios.CatServicios) |
||||
const [OpViajes, setOpViajes] = useState<DTOOpViajes[]>([]) |
||||
const [showTripDialog, setShowTripDialog] = useState(false) |
||||
const [NoCaja, setNoCaja] = useState('') |
||||
const [IDViaje, setIDViaje] = useState(0) |
||||
const [IDCliente, setIDCliente] = useState(0) |
||||
const [IDProveedor, setIDProveedor] = useState(0) |
||||
const [IDServicio, setIDServicio] = useState(0) |
||||
const [IDTipoUnidad, setIDTipoUnidad] = useState(0) |
||||
const [IDOrigen, setIDOrigen] = useState(0) |
||||
const [IDDestino, setIDDestino] = useState(0) |
||||
const [RefAA, setRefAA] = useState('') |
||||
const [PickUpNumber, setPickUpNumber] = useState('') |
||||
const [Hazmat, setHazmat] = useState(0) |
||||
const [Search, setSearch] = useState('') |
||||
const dataConcepts = [ |
||||
{ |
||||
name: 'id', |
||||
width: '70px', |
||||
selector: (row: DTOOpViajes) => row.id, |
||||
sortable: true, |
||||
}, |
||||
{ |
||||
name: 'Cliente', |
||||
width: '250px', |
||||
selector: (row: DTOOpViajes) => row.sCliente, |
||||
sortable: true, |
||||
}, |
||||
{ |
||||
name: 'Servicio', |
||||
width: '150px', |
||||
selector: (row: DTOOpViajes) => row.sServicio, |
||||
sortable: true, |
||||
}, |
||||
{ |
||||
name: 'Proveedor', |
||||
width: '250px', |
||||
selector: (row: DTOOpViajes) => row.sProveedor, |
||||
sortable: true, |
||||
}, |
||||
{ |
||||
name: 'Origen', |
||||
width: '150px', |
||||
selector: (row: DTOOpViajes) => row.sOrigen, |
||||
sortable: true, |
||||
}, |
||||
{ |
||||
name: 'Destino', |
||||
width: '150px', |
||||
selector: (row: DTOOpViajes) => row.sDestino, |
||||
sortable: true, |
||||
}, |
||||
{ |
||||
name: 'Tipo Unidad', |
||||
width: '150px', |
||||
selector: (row: DTOOpViajes) => row.sTipoUnidad, |
||||
sortable: true, |
||||
}, |
||||
{ |
||||
name: 'NoCaja', |
||||
width: '150px', |
||||
selector: (row: DTOOpViajes) => row.noCaja, |
||||
sortable: true, |
||||
}, |
||||
{ |
||||
name: 'Hazmat', |
||||
width: '90px', |
||||
selector: (row: DTOOpViajes) => (row.hazmat === 1 ? 'Si' : 'No'), |
||||
sortable: true, |
||||
}, |
||||
{ |
||||
name: 'Ref A.A.', |
||||
width: '110px', |
||||
selector: (row: DTOOpViajes) => row.refAgenciaAduanal, |
||||
sortable: true, |
||||
}, |
||||
{ |
||||
name: 'PickUp No', |
||||
width: '110px', |
||||
selector: (row: DTOOpViajes) => row.pickUpNumber, |
||||
sortable: true, |
||||
}, |
||||
{ |
||||
name: 'Editar', |
||||
width: '80px', |
||||
cell: (row: DTOOpViajes) => ( |
||||
<div |
||||
style={{ textAlign: 'center', cursor: 'pointer' }} |
||||
onClick={() => { |
||||
showInfo(row) |
||||
}} |
||||
> |
||||
<IconContext.Provider value={{ color: 'blue', size: '21px' }}> |
||||
<BsFillPencilFill /> |
||||
</IconContext.Provider> |
||||
</div> |
||||
), |
||||
sortable: true, |
||||
}, |
||||
] |
||||
|
||||
const showInfo = (row: DTOOpViajes) => { |
||||
setIDViaje(row.id) |
||||
setRefAA(row.refAgenciaAduanal) |
||||
setIDCliente(row.cliente) |
||||
setIDServicio(row.servicio) |
||||
setIDProveedor(row.proveedor) |
||||
setIDTipoUnidad(row.tipoUnidad) |
||||
setNoCaja(row.noCaja) |
||||
setIDOrigen(row.origen) |
||||
setIDDestino(row.destino) |
||||
setHazmat(row.hazmat) |
||||
setPickUpNumber(row.pickUpNumber) |
||||
setShowTripDialog(true) |
||||
} |
||||
|
||||
const newTrip = () => { |
||||
setIDViaje(0) |
||||
setRefAA('') |
||||
setIDCliente(0) |
||||
setIDServicio(0) |
||||
setIDProveedor(0) |
||||
setIDTipoUnidad(0) |
||||
setNoCaja('') |
||||
setIDOrigen(0) |
||||
setIDDestino(0) |
||||
setHazmat(0) |
||||
setPickUpNumber('') |
||||
setShowTripDialog(true) |
||||
} |
||||
|
||||
const saveInfo = () => { |
||||
const data: DTOOpViajes = { |
||||
id: IDViaje, |
||||
fAlta: '', |
||||
usuario: UserID, |
||||
fCruce: '', |
||||
refAgenciaAduanal: RefAA, |
||||
cliente: IDCliente, |
||||
sCliente: '', |
||||
proveedor: IDProveedor, |
||||
sProveedor: '', |
||||
tipoUnidad: IDTipoUnidad, |
||||
sTipoUnidad: '', |
||||
servicio: IDServicio, |
||||
sServicio: '', |
||||
origen: IDOrigen, |
||||
sOrigen: '', |
||||
destino: IDDestino, |
||||
sDestino: '', |
||||
hazmat: Hazmat, |
||||
noCaja: NoCaja, |
||||
pickUpNumber: PickUpNumber, |
||||
} |
||||
DSOpViajes.Append(data) |
||||
.then((response) => { |
||||
loadTrips() |
||||
}) |
||||
.catch((e: Error) => {}) |
||||
} |
||||
|
||||
useEffect(() => { |
||||
loadTrips() |
||||
}, []) |
||||
|
||||
/* useEffect(() => { |
||||
console.log(UserID) |
||||
}, [UserID]) */ |
||||
|
||||
const loadTrips = () => { |
||||
DSOpViajes.Get() |
||||
.then((response) => { |
||||
setOpViajes(response.data) |
||||
}) |
||||
.catch((e: Error) => {}) |
||||
} |
||||
|
||||
return ( |
||||
<div> |
||||
<Card> |
||||
<Card.Title style={{ textAlign: 'left' }}> |
||||
<Alert variant='primary'> |
||||
<Row> |
||||
<Col xs={2} style={{ textAlign: 'right' }}> |
||||
AOL : Monitor de viajes |
||||
</Col> |
||||
<Col xs={1} style={{ textAlign: 'left', cursor: 'pointer' }}> |
||||
<div |
||||
onClick={() => { |
||||
newTrip() |
||||
}} |
||||
title='De un click aqui para crear un nuevo viaje' |
||||
> |
||||
<IconContext.Provider value={{ color: 'green', size: '28px' }}> |
||||
<BsPlusSquareFill /> |
||||
</IconContext.Provider> |
||||
</div> |
||||
</Col> |
||||
<Col xs={9}></Col> |
||||
</Row> |
||||
</Alert> |
||||
</Card.Title> |
||||
</Card> |
||||
<Row> |
||||
<Col xs={12}> </Col> |
||||
</Row> |
||||
<Row> |
||||
<Col xs={12}> |
||||
<Form.Control |
||||
type='text' |
||||
size='sm' |
||||
placeholder='Search...' |
||||
onChange={(e) => { |
||||
setSearch(e.target.value) |
||||
}} |
||||
/> |
||||
</Col> |
||||
</Row> |
||||
<Card> |
||||
<Card.Body> |
||||
<DataTable |
||||
noHeader |
||||
defaultSortFieldId={'id'} |
||||
defaultSortAsc={true} |
||||
striped={true} |
||||
dense={true} |
||||
paginationPerPage={10} |
||||
pagination |
||||
highlightOnHover |
||||
columns={dataConcepts} |
||||
data={OpViajes.filter(function (row: DTOOpViajes) { |
||||
return ( |
||||
row.sCliente.toLowerCase().includes(Search.toLowerCase()) || |
||||
row.sProveedor.toLowerCase().includes(Search.toLowerCase()) || |
||||
row.sOrigen.toLowerCase().includes(Search.toLowerCase()) || |
||||
row.sDestino.toLowerCase().includes(Search.toLowerCase()) || |
||||
row.sServicio.toLowerCase().includes(Search.toLowerCase()) || |
||||
row.sTipoUnidad.toLowerCase().includes(Search.toLowerCase()) || |
||||
row.noCaja.toLowerCase().includes(Search.toLowerCase()) || |
||||
row.refAgenciaAduanal.toLowerCase().includes(Search.toLowerCase()) || |
||||
row.pickUpNumber.toLowerCase().includes(Search.toLowerCase()) |
||||
) |
||||
})} |
||||
/> |
||||
</Card.Body> |
||||
</Card> |
||||
<Modal |
||||
show={showTripDialog} |
||||
onHide={() => { |
||||
setShowTripDialog(false) |
||||
}} |
||||
> |
||||
<Modal.Header closeButton></Modal.Header> |
||||
<Modal.Body> |
||||
<Row> |
||||
<Col xs={12} style={{ textAlign: 'center', fontSize: '23px', fontWeight: 'bold', fontFamily: 'Arial' }}> |
||||
<Alert variant='primary'>Informacion del viaje</Alert> |
||||
</Col> |
||||
</Row> |
||||
<Row> |
||||
<Col xs={3} className='dialogLabel'> |
||||
No viaje |
||||
</Col> |
||||
<Col xs={2}> |
||||
<Form.Control type='text' id='IDCliente' value={IDCliente} disabled size='sm' /> |
||||
</Col> |
||||
<Col className='dialogLabel' xs={2}> |
||||
Ref AA |
||||
</Col> |
||||
<Col> |
||||
<Form.Control |
||||
type='text' |
||||
id='RefAA' |
||||
value={RefAA} |
||||
size='sm' |
||||
onChange={(e) => { |
||||
setRefAA(e.target.value) |
||||
}} |
||||
/> |
||||
</Col> |
||||
</Row> |
||||
<Row style={{ paddingTop: '10px' }}> |
||||
<Col xs={3} className='dialogLabel'> |
||||
Cliente |
||||
</Col> |
||||
<Col xs={9}> |
||||
<Form.Control |
||||
as='select' |
||||
onChange={(e) => { |
||||
setIDCliente(parseInt(e.target.value)) |
||||
}} |
||||
value={IDCliente} |
||||
className='form-select form-select-sm' |
||||
> |
||||
<option value='0'>-SELECCIONE-</option> |
||||
{CatClientes |
||||
? CatClientes.map((c) => { |
||||
return ( |
||||
<option key={c.id} value={c.id}> |
||||
{c.cliente} |
||||
</option> |
||||
) |
||||
}) |
||||
: null} |
||||
</Form.Control> |
||||
</Col> |
||||
</Row> |
||||
<Row style={{ paddingTop: '10px' }}> |
||||
<Col xs={3} className='dialogLabel'> |
||||
Servicio |
||||
</Col> |
||||
<Col xs={9}> |
||||
<Form.Control |
||||
as='select' |
||||
onChange={(e) => { |
||||
setIDServicio(parseInt(e.target.value)) |
||||
}} |
||||
value={IDServicio} |
||||
className='form-select form-select-sm' |
||||
> |
||||
<option value='0'>-SELECCIONE-</option> |
||||
{CatServicios |
||||
? CatServicios.map((c) => { |
||||
return ( |
||||
<option key={c.id} value={c.id}> |
||||
{c.servicio} |
||||
</option> |
||||
) |
||||
}) |
||||
: null} |
||||
</Form.Control> |
||||
</Col> |
||||
</Row> |
||||
<Row style={{ paddingTop: '10px' }}> |
||||
<Col xs={3} className='dialogLabel'> |
||||
Tipo Unidad |
||||
</Col> |
||||
<Col xs={4}> |
||||
<Form.Control |
||||
as='select' |
||||
onChange={(e) => { |
||||
setIDTipoUnidad(parseInt(e.target.value)) |
||||
}} |
||||
value={IDTipoUnidad} |
||||
className='form-select form-select-sm' |
||||
> |
||||
<option value='0'>-SELECCIONE-</option> |
||||
{CatTipoUnidades |
||||
? CatTipoUnidades.map((c) => { |
||||
return ( |
||||
<option key={c.id} value={c.id}> |
||||
{c.tipoUnidad} |
||||
</option> |
||||
) |
||||
}) |
||||
: null} |
||||
</Form.Control> |
||||
</Col> |
||||
<Col xs={1}>Caja</Col> |
||||
<Col xs={4}> |
||||
<Form.Control |
||||
type='text' |
||||
id='NoCaja' |
||||
value={NoCaja} |
||||
size='sm' |
||||
onChange={(e) => { |
||||
setNoCaja(e.target.value) |
||||
}} |
||||
/> |
||||
</Col> |
||||
</Row> |
||||
<Row style={{ paddingTop: '10px' }}> |
||||
<Col xs={3} className='dialogLabel'> |
||||
Proveedor |
||||
</Col> |
||||
<Col xs={9}> |
||||
<Form.Control |
||||
as='select' |
||||
onChange={(e) => { |
||||
setIDProveedor(parseInt(e.target.value)) |
||||
}} |
||||
value={IDProveedor} |
||||
className='form-select form-select-sm' |
||||
> |
||||
<option value='0'>-SELECCIONE-</option> |
||||
{CatProveedores |
||||
? CatProveedores.map((c) => { |
||||
return ( |
||||
<option key={c.id} value={c.id}> |
||||
{c.proveedor} |
||||
</option> |
||||
) |
||||
}) |
||||
: null} |
||||
</Form.Control> |
||||
</Col> |
||||
</Row> |
||||
<Row style={{ paddingTop: '10px' }}> |
||||
<Col xs={3} className='dialogLabel'> |
||||
Origen |
||||
</Col> |
||||
<Col xs={9}> |
||||
<Form.Control |
||||
as='select' |
||||
onChange={(e) => { |
||||
setIDOrigen(parseInt(e.target.value)) |
||||
}} |
||||
value={IDOrigen} |
||||
className='form-select form-select-sm' |
||||
> |
||||
<option value='0'>-SELECCIONE-</option> |
||||
{CatUbicaciones |
||||
? CatUbicaciones.map((c) => { |
||||
if (c.clasificacion === 1) { |
||||
return ( |
||||
<option key={c.id} value={c.id}> |
||||
{c.ubicacion} |
||||
</option> |
||||
) |
||||
} |
||||
}) |
||||
: null} |
||||
</Form.Control> |
||||
</Col> |
||||
</Row> |
||||
<Row style={{ paddingTop: '10px' }}> |
||||
<Col xs={3} className='dialogLabel'> |
||||
Destino |
||||
</Col> |
||||
<Col xs={9}> |
||||
<Form.Control |
||||
as='select' |
||||
onChange={(e) => { |
||||
setIDDestino(parseInt(e.target.value)) |
||||
}} |
||||
value={IDDestino} |
||||
className='form-select form-select-sm' |
||||
> |
||||
<option value='0'>-SELECCIONE-</option> |
||||
{CatUbicaciones |
||||
? CatUbicaciones.map((c) => { |
||||
if (c.clasificacion === 2) { |
||||
return ( |
||||
<option key={c.id} value={c.id}> |
||||
{c.ubicacion} |
||||
</option> |
||||
) |
||||
} |
||||
}) |
||||
: null} |
||||
</Form.Control> |
||||
</Col> |
||||
</Row> |
||||
<Row style={{ paddingTop: '10px' }}> |
||||
<Col className='dialogLabel' xs={3}> |
||||
HAZMAT |
||||
</Col> |
||||
<Col sx={3}> |
||||
<Form.Control |
||||
as='select' |
||||
onChange={(e) => { |
||||
setHazmat(parseInt(e.target.value)) |
||||
}} |
||||
value={Hazmat} |
||||
className='form-select form-select-sm' |
||||
> |
||||
<option value='0'>No</option> |
||||
<option value='1'>Si</option> |
||||
</Form.Control> |
||||
</Col> |
||||
<Col className='dialogLabel'>Pickup no</Col> |
||||
<Col xs={4}> |
||||
<Form.Control |
||||
type='text' |
||||
id='PickUpNumber' |
||||
value={PickUpNumber} |
||||
size='sm' |
||||
onChange={(e) => { |
||||
setPickUpNumber(e.target.value) |
||||
}} |
||||
/> |
||||
</Col> |
||||
</Row> |
||||
</Modal.Body> |
||||
<Modal.Footer> |
||||
<Row> |
||||
<Col xs={2}></Col> |
||||
<Col xs={3}> </Col> |
||||
<Col xs={3}> |
||||
<Button |
||||
variant='primary' |
||||
onClick={() => { |
||||
saveInfo() |
||||
}} |
||||
> |
||||
Guarda |
||||
</Button> |
||||
</Col> |
||||
</Row> |
||||
</Modal.Footer> |
||||
</Modal> |
||||
</div> |
||||
) |
||||
} |
||||
@ -1,7 +0,0 @@ |
||||
import { FC } from 'react' |
||||
|
||||
interface IProps {} |
||||
|
||||
export const RptViajesPendientes: FC<IProps> = (props) => { |
||||
return <div>RptViajesPendientes</div> |
||||
} |
||||
@ -0,0 +1,22 @@ |
||||
export default interface DTOOpViajes { |
||||
id: number,
|
||||
fAlta: string, |
||||
usuario: number,
|
||||
fCruce: string, |
||||
refAgenciaAduanal: string, |
||||
cliente: number,
|
||||
sCliente: string, |
||||
proveedor: number, |
||||
sProveedor: string,
|
||||
hazmat: number,
|
||||
tipoUnidad: number, |
||||
sTipoUnidad: string,
|
||||
noCaja: string, |
||||
pickUpNumber: string, |
||||
origen: number,
|
||||
sOrigen: string, |
||||
destino: number
|
||||
sDestino: string, |
||||
servicio: number, |
||||
sServicio: string |
||||
} |
||||
@ -0,0 +1,16 @@ |
||||
import http from "../../Services/Auth/config/http-common"; |
||||
import DTOViajes from "../../DTOs/Operaciones/DTOViajes"; |
||||
import IRespuesta from "../../Interfaces/Respuestas/IRespuesta"; |
||||
|
||||
class OpViajesDataService { |
||||
Get() { |
||||
return http.get<DTOViajes[]>("Operaciones/OpViajes/Get"); |
||||
} |
||||
Append(data: DTOViajes) { |
||||
return http.post<DTOViajes>(`Operaciones/OpViajes/Append`,data); |
||||
} |
||||
Delete(id: number) { |
||||
return http.delete<IRespuesta>(`Operaciones/OpViajes/Delete/${id}`); |
||||
} |
||||
} |
||||
export default new OpViajesDataService(); |
||||
|
After Width: | Height: | Size: 33 KiB |
|
After Width: | Height: | Size: 12 KiB |
Loading…
Reference in new issue