Version que avita autocerrar viajes y permite eliminar viajes del monitor de operaciones

src/Components/Operaciones/OpMonitor.tsx

@@ -1,7 +1,15 @@
 import React, { FC, useEffect, useState } from 'react'
 import { Alert, Button, Card, Col, Form, Modal, OverlayTrigger, Row, Table, Tooltip } from 'react-bootstrap'
 import { IconContext } from 'react-icons'
-import { BsChevronDown, BsChevronRight, BsChevronUp, BsFillPencilFill, BsPlusSquareFill, BsTruck } from 'react-icons/bs'
+import {
+  BsChevronDown,
+  BsChevronRight,
+  BsChevronUp,
+  BsFillPencilFill,
+  BsPlusSquareFill,
+  BsTruck,
+  BsXLg,
+} from 'react-icons/bs'
 import { FcShipped, FcInTransit } from 'react-icons/fc'
 import { useDispatch, useSelector } from 'react-redux'
 import { RootState } from '../../store/store'
@@ -9,7 +17,7 @@ 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 { populateOpViajes, updateOpViajes } from '../../store/features/Operaciones/OpViajesSlice'
+import { deleteOpViajes, populateOpViajes, updateOpViajes } from '../../store/features/Operaciones/OpViajesSlice'
 import { Viaje } from './Viaje/Viaje'
 import '../../css/masterDetail.css'
 import '../../css/generalStyles.css'
@@ -35,10 +43,12 @@ export const OpMonitor: FC<IProps> = (props) => {
   const AllTripsServices = useSelector((state: RootState) => state.OpViajesServicios.OpViajesServicios)
   const [OpViajes, setOpViajes] = useState<DTOOpViajes[]>([])
   const [showTripDialog, setShowTripDialog] = useState(false)
+  const [ShowDeleteDialog, setShowDeleteDialog] = useState(false)
   const [Switch, setSwitch] = useState(false)
   const [NoCaja, setNoCaja] = useState('')
   const [IDViaje, setIDViaje] = useState(0)
   const [IDCliente, setIDCliente] = useState(0)
+  const [SCliente, setSCliente] = useState('')
   const [IDProveedor, setIDProveedor] = useState(0)
   const [IDServicio, setIDServicio] = useState(0)
   const [IDTipoUnidad, setIDTipoUnidad] = useState(0)
@@ -82,6 +92,20 @@ export const OpMonitor: FC<IProps> = (props) => {
     setShowTripDialog(true)
   }
 
+  const deleteMaster = (row: DTOOpViajes) => {
+    setSCliente(row.sCliente)
+    setIDViaje(row.id)
+    setShowDeleteDialog(true)
+  }
+
+  const deleteTrip = () => {
+    DSOpViajes.Delete(IDViaje)
+      .then((response) => {
+        dispatch(deleteOpViajes(IDViaje))
+      })
+      .catch((e: Error) => {})
+  }
+
   useEffect(() => {
     loadStatus()
     loadTrips()
@@ -191,6 +215,7 @@ export const OpMonitor: FC<IProps> = (props) => {
                   <th>Hazmat</th>
                   <th>Ref AA</th>
                   <th>PickUp No</th>
+                  <th>Elimina</th>
                   <th>Editar</th>
                 </tr>
               </thead>
@@ -302,6 +327,20 @@ export const OpMonitor: FC<IProps> = (props) => {
                             >
                               {MasterData.pickUpNumber}
                             </td>
+                            <td className={MasterData.max === true ? 'masterSelected' : 'normalSelected'}>
+                              <Button
+                                size='sm'
+                                variant='white'
+                                style={{ textAlign: 'right' }}
+                                onClick={() => {
+                                  deleteMaster(MasterData)
+                                }}
+                              >
+                                <IconContext.Provider value={{ color: 'red', size: '15px' }}>
+                                  <BsXLg />
+                                </IconContext.Provider>
+                              </Button>
+                            </td>
                             <td className={MasterData.max === true ? 'masterSelected' : 'normalSelected'}>
                               <Button
                                 size='sm'
@@ -349,6 +388,7 @@ export const OpMonitor: FC<IProps> = (props) => {
           setShowTripDialog(false)
         }}
         size={'lg'}
+        backdrop='static'
       >
         <Modal.Header closeButton className='tripHeader'>
           Informacion del viaje
@@ -357,6 +397,54 @@ export const OpMonitor: FC<IProps> = (props) => {
           <Viaje IDViaje={IDViaje} />
         </Modal.Body>
       </Modal>
+
+      <Modal
+        show={ShowDeleteDialog}
+        onHide={() => {
+          setShowDeleteDialog(false)
+        }}
+        size={'lg'}
+        backdrop='static'
+      >
+        <Modal.Header closeButton className='tripHeader'>
+          Alerta
+        </Modal.Header>
+        <Modal.Body>
+          <Row>
+            <Col xs={12}>
+              <Alert key='danger' variant='danger'>
+                Esta seguro de eliminar este viaje <span style={{ fontWeight: 'bold' }}>AOL: {IDViaje}</span>?
+                <br />
+                <span style={{ fontWeight: 'bold' }}>{SCliente}</span>
+              </Alert>
+            </Col>
+          </Row>
+          <Row>
+            <Col xs={6}>
+              <Button
+                variant='primary'
+                size='sm'
+                onClick={() => {
+                  setShowDeleteDialog(false)
+                }}
+              >
+                &nbsp;&nbsp;&nbsp;No&nbsp;&nbsp;&nbsp;
+              </Button>
+            </Col>
+            <Col xs={6} style={{ textAlign: 'right' }}>
+              <Button
+                variant='danger'
+                size='sm'
+                onClick={() => {
+                  deleteTrip()
+                }}
+              >
+                &nbsp;&nbsp;&nbsp;Si&nbsp;&nbsp;&nbsp;
+              </Button>
+            </Col>
+          </Row>
+        </Modal.Body>
+      </Modal>
     </div>
   )
 }