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

Write Preview
Loading…
Cancel
Save