parent
9cffa70f11
commit
ee10f1d43b
@ -0,0 +1,270 @@ |
|||||||
|
import React, { FC, useEffect, useState } from 'react' |
||||||
|
import { Alert, Button, Card, Col, Form, Modal, Row, Table } from 'react-bootstrap' |
||||||
|
import { IconContext } from 'react-icons' |
||||||
|
import { BsFillPencilFill, BsPlusSquareFill } from 'react-icons/bs' |
||||||
|
|
||||||
|
import { useDispatch, useSelector } from 'react-redux' |
||||||
|
import { RootState } from '../../store/store' |
||||||
|
|
||||||
|
import DTOOpViajes from '../../DTOs/Operaciones/DTOViajes' |
||||||
|
import DSOpViajes from '../../Services/Operaciones/OpViajes.Services' |
||||||
|
import { ViajesServicios } from './ViajesServicios/ViajesServicios' |
||||||
|
import { populateOpViajes } from '../../store/features/Operaciones/OpViajesSlice' |
||||||
|
import { Viaje } from './Viaje/Viaje' |
||||||
|
import '../../css/masterDetail.css' |
||||||
|
|
||||||
|
interface IProps {} |
||||||
|
|
||||||
|
export const OpMonitor: FC<IProps> = (props) => { |
||||||
|
const dispatch = useDispatch() |
||||||
|
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 AllTrips = useSelector((state: RootState) => state.OpViajes.OpViajes) |
||||||
|
const [OpViajes, setOpViajes] = useState<DTOOpViajes[]>([]) |
||||||
|
const [showTripDialog, setShowTripDialog] = useState(false) |
||||||
|
const [Switch, setSwitch] = 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 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 EditMaster = (row: DTOOpViajes) => { |
||||||
|
showInfo(row) |
||||||
|
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() |
||||||
|
}, []) |
||||||
|
|
||||||
|
const loadTrips = () => { |
||||||
|
DSOpViajes.Get() |
||||||
|
.then((response) => { |
||||||
|
var data = response.data.map((x) => { |
||||||
|
x.max = false |
||||||
|
return x |
||||||
|
}) |
||||||
|
setOpViajes(data) |
||||||
|
dispatch(populateOpViajes(data)) |
||||||
|
}) |
||||||
|
.catch((e: Error) => {}) |
||||||
|
} |
||||||
|
|
||||||
|
const changeToggle = (row: DTOOpViajes) => { |
||||||
|
const data = OpViajes |
||||||
|
for (const obj of data) { |
||||||
|
if (obj.id === row.id) { |
||||||
|
obj.max = !obj.max |
||||||
|
setSwitch(obj.max) |
||||||
|
break |
||||||
|
} |
||||||
|
} |
||||||
|
// console.log('La informacion ha cambiado: ' + JSON.stringify(data))
|
||||||
|
setOpViajes(data) |
||||||
|
} |
||||||
|
|
||||||
|
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> |
||||||
|
<div className='MDcontainer'> |
||||||
|
<Table className='MDTable' hover> |
||||||
|
<thead style={{ position: 'sticky', top: '0' }}> |
||||||
|
<tr> |
||||||
|
<th>id</th> |
||||||
|
<th>Cliente</th> |
||||||
|
<th>Servicio</th> |
||||||
|
<th>Proveedor</th> |
||||||
|
<th>Origen</th> |
||||||
|
<th>Destino</th> |
||||||
|
<th>Tipo Unidad</th> |
||||||
|
<th>No caja</th> |
||||||
|
<th>Hazmat</th> |
||||||
|
<th>Ref AA</th> |
||||||
|
<th>PickUp No</th> |
||||||
|
<th>Editar</th> |
||||||
|
</tr> |
||||||
|
</thead> |
||||||
|
<tbody> |
||||||
|
{OpViajes |
||||||
|
? OpViajes.map((MasterData) => { |
||||||
|
return ( |
||||||
|
<> |
||||||
|
<tr |
||||||
|
key={MasterData.id} |
||||||
|
onClick={() => { |
||||||
|
changeToggle(MasterData) |
||||||
|
}} |
||||||
|
style={{ cursor: 'pointer' }} |
||||||
|
> |
||||||
|
<td style={{ textAlign: 'left' }}>{MasterData.id}</td> |
||||||
|
<td style={{ textAlign: 'left' }}>{MasterData.sCliente}</td> |
||||||
|
<td style={{ textAlign: 'left' }}>{MasterData.sServicio}</td> |
||||||
|
<td style={{ textAlign: 'left' }}>{MasterData.sProveedor}</td> |
||||||
|
<td style={{ textAlign: 'left' }}>{MasterData.sOrigen}</td> |
||||||
|
<td style={{ textAlign: 'left' }}>{MasterData.sDestino}</td> |
||||||
|
<td style={{ textAlign: 'left' }}>{MasterData.sTipoUnidad}</td> |
||||||
|
<td style={{ textAlign: 'left' }}>{MasterData.noCaja}</td> |
||||||
|
<td style={{ textAlign: 'left' }}>{MasterData.hazmat}</td> |
||||||
|
<td style={{ textAlign: 'left' }}>{MasterData.refAgenciaAduanal}</td> |
||||||
|
<td style={{ textAlign: 'left' }}>{MasterData.pickUpNumber}</td> |
||||||
|
<td> |
||||||
|
<Button |
||||||
|
size='sm' |
||||||
|
variant='light' |
||||||
|
style={{ textAlign: 'right' }} |
||||||
|
onClick={() => { |
||||||
|
EditMaster(MasterData) |
||||||
|
}} |
||||||
|
> |
||||||
|
<IconContext.Provider value={{ color: 'blue', size: '15px' }}> |
||||||
|
<BsFillPencilFill /> |
||||||
|
</IconContext.Provider> |
||||||
|
</Button> |
||||||
|
</td> |
||||||
|
</tr> |
||||||
|
{MasterData.max === true && Switch === true ? ( |
||||||
|
<tr> |
||||||
|
<th colSpan={2} style={{ backgroundColor: '#F8F9FE' }}></th> |
||||||
|
<th colSpan={14} style={{ backgroundColor: '#F8F9FE' }}> |
||||||
|
<ViajesServicios DataMaster={MasterData} key={MasterData.id} /> |
||||||
|
</th> |
||||||
|
</tr> |
||||||
|
) : ( |
||||||
|
'' |
||||||
|
)} |
||||||
|
</> |
||||||
|
) |
||||||
|
}) |
||||||
|
: null} |
||||||
|
</tbody> |
||||||
|
</Table> |
||||||
|
</div> |
||||||
|
</Card.Body> |
||||||
|
</Card> |
||||||
|
<Modal |
||||||
|
show={showTripDialog} |
||||||
|
onHide={() => { |
||||||
|
setShowTripDialog(false) |
||||||
|
}} |
||||||
|
> |
||||||
|
<Modal.Header closeButton></Modal.Header> |
||||||
|
<Modal.Body> |
||||||
|
<Viaje IDViaje={IDViaje} /> |
||||||
|
</Modal.Body> |
||||||
|
</Modal> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
@ -0,0 +1,376 @@ |
|||||||
|
import React, { FC, useEffect, useState } from 'react' |
||||||
|
import { Alert, Button, Col, Form, Modal, Row } from 'react-bootstrap' |
||||||
|
import { useDispatch, useSelector } from 'react-redux' |
||||||
|
import DTOOpViajes from '../../../DTOs/Operaciones/DTOViajes' |
||||||
|
import DSOpViajes from '../../../Services/Operaciones/OpViajes.Services' |
||||||
|
import { updateOpViajes } from '../../../store/features/Operaciones/OpViajesSlice' |
||||||
|
import { RootState } from '../../../store/store' |
||||||
|
|
||||||
|
interface IProps { |
||||||
|
IDViaje: number |
||||||
|
} |
||||||
|
|
||||||
|
export const Viaje: FC<IProps> = (props) => { |
||||||
|
const dispatch = useDispatch() |
||||||
|
const mAllTrips = useSelector((state: RootState) => state.OpViajes.OpViajes) |
||||||
|
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 [Switch, setSwitch] = 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 [IDNuevoServicio, setIDNuevoServicio] = 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) |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
let selectedRow = mAllTrips.filter((row) => { |
||||||
|
console.log(row.id) |
||||||
|
if (row.id === props.IDViaje) { |
||||||
|
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) |
||||||
|
return row |
||||||
|
} |
||||||
|
}) |
||||||
|
//setRefAA(selectedRow[0].refAgenciaAduanal)
|
||||||
|
// console.log(JSON.stringify(selectedRow) + ' ' + props.IDViaje)
|
||||||
|
}, [props.IDViaje]) |
||||||
|
|
||||||
|
const addNewService = () => {} |
||||||
|
|
||||||
|
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) => { |
||||||
|
dispatch(updateOpViajes(data)) |
||||||
|
}) |
||||||
|
.catch((e: Error) => {}) |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<div> |
||||||
|
<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> |
||||||
|
<Row style={{ paddingTop: '10px' }}> |
||||||
|
<Col xs={2}> |
||||||
|
<Button |
||||||
|
variant='warning' |
||||||
|
onClick={() => { |
||||||
|
addNewService() |
||||||
|
}} |
||||||
|
> |
||||||
|
Agrega |
||||||
|
</Button> |
||||||
|
</Col> |
||||||
|
<Col xs={1}></Col> |
||||||
|
<Col xs={9}> |
||||||
|
<Form.Control |
||||||
|
as='select' |
||||||
|
onChange={(e) => { |
||||||
|
setIDNuevoServicio(parseInt(e.target.value)) |
||||||
|
}} |
||||||
|
value={IDNuevoServicio} |
||||||
|
className='form-select form-select-sm' |
||||||
|
> |
||||||
|
<option value='0'>SELECCIONE EL SERVICIO QUE DESEE AGREGAR</option> |
||||||
|
{CatServicios |
||||||
|
? CatServicios.map((c) => { |
||||||
|
return ( |
||||||
|
<option key={c.id} value={c.id}> |
||||||
|
{c.servicio} |
||||||
|
</option> |
||||||
|
) |
||||||
|
}) |
||||||
|
: null} |
||||||
|
</Form.Control> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
<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> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
@ -0,0 +1,35 @@ |
|||||||
|
import React, { FC, useState } from 'react' |
||||||
|
import DTOOpViajes from '../../../DTOs/Operaciones/DTOViajes' |
||||||
|
|
||||||
|
interface IProps { |
||||||
|
DataMaster: DTOOpViajes |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* @author |
||||||
|
* @function @ViajesServicios |
||||||
|
**/ |
||||||
|
|
||||||
|
export const ViajesServicios: FC<IProps> = (props) => { |
||||||
|
const [DisplayTable, setDisplayTable] = useState(true) |
||||||
|
return ( |
||||||
|
<div> |
||||||
|
<table className='zui-table zui-table-rounded'> |
||||||
|
<thead> |
||||||
|
<tr> |
||||||
|
<th style={{ width: '50px', textAlign: 'center' }}>Partida</th> |
||||||
|
<th style={{ width: '100px', textAlign: 'right' }}>Peso bruto</th> |
||||||
|
<th style={{ width: '100px', textAlign: 'right' }}>Pallets</th> |
||||||
|
<th style={{ width: '250px', textAlign: 'left' }}>Producto Materia Prima</th> |
||||||
|
<th style={{ width: '180px' }}>Fraccion Arancelaria</th> |
||||||
|
<th style={{ width: '100px' }}>Clave SAT</th> |
||||||
|
<th style={{ width: '250px' }}>Concepto Producto MP</th> |
||||||
|
<th style={{ width: '50px', textAlign: 'center' }}>Edita</th> |
||||||
|
<th style={{ width: '300px' }}>Empaque (descripcion)</th> |
||||||
|
<th style={{ width: '100px' }}>Clave SAT</th> |
||||||
|
</tr> |
||||||
|
</thead> |
||||||
|
</table> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
@ -0,0 +1,113 @@ |
|||||||
|
.MDTable { |
||||||
|
width: 1500px; |
||||||
|
font-size: 0.6em; |
||||||
|
font-family: Verdana, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif; |
||||||
|
background-color: #ffffff; |
||||||
|
} |
||||||
|
|
||||||
|
.MDHeaderSticky { |
||||||
|
position: 'sticky'; |
||||||
|
top: '0' |
||||||
|
} |
||||||
|
|
||||||
|
/* .MDTable th, */ |
||||||
|
.MDTable td { |
||||||
|
padding: 5px 0px 0px 0px; |
||||||
|
border: none; |
||||||
|
/* padding-top: 5px; */ |
||||||
|
background-color: #ebecfa; |
||||||
|
} |
||||||
|
|
||||||
|
.MDTable tr { |
||||||
|
background-color: #dddcdc; |
||||||
|
} |
||||||
|
|
||||||
|
.MDTable thead tr th { |
||||||
|
/* text-shadow: 1px 1px 1px #ccc; */ |
||||||
|
font-size: 1.1em; |
||||||
|
background-color: #255dde; |
||||||
|
color: #FFFFFF; |
||||||
|
height: 25px; |
||||||
|
text-align: left; |
||||||
|
} |
||||||
|
|
||||||
|
.MDTable tbody tr td { |
||||||
|
border-top: solid 1px #c8cacd; |
||||||
|
/* border-bottom: solid 1px #092a84; */ |
||||||
|
font-size: 1.2em; |
||||||
|
background-color: #FFFFFF; |
||||||
|
/* height: 25px; */ |
||||||
|
} |
||||||
|
|
||||||
|
.MDTable tbody tr:nth-of-type(even) { |
||||||
|
background-color: #c2bfbf; |
||||||
|
} |
||||||
|
|
||||||
|
.MDTable tbody tr:nth-of-type(odd) { |
||||||
|
background-color: #c0bdbd; |
||||||
|
} |
||||||
|
|
||||||
|
.MDcontainer { |
||||||
|
width: 100%; |
||||||
|
height: 500px; |
||||||
|
overflow: auto; |
||||||
|
} |
||||||
|
|
||||||
|
.zui-table { |
||||||
|
border: solid 1px #DDEEEE; |
||||||
|
border-collapse: collapse; |
||||||
|
border-spacing: 0; |
||||||
|
font: normal 11px Arial, sans-serif; |
||||||
|
} |
||||||
|
|
||||||
|
.zui-table thead tr th { |
||||||
|
background-color: #DDEFEF; |
||||||
|
border: solid 1px #DDEEEE; |
||||||
|
color: #336B6B; |
||||||
|
padding: 5px; |
||||||
|
text-align: left; |
||||||
|
text-shadow: 1px 1px 1px #fff; |
||||||
|
} |
||||||
|
|
||||||
|
.zui-table tbody td { |
||||||
|
border: dotted 1px #DDEEEE; |
||||||
|
color: #333; |
||||||
|
padding: 0px; |
||||||
|
text-shadow: 1px 1px 1px #fff; |
||||||
|
border-bottom: none; |
||||||
|
border-top: none; |
||||||
|
} |
||||||
|
|
||||||
|
.zui-table-rounded { |
||||||
|
border: none; |
||||||
|
} |
||||||
|
|
||||||
|
.zui-table-rounded thead th { |
||||||
|
background-color: #CFAD70; |
||||||
|
border: none; |
||||||
|
text-shadow: 1px 1px 1px #ccc; |
||||||
|
color: #333; |
||||||
|
} |
||||||
|
|
||||||
|
.zui-table-rounded thead th:first-child { |
||||||
|
border-radius: 10px 0 0 0; |
||||||
|
} |
||||||
|
|
||||||
|
.zui-table-rounded thead th:last-child { |
||||||
|
border-radius: 0 10px 0 0; |
||||||
|
} |
||||||
|
|
||||||
|
.zui-table-rounded tbody tr td { |
||||||
|
border: none; |
||||||
|
border-top: dotted 1px #09840f; |
||||||
|
background-color: #EED592; |
||||||
|
border-bottom: none; |
||||||
|
} |
||||||
|
|
||||||
|
.zui-table-rounded tbody tr:last-child td:first-child { |
||||||
|
border-radius: 0 0 0 10px; |
||||||
|
} |
||||||
|
|
||||||
|
.zui-table-rounded tbody tr:last-child td:last-child { |
||||||
|
border-radius: 0 0 10px 0; |
||||||
|
} |
@ -0,0 +1,32 @@ |
|||||||
|
import { createSlice, PayloadAction } from '@reduxjs/toolkit' |
||||||
|
import DTOViajes from '../../../DTOs/Operaciones/DTOViajes' |
||||||
|
const OpViajes: DTOViajes[] = [] |
||||||
|
const initialState = { OpViajes } |
||||||
|
|
||||||
|
export const OpViajesSlice = createSlice({ |
||||||
|
name: 'OpViajes', |
||||||
|
initialState: initialState, |
||||||
|
reducers: { |
||||||
|
resetOpViajes : (state, action: PayloadAction<string>) => { |
||||||
|
state.OpViajes = [] |
||||||
|
},
|
||||||
|
populateOpViajes : (state, action: PayloadAction<DTOViajes[]>) => { |
||||||
|
action.payload.forEach(element => { |
||||||
|
const index = state.OpViajes.findIndex(object => object.id === element.id) |
||||||
|
if (index<0) state.OpViajes.push(element) |
||||||
|
}) |
||||||
|
}, |
||||||
|
updateOpViajes : (state, action: PayloadAction<DTOViajes>) => { |
||||||
|
const i = state.OpViajes.findIndex(_element => _element.id === action.payload.id); |
||||||
|
if (i > -1) state.OpViajes[i] = action.payload; |
||||||
|
else state.OpViajes.push(action.payload); |
||||||
|
}, |
||||||
|
deleteOpViajes : (state, action: PayloadAction<number>) => { |
||||||
|
const newArr = state.OpViajes.filter(data => data.id != action.payload); |
||||||
|
state.OpViajes=newArr |
||||||
|
}, |
||||||
|
}, |
||||||
|
}) |
||||||
|
|
||||||
|
export const { resetOpViajes, populateOpViajes, updateOpViajes, deleteOpViajes } = OpViajesSlice.actions; |
||||||
|
export default OpViajesSlice.reducer; |
Loading…
Reference in new issue