Fixed: delete dialog, status from trip monitor, refresh button

src/Components/Operaciones/OpMonitor.tsx

@@ -10,6 +10,7 @@ import {
   BsTruck,
   BsXLg,
 } from 'react-icons/bs'
+import { HiOutlineRefresh } from 'react-icons/hi'
 import { FcShipped, FcInTransit } from 'react-icons/fc'
 import { useDispatch, useSelector } from 'react-redux'
 import { RootState } from '../../store/store'
@@ -17,7 +18,12 @@ import DTOOpViajes from '../../DTOs/Operaciones/DTOViajes'
 import DSOpViajes from '../../Services/Operaciones/OpViajes.Services'
 import DSOpStatusSecuence from '../../Services/Operaciones/OpViajes.Services'
 import { Servicios } from './Viaje/Servicios/Servicios'
-import { deleteOpViajes, populateOpViajes, updateOpViajes } from '../../store/features/Operaciones/OpViajesSlice'
+import {
+  resetOpViajes,
+  deleteOpViajes,
+  populateOpViajes,
+  updateOpViajes,
+} from '../../store/features/Operaciones/OpViajesSlice'
 import { Viaje } from './Viaje/Viaje'
 import '../../css/masterDetail.css'
 import '../../css/generalStyles.css'
@@ -27,11 +33,13 @@ import {
 } from '../../store/features/Operaciones/OpViajesServiciosSlice'
 import { populateOpViajesEstatusSecuencia } from '../../store/features/Operaciones/OpViajes.Estatus.SecuenciaSlice'
 import { ViajeEstatus } from './Viaje/ViajeEstatus'
+import { useNavigate } from 'react-router-dom'
 
 interface IProps {}
 
 export const OpMonitor: FC<IProps> = (props) => {
   const dispatch = useDispatch()
+  const navigate = useNavigate()
   const Info = JSON.parse(localStorage.getItem('tokenInfo') || '[]')
   const UserID = Info.UserId
   const CatClientes = useSelector((state: RootState) => state.CatClientes.CatClientes)
@@ -102,13 +110,18 @@ export const OpMonitor: FC<IProps> = (props) => {
     DSOpViajes.Delete(IDViaje)
       .then((response) => {
         dispatch(deleteOpViajes(IDViaje))
+        setShowDeleteDialog(false)
       })
       .catch((e: Error) => {})
   }
 
-  useEffect(() => {
+  const loadEveryting = () => {
     loadStatus()
     loadTrips()
+  }
+
+  useEffect(() => {
+    loadEveryting()
   }, [])
 
   const loadStatus = () => {
@@ -122,7 +135,8 @@ export const OpMonitor: FC<IProps> = (props) => {
   const loadTrips = () => {
     DSOpViajes.Get()
       .then((response) => {
-        console.log('viajes=' + JSON.stringify(response.data))
+        dispatch(resetOpViajes(''))
+        //console.log('viajes=' + JSON.stringify(response.data))
         var data = response.data.map((x) => {
           x.max = false
           return x
@@ -159,7 +173,18 @@ export const OpMonitor: FC<IProps> = (props) => {
             <Col xs={2} style={{ textAlign: 'right', fontSize: '25px' }}>
               Monitor de Viajes
             </Col>
-            <Col xs={1} style={{ textAlign: 'left', cursor: 'pointer' }}></Col>
+            <Col
+              xs={1}
+              style={{ textAlign: 'left', cursor: 'pointer' }}
+              onClick={() => {
+                loadEveryting()
+                //navigate('/OpMonitor', { replace: true })
+              }}
+            >
+              <IconContext.Provider value={{ color: 'orange', size: '35px' }}>
+                <HiOutlineRefresh />
+              </IconContext.Provider>
+            </Col>
             <Col xs={8}></Col>
             <Col xs={1}>
               <div
@@ -183,7 +208,7 @@ export const OpMonitor: FC<IProps> = (props) => {
         </Alert>
       </Card>
       <Row>
-        <Col xs={10}>
+        <Col xs={3}>
           <Form.Control
             type='text'
             size='sm'
@@ -223,6 +248,7 @@ export const OpMonitor: FC<IProps> = (props) => {
                 {AllTrips
                   ? AllTrips.filter(
                       (MasterData) =>
+                        MasterData.id.toString().toLowerCase().includes(Search.toLowerCase()) ||
                         MasterData.sCliente.toLowerCase().includes(Search.toLowerCase()) ||
                         MasterData.sTipoOperacion.toLowerCase().includes(Search.toLowerCase()) ||
                         MasterData.sOrigen.toLowerCase().includes(Search.toLowerCase()) ||

src/Components/Operaciones/Viaje/ViajeEstatus.tsx

@@ -6,6 +6,7 @@ import DSOpStatusSecuence from '../../../Services/Operaciones/OpViajes.Services'
 import { deleteOpViajes, updateOpViajes } from '../../../store/features/Operaciones/OpViajesSlice'
 import DTOChangeTripStatus from '../../../DTOs/Operaciones/DTOChangeTripStatus'
 import DTOOpViajes from '../../../DTOs/Operaciones/DTOViajes'
+import DTOViajes from '../../../DTOs/Operaciones/DTOViajes'
 import DTOViajeEstatusSecuencia from '../../../DTOs/Operaciones/DTOViajeEstatusSecuencia'
 import { setStatus } from '../../../store/features/Auth/UserProfileSlice'
 import { SignatureHelpTriggerReason } from 'typescript'
@@ -25,13 +26,9 @@ export const ViajeEstatus: FC<IProps> = (props) => {
   const [ListaSecuencia, setListaSecuencia] = useState<DTOViajeEstatusSecuencia[]>([])
   const [Secuencia, setSecuencia] = useState(1)
 
-  /*   const changeStatus = (e: any) => {
-    setIDStatus(parseInt(e.target.value))
-  } */
-
   const enlistaSecuenciaViaje = () => {
     const Lista: DTOViajeEstatusSecuencia[] = mTripStatus
-      .filter((row) => row.tipoOperacion === props.TipoOperacion && row.secuencia >= Secuencia)
+      .filter((row) => row.tipoOperacion === props.TipoOperacion)
       .sort((a, b) => a.secuencia - b.secuencia)
     setListaSecuencia(Lista)
   }
@@ -49,22 +46,46 @@ export const ViajeEstatus: FC<IProps> = (props) => {
   }, [Secuencia, IDStatus])
 
   const selectedStatus = (e: any) => {
-    setIDStatus(parseInt(e.target.value))
+    const idx = parseInt(e.target.value)
+    console.log(idx)
+    setIDStatus(idx)
     const data: DTOChangeTripStatus = {
       idViaje: props.IDViaje,
       idEstatus: parseInt(e.target.value),
     }
     DSOpStatusSecuence.ChangeTripStatus(data)
       .then((response) => {
-        const Item: DTOViajeEstatusSecuencia[] = mTripStatus
+        mTripStatus
           .filter((row) => row.tipoOperacion === props.TipoOperacion && row.estatus === IDStatus)
           .sort((a, b) => a.secuencia - b.secuencia)
-        //alert('A cambiado el estatus del cliente: ' + props.sCliente + ' a : ' + Item[0].sEstatus)
         let result = AllTrips.filter((a) => {
           if (a.id == props.IDViaje) {
             return a
           }
         })
+        let updatedRecord: DTOViajes = {
+          cliente: result[0].cliente,
+          destino: result[0].destino,
+          fAlta: result[0].fAlta,
+          hazmat: result[0].hazmat,
+          id: result[0].id,
+          max: result[0].max,
+          noCaja: result[0].noCaja,
+          origen: result[0].origen,
+          pedimento: result[0].pedimento,
+          pickUpNumber: result[0].pickUpNumber,
+          refAgenciaAduanal: result[0].refAgenciaAduanal,
+          sCliente: result[0].sCliente,
+          sDestino: result[0].sDestino,
+          sOrigen: result[0].sOrigen,
+          sTipoOperacion: result[0].sTipoOperacion,
+          sTipoUnidad: result[0].sTipoOperacion,
+          status: idx,
+          tipoOperacion: result[0].tipoOperacion,
+          tipoUnidad: result[0].tipoOperacion,
+          usuario: result[0].usuario,
+        }
+        dispatch(updateOpViajes(updatedRecord))
         if (response.data.secuencia === 100) {
           dispatch(deleteOpViajes(props.IDViaje))
         }
@@ -77,19 +98,17 @@ export const ViajeEstatus: FC<IProps> = (props) => {
       <Form.Control
         as='select'
         onChange={(e) => {
-          // changeStatus(e)
           selectedStatus(e)
         }}
-        /* onKeyPress={(e) => e.key === 'Enter' && selectedStatus()} */
         value={IDStatus}
         className='form-select form-select-sm dialogLabel'
       >
-        {ListaSecuencia && Secuencia
-          ? ListaSecuencia.filter((row) => row.tipoOperacion === props.TipoOperacion && row.secuencia >= Secuencia)
+        {ListaSecuencia
+          ? ListaSecuencia.filter((row) => row.tipoOperacion === props.TipoOperacion)
               .sort((a, b) => a.secuencia - b.secuencia)
               .map((row) => {
                 return (
-                  <option key={row.estatus} value={row.estatus}>
+                  <option key={row.id} value={row.estatus}>
                     {row.sEstatus}
                   </option>
                 )

src/store/features/Operaciones/OpViajesSlice.ts

@@ -18,6 +18,7 @@ export const OpViajesSlice = createSlice({
     },
     updateOpViajes : (state, action: PayloadAction<DTOViajes>) => {
       const i = state.OpViajes.findIndex(_element => _element.id === action.payload.id);
+      console.log('valor de i: '+i)      
       if (i > -1) state.OpViajes[i] = action.payload;
       else state.OpViajes.push(action.payload);
     },