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