alfonso
/
AOLFrontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Version con autocomplete y caret

Browse Source
develop
difenix6 2 years ago
parent feda103ee2
commit c02400763c
1 changed files with 175 additions and 146 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 321
      src/Components/Operaciones/Viaje/Viaje.tsx

321
src/Components/Operaciones/Viaje/Viaje.tsx
Unescape View File

@ -17,8 +17,7 @@ import 'react-bootstrap-typeahead/css/Typeahead.css';
import 'react-bootstrap-typeahead/css/Typeahead.bs5.css';
import '../../../css/autoComplete.css';
import { IconContext } from 'react-icons';
import { AiFillCaretDown, AiFillCaretLeft } from 'react-icons/ai';
import { BiCaretDownSquare, BiCaretLeftSquare } from 'react-icons/bi';
import { FaCaretSquareDown, FaCaretSquareLeft } from 'react-icons/fa';
interface IProps {
IDViaje: number;
@ -354,11 +353,11 @@ export const Viaje: FC<IProps> = (props) => {
<div onClick={() => setSelectedClient(!SelectedClient)}>
{!SelectedClient ? (
<IconContext.Provider value={{ color: '#8AA2B8', size: '30px' }}>
<BiCaretDownSquare />
<FaCaretSquareDown />
</IconContext.Provider>
) : (
<IconContext.Provider value={{ color: '#8AA2B8', size: '30px' }}>
<BiCaretLeftSquare />
<FaCaretSquareLeft />
</IconContext.Provider>
)}{' '}
</div>
@ -405,7 +404,7 @@ export const Viaje: FC<IProps> = (props) => {
</Row>
<Row style={{ paddingTop: '5px' }}>
<Col xs={2}>Origen</Col>
<Col xs={4}>
<Col xs={3} style={{ paddingRight: '0px' }}>
<div className='mainDiv'>
<Form.Group className='typeahead-form-group1'>
<Form.Control
@ -420,36 +419,47 @@ export const Viaje: FC<IProps> = (props) => {
setSelectedOrigen(false);
}}
/>
<Dropdown className='d-inline mx-6' show={!SelectedOrigen && Origen.length > 0}>
<Dropdown className='d-inline mx-6' show={!SelectedOrigen}>
<Dropdown.Menu>
{Origen.length > 0 &&
!SelectedOrigen &&
mCatUbicaciones
.filter(
(result) =>
result.ubicacion.toLocaleLowerCase().includes(Origen.toLocaleLowerCase()) &&
result.clasificacion === 1
)
.map((result) => (
<Dropdown.Item
onClick={() => {
setIDOrigen(result.id);
setOrigen(result.ubicacion);
setSelectedOrigen(true);
}}
>
{result.ubicacion}
</Dropdown.Item>
))}
{mCatUbicaciones
.filter(
(result) =>
result.ubicacion.toLocaleLowerCase().includes(Origen.toLocaleLowerCase()) &&
result.clasificacion === 1
)
.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 style={{ paddingLeft: '0px' }}>
<div onClick={() => setSelectedOrigen(!SelectedOrigen)}>
{!SelectedOrigen ? (
<IconContext.Provider value={{ color: '#8AA2B8', size: '30px' }}>
<FaCaretSquareDown />
</IconContext.Provider>
) : (
<IconContext.Provider value={{ color: '#8AA2B8', size: '30px' }}>
<FaCaretSquareLeft />
</IconContext.Provider>
)}{' '}
</div>
</Col>
<Col xs={2} style={{ textAlign: 'right' }}>
Destino
</Col>
<Col xs={4}>
<Col xs={3} style={{ paddingRight: '0px' }}>
<div className='mainDiv'>
<Form.Group className='typeahead-form-group2'>
<Form.Control
@ -464,32 +474,43 @@ export const Viaje: FC<IProps> = (props) => {
setSelectedDestino(false);
}}
/>
<Dropdown className='d-inline mx-6' show={!SelectedDestino && Destino.length > 0}>
<Dropdown className='d-inline mx-6' show={!SelectedDestino}>
<Dropdown.Menu>
{Destino.length > 0 &&
!SelectedDestino &&
mCatUbicaciones
.filter(
(result) =>
result.ubicacion.toLocaleLowerCase().includes(Destino.toLocaleLowerCase()) &&
result.clasificacion === 2
)
.map((result) => (
<Dropdown.Item
onClick={() => {
setIDDestino(result.id);
setDestino(result.ubicacion);
setSelectedDestino(true);
}}
>
{result.ubicacion}
</Dropdown.Item>
))}
{mCatUbicaciones
.filter(
(result) =>
result.ubicacion.toLocaleLowerCase().includes(Destino.toLocaleLowerCase()) &&
result.clasificacion === 2
)
.map((result) => (
<Dropdown.Item
onClick={() => {
setIDDestino(result.id);
setDestino(result.ubicacion);
setSelectedDestino(true);
}}
>
{result.ubicacion}
</Dropdown.Item>
))}
</Dropdown.Menu>
</Dropdown>
</Form.Group>
</div>
</Col>
<Col style={{ paddingLeft: '0px' }}>
<div onClick={() => setSelectedDestino(!SelectedDestino)}>
{!SelectedDestino ? (
<IconContext.Provider value={{ color: '#8AA2B8', size: '30px' }}>
<FaCaretSquareDown />
</IconContext.Provider>
) : (
<IconContext.Provider value={{ color: '#8AA2B8', size: '30px' }}>
<FaCaretSquareLeft />
</IconContext.Provider>
)}{' '}
</div>
</Col>
</Row>
<Row style={{ paddingTop: '5px' }}>
<Col xs={2}>HazMat</Col>
@ -553,17 +574,7 @@ export const Viaje: FC<IProps> = (props) => {
}}
/>
</Col>
<Col style={{ textAlign: 'right' }}>
<Button
variant='primary'
onClick={() => {
saveMaster();
saveDetail();
}}
>
Guardar
</Button>
</Col>
<Col style={{ textAlign: 'right' }}></Col>
</Row>
</Card.Body>
</Card>
@ -574,7 +585,7 @@ export const Viaje: FC<IProps> = (props) => {
<Card.Body>
<Row style={{ paddingTop: '5px' }}>
<Col xs={2}>Servicio</Col>
<Col xs={4}>
<Col xs={4} style={{ paddingRight: '0px' }}>
<div className='mainDiv'>
<Form.Group className='typeahead-form-3'>
<Form.Control
@ -592,81 +603,55 @@ export const Viaje: FC<IProps> = (props) => {
handleKeyDown(e);
}}
/>
<Dropdown className='d-inline mx-6' show={!SelectedServicio && Servicio.length > 0}>
<Dropdown className='d-inline mx-6' show={!SelectedServicio}>
<Dropdown.Menu>
{Servicio.length > 0 &&
!SelectedServicio &&
mCatServicios
.filter((result) =>
result.servicio.toLocaleLowerCase().includes(Servicio.toLocaleLowerCase())
)
.map((result) => (
<Dropdown.Item
onClick={() => {
setIDServicio(result.id);
setServicio(result.servicio);
setSelectedServicio(true);
}}
>
{result.servicio}
</Dropdown.Item>
))}
{mCatServicios
.filter((result) => result.servicio.toLocaleLowerCase().includes(Servicio.toLocaleLowerCase()))
.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
selected={Cita}
onChange={(date: any) => setCita(date)}
showTimeSelect
dateFormat='MM/dd/yyyy HH:mm:ss'
placeholderText='Cita no definida'
isClearable
/>
<Col style={{ paddingLeft: '0px' }}>
<div onClick={() => setSelectedServicio(!SelectedServicio)}>
{!SelectedServicio ? (
<IconContext.Provider value={{ color: '#8AA2B8', size: '30px' }}>
<FaCaretSquareDown />
</IconContext.Provider>
) : (
<IconContext.Provider value={{ color: '#8AA2B8', size: '30px' }}>
<FaCaretSquareLeft />
</IconContext.Provider>
)}
</div>
</Col>
{/* <Col xs={2} style={{ textAlign: 'right' }}>
Aduana
</Col> */}
<Col xs={3}>
<Form.Control
as='select'
onChange={(e) => {
setAduana(parseInt(e.target.value));
<Col xs={3} style={{ textAlign: 'center' }}>
<Button
variant='primary'
onClick={() => {
saveMaster();
saveDetail();
}}
value={Aduana}
disabled={DisableAduana}
className='form-select form-select-sm dialogLabel'
>
{CatAduanas
? CatAduanas.map((c) => {
return (
<option key={c.id} value={c.id}>
{c.Aduana}
</option>
);
})
: null}
</Form.Control>
</Col>
</Row>
<Row style={{ paddingTop: '5px' }}>
<Col xs={2}>Comentarios</Col>
<Col xs={10}>
<Form.Control
as='textarea'
rows={2}
value={Comentarios}
onChange={(e) => {
setComentarios(e.target.value);
}}
/>
Guardar
</Button>
</Col>
<Col xs={2}></Col>
</Row>
<Row style={{ paddingTop: '5px' }}>
<Col xs={2}>Proveedor</Col>
<Col xs={10}>
<Col xs={9} style={{ paddingRight: '0px' }}>
<div className='mainDiv'>
<Form.Group className='typeahead-form-group4'>
<Form.Control
@ -681,30 +666,54 @@ export const Viaje: FC<IProps> = (props) => {
setSelectedProveedor(false);
}}
/>
<Dropdown className='d-inline mx-6' show={!SelectedProveedor && Proveedor.length > 0}>
<Dropdown className='d-inline mx-6' show={!SelectedProveedor}>
<Dropdown.Menu>
{Proveedor.length > 0 &&
!SelectedProveedor &&
mCatProveedores
.filter((result) =>
result.proveedor.toLocaleLowerCase().includes(Proveedor.toLocaleLowerCase())
)
.map((result) => (
<Dropdown.Item
onClick={() => {
setIDProveedor(result.id);
setProveedor(result.proveedor);
setSelectedProveedor(true);
}}
>
{result.proveedor}
</Dropdown.Item>
))}
{mCatProveedores
.filter((result) =>
result.proveedor.toLocaleLowerCase().includes(Proveedor.toLocaleLowerCase())
)
.map((result) => (
<Dropdown.Item
onClick={() => {
setIDProveedor(result.id);
setProveedor(result.proveedor);
setSelectedProveedor(true);
}}
>
{result.proveedor}
</Dropdown.Item>
))}
</Dropdown.Menu>
</Dropdown>
</Form.Group>
</div>
</Col>
<Col style={{ paddingLeft: '0px' }}>
<div onClick={() => setSelectedProveedor(!SelectedProveedor)}>
{!SelectedProveedor ? (
<IconContext.Provider value={{ color: '#8AA2B8', size: '30px' }}>
<FaCaretSquareDown />
</IconContext.Provider>
) : (
<IconContext.Provider value={{ color: '#8AA2B8', size: '30px' }}>
<FaCaretSquareLeft />
</IconContext.Provider>
)}{' '}
</div>
</Col>
</Row>
<Row style={{ paddingTop: '5px' }}>
<Col xs={2}>Comentarios</Col>
<Col xs={10}>
<Form.Control
as='textarea'
rows={2}
value={Comentarios}
onChange={(e) => {
setComentarios(e.target.value);
}}
/>
</Col>
</Row>
<Row style={{ paddingTop: '5px' }}>
<Col xs={2}>Caja</Col>
@ -720,16 +729,36 @@ export const Viaje: FC<IProps> = (props) => {
}}
/>
</Col>
<Col xs={4}></Col>
<Col xs={3} style={{ textAlign: 'right' }}>
{/* <Button
variant='success'
onClick={() => {
saveDetail()
<Col style={{ visibility: DisableAduana ? 'hidden' : 'visible' }}>
<DatePicker
selected={Cita}
onChange={(date: any) => setCita(date)}
showTimeSelect
dateFormat='MM/dd/yyyy HH:mm:ss'
placeholderText='Cita no definida'
isClearable
/>
</Col>
<Col xs={3}>
<Form.Control
as='select'
onChange={(e) => {
setAduana(parseInt(e.target.value));
}}
value={Aduana}
disabled={DisableAduana}
className='form-select form-select-sm dialogLabel'
>
Guardar servicio
</Button> */}
{CatAduanas
? CatAduanas.map((c) => {
return (
<option key={c.id} value={c.id}>
{c.Aduana}
</option>
);
})
: null}
</Form.Control>
</Col>
</Row>
</Card.Body>

Write Preview
Loading…
Cancel
Save