From feda103ee2ba4fd8f695b9e97bd4c50c369c0fcb Mon Sep 17 00:00:00 2001 From: difenix6 Date: Fri, 7 Oct 2022 18:12:21 -0500 Subject: [PATCH] Version que incorpora el caret a los autocomplete --- src/Components/Operaciones/Viaje/Viaje.tsx | 444 +++++++++++---------- src/Constants/TargetURL.ts | 2 +- src/css/autoComplete.css | 9 +- 3 files changed, 237 insertions(+), 218 deletions(-) diff --git a/src/Components/Operaciones/Viaje/Viaje.tsx b/src/Components/Operaciones/Viaje/Viaje.tsx index a716be6..e6dc6fd 100644 --- a/src/Components/Operaciones/Viaje/Viaje.tsx +++ b/src/Components/Operaciones/Viaje/Viaje.tsx @@ -1,153 +1,156 @@ -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' -import { updateOpViajes } from '../../../store/features/Operaciones/OpViajesSlice' -import { RootState } from '../../../store/store' +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'; +import { updateOpViajes } from '../../../store/features/Operaciones/OpViajesSlice'; +import { RootState } from '../../../store/store'; import { populateOpViajesServicios, updateOpViajesServicios, -} from '../../../store/features/Operaciones/OpViajesServiciosSlice' -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 'react-bootstrap-typeahead/css/Typeahead.css' -import 'react-bootstrap-typeahead/css/Typeahead.bs5.css' -import '../../../css/autoComplete.css' +} from '../../../store/features/Operaciones/OpViajesServiciosSlice'; +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 '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'; interface IProps { - IDViaje: number + IDViaje: number; } interface IOpciones { - value: string - label: string + value: string; + label: string; } export const Viaje: FC = (props) => { - const [selectedOption, setselectedOption] = useState() - 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 mCatProveedores = useSelector((state: RootState) => state.CatProveedores.CatProveedores) - const CatTipoUnidades = useSelector((state: RootState) => state.CatTipoUnidades.CatTipoUnidades) - 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 [NoCaja, setNoCaja] = useState('') - const [UltimaCaja, setUltimaCaja] = useState('') - const [IDViaje, setIDViaje] = useState(0) - const [IDDetail, setIDDetail] = useState(0) - const [IDCliente, setIDCliente] = useState(0) - const [Cliente, setCliente] = useState('') - const [IDProveedor, setIDProveedor] = useState(0) - const [Proveedor, setProveedor] = useState('') - const [IDServicio, setIDServicio] = 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) - const [Pedimento, setPedimento] = useState('') - const [TipoOperacion, setTipoOperacion] = useState(1) - const [Comentarios, setComentarios] = useState('') - const [Aduana, setAduana] = useState(0) - const [DisableAduana, setDisableAduana] = useState(true) - const [TotalServicios, setTotalServicios] = useState(0) - const [Cita, setCita] = useState() - 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() + const [selectedOption, setselectedOption] = useState(); + 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 mCatProveedores = useSelector((state: RootState) => state.CatProveedores.CatProveedores); + const CatTipoUnidades = useSelector((state: RootState) => state.CatTipoUnidades.CatTipoUnidades); + 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 [NoCaja, setNoCaja] = useState(''); + const [UltimaCaja, setUltimaCaja] = useState(''); + const [IDViaje, setIDViaje] = useState(0); + const [IDDetail, setIDDetail] = useState(0); + const [IDCliente, setIDCliente] = useState(0); + const [Cliente, setCliente] = useState(''); + const [IDProveedor, setIDProveedor] = useState(0); + const [Proveedor, setProveedor] = useState(''); + const [IDServicio, setIDServicio] = 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); + const [Pedimento, setPedimento] = useState(''); + const [TipoOperacion, setTipoOperacion] = useState(1); + const [Comentarios, setComentarios] = useState(''); + const [Aduana, setAduana] = useState(0); + const [DisableAduana, setDisableAduana] = useState(true); + const [TotalServicios, setTotalServicios] = useState(0); + const [Cita, setCita] = useState(); + 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() + if (IDServicio > 0 && TotalServicios === 0) saveDetail(); let selectedRow = mAllTrips.filter((row) => { if (row.id === props.IDViaje) { - setIDViaje(row.id) - setRefAA(row.refAgenciaAduanal) - setIDCliente(row.cliente) - setIDTipoUnidad(row.tipoUnidad) - setNoCaja(row.noCaja) - setIDOrigen(row.origen) - setIDDestino(row.destino) - setHazmat(row.hazmat) - 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 + setIDViaje(row.id); + setRefAA(row.refAgenciaAduanal); + setIDCliente(row.cliente); + setIDTipoUnidad(row.tipoUnidad); + setNoCaja(row.noCaja); + setIDOrigen(row.origen); + setIDDestino(row.destino); + setHazmat(row.hazmat); + setPickUpNumber(row.pickUpNumber); + setTipoOperacion(row.tipoOperacion); + setPedimento(row.pedimento); + setCliente(row.sCliente); + setOrigen(row.sOrigen); + setDestino(row.sDestino); + setSelectedClient(false); + setSelectedOrigen(true); + setSelectedDestino(true); + setSelectedServicio(true); + setSelectedProveedor(true); + return row; } - }) + }); let totalServicios = mAllTripServices.filter((a) => { if (a.idViaje === IDViaje) { - return a + return a; } - }) - setTotalServicios(totalServicios.length) - }, [IDViaje]) + }); + setTotalServicios(totalServicios.length); + }, [IDViaje]); useEffect(() => { - if (IDServicio === 1 || IDServicio === 2 || IDServicio === 22) setDisableAduana(false) - else setDisableAduana(true) + 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 + return item; } - }) - setServicio(serviceFound[0].servicio) + }); + setServicio(serviceFound[0].servicio); } if (IDProveedor > 0) { let providerFound = mCatProveedores.filter((item) => { if (item.id == IDProveedor) { - return item + return item; } - }) - setProveedor(providerFound[0].proveedor) + }); + setProveedor(providerFound[0].proveedor); } - }, [IDServicio]) + }, [IDServicio]); useEffect(() => { DSOpViajes.GetLastTrailerBox(IDViaje) .then((response) => { - const LastTrailerBox = response.data.ultimaCaja + const LastTrailerBox = response.data.ultimaCaja; // console.log('lasttrailerbox=' + LastTrailerBox) - if (LastTrailerBox.length === 0) setUltimaCaja(NoCaja) - else setUltimaCaja(LastTrailerBox) + if (LastTrailerBox.length === 0) setUltimaCaja(NoCaja); + else setUltimaCaja(LastTrailerBox); }) .catch((e: Error) => { // console.log('currio un error') - }) + }); //console.log('nocaja=' + NoCaja) - }, [NoCaja]) + }, [NoCaja]); useEffect(() => { - if (Hazmat === 1) setAduana(180) - else setAduana(0) - }, [Hazmat]) + if (Hazmat === 1) setAduana(180); + else setAduana(0); + }, [Hazmat]); const saveDetail = () => { if (IDServicio === 0 || IDProveedor === 0) { - return false + return false; } const data: DTOViajesServicios = { id: IDDetail, @@ -160,52 +163,52 @@ export const Viaje: FC = (props) => { idProveedor: IDProveedor, sProveedor: '', noCaja: UltimaCaja, - } + }; DSOpViajes.AppendServices(data) .then((responsed) => { if (IDDetail === 0) { - dispatch(populateOpViajesServicios(responsed.data)) - setIDDetail(responsed.data[0].id) + dispatch(populateOpViajesServicios(responsed.data)); + setIDDetail(responsed.data[0].id); } else { - dispatch(updateOpViajesServicios(responsed.data)) + dispatch(updateOpViajesServicios(responsed.data)); } - clearDetailForm() + clearDetailForm(); }) - .catch((e: Error) => {}) - } + .catch((e: Error) => {}); + }; const adjustTimeZone = (str: string): string => { if (str) { - const original: any = new Date(str) - const real = new Date(original - original.getTimezoneOffset() * 60 * 1000) - return real.toISOString() - } else return '' - } + const original: any = new Date(str); + const real = new Date(original - original.getTimezoneOffset() * 60 * 1000); + return real.toISOString(); + } else return ''; + }; const loadService = (id: number) => { let found = mAllTripServices.filter((a) => { if (a.id === id) { - return a + return a; } - }) + }); if (found) { - setIDDetail(id) - setAduana(found[0].aduana) - setIDServicio(found[0].idServicio) - setComentarios(found[0].comentarios) - setIDProveedor(found[0].idProveedor) + setIDDetail(id); + setAduana(found[0].aduana); + setIDServicio(found[0].idServicio); + setComentarios(found[0].comentarios); + setIDProveedor(found[0].idProveedor); } - } + }; const saveMaster = () => { if (TotalServicios === 0) { if (IDServicio === 0) { - alert('Para continuar, primero seleccione un servicio ') - return false + alert('Para continuar, primero seleccione un servicio '); + return false; } if (IDProveedor === 0) { - alert('Para continuar, primero seleccione un proveedor') - return false + alert('Para continuar, primero seleccione un proveedor'); + return false; } } /* */ @@ -230,43 +233,43 @@ export const Viaje: FC = (props) => { pedimento: Pedimento, max: true, status: 1, - } + }; DSOpViajes.Append(data) .then((response) => { - const data = response.data - data['max'] = false - dispatch(updateOpViajes(data)) - setIDViaje(data.id) + const data = response.data; + data['max'] = false; + dispatch(updateOpViajes(data)); + setIDViaje(data.id); }) - .catch((e: Error) => {}) - } + .catch((e: Error) => {}); + }; const clearDetailForm = () => { - setIDDetail(0) - setAduana(0) - setIDServicio(0) - setComentarios('') - setIDProveedor(0) - setUltimaCaja('') - setServicio('') - setProveedor('') - setDisableAduana(true) - } + setIDDetail(0); + setAduana(0); + setIDServicio(0); + setComentarios(''); + setIDProveedor(0); + setUltimaCaja(''); + setServicio(''); + setProveedor(''); + setDisableAduana(true); + }; useEffect(() => { - console.log(selectedOption) - }, [selectedOption]) + console.log(selectedOption); + }, [selectedOption]); - const [addrtype, setAddrtype] = useState(['Work', 'Home', 'school']) - const Add = addrtype.map((Add) => Add) - const handleAddrTypeChange = (e: any) => console.log(addrtype[e.target.value]) + const [addrtype, setAddrtype] = useState(['Work', 'Home', 'school']); + const Add = addrtype.map((Add) => Add); + const handleAddrTypeChange = (e: any) => console.log(addrtype[e.target.value]); - const companies: string[] = ['Company1', 'Company2', 'Big Corp', 'Happy Toy Company'] + const companies: string[] = ['Company1', 'Company2', 'Big Corp', 'Happy Toy Company']; - const lowerCasedCompanies = companies.map((language) => language.toLowerCase()) + const lowerCasedCompanies = companies.map((language) => language.toLowerCase()); function getSuggestions(value: string): string[] { - return lowerCasedCompanies.filter((language) => language.startsWith(value.trim().toLowerCase())) + return lowerCasedCompanies.filter((language) => language.startsWith(value.trim().toLowerCase())); } const handleKeyDown = (e: any) => { @@ -277,9 +280,9 @@ export const Viaje: FC = (props) => { } else */ if (e.keyCode === 40) { - console.log('arrow down') + console.log('arrow down'); } - } + }; return (
@@ -301,7 +304,7 @@ export const Viaje: FC = (props) => { size='sm' className='dialogLabel' onChange={(e) => { - setRefAA(e.target.value) + setRefAA(e.target.value); }} /> @@ -309,7 +312,7 @@ export const Viaje: FC = (props) => { Cliente - +
= (props) => { id='Cliente' value={Cliente} size='sm' - className='dialogLabel' + className='pull-right' onChange={(e) => { - setCliente(e.target.value) - setSelectedClient(false) + setCliente(e.target.value); + setSelectedClient(false); }} onKeyDown={(e) => { - handleKeyDown(e) + handleKeyDown(e); }} /> - 0}> + - {Cliente.length > 0 && - !SelectedClient && - mCatClientes - .filter((result) => result.cliente.toLocaleLowerCase().includes(Cliente.toLocaleLowerCase())) - .map((result) => ( - { - setIDCliente(result.id) - setCliente(result.cliente) - setSelectedClient(true) - }} - > - {result.cliente} - - ))} + {mCatClientes + .filter((result) => result.cliente.toLocaleLowerCase().includes(Cliente.toLocaleLowerCase())) + .map((result) => ( + { + setIDCliente(result.id); + setCliente(result.cliente); + setSelectedClient(true); + }} + > + {result.cliente} + + ))}
+ +
setSelectedClient(!SelectedClient)}> + {!SelectedClient ? ( + + + + ) : ( + + + + )}{' '} +
+ Tipo Unidad @@ -356,7 +370,7 @@ export const Viaje: FC = (props) => { { - setIDTipoUnidad(parseInt(e.target.value)) + setIDTipoUnidad(parseInt(e.target.value)); }} value={IDTipoUnidad} className='form-select form-select-sm dialogLabel' @@ -368,7 +382,7 @@ export const Viaje: FC = (props) => { - ) + ); }) : null} @@ -384,7 +398,7 @@ export const Viaje: FC = (props) => { size='sm' className='dialogLabel' onChange={(e) => { - setNoCaja(e.target.value) + setNoCaja(e.target.value); }} /> @@ -402,8 +416,8 @@ export const Viaje: FC = (props) => { size='sm' className='textBoxViaje' onChange={(e) => { - setOrigen(e.target.value) - setSelectedOrigen(false) + setOrigen(e.target.value); + setSelectedOrigen(false); }} /> 0}> @@ -419,9 +433,9 @@ export const Viaje: FC = (props) => { .map((result) => ( { - setIDOrigen(result.id) - setOrigen(result.ubicacion) - setSelectedOrigen(true) + setIDOrigen(result.id); + setOrigen(result.ubicacion); + setSelectedOrigen(true); }} > {result.ubicacion} @@ -446,8 +460,8 @@ export const Viaje: FC = (props) => { size='sm' className='dialogLabel' onChange={(e) => { - setDestino(e.target.value) - setSelectedDestino(false) + setDestino(e.target.value); + setSelectedDestino(false); }} /> 0}> @@ -463,9 +477,9 @@ export const Viaje: FC = (props) => { .map((result) => ( { - setIDDestino(result.id) - setDestino(result.ubicacion) - setSelectedDestino(true) + setIDDestino(result.id); + setDestino(result.ubicacion); + setSelectedDestino(true); }} > {result.ubicacion} @@ -483,7 +497,7 @@ export const Viaje: FC = (props) => { { - setHazmat(parseInt(e.target.value)) + setHazmat(parseInt(e.target.value)); }} value={Hazmat} className='form-select form-select-sm dialogLabel' @@ -499,7 +513,7 @@ export const Viaje: FC = (props) => { { - setTipoOperacion(parseInt(e.target.value)) + setTipoOperacion(parseInt(e.target.value)); }} value={TipoOperacion} className='form-select form-select-sm dialogLabel' @@ -522,7 +536,7 @@ export const Viaje: FC = (props) => { size='sm' className='dialogLabel' onChange={(e) => { - setPedimento(e.target.value) + setPedimento(e.target.value); }} /> @@ -535,7 +549,7 @@ export const Viaje: FC = (props) => { size='sm' className='dialogLabel' onChange={(e) => { - setPickUpNumber(e.target.value) + setPickUpNumber(e.target.value); }} /> @@ -543,8 +557,8 @@ export const Viaje: FC = (props) => {
- ) -} + ); +}; diff --git a/src/Constants/TargetURL.ts b/src/Constants/TargetURL.ts index 45af750..32a69b9 100644 --- a/src/Constants/TargetURL.ts +++ b/src/Constants/TargetURL.ts @@ -1,5 +1,5 @@ export class TargetURL { get() { - return (!process.env.NODE_ENV || process.env.NODE_ENV === 'development') ? "https://localhost:7000/api" : "https://www.alphaomega.com.mx/AOLBackend/api" + return (!process.env.NODE_ENV || process.env.NODE_ENV === 'development') ? "https://www.alphaomega.com.mx/AOLBackend/api" : "https://www.alphaomega.com.mx/AOLBackend/api" } } \ No newline at end of file diff --git a/src/css/autoComplete.css b/src/css/autoComplete.css index cf76eec..82dd949 100644 --- a/src/css/autoComplete.css +++ b/src/css/autoComplete.css @@ -3,7 +3,7 @@ font-family: sans-serif; text-align: left; /*width: 300px;*/ - margin: 0 auto; + /*margin: 0 auto;*/ } .typeahead-form-group { @@ -34,7 +34,7 @@ } .typeahead-list-group-item { - padding: 0.3rem 1.3rem; + /* padding: 0.3rem 1.3rem; */ background-color: rgb(228, 243, 240); } @@ -46,4 +46,9 @@ .textBoxViaje { z-index: 100; +} + +.textField { + margin-right: 0px !important; + padding-right: 0px; } \ No newline at end of file