|
|
|
@ -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> </Col> |
|
|
|
|
<Col> |
|
|
|
|
<Button variant='warning' onClick={() => clearForm()}> |
|
|
|
|
Nuevo |
|
|
|
|
</Button> |
|
|
|
|
</Col> |
|
|
|
|
<Col xs={10}> </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> |
|
|
|
|