Skip to content

GitLab

Commit 31899178 authored by Gustavo Vidaletti's avatar Gustavo Vidaletti
Browse files

WIP: Listagem de Usuarios quase completa 

TODO: AJUSTAR REDECHECKBOX PARA PROP CLARO
parent 8ead62b8
Hide whitespace changes
Inline Side-by-side
src/components/RedeCheckbox/RedeCheckbox.jsx
View file @ 31899178
......@@ -18,6 +18,7 @@ const RedeCheckbox = styled(Checkbox)`
align-items: center;
justify-content: center;
border: 3px solid ${COLOR.AZUL};
border: 3px solid ${COLOR.BRANCO};
&:focus {
outline: none;
......@@ -25,6 +26,8 @@ const RedeCheckbox = styled(Checkbox)`
&:checked {
&:after {
color: ${COLOR.AZUL};
color: ${COLOR.BRANCO};
position: absolute;
content: '✔';
}
......
src/components/RedeCheckbox/RedeCheckbox.stories.js
View file @ 31899178
import React from 'react';
import { withInfo } from '@storybook/addon-info';
import RedeCheckbox from './RedeCheckbox';
export default {
title: 'RedeCheckbox',
component: RedeCheckbox,
decorators: [withInfo],
};
export const padrao = () => <RedeCheckbox />;
export const padrao = () => <RedeCheckbox />;
src/components/RedeHeader/RedeHeader.jsx
View file @ 31899178
......@@ -90,7 +90,7 @@ const RedeHeader = (props) => {
const handleLogoClick = () => {
let to = '/';
if (!profile || !profile.userType) return history.push(to);
if (!profile || (!profile.userType && profile.userType !== 0)) return history.push(to);
switch (profile.userType) {
case userTypes.ADMINISTRADOR:
to = '/administrador';
......@@ -165,6 +165,10 @@ const RedeHeader = (props) => {
&& (
<MenuItem onClick={() => escolherHome('mentorado')}>Home Mentorado</MenuItem>
)}
{
profile.userType === userTypes.ADMINISTRADOR
&& <MenuItem onClick={() => history.push('/listagem-usuarios')}>Listagem de Usuários</MenuItem>
}
{
(profile.userType !== userTypes.ADMINISTRADOR)
&& <MenuItem onClick={handleEditProfile}>Editar perfil</MenuItem>
......
src/pages/listagemUsuarios/StyledComponents/TableHeaderEvolve.jsx 0 → 100644
View file @ 31899178
import styled from 'styled-components';
const TableHeaderEvolve = styled.div`
display: flex;
color: #FFFFFF;
align-items: center;
justify-content: space-around;
div{
display: flex;
justify-content: center;
align-items: center;
}
`;
export default TableHeaderEvolve;
src/pages/listagemUsuarios/listagemUsuarios.jsx
View file @ 31899178
import React, { useState, useEffect } from 'react';
import { useSnackbar } from 'notistack';
import { Container, Select, MenuItem, FormControl, InputLabel } from '@material-ui/core';
import {
Container,
} from '@material-ui/core';
import StyledContainer from './StyledComponents';
import Titulo from './StyledComponents/Titulo';
import Tabela from './StyledComponents/Tabela';
import ControleFlutuante from './StyledComponents/ControleFlutuante';
import { getAll } from '../../services/user';
import { getAll, profile } from '../../services/user';
import RedeCheckbox from '../../components/RedeCheckbox/RedeCheckbox';
import TableHeaderEvolve from './StyledComponents/TableHeaderEvolve';
import { userTypes } from '../../utils/userType.constants';
import { useHistory } from 'react-router';
import pushIfNecessary from '../../utils/HTMLUtils';
function ListagemUsuarios() {
const { enqueueSnackbar } = useSnackbar();
const [usuarios, setUsuarios] = useState([]);
const [tipo, setTipo] = useState(1);
const [checkMentor, setCheckMentor] = useState(true);
const [checkMentorado, setCheckMentorado] = useState(true);
const history = useHistory();
const enqueue = (msg = '', variant = 'error', autoHideDuration = 2500) => {
enqueueSnackbar(msg, { variant, autoHideDuration });
......@@ -18,29 +27,70 @@ function ListagemUsuarios() {
useEffect(() => {
const tkn = sessionStorage.getItem('token');
getAll(
{ headers: { Authorization: `Bearer ${tkn}` } },
).then((resp) => setUsuarios(resp))
.catch(() => enqueue('Erro ao pesquisar usuários!'));
profile({ headers: { Authorization: `Bearer ${tkn}` } }).then((resp) => {
if (resp.data.userType !== userTypes.ADMINISTRADOR) {
pushIfNecessary(
resp.data.userType,
(link) => history.push(link),
);
} else {
getAll(
{ headers: { Authorization: `Bearer ${tkn}` } },
).then((resposta) => {
setUsuarios(resposta.data);
})
.catch(() => enqueue('Erro ao pesquisar usuários!'));
}
}).catch((erro) => {
enqueue(erro.response.data);
history.push();
});
}, []);
const getUserTypeName = (userType) => {
switch (userType) {
case 0: return 'Administrador';
case 1: return 'Mentor';
case 2: return 'Mentorado';
case 3: return 'Ambos';
default: return 'Padrão';
}
};
return (
<Container>
<StyledContainer>
<ControleFlutuante>
<FormControl variant="outlined">
<Select
value={tipo}
onChange={(e) => setTipo(e.target.value)}
>
<MenuItem value={1}>Mentores</MenuItem>
<MenuItem value={2}>Mentorados</MenuItem>
</Select>
</FormControl>
</ControleFlutuante>
<Titulo>Listagem de Usuários</Titulo>
<Tabela>
<thead>
<tr>
<th colSpan={5}>
<TableHeaderEvolve>
<div>
<RedeCheckbox
id="mentores"
checked={checkMentor}
onChange={(evt) => setCheckMentor(evt.target.checked)}
/>
{/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
<label htmlFor="mentores" style={{ marginLeft: '5px' }}>
Mentores
</label>
</div>
<div>
<RedeCheckbox
id="mentorados"
checked={checkMentorado}
onChange={(evt) => setCheckMentorado(evt.target.checked)}
/>
{/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
<label htmlFor="mentorados" style={{ marginLeft: '5px' }}>
Mentorados
</label>
</div>
</TableHeaderEvolve>
</th>
</tr>
<tr>
<th>Nome</th>
<th>Email</th>
......@@ -50,290 +100,27 @@ function ListagemUsuarios() {
</tr>
</thead>
<tbody>
<tr>
<td>Teste</td>
<td>Testeeeeeeeeeeee</td>
<td>Teste</td>
<td>Teste</td>
<td>Teste</td>
</tr>
<tr>
<td>Testeeeeeeeeeeee</td>
<td>Teste</td>
<td>Teste</td>
<td>Teste</td>
<td>Teste</td>
</tr>
<tr>
<td>Teste</td>
<td>Teste</td>
<td>Teste</td>
<td>Testeeeeeeeeeeee</td>
<td>Testeeeeeeeeeeee</td>
</tr>
<tr>
<td>Teste</td>
<td>Testeeeeeeeeeeee</td>
<td>Testeeeeeeeeeeee</td>
<td>Teste</td>
<td>Teste</td>
</tr>
<tr>
<td>Testeeeeeeeeeeee</td>
<td>Teste</td>
<td>Teste</td>
<td>Testeeeeeeeeeeee</td>
<td>Testeeeeeeeeeeee</td>
</tr>
<tr>
<td>Teste</td>
<td>Testeeeeeeeeeeee</td>
<td>Teste</td>
<td>Teste</td>
<td>Teste</td>
</tr>
<tr>
<td>Testeeeeeeeeeeee</td>
<td>Teste</td>
<td>Teste</td>
<td>Teste</td>
<td>Teste</td>
</tr>
<tr>
<td>Teste</td>
<td>Teste</td>
<td>Teste</td>
<td>Testeeeeeeeeeeee</td>
<td>Testeeeeeeeeeeee</td>
</tr>
<tr>
<td>Teste</td>
<td>Testeeeeeeeeeeee</td>
<td>Testeeeeeeeeeeee</td>
<td>Teste</td>
<td>Teste</td>
</tr>
<tr>
<td>Testeeeeeeeeeeee</td>
<td>Teste</td>
<td>Teste</td>
<td>Testeeeeeeeeeeee</td>
<td>Testeeeeeeeeeeee</td>
</tr>
<tr>
<td>Teste</td>
<td>Testeeeeeeeeeeee</td>
<td>Teste</td>
<td>Teste</td>
<td>Teste</td>
</tr>
<tr>
<td>Testeeeeeeeeeeee</td>
<td>Teste</td>
<td>Teste</td>
<td>Teste</td>
<td>Teste</td>
</tr>
<tr>
<td>Teste</td>
<td>Teste</td>
<td>Teste</td>
<td>Testeeeeeeeeeeee</td>
<td>Testeeeeeeeeeeee</td>
</tr>
<tr>
<td>Teste</td>
<td>Testeeeeeeeeeeee</td>
<td>Testeeeeeeeeeeee</td>
<td>Teste</td>
<td>Teste</td>
</tr>
<tr>
<td>Testeeeeeeeeeeee</td>
<td>Teste</td>
<td>Teste</td>
<td>Testeeeeeeeeeeee</td>
<td>Testeeeeeeeeeeee</td>
</tr>
<tr>
<td>Teste</td>
<td>Testeeeeeeeeeeee</td>
<td>Teste</td>
<td>Teste</td>
<td>Teste</td>
</tr>
<tr>
<td>Testeeeeeeeeeeee</td>
<td>Teste</td>
<td>Teste</td>
<td>Teste</td>
<td>Teste</td>
</tr>
<tr>
<td>Teste</td>
<td>Teste</td>
<td>Teste</td>
<td>Testeeeeeeeeeeee</td>
<td>Testeeeeeeeeeeee</td>
</tr>
<tr>
<td>Teste</td>
<td>Testeeeeeeeeeeee</td>
<td>Testeeeeeeeeeeee</td>
<td>Teste</td>
<td>Teste</td>
</tr>
<tr>
<td>Testeeeeeeeeeeee</td>
<td>Teste</td>
<td>Teste</td>
<td>Testeeeeeeeeeeee</td>
<td>Testeeeeeeeeeeee</td>
</tr>
<tr>
<td>Teste</td>
<td>Testeeeeeeeeeeee</td>
<td>Teste</td>
<td>Teste</td>
<td>Teste</td>
</tr>
<tr>
<td>Testeeeeeeeeeeee</td>
<td>Teste</td>
<td>Teste</td>
<td>Teste</td>
<td>Teste</td>
</tr>
<tr>
<td>Teste</td>
<td>Teste</td>
<td>Teste</td>
<td>Testeeeeeeeeeeee</td>
<td>Testeeeeeeeeeeee</td>
</tr>
<tr>
<td>Teste</td>
<td>Testeeeeeeeeeeee</td>
<td>Testeeeeeeeeeeee</td>
<td>Teste</td>
<td>Teste</td>
</tr>
<tr>
<td>Testeeeeeeeeeeee</td>
<td>Teste</td>
<td>Teste</td>
<td>Testeeeeeeeeeeee</td>
<td>Testeeeeeeeeeeee</td>
</tr>
<tr>
<td>Teste</td>
<td>Testeeeeeeeeeeee</td>
<td>Teste</td>
<td>Teste</td>
<td>Teste</td>
</tr>
<tr>
<td>Testeeeeeeeeeeee</td>
<td>Teste</td>
<td>Teste</td>
<td>Teste</td>
<td>Teste</td>
</tr>
<tr>
<td>Teste</td>
<td>Teste</td>
<td>Teste</td>
<td>Testeeeeeeeeeeee</td>
<td>Testeeeeeeeeeeee</td>
</tr>
<tr>
<td>Teste</td>
<td>Testeeeeeeeeeeee</td>
<td>Testeeeeeeeeeeee</td>
<td>Teste</td>
<td>Teste</td>
</tr>
<tr>
<td>Testeeeeeeeeeeee</td>
<td>Teste</td>
<td>Teste</td>
<td>Testeeeeeeeeeeee</td>
<td>Testeeeeeeeeeeee</td>
</tr>
<tr>
<td>Teste</td>
<td>Testeeeeeeeeeeee</td>
<td>Teste</td>
<td>Teste</td>
<td>Teste</td>
</tr>
<tr>
<td>Testeeeeeeeeeeee</td>
<td>Teste</td>
<td>Teste</td>
<td>Teste</td>
<td>Teste</td>
</tr>
<tr>
<td>Teste</td>
<td>Teste</td>
<td>Teste</td>
<td>Testeeeeeeeeeeee</td>
<td>Testeeeeeeeeeeee</td>
</tr>
<tr>
<td>Teste</td>
<td>Testeeeeeeeeeeee</td>
<td>Testeeeeeeeeeeee</td>
<td>Teste</td>
<td>Teste</td>
</tr>
<tr>
<td>Testeeeeeeeeeeee</td>
<td>Teste</td>
<td>Teste</td>
<td>Testeeeeeeeeeeee</td>
<td>Testeeeeeeeeeeee</td>
</tr>
<tr>
<td>Teste</td>
<td>Testeeeeeeeeeeee</td>
<td>Teste</td>
<td>Teste</td>
<td>Teste</td>
</tr>
<tr>
<td>Testeeeeeeeeeeee</td>
<td>Teste</td>
<td>Teste</td>
<td>Teste</td>
<td>Teste</td>
</tr>
<tr>
<td>Teste</td>
<td>Teste</td>
<td>Teste</td>
<td>Testeeeeeeeeeeee</td>
<td>Testeeeeeeeeeeee</td>
</tr>
<tr>
<td>Teste</td>
<td>Testeeeeeeeeeeee</td>
<td>Testeeeeeeeeeeee</td>
<td>Teste</td>
<td>Teste</td>
</tr>
<tr>
<td>Testeeeeeeeeeeee</td>
<td>Teste</td>
<td>Teste</td>
<td>Testeeeeeeeeeeee</td>
<td>Testeeeeeeeeeeee</td>
</tr>
{usuarios
.filter((usuario) => {
const arr = [];
if (checkMentor) arr.push(1);
if (checkMentorado) arr.push(2);
if (checkMentor || checkMentorado) arr.push(3);
return arr.indexOf(usuario.data.userType) > -1;
})
.map((usuario) => (
<tr key={usuario.id}>
<td>{usuario.data.name}</td>
<td>{usuario.data.email}</td>
<td>{usuario.data.cpf}</td>
<td>{usuario.data.phone}</td>
<td>{getUserTypeName(usuario.data.userType)}</td>
</tr>
))}
</tbody>
</Tabela>
</StyledContainer>
</Container >
</Container>
);
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment