parent
9dde627214
commit
84ceea673b
@ -0,0 +1,120 @@ |
|||||||
|
import React, { FC, useState } from 'react' |
||||||
|
import { Card, Col, FloatingLabel, Form, Row } from 'react-bootstrap' |
||||||
|
import { useSelector } from 'react-redux' |
||||||
|
import { RootState } from '../../store/store' |
||||||
|
|
||||||
|
interface IProps {} |
||||||
|
|
||||||
|
export const CatUsuarios: FC<IProps> = (props) => { |
||||||
|
const mCatClientes = useSelector((state: RootState) => state.CatClientes.CatClientes) |
||||||
|
const mCatProveedores = useSelector((state: RootState) => state.CatProveedores.CatProveedores) |
||||||
|
const [Usuario, setUsuario] = useState('') |
||||||
|
const [TipoUsuario, setTipoUsuario] = useState(0) |
||||||
|
const [Search, setSearch] = useState('') |
||||||
|
|
||||||
|
return ( |
||||||
|
<div> |
||||||
|
<br /> |
||||||
|
<Card> |
||||||
|
<Card.Body> |
||||||
|
<Row> |
||||||
|
<Col xs={6}> |
||||||
|
<Card style={{ backgroundColor: 'rgba(245, 245, 245, 0.4)' }}> |
||||||
|
<Card.Body> |
||||||
|
<Row> |
||||||
|
<Col xs={8}> |
||||||
|
<FloatingLabel controlId='TxtNombre' label='Nombre' className='mb-3'> |
||||||
|
<Form.Control type='text' placeholder='Nombre' value={Usuario} /> |
||||||
|
</FloatingLabel> |
||||||
|
</Col> |
||||||
|
<Col xs={4}> |
||||||
|
<FloatingLabel controlId='CmbTipoUsuario' label='Tipo de usuario'> |
||||||
|
<Form.Select |
||||||
|
aria-label='Tipo usuario' |
||||||
|
value={TipoUsuario} |
||||||
|
onChange={(e) => { |
||||||
|
setTipoUsuario(parseInt(e.target.value)) |
||||||
|
}} |
||||||
|
> |
||||||
|
<option value='0'></option> |
||||||
|
<option value='1'>Usuario interno</option> |
||||||
|
<option value='2'>Cliente</option> |
||||||
|
<option value='3'>Proveedor</option> |
||||||
|
</Form.Select> |
||||||
|
</FloatingLabel> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
<Row> |
||||||
|
<Col xs={6}> |
||||||
|
<FloatingLabel controlId='floatingInput' label='Nombre de usuario' className='mb-3'> |
||||||
|
<Form.Control type='text' placeholder='name@empresa.com' /> |
||||||
|
</FloatingLabel> |
||||||
|
</Col> |
||||||
|
<Col xs={6}> |
||||||
|
<FloatingLabel controlId='floatingPassword' label='Contraseña'> |
||||||
|
<Form.Control type='password' placeholder='Password' /> |
||||||
|
</FloatingLabel> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</Card.Body> |
||||||
|
</Card> |
||||||
|
</Col> |
||||||
|
<Col xs={6}> |
||||||
|
<Card style={{ backgroundColor: 'rgba(245, 245, 245, 0.4)' }}> |
||||||
|
<Card.Body> |
||||||
|
<Row> |
||||||
|
<Col> |
||||||
|
<Form.Control |
||||||
|
type='text' |
||||||
|
id='Search' |
||||||
|
aria-describedby='passwordHelpBlock' |
||||||
|
value={Search} |
||||||
|
onChange={(e) => { |
||||||
|
setSearch(e.target.value) |
||||||
|
}} |
||||||
|
/> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
<Row style={{ paddingTop: '5px' }}> |
||||||
|
<Col xs={12}> |
||||||
|
<div className='divTipoCatalogo'> |
||||||
|
{TipoUsuario === 2 |
||||||
|
? mCatClientes |
||||||
|
.filter((c) => c.cliente.toLocaleLowerCase().includes(Search.toLocaleLowerCase())) |
||||||
|
.map((c) => { |
||||||
|
return ( |
||||||
|
<Form.Check |
||||||
|
type='checkbox' |
||||||
|
id={`default-${c.id}`} |
||||||
|
label={`${c.cliente}`} |
||||||
|
style={{ textAlign: 'left', fontWeight: 'normal' }} |
||||||
|
/> |
||||||
|
) |
||||||
|
}) |
||||||
|
: null} |
||||||
|
{TipoUsuario === 3 |
||||||
|
? mCatProveedores |
||||||
|
.filter((c) => c.proveedor.toLocaleLowerCase().includes(Search.toLocaleLowerCase())) |
||||||
|
.map((c) => { |
||||||
|
return ( |
||||||
|
<Form.Check |
||||||
|
type='checkbox' |
||||||
|
id={`default-${c.id}`} |
||||||
|
label={`${c.proveedor}`} |
||||||
|
style={{ textAlign: 'left', fontWeight: 'normal' }} |
||||||
|
/> |
||||||
|
) |
||||||
|
}) |
||||||
|
: null} |
||||||
|
</div> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</Card.Body> |
||||||
|
</Card> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</Card.Body> |
||||||
|
</Card> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
Loading…
Reference in new issue