|
|
@ -1,17 +1,19 @@ |
|
|
|
import React, { FC, useEffect, useState } from 'react' |
|
|
|
import React, { FC, useEffect, useState } from 'react' |
|
|
|
import { Alert, Button, Card, Col, Form, Modal, Row, Table } from 'react-bootstrap' |
|
|
|
import { Alert, Button, Card, Col, Form, Modal, Row, Table } from 'react-bootstrap' |
|
|
|
import { IconContext } from 'react-icons' |
|
|
|
import { IconContext } from 'react-icons' |
|
|
|
import { BsFillPencilFill, BsPlusSquareFill } from 'react-icons/bs' |
|
|
|
import { BsChevronDown, BsChevronUp, BsFillPencilFill, BsPlusSquareFill } from 'react-icons/bs' |
|
|
|
|
|
|
|
|
|
|
|
import { useDispatch, useSelector } from 'react-redux' |
|
|
|
import { useDispatch, useSelector } from 'react-redux' |
|
|
|
import { RootState } from '../../store/store' |
|
|
|
import { RootState } from '../../store/store' |
|
|
|
|
|
|
|
|
|
|
|
import DTOOpViajes from '../../DTOs/Operaciones/DTOViajes' |
|
|
|
import DTOOpViajes from '../../DTOs/Operaciones/DTOViajes' |
|
|
|
import DSOpViajes from '../../Services/Operaciones/OpViajes.Services' |
|
|
|
import DSOpViajes from '../../Services/Operaciones/OpViajes.Services' |
|
|
|
import { ViajesServicios } from './ViajesServicios/ViajesServicios' |
|
|
|
import { ViajesServicios } from './ViajesServicios/ViajesServicios' |
|
|
|
import { populateOpViajes } from '../../store/features/Operaciones/OpViajesSlice' |
|
|
|
import { populateOpViajes, updateOpViajes } from '../../store/features/Operaciones/OpViajesSlice' |
|
|
|
import { Viaje } from './Viaje/Viaje' |
|
|
|
import { Viaje } from './Viaje/Viaje' |
|
|
|
import '../../css/masterDetail.css' |
|
|
|
import '../../css/masterDetail.css' |
|
|
|
|
|
|
|
import { |
|
|
|
|
|
|
|
populateOpViajesServicios, |
|
|
|
|
|
|
|
updateOpViajesServicios, |
|
|
|
|
|
|
|
} from '../../store/features/Operaciones/OpViajesServiciosSlice' |
|
|
|
|
|
|
|
|
|
|
|
interface IProps {} |
|
|
|
interface IProps {} |
|
|
|
|
|
|
|
|
|
|
@ -25,6 +27,7 @@ export const OpMonitor: FC<IProps> = (props) => { |
|
|
|
const CatUbicaciones = useSelector((state: RootState) => state.CatUbicaciones.CatUbicaciones) |
|
|
|
const CatUbicaciones = useSelector((state: RootState) => state.CatUbicaciones.CatUbicaciones) |
|
|
|
const CatServicios = useSelector((state: RootState) => state.CatServicios.CatServicios) |
|
|
|
const CatServicios = useSelector((state: RootState) => state.CatServicios.CatServicios) |
|
|
|
const AllTrips = useSelector((state: RootState) => state.OpViajes.OpViajes) |
|
|
|
const AllTrips = useSelector((state: RootState) => state.OpViajes.OpViajes) |
|
|
|
|
|
|
|
const AllTripsServices = useSelector((state: RootState) => state.OpViajesServicios.OpViajesServicios) |
|
|
|
const [OpViajes, setOpViajes] = useState<DTOOpViajes[]>([]) |
|
|
|
const [OpViajes, setOpViajes] = useState<DTOOpViajes[]>([]) |
|
|
|
const [showTripDialog, setShowTripDialog] = useState(false) |
|
|
|
const [showTripDialog, setShowTripDialog] = useState(false) |
|
|
|
const [Switch, setSwitch] = useState(false) |
|
|
|
const [Switch, setSwitch] = useState(false) |
|
|
@ -98,6 +101,7 @@ export const OpMonitor: FC<IProps> = (props) => { |
|
|
|
hazmat: Hazmat, |
|
|
|
hazmat: Hazmat, |
|
|
|
noCaja: NoCaja, |
|
|
|
noCaja: NoCaja, |
|
|
|
pickUpNumber: PickUpNumber, |
|
|
|
pickUpNumber: PickUpNumber, |
|
|
|
|
|
|
|
max: true, |
|
|
|
} |
|
|
|
} |
|
|
|
DSOpViajes.Append(data) |
|
|
|
DSOpViajes.Append(data) |
|
|
|
.then((response) => { |
|
|
|
.then((response) => { |
|
|
@ -119,54 +123,54 @@ export const OpMonitor: FC<IProps> = (props) => { |
|
|
|
}) |
|
|
|
}) |
|
|
|
setOpViajes(data) |
|
|
|
setOpViajes(data) |
|
|
|
dispatch(populateOpViajes(data)) |
|
|
|
dispatch(populateOpViajes(data)) |
|
|
|
|
|
|
|
DSOpViajes.GetAllServices() |
|
|
|
|
|
|
|
.then((responsed) => { |
|
|
|
|
|
|
|
dispatch(populateOpViajesServicios(responsed.data)) |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
.catch((e: Error) => {}) |
|
|
|
}) |
|
|
|
}) |
|
|
|
.catch((e: Error) => {}) |
|
|
|
.catch((e: Error) => {}) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const changeToggle = (row: DTOOpViajes) => { |
|
|
|
const changeToggle = (row: DTOOpViajes) => { |
|
|
|
const data = OpViajes |
|
|
|
let x = AllTrips.filter((a) => { |
|
|
|
for (const obj of data) { |
|
|
|
if (a.id === row.id) { |
|
|
|
if (obj.id === row.id) { |
|
|
|
return a |
|
|
|
obj.max = !obj.max |
|
|
|
|
|
|
|
setSwitch(obj.max) |
|
|
|
|
|
|
|
break |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
if (x) { |
|
|
|
|
|
|
|
const obj = { ...x[0] } |
|
|
|
|
|
|
|
obj.max = !obj.max |
|
|
|
|
|
|
|
dispatch(updateOpViajes(obj)) |
|
|
|
} |
|
|
|
} |
|
|
|
// console.log('La informacion ha cambiado: ' + JSON.stringify(data))
|
|
|
|
|
|
|
|
setOpViajes(data) |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
return ( |
|
|
|
<div> |
|
|
|
<div> |
|
|
|
<Card> |
|
|
|
<Card style={{ textAlign: 'left' }}> |
|
|
|
<Card.Title style={{ textAlign: 'left' }}> |
|
|
|
<Alert variant='primary'> |
|
|
|
<Alert variant='primary'> |
|
|
|
<Row> |
|
|
|
<Row> |
|
|
|
<Col xs={3} style={{ textAlign: 'right', fontSize: '25px' }}> |
|
|
|
<Col xs={2} style={{ textAlign: 'right' }}> |
|
|
|
AOL : Monitor de viajes |
|
|
|
AOL : Monitor de viajes |
|
|
|
</Col> |
|
|
|
</Col> |
|
|
|
<Col xs={1} style={{ textAlign: 'left', cursor: 'pointer' }}> |
|
|
|
<Col xs={1} style={{ textAlign: 'left', cursor: 'pointer' }}> |
|
|
|
<div |
|
|
|
<div |
|
|
|
onClick={() => { |
|
|
|
onClick={() => { |
|
|
|
newTrip() |
|
|
|
newTrip() |
|
|
|
}} |
|
|
|
}} |
|
|
|
title='De un click aqui para crear un nuevo viaje' |
|
|
|
title='De un click aqui para crear un nuevo viaje' |
|
|
|
> |
|
|
|
> |
|
|
|
<IconContext.Provider value={{ color: 'green', size: '28px' }}> |
|
|
|
<IconContext.Provider value={{ color: 'green', size: '28px' }}> |
|
|
|
<BsPlusSquareFill /> |
|
|
|
<BsPlusSquareFill /> |
|
|
|
</IconContext.Provider> |
|
|
|
</IconContext.Provider> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</Col> |
|
|
|
</Col> |
|
|
|
<Col xs={8}></Col> |
|
|
|
<Col xs={9}></Col> |
|
|
|
</Row> |
|
|
|
</Row> |
|
|
|
</Alert> |
|
|
|
</Alert> |
|
|
|
|
|
|
|
</Card.Title> |
|
|
|
|
|
|
|
</Card> |
|
|
|
</Card> |
|
|
|
<Row> |
|
|
|
<Row> |
|
|
|
<Col xs={12}> </Col> |
|
|
|
<Col xs={10}> |
|
|
|
</Row> |
|
|
|
|
|
|
|
<Row> |
|
|
|
|
|
|
|
<Col xs={12}> |
|
|
|
|
|
|
|
<Form.Control |
|
|
|
<Form.Control |
|
|
|
type='text' |
|
|
|
type='text' |
|
|
|
size='sm' |
|
|
|
size='sm' |
|
|
@ -176,6 +180,9 @@ export const OpMonitor: FC<IProps> = (props) => { |
|
|
|
}} |
|
|
|
}} |
|
|
|
/> |
|
|
|
/> |
|
|
|
</Col> |
|
|
|
</Col> |
|
|
|
|
|
|
|
<Col xs={2} className='totalLabel'> |
|
|
|
|
|
|
|
Total: {AllTrips.length} viajes en curso |
|
|
|
|
|
|
|
</Col> |
|
|
|
</Row> |
|
|
|
</Row> |
|
|
|
<Card> |
|
|
|
<Card> |
|
|
|
<Card.Body> |
|
|
|
<Card.Body> |
|
|
@ -184,6 +191,7 @@ export const OpMonitor: FC<IProps> = (props) => { |
|
|
|
<thead style={{ position: 'sticky', top: '0' }}> |
|
|
|
<thead style={{ position: 'sticky', top: '0' }}> |
|
|
|
<tr> |
|
|
|
<tr> |
|
|
|
<th>id</th> |
|
|
|
<th>id</th> |
|
|
|
|
|
|
|
<th> </th> |
|
|
|
<th>Cliente</th> |
|
|
|
<th>Cliente</th> |
|
|
|
<th>Servicio</th> |
|
|
|
<th>Servicio</th> |
|
|
|
<th>Proveedor</th> |
|
|
|
<th>Proveedor</th> |
|
|
@ -198,32 +206,102 @@ export const OpMonitor: FC<IProps> = (props) => { |
|
|
|
</tr> |
|
|
|
</tr> |
|
|
|
</thead> |
|
|
|
</thead> |
|
|
|
<tbody> |
|
|
|
<tbody> |
|
|
|
{OpViajes |
|
|
|
{AllTrips |
|
|
|
? OpViajes.map((MasterData) => { |
|
|
|
? AllTrips.map((MasterData) => { |
|
|
|
return ( |
|
|
|
return ( |
|
|
|
<> |
|
|
|
<> |
|
|
|
<tr |
|
|
|
<tr |
|
|
|
key={MasterData.id} |
|
|
|
|
|
|
|
onClick={() => { |
|
|
|
|
|
|
|
changeToggle(MasterData) |
|
|
|
|
|
|
|
}} |
|
|
|
|
|
|
|
style={{ cursor: 'pointer' }} |
|
|
|
style={{ cursor: 'pointer' }} |
|
|
|
|
|
|
|
className={MasterData.max === true ? 'masterSelected' : 'normalSelected'} |
|
|
|
> |
|
|
|
> |
|
|
|
<td style={{ textAlign: 'left' }}>{MasterData.id}</td> |
|
|
|
<td |
|
|
|
<td style={{ textAlign: 'left' }}>{MasterData.sCliente}</td> |
|
|
|
style={{ textAlign: 'left' }} |
|
|
|
<td style={{ textAlign: 'left' }}>{MasterData.sServicio}</td> |
|
|
|
className={MasterData.max === true ? 'masterSelected' : 'normalSelected'} |
|
|
|
<td style={{ textAlign: 'left' }}>{MasterData.sProveedor}</td> |
|
|
|
> |
|
|
|
<td style={{ textAlign: 'left' }}>{MasterData.sOrigen}</td> |
|
|
|
{MasterData.id} |
|
|
|
<td style={{ textAlign: 'left' }}>{MasterData.sDestino}</td> |
|
|
|
</td> |
|
|
|
<td style={{ textAlign: 'left' }}>{MasterData.sTipoUnidad}</td> |
|
|
|
<td |
|
|
|
<td style={{ textAlign: 'left' }}>{MasterData.noCaja}</td> |
|
|
|
style={{ textAlign: 'left' }} |
|
|
|
<td style={{ textAlign: 'left' }}>{MasterData.hazmat}</td> |
|
|
|
className={MasterData.max === true ? 'masterSelected' : 'normalSelected'} |
|
|
|
<td style={{ textAlign: 'left' }}>{MasterData.refAgenciaAduanal}</td> |
|
|
|
key={MasterData.id} |
|
|
|
<td style={{ textAlign: 'left' }}>{MasterData.pickUpNumber}</td> |
|
|
|
onClick={() => { |
|
|
|
<td> |
|
|
|
changeToggle(MasterData) |
|
|
|
|
|
|
|
}} |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
{MasterData.max === true ? ( |
|
|
|
|
|
|
|
<IconContext.Provider value={{ color: 'blue', size: '15px' }}> |
|
|
|
|
|
|
|
<BsChevronDown /> |
|
|
|
|
|
|
|
</IconContext.Provider> |
|
|
|
|
|
|
|
) : ( |
|
|
|
|
|
|
|
<IconContext.Provider value={{ color: 'blue', size: '15px' }}> |
|
|
|
|
|
|
|
<BsChevronUp /> |
|
|
|
|
|
|
|
</IconContext.Provider> |
|
|
|
|
|
|
|
)} |
|
|
|
|
|
|
|
</td> |
|
|
|
|
|
|
|
<td |
|
|
|
|
|
|
|
style={{ textAlign: 'left' }} |
|
|
|
|
|
|
|
className={MasterData.max === true ? 'masterSelected' : 'normalSelected'} |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
{MasterData.sCliente} |
|
|
|
|
|
|
|
</td> |
|
|
|
|
|
|
|
<td |
|
|
|
|
|
|
|
style={{ textAlign: 'left' }} |
|
|
|
|
|
|
|
className={MasterData.max === true ? 'masterSelected' : 'normalSelected'} |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
{MasterData.sServicio} |
|
|
|
|
|
|
|
</td> |
|
|
|
|
|
|
|
<td |
|
|
|
|
|
|
|
style={{ textAlign: 'left' }} |
|
|
|
|
|
|
|
className={MasterData.max === true ? 'masterSelected' : 'normalSelected'} |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
{MasterData.sProveedor} |
|
|
|
|
|
|
|
</td> |
|
|
|
|
|
|
|
<td |
|
|
|
|
|
|
|
style={{ textAlign: 'left' }} |
|
|
|
|
|
|
|
className={MasterData.max === true ? 'masterSelected' : 'normalSelected'} |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
{MasterData.sOrigen} |
|
|
|
|
|
|
|
</td> |
|
|
|
|
|
|
|
<td |
|
|
|
|
|
|
|
style={{ textAlign: 'left' }} |
|
|
|
|
|
|
|
className={MasterData.max === true ? 'masterSelected' : 'normalSelected'} |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
{MasterData.sDestino} |
|
|
|
|
|
|
|
</td> |
|
|
|
|
|
|
|
<td |
|
|
|
|
|
|
|
style={{ textAlign: 'left' }} |
|
|
|
|
|
|
|
className={MasterData.max === true ? 'masterSelected' : 'normalSelected'} |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
{MasterData.sTipoUnidad} |
|
|
|
|
|
|
|
</td> |
|
|
|
|
|
|
|
<td |
|
|
|
|
|
|
|
style={{ textAlign: 'left' }} |
|
|
|
|
|
|
|
className={MasterData.max === true ? 'masterSelected' : 'normalSelected'} |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
{MasterData.noCaja} |
|
|
|
|
|
|
|
</td> |
|
|
|
|
|
|
|
<td |
|
|
|
|
|
|
|
style={{ textAlign: 'center' }} |
|
|
|
|
|
|
|
className={MasterData.max === true ? 'masterSelected' : 'normalSelected'} |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
{MasterData.hazmat === 1 ? 'Si' : 'No'} |
|
|
|
|
|
|
|
</td> |
|
|
|
|
|
|
|
<td |
|
|
|
|
|
|
|
style={{ textAlign: 'left' }} |
|
|
|
|
|
|
|
className={MasterData.max === true ? 'masterSelected' : 'normalSelected'} |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
{MasterData.refAgenciaAduanal} |
|
|
|
|
|
|
|
</td> |
|
|
|
|
|
|
|
<td |
|
|
|
|
|
|
|
style={{ textAlign: 'left' }} |
|
|
|
|
|
|
|
className={MasterData.max === true ? 'masterSelected' : 'normalSelected'} |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
{MasterData.pickUpNumber} |
|
|
|
|
|
|
|
</td> |
|
|
|
|
|
|
|
<td className={MasterData.max === true ? 'masterSelected' : 'normalSelected'}> |
|
|
|
<Button |
|
|
|
<Button |
|
|
|
size='sm' |
|
|
|
size='sm' |
|
|
|
variant='light' |
|
|
|
variant='white' |
|
|
|
style={{ textAlign: 'right' }} |
|
|
|
style={{ textAlign: 'right' }} |
|
|
|
onClick={() => { |
|
|
|
onClick={() => { |
|
|
|
EditMaster(MasterData) |
|
|
|
EditMaster(MasterData) |
|
|
@ -235,7 +313,7 @@ export const OpMonitor: FC<IProps> = (props) => { |
|
|
|
</Button> |
|
|
|
</Button> |
|
|
|
</td> |
|
|
|
</td> |
|
|
|
</tr> |
|
|
|
</tr> |
|
|
|
{MasterData.max === true && Switch === true ? ( |
|
|
|
{MasterData.max === true ? ( |
|
|
|
<tr> |
|
|
|
<tr> |
|
|
|
<th colSpan={2} style={{ backgroundColor: '#F8F9FE' }}></th> |
|
|
|
<th colSpan={2} style={{ backgroundColor: '#F8F9FE' }}></th> |
|
|
|
<th colSpan={14} style={{ backgroundColor: '#F8F9FE' }}> |
|
|
|
<th colSpan={14} style={{ backgroundColor: '#F8F9FE' }}> |
|
|
|