|
|
|
@ -1,5 +1,5 @@ |
|
|
|
|
import React, { FC, useEffect, useState, ChangeEvent, useCallback } from 'react' |
|
|
|
|
import { Alert, Button, Card, Col, Form, Modal, Row } from 'react-bootstrap' |
|
|
|
|
import { FC, useEffect, useRef, useState } from 'react' |
|
|
|
|
import { Button, ButtonGroup, Card, Col, Dropdown, DropdownButton, Form, ListGroup, Modal, Row } from 'react-bootstrap' |
|
|
|
|
import { useDispatch, useSelector } from 'react-redux' |
|
|
|
|
import DTOOpViajes from '../../../DTOs/Operaciones/DTOViajes' |
|
|
|
|
import DSOpViajes from '../../../Services/Operaciones/OpViajes.Services' |
|
|
|
@ -13,28 +13,9 @@ import DTOViajesServicios from '../../../DTOs/Operaciones/DTOViajesServicios' |
|
|
|
|
import { Servicios } from '../Viaje/Servicios/Servicios' |
|
|
|
|
import DatePicker from 'react-datepicker' |
|
|
|
|
import 'react-datepicker/dist/react-datepicker.css' |
|
|
|
|
import { Typeahead } from 'react-bootstrap-typeahead' // ES2015
|
|
|
|
|
import 'react-bootstrap-typeahead/css/Typeahead.css' |
|
|
|
|
import 'react-bootstrap-typeahead/css/Typeahead.bs5.css' |
|
|
|
|
import ICatClientes from '../../../Interfaces/Catalogos/ICatClientes' |
|
|
|
|
import { AutocompletePure, AutocompletePureProps, ChangeReason, RenderItem } from 'react-autocomplete-pure' |
|
|
|
|
import { Autocomplete } from '../../Utils/Autocomplete/Autocomplete' |
|
|
|
|
import Select from 'react-select' |
|
|
|
|
import AutoSuggest from 'react-autosuggest' |
|
|
|
|
|
|
|
|
|
type Film = { id: number; cliente: string } |
|
|
|
|
|
|
|
|
|
const renderItem: RenderItem<Film> = (item, { isHighlighted }) => ( |
|
|
|
|
<span style={{ fontWeight: isHighlighted ? 700 : 400 }}>{item.cliente}</span> |
|
|
|
|
) |
|
|
|
|
|
|
|
|
|
const getSuggestionValue = (item: Film) => item.cliente |
|
|
|
|
|
|
|
|
|
const options = [ |
|
|
|
|
{ value: 'chocolate', label: 'Chocolate' }, |
|
|
|
|
{ value: 'strawberry', label: 'Strawberry' }, |
|
|
|
|
{ value: 'vanilla', label: 'Vanilla' }, |
|
|
|
|
] |
|
|
|
|
import '../../../css/autoComplete.css' |
|
|
|
|
|
|
|
|
|
interface IProps { |
|
|
|
|
IDViaje: number |
|
|
|
@ -45,33 +26,19 @@ interface IOpciones { |
|
|
|
|
label: string |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/* interface Option { |
|
|
|
|
firstName: string |
|
|
|
|
lastName: string |
|
|
|
|
} */ |
|
|
|
|
|
|
|
|
|
export const Viaje: FC<IProps> = (props) => { |
|
|
|
|
const [value, setValue] = useState('') |
|
|
|
|
const [suggestions, setSuggestions] = useState<string[]>([]) |
|
|
|
|
const [isOpen, setIsOpen] = useState<boolean>(false) |
|
|
|
|
//const [suggestions, setSuggestions] = useState<Film[]>([])
|
|
|
|
|
//const [value, setValue] = useState<string>('')
|
|
|
|
|
const [selectedOption, setselectedOption] = useState<IOpciones | null>() |
|
|
|
|
|
|
|
|
|
const dispatch = useDispatch() |
|
|
|
|
const mAllTrips = useSelector((state: RootState) => state.OpViajes.OpViajes) |
|
|
|
|
const mAllTripServices = useSelector((state: RootState) => state.OpViajesServicios.OpViajesServicios) |
|
|
|
|
const Info = JSON.parse(localStorage.getItem('tokenInfo') || '[]') |
|
|
|
|
const UserID = Info.UserId |
|
|
|
|
const mCatClientes = useSelector((state: RootState) => state.CatClientes.CatClientes) |
|
|
|
|
const CatProveedores = useSelector((state: RootState) => state.CatProveedores.CatProveedores) |
|
|
|
|
const mCatProveedores = 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 mCatUbicaciones = useSelector((state: RootState) => state.CatUbicaciones.CatUbicaciones) |
|
|
|
|
const mCatServicios = useSelector((state: RootState) => state.CatServicios.CatServicios) |
|
|
|
|
const CatAduanas = useSelector((state: RootState) => state.CatAduanas.CatAduanas) |
|
|
|
|
const [OpViajes, setOpViajes] = useState<DTOOpViajes[]>([]) |
|
|
|
|
const [showTripDialog, setShowTripDialog] = useState(false) |
|
|
|
|
const [Switch, setSwitch] = useState(false) |
|
|
|
|
const [NoCaja, setNoCaja] = useState('') |
|
|
|
|
const [UltimaCaja, setUltimaCaja] = useState('') |
|
|
|
|
const [IDViaje, setIDViaje] = useState(0) |
|
|
|
@ -79,11 +46,14 @@ export const Viaje: FC<IProps> = (props) => { |
|
|
|
|
const [IDCliente, setIDCliente] = useState(0) |
|
|
|
|
const [Cliente, setCliente] = useState('') |
|
|
|
|
const [IDProveedor, setIDProveedor] = useState(0) |
|
|
|
|
const [Proveedor, setProveedor] = useState('') |
|
|
|
|
const [IDServicio, setIDServicio] = useState(0) |
|
|
|
|
const [IDNuevoServicio, setIDNuevoServicio] = useState(0) |
|
|
|
|
const [Servicio, setServicio] = useState('') |
|
|
|
|
const [IDTipoUnidad, setIDTipoUnidad] = useState(0) |
|
|
|
|
const [IDOrigen, setIDOrigen] = useState(0) |
|
|
|
|
const [Origen, setOrigen] = useState('') |
|
|
|
|
const [IDDestino, setIDDestino] = useState(0) |
|
|
|
|
const [Destino, setDestino] = useState('') |
|
|
|
|
const [RefAA, setRefAA] = useState('') |
|
|
|
|
const [PickUpNumber, setPickUpNumber] = useState('') |
|
|
|
|
const [Hazmat, setHazmat] = useState(0) |
|
|
|
@ -94,45 +64,12 @@ export const Viaje: FC<IProps> = (props) => { |
|
|
|
|
const [DisableAduana, setDisableAduana] = useState(true) |
|
|
|
|
const [TotalServicios, setTotalServicios] = useState(0) |
|
|
|
|
const [Cita, setCita] = useState<Date | null>() |
|
|
|
|
const [singleSelections, setSingleSelections] = useState<IOpciones[]>([]) |
|
|
|
|
const [multiSelections, setMultiSelections] = useState([]) |
|
|
|
|
|
|
|
|
|
/* const handleChange: AutocompletePureProps<Film>['onChange'] = useCallback(async (_event, { value, reason }) => { |
|
|
|
|
setValue(value) |
|
|
|
|
console.log('value=' + value) |
|
|
|
|
if (reason === 'INPUT') { |
|
|
|
|
let newFilms = mCatClientes.filter((a) => { |
|
|
|
|
if (a.cliente.includes(value)) { |
|
|
|
|
return a |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
//const newFilms = await fetchFilms(value)
|
|
|
|
|
setSuggestions(newFilms) |
|
|
|
|
setIsOpen(Boolean(newFilms.length)) |
|
|
|
|
} else if (reason === 'ENTER') { |
|
|
|
|
setIsOpen(false) |
|
|
|
|
} |
|
|
|
|
}, []) */ |
|
|
|
|
|
|
|
|
|
const handleSelect: AutocompletePureProps<Film>['onSelect'] = useCallback((_event, { item }) => { |
|
|
|
|
const value = getSuggestionValue(item) |
|
|
|
|
setValue(value) |
|
|
|
|
console.log('value=' + value) |
|
|
|
|
setIsOpen(false) |
|
|
|
|
}, []) |
|
|
|
|
|
|
|
|
|
const handleClickOutside = (_event: Event) => { |
|
|
|
|
setIsOpen(false) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/* const [options, setOptions] = useState([ |
|
|
|
|
{ firstName: 'Art', lastName: 'Blakey' }, |
|
|
|
|
{ firstName: 'John', lastName: 'Coltrane' }, |
|
|
|
|
{ firstName: 'Miles', lastName: 'Davis' }, |
|
|
|
|
{ firstName: 'Herbie', lastName: 'Hancock' }, |
|
|
|
|
{ firstName: 'Charlie', lastName: 'Parker' }, |
|
|
|
|
{ firstName: 'Tony', lastName: 'Williams' }, |
|
|
|
|
]) */ |
|
|
|
|
const [SelectedClient, setSelectedClient] = useState(false) |
|
|
|
|
const [SelectedOrigen, setSelectedOrigen] = useState(false) |
|
|
|
|
const [SelectedDestino, setSelectedDestino] = useState(false) |
|
|
|
|
const [SelectedServicio, setSelectedServicio] = useState(false) |
|
|
|
|
const [SelectedProveedor, setSelectedProveedor] = useState(false) |
|
|
|
|
const inputRef = useRef() |
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
if (IDServicio > 0 && TotalServicios === 0) saveDetail() |
|
|
|
@ -149,11 +86,17 @@ export const Viaje: FC<IProps> = (props) => { |
|
|
|
|
setPickUpNumber(row.pickUpNumber) |
|
|
|
|
setTipoOperacion(row.tipoOperacion) |
|
|
|
|
setPedimento(row.pedimento) |
|
|
|
|
setCliente(row.sCliente) |
|
|
|
|
setOrigen(row.sOrigen) |
|
|
|
|
setDestino(row.sDestino) |
|
|
|
|
setSelectedClient(true) |
|
|
|
|
setSelectedOrigen(true) |
|
|
|
|
setSelectedDestino(true) |
|
|
|
|
setSelectedServicio(true) |
|
|
|
|
setSelectedProveedor(true) |
|
|
|
|
return row |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
//setRefAA(selectedRow[0].refAgenciaAduanal)
|
|
|
|
|
// console.log(JSON.stringify(selectedRow) + ' ' + props.IDViaje)
|
|
|
|
|
let totalServicios = mAllTripServices.filter((a) => { |
|
|
|
|
if (a.idViaje === IDViaje) { |
|
|
|
|
return a |
|
|
|
@ -165,6 +108,22 @@ export const Viaje: FC<IProps> = (props) => { |
|
|
|
|
useEffect(() => { |
|
|
|
|
if (IDServicio === 1 || IDServicio === 2 || IDServicio === 22) setDisableAduana(false) |
|
|
|
|
else setDisableAduana(true) |
|
|
|
|
if (IDServicio > 0) { |
|
|
|
|
let serviceFound = mCatServicios.filter((item) => { |
|
|
|
|
if (item.id == IDServicio) { |
|
|
|
|
return item |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
setServicio(serviceFound[0].servicio) |
|
|
|
|
} |
|
|
|
|
if (IDProveedor > 0) { |
|
|
|
|
let providerFound = mCatProveedores.filter((item) => { |
|
|
|
|
if (item.id == IDProveedor) { |
|
|
|
|
return item |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
setProveedor(providerFound[0].proveedor) |
|
|
|
|
} |
|
|
|
|
}, [IDServicio]) |
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
@ -187,12 +146,7 @@ export const Viaje: FC<IProps> = (props) => { |
|
|
|
|
}, [Hazmat]) |
|
|
|
|
|
|
|
|
|
const saveDetail = () => { |
|
|
|
|
if (IDServicio === 0) { |
|
|
|
|
alert('Para continuar, primero seleccione un servicio') |
|
|
|
|
return false |
|
|
|
|
} |
|
|
|
|
if (IDProveedor === 0) { |
|
|
|
|
alert('Para continuar, primero seleccione un proveedor') |
|
|
|
|
if (IDServicio === 0 || IDProveedor === 0) { |
|
|
|
|
return false |
|
|
|
|
} |
|
|
|
|
const data: DTOViajesServicios = { |
|
|
|
@ -209,7 +163,6 @@ export const Viaje: FC<IProps> = (props) => { |
|
|
|
|
} |
|
|
|
|
DSOpViajes.AppendServices(data) |
|
|
|
|
.then((responsed) => { |
|
|
|
|
// console.log('Item regresado del post=' + JSON.stringify(responsed.data))
|
|
|
|
|
if (IDDetail === 0) { |
|
|
|
|
dispatch(populateOpViajesServicios(responsed.data)) |
|
|
|
|
setIDDetail(responsed.data[0].id) |
|
|
|
@ -273,6 +226,7 @@ export const Viaje: FC<IProps> = (props) => { |
|
|
|
|
noCaja: NoCaja, |
|
|
|
|
pickUpNumber: PickUpNumber, |
|
|
|
|
tipoOperacion: TipoOperacion, |
|
|
|
|
sTipoOperacion: '', |
|
|
|
|
pedimento: Pedimento, |
|
|
|
|
max: true, |
|
|
|
|
status: 1, |
|
|
|
@ -294,14 +248,11 @@ export const Viaje: FC<IProps> = (props) => { |
|
|
|
|
setComentarios('') |
|
|
|
|
setIDProveedor(0) |
|
|
|
|
setUltimaCaja('') |
|
|
|
|
setServicio('') |
|
|
|
|
setProveedor('') |
|
|
|
|
setDisableAduana(true) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const handleChange = (option: IOpciones) => { |
|
|
|
|
console.log('selectedoptions=' + option) |
|
|
|
|
//setselectedOption(selectedOption)
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
console.log(selectedOption) |
|
|
|
|
}, [selectedOption]) |
|
|
|
@ -318,6 +269,18 @@ export const Viaje: FC<IProps> = (props) => { |
|
|
|
|
return lowerCasedCompanies.filter((language) => language.startsWith(value.trim().toLowerCase())) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const handleKeyDown = (e: any) => { |
|
|
|
|
// const { cursor, result } = this.state
|
|
|
|
|
// arrow up/down button should select next/previous list element
|
|
|
|
|
/* if (e.keyCode === 38) { |
|
|
|
|
console.log('arrow down') |
|
|
|
|
|
|
|
|
|
} else */ |
|
|
|
|
if (e.keyCode === 40) { |
|
|
|
|
console.log('arrow down') |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<div className='tripField'> |
|
|
|
|
<Card style={{ backgroundColor: '#F0F7FC' }}> |
|
|
|
@ -346,8 +309,11 @@ export const Viaje: FC<IProps> = (props) => { |
|
|
|
|
</Row> |
|
|
|
|
<Row style={{ paddingTop: '5px' }}> |
|
|
|
|
<Col xs={2}>Cliente</Col> |
|
|
|
|
{/* <Col xs={10}> |
|
|
|
|
<Col xs={9}> |
|
|
|
|
<div className='mainDiv'> |
|
|
|
|
<Form.Group className='typeahead-form-group'> |
|
|
|
|
<Form.Control |
|
|
|
|
autoComplete='nope' |
|
|
|
|
type='text' |
|
|
|
|
id='Cliente' |
|
|
|
|
value={Cliente} |
|
|
|
@ -355,81 +321,33 @@ export const Viaje: FC<IProps> = (props) => { |
|
|
|
|
className='dialogLabel' |
|
|
|
|
onChange={(e) => { |
|
|
|
|
setCliente(e.target.value) |
|
|
|
|
setSelectedClient(false) |
|
|
|
|
}} |
|
|
|
|
onKeyDown={(e) => { |
|
|
|
|
handleKeyDown(e) |
|
|
|
|
}} |
|
|
|
|
/> |
|
|
|
|
<Autocomplete input={''} />
|
|
|
|
|
</Col>*/} |
|
|
|
|
{/* <Col xs={10}> |
|
|
|
|
<Form.Control |
|
|
|
|
as='select' |
|
|
|
|
onChange={(e) => { |
|
|
|
|
setIDCliente(parseInt(e.target.value)) |
|
|
|
|
<Dropdown className='d-inline mx-6' show={!SelectedClient && Cliente.length > 0}> |
|
|
|
|
<Dropdown.Menu> |
|
|
|
|
{Cliente.length > 0 && |
|
|
|
|
!SelectedClient && |
|
|
|
|
mCatClientes |
|
|
|
|
.filter((result) => result.cliente.toLocaleLowerCase().includes(Cliente.toLocaleLowerCase())) |
|
|
|
|
.map((result) => ( |
|
|
|
|
<Dropdown.Item |
|
|
|
|
onClick={() => { |
|
|
|
|
setIDCliente(result.id) |
|
|
|
|
setCliente(result.cliente) |
|
|
|
|
setSelectedClient(true) |
|
|
|
|
}} |
|
|
|
|
value={IDCliente} |
|
|
|
|
className='form-select form-select-sm dialogLabel' |
|
|
|
|
> |
|
|
|
|
<option value='0'>-SELECCIONE-</option> |
|
|
|
|
{mCatClientes |
|
|
|
|
? mCatClientes.map((c) => { |
|
|
|
|
return ( |
|
|
|
|
<option key={c.id} value={c.id}> |
|
|
|
|
{c.cliente} |
|
|
|
|
</option> |
|
|
|
|
) |
|
|
|
|
}) |
|
|
|
|
: null} |
|
|
|
|
</Form.Control> |
|
|
|
|
</Col> */} |
|
|
|
|
{/* <Col xs={10}> |
|
|
|
|
<Typeahead |
|
|
|
|
clearButton |
|
|
|
|
defaultSelected={mCatClientes.filter((cliente) => { |
|
|
|
|
if (cliente.id === IDCliente) { |
|
|
|
|
return cliente |
|
|
|
|
} |
|
|
|
|
})} |
|
|
|
|
id='Cliente' |
|
|
|
|
labelKey='cliente' |
|
|
|
|
onChange={(selected) => { |
|
|
|
|
if (selected.length > 0) { |
|
|
|
|
const valStringify = JSON.stringify(selected) |
|
|
|
|
const valParse = JSON.parse(valStringify) |
|
|
|
|
//console.log(valParse[0].id)
|
|
|
|
|
setIDCliente(valParse[0].id) |
|
|
|
|
} |
|
|
|
|
}} |
|
|
|
|
options={mCatClientes} |
|
|
|
|
placeholder='Seleccione el cliente...' |
|
|
|
|
/> |
|
|
|
|
</Col> */} |
|
|
|
|
{/* <Col xs={10}> |
|
|
|
|
<div className='autoComplete'> |
|
|
|
|
<AutocompletePure |
|
|
|
|
open={isOpen} |
|
|
|
|
value={value} |
|
|
|
|
items={suggestions} |
|
|
|
|
onChange={handleChange} |
|
|
|
|
onSelect={handleSelect} |
|
|
|
|
onClickOutside={handleClickOutside} |
|
|
|
|
renderItem={renderItem} |
|
|
|
|
getSuggestionValue={getSuggestionValue} |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
</Col> */} |
|
|
|
|
<Col xs={10}> |
|
|
|
|
{/* <Select |
|
|
|
|
value={selectedOption} |
|
|
|
|
onChange={() => handleChange} |
|
|
|
|
options={options} |
|
|
|
|
isClearable={true} |
|
|
|
|
getOptionLabel={(animal: IOpciones) => animal.label} |
|
|
|
|
getOptionValue={(animal: IOpciones) => animal.value} |
|
|
|
|
/> */} |
|
|
|
|
{/* <select onChange={(e) => handleAddrTypeChange(e)} className='browser-default custom-select'> |
|
|
|
|
{Add.map((address, key) => ( |
|
|
|
|
<option value={key}>{address}</option> |
|
|
|
|
{result.cliente} |
|
|
|
|
</Dropdown.Item> |
|
|
|
|
))} |
|
|
|
|
</select> */} |
|
|
|
|
</Dropdown.Menu> |
|
|
|
|
</Dropdown> |
|
|
|
|
</Form.Group> |
|
|
|
|
</div> |
|
|
|
|
</Col> |
|
|
|
|
</Row> |
|
|
|
|
<Row style={{ paddingTop: '5px' }}> |
|
|
|
@ -474,53 +392,89 @@ export const Viaje: FC<IProps> = (props) => { |
|
|
|
|
<Row style={{ paddingTop: '5px' }}> |
|
|
|
|
<Col xs={2}>Origen</Col> |
|
|
|
|
<Col xs={4}> |
|
|
|
|
<div className='mainDiv'> |
|
|
|
|
<Form.Group className='typeahead-form-group'> |
|
|
|
|
<Form.Control |
|
|
|
|
as='select' |
|
|
|
|
autoComplete='nope' |
|
|
|
|
type='text' |
|
|
|
|
id='Origen' |
|
|
|
|
value={Origen} |
|
|
|
|
size='sm' |
|
|
|
|
className='dialogLabel' |
|
|
|
|
onChange={(e) => { |
|
|
|
|
setIDOrigen(parseInt(e.target.value)) |
|
|
|
|
setOrigen(e.target.value) |
|
|
|
|
setSelectedOrigen(false) |
|
|
|
|
}} |
|
|
|
|
value={IDOrigen} |
|
|
|
|
className='form-select form-select-sm dialogLabel' |
|
|
|
|
> |
|
|
|
|
<option value='0'>-SELECCIONE-</option> |
|
|
|
|
{CatUbicaciones |
|
|
|
|
? CatUbicaciones.map((c) => { |
|
|
|
|
if (c.clasificacion === 1) { |
|
|
|
|
return ( |
|
|
|
|
<option key={c.id} value={c.id}> |
|
|
|
|
{c.ubicacion} |
|
|
|
|
</option> |
|
|
|
|
/> |
|
|
|
|
<Dropdown className='d-inline mx-6' show={!SelectedOrigen && Origen.length > 0}> |
|
|
|
|
<Dropdown.Menu> |
|
|
|
|
{Origen.length > 0 && |
|
|
|
|
!SelectedOrigen && |
|
|
|
|
mCatUbicaciones |
|
|
|
|
.filter( |
|
|
|
|
(result) => |
|
|
|
|
result.ubicacion.toLocaleLowerCase().includes(Origen.toLocaleLowerCase()) && |
|
|
|
|
result.clasificacion === 1 |
|
|
|
|
) |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
: null} |
|
|
|
|
</Form.Control> |
|
|
|
|
.map((result) => ( |
|
|
|
|
<Dropdown.Item |
|
|
|
|
onClick={() => { |
|
|
|
|
setIDOrigen(result.id) |
|
|
|
|
setOrigen(result.ubicacion) |
|
|
|
|
setSelectedOrigen(true) |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
{result.ubicacion} |
|
|
|
|
</Dropdown.Item> |
|
|
|
|
))} |
|
|
|
|
</Dropdown.Menu> |
|
|
|
|
</Dropdown> |
|
|
|
|
</Form.Group> |
|
|
|
|
</div> |
|
|
|
|
</Col> |
|
|
|
|
<Col xs={2} style={{ textAlign: 'right' }}> |
|
|
|
|
Destino |
|
|
|
|
</Col> |
|
|
|
|
<Col xs={4}> |
|
|
|
|
<div className='mainDiv'> |
|
|
|
|
<Form.Group className='typeahead-form-group'> |
|
|
|
|
<Form.Control |
|
|
|
|
as='select' |
|
|
|
|
autoComplete='nope' |
|
|
|
|
type='text' |
|
|
|
|
id='Destino' |
|
|
|
|
value={Destino} |
|
|
|
|
size='sm' |
|
|
|
|
className='dialogLabel' |
|
|
|
|
onChange={(e) => { |
|
|
|
|
setIDDestino(parseInt(e.target.value)) |
|
|
|
|
setDestino(e.target.value) |
|
|
|
|
setSelectedDestino(false) |
|
|
|
|
}} |
|
|
|
|
value={IDDestino} |
|
|
|
|
className='form-select form-select-sm dialogLabel' |
|
|
|
|
> |
|
|
|
|
<option value='0'>-SELECCIONE-</option> |
|
|
|
|
{CatUbicaciones |
|
|
|
|
? CatUbicaciones.map((c) => { |
|
|
|
|
if (c.clasificacion === 2) { |
|
|
|
|
return ( |
|
|
|
|
<option key={c.id} value={c.id}> |
|
|
|
|
{c.ubicacion} |
|
|
|
|
</option> |
|
|
|
|
/> |
|
|
|
|
<Dropdown className='d-inline mx-6' show={!SelectedDestino && Destino.length > 0}> |
|
|
|
|
<Dropdown.Menu> |
|
|
|
|
{Destino.length > 0 && |
|
|
|
|
!SelectedDestino && |
|
|
|
|
mCatUbicaciones |
|
|
|
|
.filter( |
|
|
|
|
(result) => |
|
|
|
|
result.ubicacion.toLocaleLowerCase().includes(Destino.toLocaleLowerCase()) && |
|
|
|
|
result.clasificacion === 2 |
|
|
|
|
) |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
: null} |
|
|
|
|
</Form.Control> |
|
|
|
|
.map((result) => ( |
|
|
|
|
<Dropdown.Item |
|
|
|
|
onClick={() => { |
|
|
|
|
setIDDestino(result.id) |
|
|
|
|
setDestino(result.ubicacion) |
|
|
|
|
setSelectedDestino(true) |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
{result.ubicacion} |
|
|
|
|
</Dropdown.Item> |
|
|
|
|
))} |
|
|
|
|
</Dropdown.Menu> |
|
|
|
|
</Dropdown> |
|
|
|
|
</Form.Group> |
|
|
|
|
</div> |
|
|
|
|
</Col> |
|
|
|
|
</Row> |
|
|
|
|
<Row style={{ paddingTop: '5px' }}> |
|
|
|
@ -557,19 +511,6 @@ export const Viaje: FC<IProps> = (props) => { |
|
|
|
|
</Form.Control> |
|
|
|
|
</Col> |
|
|
|
|
<Col xs={3}> </Col> |
|
|
|
|
{/* <Col>Pickup no</Col> |
|
|
|
|
<Col xs={4}> |
|
|
|
|
<Form.Control |
|
|
|
|
type='text' |
|
|
|
|
id='PickUpNumber' |
|
|
|
|
value={PickUpNumber} |
|
|
|
|
size='sm' |
|
|
|
|
className='dialogLabel' |
|
|
|
|
onChange={(e) => { |
|
|
|
|
setPickUpNumber(e.target.value) |
|
|
|
|
}} |
|
|
|
|
/> |
|
|
|
|
</Col> */} |
|
|
|
|
</Row> |
|
|
|
|
<Row style={{ paddingTop: '5px' }}> |
|
|
|
|
<Col xs={2}>Pedimento</Col> |
|
|
|
@ -603,6 +544,7 @@ export const Viaje: FC<IProps> = (props) => { |
|
|
|
|
variant='primary' |
|
|
|
|
onClick={() => { |
|
|
|
|
saveMaster() |
|
|
|
|
saveDetail() |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
Guardar |
|
|
|
@ -619,25 +561,46 @@ export const Viaje: FC<IProps> = (props) => { |
|
|
|
|
<Row style={{ paddingTop: '5px' }}> |
|
|
|
|
<Col xs={2}>Servicio</Col> |
|
|
|
|
<Col xs={4}> |
|
|
|
|
<div className='mainDiv'> |
|
|
|
|
<Form.Group className='typeahead-form-group'> |
|
|
|
|
<Form.Control |
|
|
|
|
as='select' |
|
|
|
|
autoComplete='nope' |
|
|
|
|
type='text' |
|
|
|
|
id='Servicio' |
|
|
|
|
value={Servicio} |
|
|
|
|
size='sm' |
|
|
|
|
className='dialogLabel' |
|
|
|
|
onChange={(e) => { |
|
|
|
|
setIDServicio(parseInt(e.target.value)) |
|
|
|
|
setServicio(e.target.value) |
|
|
|
|
setSelectedServicio(false) |
|
|
|
|
}} |
|
|
|
|
value={IDServicio} |
|
|
|
|
className='form-select form-select-sm dialogLabel' |
|
|
|
|
> |
|
|
|
|
<option value='0'>Seleccione el servicio...</option> |
|
|
|
|
{CatServicios |
|
|
|
|
? CatServicios.map((c) => { |
|
|
|
|
return ( |
|
|
|
|
<option key={c.id} value={c.id}> |
|
|
|
|
{c.servicio} |
|
|
|
|
</option> |
|
|
|
|
onKeyDown={(e) => { |
|
|
|
|
handleKeyDown(e) |
|
|
|
|
}} |
|
|
|
|
/> |
|
|
|
|
<Dropdown className='d-inline mx-6' show={!SelectedServicio && Servicio.length > 0}> |
|
|
|
|
<Dropdown.Menu> |
|
|
|
|
{Servicio.length > 0 && |
|
|
|
|
!SelectedServicio && |
|
|
|
|
mCatServicios |
|
|
|
|
.filter((result) => |
|
|
|
|
result.servicio.toLocaleLowerCase().includes(Servicio.toLocaleLowerCase()) |
|
|
|
|
) |
|
|
|
|
}) |
|
|
|
|
: null} |
|
|
|
|
</Form.Control> |
|
|
|
|
.map((result) => ( |
|
|
|
|
<Dropdown.Item |
|
|
|
|
onClick={() => { |
|
|
|
|
setIDServicio(result.id) |
|
|
|
|
setServicio(result.servicio) |
|
|
|
|
setSelectedServicio(true) |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
{result.servicio} |
|
|
|
|
</Dropdown.Item> |
|
|
|
|
))} |
|
|
|
|
</Dropdown.Menu> |
|
|
|
|
</Dropdown> |
|
|
|
|
</Form.Group> |
|
|
|
|
</div> |
|
|
|
|
</Col> |
|
|
|
|
<Col style={{ visibility: DisableAduana ? 'hidden' : 'visible' }}> |
|
|
|
|
<DatePicker |
|
|
|
@ -690,25 +653,43 @@ export const Viaje: FC<IProps> = (props) => { |
|
|
|
|
<Row style={{ paddingTop: '5px' }}> |
|
|
|
|
<Col xs={2}>Proveedor</Col> |
|
|
|
|
<Col xs={10}> |
|
|
|
|
<div className='mainDiv'> |
|
|
|
|
<Form.Group className='typeahead-form-group'> |
|
|
|
|
<Form.Control |
|
|
|
|
as='select' |
|
|
|
|
autoComplete='nope' |
|
|
|
|
type='text' |
|
|
|
|
id='Proveedor' |
|
|
|
|
value={Proveedor} |
|
|
|
|
size='sm' |
|
|
|
|
className='dialogLabel' |
|
|
|
|
onChange={(e) => { |
|
|
|
|
setIDProveedor(parseInt(e.target.value)) |
|
|
|
|
setProveedor(e.target.value) |
|
|
|
|
setSelectedProveedor(false) |
|
|
|
|
}} |
|
|
|
|
value={IDProveedor} |
|
|
|
|
className='form-select form-select-sm dialogLabel' |
|
|
|
|
> |
|
|
|
|
<option value='0'>-SELECCIONE-</option> |
|
|
|
|
{CatProveedores |
|
|
|
|
? CatProveedores.map((c) => { |
|
|
|
|
return ( |
|
|
|
|
<option key={c.id} value={c.id}> |
|
|
|
|
{c.proveedor} |
|
|
|
|
</option> |
|
|
|
|
/> |
|
|
|
|
<Dropdown className='d-inline mx-6' show={!SelectedProveedor && Proveedor.length > 0}> |
|
|
|
|
<Dropdown.Menu> |
|
|
|
|
{Proveedor.length > 0 && |
|
|
|
|
!SelectedProveedor && |
|
|
|
|
mCatProveedores |
|
|
|
|
.filter((result) => |
|
|
|
|
result.proveedor.toLocaleLowerCase().includes(Proveedor.toLocaleLowerCase()) |
|
|
|
|
) |
|
|
|
|
}) |
|
|
|
|
: null} |
|
|
|
|
</Form.Control> |
|
|
|
|
.map((result) => ( |
|
|
|
|
<Dropdown.Item |
|
|
|
|
onClick={() => { |
|
|
|
|
setIDProveedor(result.id) |
|
|
|
|
setProveedor(result.proveedor) |
|
|
|
|
setSelectedProveedor(true) |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
{result.proveedor} |
|
|
|
|
</Dropdown.Item> |
|
|
|
|
))} |
|
|
|
|
</Dropdown.Menu> |
|
|
|
|
</Dropdown> |
|
|
|
|
</Form.Group> |
|
|
|
|
</div> |
|
|
|
|
</Col> |
|
|
|
|
</Row> |
|
|
|
|
<Row style={{ paddingTop: '5px' }}> |
|
|
|
@ -727,14 +708,14 @@ export const Viaje: FC<IProps> = (props) => { |
|
|
|
|
</Col> |
|
|
|
|
<Col xs={4}></Col> |
|
|
|
|
<Col xs={3} style={{ textAlign: 'right' }}> |
|
|
|
|
<Button |
|
|
|
|
{/* <Button |
|
|
|
|
variant='success' |
|
|
|
|
onClick={() => { |
|
|
|
|
saveDetail() |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
Guardar servicio |
|
|
|
|
</Button> |
|
|
|
|
</Button> */} |
|
|
|
|
</Col> |
|
|
|
|
</Row> |
|
|
|
|
</Card.Body> |
|
|
|
|