From ee10f1d43b8a78d378116241730ad62c7d4a2561 Mon Sep 17 00:00:00 2001 From: Al Garcia Date: Sat, 10 Sep 2022 15:52:15 -0500 Subject: [PATCH] Se le agrega el master de los viajes, falta terminar el detail --- src/App.tsx | 2 + src/Components/Operaciones/OpMonitor.tsx | 270 +++++++++++++ src/Components/Operaciones/Viaje/Viaje.tsx | 376 ++++++++++++++++++ .../ViajesServicios/ViajesServicios.tsx | 35 ++ src/DTOs/Operaciones/DTOViajes.ts | 3 +- src/css/masterDetail.css | 113 ++++++ .../features/Operaciones/OpViajesSlice.ts | 32 ++ src/store/store.ts | 4 +- 8 files changed, 833 insertions(+), 2 deletions(-) create mode 100644 src/Components/Operaciones/OpMonitor.tsx create mode 100644 src/Components/Operaciones/Viaje/Viaje.tsx create mode 100644 src/Components/Operaciones/ViajesServicios/ViajesServicios.tsx create mode 100644 src/css/masterDetail.css create mode 100644 src/store/features/Operaciones/OpViajesSlice.ts diff --git a/src/App.tsx b/src/App.tsx index 8e36088..9237c6e 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -15,6 +15,7 @@ import { CatProveedores } from './Components/Catalogos/CatProveedores' import { CatTipoUnidades } from './Components/Catalogos/CatTipoUnidades' import { CatUbicaciones } from './Components/Catalogos/CatUbicaciones' import { CatRutas } from './Components/Catalogos/CatRutas' +import { OpMonitor } from './Components/Operaciones/OpMonitor' function App() { const UserLogued = useSelector((state: RootState) => state.UserProfile.UserProfile.logueado) @@ -41,6 +42,7 @@ function App() { }> }> } /> + } /> } /> } /> } /> diff --git a/src/Components/Operaciones/OpMonitor.tsx b/src/Components/Operaciones/OpMonitor.tsx new file mode 100644 index 0000000..aa3f5e6 --- /dev/null +++ b/src/Components/Operaciones/OpMonitor.tsx @@ -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 = (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([]) + 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 ( +
+ + + + + + AOL : Monitor de viajes + + +
{ + newTrip() + }} + title='De un click aqui para crear un nuevo viaje' + > + + + +
+ + + + + + + +   + + + + { + setSearch(e.target.value) + }} + /> + + + + +
+ + + + + + + + + + + + + + + + + + + {OpViajes + ? OpViajes.map((MasterData) => { + return ( + <> + { + changeToggle(MasterData) + }} + style={{ cursor: 'pointer' }} + > + + + + + + + + + + + + + + {MasterData.max === true && Switch === true ? ( + + + + + ) : ( + '' + )} + + ) + }) + : null} + +
idClienteServicioProveedorOrigenDestinoTipo UnidadNo cajaHazmatRef AAPickUp NoEditar
{MasterData.id}{MasterData.sCliente}{MasterData.sServicio}{MasterData.sProveedor}{MasterData.sOrigen}{MasterData.sDestino}{MasterData.sTipoUnidad}{MasterData.noCaja}{MasterData.hazmat}{MasterData.refAgenciaAduanal}{MasterData.pickUpNumber} + +
+ +
+
+ + + { + setShowTripDialog(false) + }} + > + + + + + +
+ ) +} diff --git a/src/Components/Operaciones/Viaje/Viaje.tsx b/src/Components/Operaciones/Viaje/Viaje.tsx new file mode 100644 index 0000000..000bc5f --- /dev/null +++ b/src/Components/Operaciones/Viaje/Viaje.tsx @@ -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 = (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([]) + 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 ( +
+ + + Informacion del viaje + + + + + No viaje + + + + + + Ref AA + + + { + setRefAA(e.target.value) + }} + /> + + + + + Cliente + + + { + setIDCliente(parseInt(e.target.value)) + }} + value={IDCliente} + className='form-select form-select-sm' + > + + {CatClientes + ? CatClientes.map((c) => { + return ( + + ) + }) + : null} + + + + + + Servicio + + + { + setIDServicio(parseInt(e.target.value)) + }} + value={IDServicio} + className='form-select form-select-sm' + > + + {CatServicios + ? CatServicios.map((c) => { + return ( + + ) + }) + : null} + + + + + + Tipo Unidad + + + { + setIDTipoUnidad(parseInt(e.target.value)) + }} + value={IDTipoUnidad} + className='form-select form-select-sm' + > + + {CatTipoUnidades + ? CatTipoUnidades.map((c) => { + return ( + + ) + }) + : null} + + + Caja + + { + setNoCaja(e.target.value) + }} + /> + + + + + Proveedor + + + { + setIDProveedor(parseInt(e.target.value)) + }} + value={IDProveedor} + className='form-select form-select-sm' + > + + {CatProveedores + ? CatProveedores.map((c) => { + return ( + + ) + }) + : null} + + + + + + Origen + + + { + setIDOrigen(parseInt(e.target.value)) + }} + value={IDOrigen} + className='form-select form-select-sm' + > + + {CatUbicaciones + ? CatUbicaciones.map((c) => { + if (c.clasificacion === 1) { + return ( + + ) + } + }) + : null} + + + + + + Destino + + + { + setIDDestino(parseInt(e.target.value)) + }} + value={IDDestino} + className='form-select form-select-sm' + > + + {CatUbicaciones + ? CatUbicaciones.map((c) => { + if (c.clasificacion === 2) { + return ( + + ) + } + }) + : null} + + + + + + HAZMAT + + + { + setHazmat(parseInt(e.target.value)) + }} + value={Hazmat} + className='form-select form-select-sm' + > + + + + + Pickup no + + { + setPickUpNumber(e.target.value) + }} + /> + + + + + + + + + { + setIDNuevoServicio(parseInt(e.target.value)) + }} + value={IDNuevoServicio} + className='form-select form-select-sm' + > + + {CatServicios + ? CatServicios.map((c) => { + return ( + + ) + }) + : null} + + + + + + +   + + + + + +
+ ) +} diff --git a/src/Components/Operaciones/ViajesServicios/ViajesServicios.tsx b/src/Components/Operaciones/ViajesServicios/ViajesServicios.tsx new file mode 100644 index 0000000..56d667f --- /dev/null +++ b/src/Components/Operaciones/ViajesServicios/ViajesServicios.tsx @@ -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 = (props) => { + const [DisplayTable, setDisplayTable] = useState(true) + return ( +
+ + + + + + + + + + + + + + + +
PartidaPeso brutoPalletsProducto Materia PrimaFraccion ArancelariaClave SATConcepto Producto MPEditaEmpaque (descripcion)Clave SAT
+
+ ) +} diff --git a/src/DTOs/Operaciones/DTOViajes.ts b/src/DTOs/Operaciones/DTOViajes.ts index f7cc419..22cec38 100644 --- a/src/DTOs/Operaciones/DTOViajes.ts +++ b/src/DTOs/Operaciones/DTOViajes.ts @@ -18,5 +18,6 @@ export default interface DTOOpViajes { destino: number sDestino: string, servicio: number, - sServicio: string + sServicio: string, + max?: boolean } \ No newline at end of file diff --git a/src/css/masterDetail.css b/src/css/masterDetail.css new file mode 100644 index 0000000..51c3b20 --- /dev/null +++ b/src/css/masterDetail.css @@ -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; +} diff --git a/src/store/features/Operaciones/OpViajesSlice.ts b/src/store/features/Operaciones/OpViajesSlice.ts new file mode 100644 index 0000000..66121c5 --- /dev/null +++ b/src/store/features/Operaciones/OpViajesSlice.ts @@ -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) => { + state.OpViajes = [] + }, + populateOpViajes : (state, action: PayloadAction) => { + 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) => { + 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) => { + 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; \ No newline at end of file diff --git a/src/store/store.ts b/src/store/store.ts index 16bd969..b874526 100644 --- a/src/store/store.ts +++ b/src/store/store.ts @@ -7,6 +7,7 @@ import { CatProveedoresSlice } from './features/Catalogos/CatProveedoresSlice' import { CatServiciosSlice } from './features/Catalogos/CatServiciosSlice' import { CatTipoUnidadesSlice } from './features/Catalogos/CatTipoUnidadesSlice' import { CatUbicacionesSlice } from './features/Catalogos/CatUbicacionesSlice' +import { OpViajesSlice } from './features/Operaciones/OpViajesSlice' export const store = configureStore({ reducer: { @@ -16,7 +17,8 @@ export const store = configureStore({ CatProveedores: CatProveedoresSlice.reducer, CatTipoUnidades: CatTipoUnidadesSlice.reducer, CatUbicaciones: CatUbicacionesSlice.reducer, - CatServicios: CatServiciosSlice.reducer + CatServicios: CatServiciosSlice.reducer, + OpViajes: OpViajesSlice.reducer } })