Se agrega catalogo de rutas

src/Components/Catalogos/CatRutas.tsx

@@ -1,8 +1,14 @@
-import React, { FC, useState } from 'react'
-import { Alert, Card, Col, Form, Row } from 'react-bootstrap'
+import React, { FC, useEffect, useState } from 'react'
+import { Alert, Button, Card, Col, Form, Row } from 'react-bootstrap'
 import { useSelector } from 'react-redux'
 import { RootState } from '../../store/store'
 import * as CurrencyFormat from 'react-currency-format'
+import ICatRutas from '../../Interfaces/Catalogos/ICatRutas'
+import DSCatRutas from '../../Services/Catalogos/CatRutas.Services'
+import DTOCatRutas from '../../DTOs/Catalogos/DTOCatRutas'
+import DataTable from 'react-data-table-component'
+import { IconContext } from 'react-icons'
+import { BsFillPencilFill } from 'react-icons/bs'
 
 interface IProps {}
 
@@ -12,6 +18,7 @@ export const CatRutas: FC<IProps> = (props) => {
   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 [IDRuta, setIDRuta] = useState(0)
   const [IDCliente, setIDCliente] = useState(0)
   const [IDProveedor, setIDProveedor] = useState(0)
   const [IDTipoUnidad, setIDTipoUnidad] = useState(0)
@@ -20,6 +27,136 @@ export const CatRutas: FC<IProps> = (props) => {
   const [IDServicio, setIDServicio] = useState(0)
   const [Precio, setPrecio] = useState(0)
   const [Costo, setCosto] = useState(0)
+  const [CatRutas, setCatRutas] = useState<DTOCatRutas[]>([])
+  const columnsConcepts = [
+    {
+      name: 'id',
+      width: '80px',
+      selector: (row: DTOCatRutas) => row.id,
+      sortable: true,
+    },
+    {
+      name: 'Cliente',
+      width: '300px',
+      selector: (row: DTOCatRutas) => row.sCliente,
+      sortable: true,
+    },
+    {
+      name: 'Servicio',
+      width: '150px',
+      selector: (row: DTOCatRutas) => row.sServicio,
+      sortable: true,
+    },
+    {
+      name: 'Precio',
+      width: '100px',
+      selector: (row: DTOCatRutas) => '$ ' + row.precio,
+      sortable: true,
+    },
+    {
+      name: 'Costo',
+      width: '100px',
+      selector: (row: DTOCatRutas) => '$ ' + row.costo,
+      sortable: true,
+    },
+    {
+      name: 'Proveedor',
+      width: '300px',
+      selector: (row: DTOCatRutas) => row.sProveedor,
+      sortable: true,
+    },
+    {
+      name: 'Origen',
+      width: '150px',
+      selector: (row: DTOCatRutas) => row.sOrigen,
+      sortable: true,
+    },
+    {
+      name: 'Destino',
+      width: '150px',
+      selector: (row: DTOCatRutas) => row.sDestino,
+      sortable: true,
+    },
+    {
+      name: 'Tipo Unidad',
+      width: '150px',
+      selector: (row: DTOCatRutas) => row.sTipoUnidad,
+      sortable: true,
+    },
+    {
+      name: 'Editar',
+      width: '80px',
+      cell: (row: DTOCatRutas) => (
+        <div
+          style={{ textAlign: 'center', cursor: 'pointer' }}
+          onClick={() => {
+            showInfo(row)
+          }}
+        >
+          <IconContext.Provider value={{ color: 'blue', size: '21px' }}>
+            <BsFillPencilFill />
+          </IconContext.Provider>
+        </div>
+      ),
+      sortable: true,
+    },
+  ]
+
+  const showInfo = (row: DTOCatRutas) => {
+    setIDRuta(row.id)
+    setIDCliente(row.cliente)
+    setIDServicio(row.servicio)
+    setPrecio(row.precio)
+    setIDProveedor(row.proveedor)
+    setCosto(row.costo)
+    setIDOrigen(row.origen)
+    setIDDestino(row.destino)
+    setIDTipoUnidad(row.tipoUnidad)
+  }
+
+  const clearForm = () => {
+    setIDRuta(0)
+    setIDCliente(0)
+    setIDServicio(0)
+    setPrecio(0)
+    setIDProveedor(0)
+    setCosto(0)
+    setIDOrigen(0)
+    setIDDestino(0)
+    setIDTipoUnidad(0)
+  }
+
+  useEffect(() => {
+    loadData()
+  }, [])
+
+  const loadData = () => {
+    DSCatRutas.Get()
+      .then((response) => {
+        setCatRutas(response.data)
+      })
+      .catch((e: Error) => {})
+  }
+
+  const saveInfo = () => {
+    const data: ICatRutas = {
+      id: IDRuta,
+      cliente: IDCliente,
+      proveedor: IDProveedor,
+      tipoUnidad: IDTipoUnidad,
+      origen: IDOrigen,
+      destino: IDDestino,
+      servicio: IDServicio,
+      precio: Precio,
+      costo: Costo,
+      activo: 1,
+    }
+    DSCatRutas.Append(data)
+      .then((response) => {
+        loadData()
+      })
+      .catch((e: Error) => {})
+  }
 
   return (
     <div>
@@ -223,7 +360,34 @@ export const CatRutas: FC<IProps> = (props) => {
                 </Col>
               </Row>
               <Row>
-                <Col>&nbsp;</Col>
+                <Col>
+                  <Button variant='warning' onClick={() => clearForm()}>
+                    Nuevo
+                  </Button>
+                </Col>
+                <Col xs={10}>&nbsp;</Col>
+                <Col>
+                  <Button variant='primary' onClick={() => saveInfo()}>
+                    Guardar
+                  </Button>
+                </Col>
+              </Row>
+              <Row>
+                <Col xs={12}>
+                  <DataTable
+                    noHeader
+                    defaultSortFieldId={'id'}
+                    defaultSortAsc={true}
+                    striped={true}
+                    dense={true}
+                    paginationPerPage={10}
+                    pagination
+                    highlightOnHover
+                    columns={columnsConcepts}
+                    data={CatRutas}
+                    pointerOnHover
+                  />
+                </Col>
               </Row>
             </Card.Body>
           </Card>

src/Components/Home/Home.tsx

@@ -1,7 +1,8 @@
-import { FC, useEffect } from 'react'
+import { FC, useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
-import { Outlet } from 'react-router-dom'
+import { Outlet, useNavigate } from 'react-router-dom'
 import { RootState } from '../../store/store'
+import DSAuth from '../../Services/Auth/Auth.Services'
 import DSCatClientes from '../../Services/Catalogos/CatClientes.Services'
 import DSCatProveedores from '../../Services/Catalogos/CatProveedores.Services'
 import DSCatTipoUnidades from '../../Services/Catalogos/CatTipoUnidades.Services'
@@ -12,14 +13,23 @@ import { populateCatProveedores } from '../../store/features/Catalogos/CatProvee
 import { populateCatTipoUnidades } from '../../store/features/Catalogos/CatTipoUnidadesSlice'
 import { populateCatUbicaciones } from '../../store/features/Catalogos/CatUbicacionesSlice'
 import { populateCatServicios } from '../../store/features/Catalogos/CatServiciosSlice'
+import { populateUserProfile } from '../../store/features/Auth/UserProfileSlice'
+import { populateMenuItems } from '../../store/features/Auth/MenuItemsSlice'
 
 interface IProps {}
 
 export const Home: FC<IProps> = (props) => {
   const dispatch = useDispatch()
+  const navigate = useNavigate()
   const UserLogued = useSelector((state: RootState) => state.UserProfile.UserProfile.logueado)
+  const [token, setToken] = useState<string>(
+    (window.localStorage.getItem('token') ? window.localStorage.getItem('token') : '')!
+  )
+  const [menuStr, setMenuStr] = useState<string>(
+    (window.localStorage.getItem('menu') ? window.localStorage.getItem('menu') : '')!
+  )
 
-  const ValidateToken = () => {
+  const loadCatalogs = () => {
     DSCatClientes.Get()
       .then((response) => {
         dispatch(populateCatClientes(response.data))
@@ -47,8 +57,19 @@ export const Home: FC<IProps> = (props) => {
       .catch((e: Error) => {})
   }
 
+  const validateToken = () => {
+    DSAuth.Validate()
+      .then((response) => {
+        dispatch(populateMenuItems(JSON.parse(menuStr)))
+        dispatch(populateUserProfile(token))
+        loadCatalogs()
+        navigate('/', { replace: true })
+      })
+      .catch((e: Error) => {})
+  }
+
   useEffect(() => {
-    ValidateToken()
+    if (!UserLogued) validateToken()
   }, [UserLogued])
 
   return (

src/DTOs/Catalogos/DTOCatRutas.ts

@@ -0,0 +1,18 @@
+export default interface DTOCatRutas {
+    id: number,
+    cliente: number,
+    sCliente: string,
+    servicio: number,
+    sServicio: string,
+    precio: number,
+    proveedor: number,
+    sProveedor: string,
+    costo: number,
+    origen: number,
+    sOrigen: string,
+    destino: number,
+    sDestino: string
+    tipoUnidad: number,
+    sTipoUnidad: string,
+    activo: number  
+}

src/Interfaces/Catalogos/ICatRutas.ts

@@ -0,0 +1,12 @@
+export default interface ICatRutas {
+  id: number,
+  cliente: number,
+  proveedor: number,
+  servicio: number,
+  precio: number,
+  costo: number,
+  origen: number,
+  destino: number,
+  tipoUnidad: number,
+  activo: number  
+}

src/Services/Catalogos/CatRutas.Services.ts

@@ -0,0 +1,17 @@
+import http from "../../Services/Auth/config/http-common";
+import ICatRutas from "../../Interfaces/Catalogos/ICatRutas";
+import IRespuesta from "../../Interfaces/Respuestas/IRespuesta";
+import DTOCatRutas from "../../DTOs/Catalogos/DTOCatRutas";
+
+class CatRutasDataService {
+  Get() {
+    return http.get<DTOCatRutas[]>("Catalogos/CatRutas/Get");
+  }
+  Append(data: ICatRutas) {
+    return http.post<ICatRutas>(`Catalogos/CatRutas/Append`,data);
+  }
+  Delete(id: number) {
+    return http.delete<IRespuesta>(`Catalogos/CatRutas/Delete/${id}`);
+  }
+}
+export default new CatRutasDataService();

src/store/features/Auth/MenuItemsSlice.ts

@@ -11,12 +11,10 @@ export const MenuItemsSlice = createSlice({
       state.MenuItems =  []
     },  
     populateMenuItems : (state, action: PayloadAction<IMenu[]>) => {
-      //alert('populate IMenu '+JSON.stringify(action.payload))
-     // state.MenuItems = [{ id:0, descripcion:'', padreId:0, posicion:0, url:''}]
-     // state.MenuItems.push(... action.payload)
-     action.payload.forEach(element => state.MenuItems.push(element));
-    /*  if (action.payload.length>0)
-     state.MenuItems.push(... action.payload) */
+      action.payload.forEach(element => {
+        const index = state.MenuItems.findIndex(object => object.id === element.id)
+        if (index<0) state.MenuItems.push(element)
+      })
     },
   },
 })