Skip to content
Snippets Groups Projects
Commit 8297a121 authored by lfr20's avatar lfr20
Browse files

FInish to build userCard page

parent cbc80198
No related branches found
No related tags found
4 merge requests!57Merge of develop into master,!56Fixed buttons reportar, seguir, compartilhar, guardar and entrar (in comments...,!40merge admin into develop,!39Update admin system
Hide whitespace changes
Inline Side-by-side
src/Admin/Components/Components/DataCards/UserCard.js 0 → 100644
+ 570
− 0
View file @ 8297a121
/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
Departamento de Informatica - Universidade Federal do Parana
This file is part of Plataforma Integrada MEC.
Plataforma Integrada MEC is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
Plataforma Integrada MEC is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
import React, { useState, useEffect } from "react";
import moment from 'moment';
// Maerial ui components
import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import Typography from "@material-ui/core/Typography";
import Button from "@material-ui/core/Button";
import Paper from "@material-ui/core/Paper";
import Grid from "@material-ui/core/Grid";
import ListRoundedIcon from "@material-ui/icons/ListRounded";
import Chip from '@material-ui/core/Chip';
import { useStyles } from "../../Styles/DataCard";
import EmailRoundedIcon from '@material-ui/icons/EmailRounded';
import EditRoundedIcon from '@material-ui/icons/EditRounded';
import DeleteRoundedIcon from '@material-ui/icons/DeleteRounded';
import CheckRoundedIcon from "@material-ui/icons/CheckRounded";
import CloseRoundedIcon from "@material-ui/icons/CloseRounded";
//imports from local files
import { GetAData, DeleteFilter } from "../../../Filters";
import { apiDomain} from '../../../../env';
import noAvatar from "../../../../img/default_profile.png";
import { Link } from "react-router-dom";
import LoadingSpinner from '../../../../Components/LoadingSpinner';
import SnackBar from '../../../../Components/SnackbarComponent';
import { getRequest, postRequest, deleteRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
//styles
import styled from 'styled-components';
const CollectionCard = ({ match }) => {
const classes = useStyles();
const roles = [
"", "professor", "aluno", "admin", "curador", "moderador", "supervisor", "editor", "parceiro", "publicador", "submetedor",
];
const [error, setError] = useState(null); //Necessary to consult the API, catch errors
const [isLoaded, setIsLoaded] = useState(false); //Necessary to consult the API, wait until complete
const [item, setItem] = useState({});
const [snackInfo, setSnackInfo] = useState({
message: '',
icon: '',
open: false,
color: '',
})
const ComplaintStatus = (status) => {
switch (status) {
case "accepted":
return (
<Paper
style={{
textAlign: "center",
padding: "0.5em",
backgroundColor: "#228B22",
fontWeight: "500",
color: "#FFFAFA",
}}
>
ACEITO
</Paper>
);
case "requested":
return (
<Paper
style={{
textAlign: "center",
padding: "0.5em",
backgroundColor: "#FF8C00",
fontWeight: "500",
color: "#FFFAFA",
}}
>
PENDENTE
</Paper>
);
case "rejected":
return (
<Paper
style={{
textAlign: "center",
padding: "0.5em",
backgroundColor: "#FA8072",
fontWeight: "500",
color: "#FFFAFA",
}}
>
Rejeitado
</Paper>
);
default:
return (
<Paper
style={{
textAlign: "center",
padding: "0.5em",
backgroundColor: "#797D7F ",
fontWeight: "500",
color: "#FFFAFA",
}}
>
Não requisitado
</Paper>
)
}
};
const DisplayDate = (date) => {
const convertedData = moment.utc(date);
return moment(convertedData).format("LLL").toString();
}
// Handle snack infos
const HandleSnack = (message, state, icon, color) => {
setSnackInfo({
message: message,
icon: icon,
open: state,
color: color
})
}
const handleAprove = (userId, userName) => {
const url = `/users/${userId}/add_teacher`
const body = {
"approves": true
}
postRequest(
url,
body,
(data) => {
HandleSnack(`${userName} aceito como professor!`, true, "success", "#228B22");
},
(error) => {
HandleSnack("Erro!", true, "warning", "#FA8072");
}
)
}
const handleReject = (userId, userName) => {
const url = `/users/${userId}/add_teacher`
const body = {
"user": {
"approves": false
}
}
postRequest(
url,
body,
(data) => {
HandleSnack(`${userName} rejeitado como professor!`, true, "success", "#228B22");
},
(error) => {
HandleSnack("Erro!", true, "warning", "#FA8072");
}
)
}
const displayUserRole = (rolID) => {
if (rolID >= 9)
return roles[rolID - 1];
return roles[rolID];
}
const deleteUser = (userId) => {
deleteRequest(
DeleteFilter(`/users/${userId}`),
(data) => {
HandleSnack(`${item.name} deletado com sucesso!`, true, "success", "#228B22");
},
(error) => {
HandleSnack("Erro!", true, "warning", "#FA8072");
}
)
}
useEffect(() => {
getRequest(
GetAData("users", match.params.id),
(data, header) => {
setItem(data)
console.log(data);
setIsLoaded(true);
setError(false);
},
(error) => {
setError(true);
}
)
}, []);
if (error) {
return <div>Houve um erro</div>;
} else if (!isLoaded) {
return <LoadingSpinner text="Carregando..." />
} else {
return (
<Grid
container
spacing={3}
>
<SnackBar
severity={snackInfo.icon}
text={snackInfo.message}
snackbarOpen={snackInfo.open}
color={snackInfo.color}
handleClose={() => setSnackInfo({
message: '',
icon: '',
open: false,
color: ''
})}
/>
<Grid
item
md={6}
xs={12}
>
<Card>
<CardContent>
<Grid container justify="space-between">
<Grid item xs={12}>
<Typography
className={classes.title}
color="inherit"
gutterBottom
>
Identificação do usuário
</Typography>
</Grid>
<Grid container xs={12}>
<Grid item>
<Link
style={{ textDecoration: "none" }}
to={`/admin/users/teacher_requests`}
>
<Button
startIcon={<ListRoundedIcon />}
color="primary"
variant="outlined"
>
Listar
</Button>
</Link>
</Grid>
<Grid item>
<Button
startIcon={<DeleteRoundedIcon />}
color="secondary"
variant="outlined"
onClick={() => { deleteUser(item.id) }}
>
Deletar
</Button>
</Grid>
<Grid item>
<Link to={`/admin/EditUser/${item.id}`} style={{ textDecoration: "none" }}>
<Button
startIcon={<EditRoundedIcon />}
color="primary"
variant="outlined"
>
Editar
</Button>
</Link>
</Grid>
</Grid>
</Grid>
<SizedBox />
<Grid container direction="row" justify="flex-start" alignItems="center" spacing={3}>
<Grid item justify="center" alignItems="center">
<AvatarDiv>
<img src={item.avatar ? apiDomain + item.avatar : noAvatar} alt='user avatar'
style={{ height: "100%", width: "100%", borderRadius: "50%" }} />
</AvatarDiv>
</Grid>
<Grid item>
<div className={classes.displayColumn}>
<Typography color="initial" className={classes.subTitle}>
Nome
</Typography>
<Typography color="textSecondary">
{item.name === null ? "Sem dados" : item.name}
</Typography>
</div>
<div className={classes.displayColumn}>
<Typography color="initial" className={classes.subTitle}>
Email
</Typography>
{
item.email ?
<Link to={`/admin/sendEmail/${item.email}`} style={{ textDecoration: 'none' }}>
<Button
variant='text'
color='primary'
startIcon={<EmailRoundedIcon />}
>
{item.email}
</Button>
</Link> : null
}
</div>
<div className={classes.displayColumn}>
<Typography color="initial" className={classes.subTitle}>
Cpf
</Typography>
<Typography color="textSecondary">
{item.cpf === null ? "Sem dados" : item.cpf}
</Typography>
</div>
</Grid>
</Grid>
<Grid>
<div className={classes.displayColumn}>
<Typography color="initial" className={classes.subTitle}>
Escola
</Typography>
<Typography color="textSecondary">
{item.school ? item.school.name : "Sem dados"}
</Typography>
</div>
<div className={classes.displayColumn}>
<Typography color="initial" className={classes.subTitle}>
Telefone da escola
</Typography>
<Typography color="textSecondary">
{item.school ? item.school.phone : "Sem dados"}
</Typography>
</div>
<div className={classes.displayColumn}>
<Typography color="initial" className={classes.subTitle}>
UF
</Typography>
<Typography color="textSecondary">
{item.school ? item.school.uf : "Sem dados"}
</Typography>
</div>
<div className={classes.displayColumn}>
<Typography color="initial" className={classes.subTitle}>
Munícipo
</Typography>
<Typography color="textSecondary">
{item.school ? item.school.city : "Sem dados"}
</Typography>
</div>
</Grid>
</CardContent>
</Card>
</Grid>
<Grid
item
md={6}
xs={12}
>
<Grid item>
<Card>
<CardContent>
<Typography variant="h5" component="h2">
Informações do perfil
</Typography>
{ComplaintStatus(item.submitter_request)}
<SizedBox />
<Grid container justify="flex-start">
<Grid item>
<div className={classes.displayColumn}>
<Typography color="initial" className={classes.subTitle}>
Descrição
</Typography>
<Typography color="textSecondary">
{item.description}
</Typography>
</div>
</Grid>
<Grid container direction="row" justify="space-between" spacing={1} alignItems="center">
<Grid item>
<div className={classes.displayColumn}>
<Typography color="initial" className={classes.subTitle}>
Criado em
</Typography>
<Typography color="textSecondary">
{DisplayDate(item.created_at)}
</Typography>
</div>
</Grid>
<Grid item>
<div className={classes.displayColumn}>
<Typography color="initial" className={classes.subTitle}>
Atualizado em
</Typography>
<Typography color="textSecondary">
{DisplayDate(item.updated_at)}
</Typography>
</div>
</Grid>
</Grid>
<Grid item>
<div className={classes.displayColumn}>
<Typography color="initial" className={classes.subTitle}>
Permissões
</Typography>
<Grid container direction="row">
{
item.role_ids.map((tag, index) => {
return (
<ChipDiv key={index}>
<Chip label={displayUserRole(tag)} />
</ChipDiv>
)
})
}
</Grid>
</div>
</Grid>
<Grid container direction="row" spacing={1} justify="space-between" alignItems="center">
<Grid item>
<div className={classes.displayColumn}>
<Typography color="initial" className={classes.subTitle}>
Nota
</Typography>
<Typography color="textSecondary">
{item.score}
</Typography>
</div>
</Grid>
<Grid item>
<div className={classes.displayColumn}>
<Typography color="initial" className={classes.subTitle}>
Seguidores
</Typography>
<Typography color="textSecondary">
{item.follows_count}
</Typography>
</div>
</Grid>
<Grid item>
<div className={classes.displayColumn}>
<Typography color="initial" className={classes.subTitle}>
Likes
</Typography>
<Typography color="textSecondary">
{item.likes_count}
</Typography>
</div>
</Grid>
<Grid item>
<div className={classes.displayColumn}>
<Typography color="initial" className={classes.subTitle}>
Objetos educacionais
</Typography>
<Typography color="textSecondary">
{item.learning_objects_count}
</Typography>
</div>
</Grid>
<Grid item>
<div className={classes.displayColumn}>
<Typography color="initial" className={classes.subTitle}>
Coleções
</Typography>
<Typography color="textSecondary">
{item.collections_count}
</Typography>
</div>
</Grid>
</Grid>
<StyledDivider>
</StyledDivider>
<Grid container direction="column">
<Grid item>
<Typography variant="h5" component="h2">
Ações
</Typography>
</Grid>
<SizedBox />
<Grid container direction="row" spacing={1}>
<Grid item>
<Button
variant="contained"
color="secondary"
style={{ width: "100%" }}
disabled={
item.submitter_request === "requested" ? false : true
}
startIcon={
<CloseRoundedIcon style={{ fill: "#FFFAFA" }} />
}
onClick={() => { handleReject(item.id, item.name) }}
>
Recusar
</Button>
</Grid>
<Grid item>
<Button
variant="contained"
color="primary"
style={{ width: "100%" }}
disabled={
item.submitter_request === "requested" ? false : true
}
startIcon={
<CheckRoundedIcon style={{ fill: "#FFFAFA" }} />
}
onClick={() => { handleAprove(item.id, item.name) }}
>
Aceitar
</Button>
</Grid>
</Grid>
</Grid>
</Grid>
</CardContent>
</Card>
</Grid>
</Grid>
</Grid>
);
}
};
export default CollectionCard;
const AvatarDiv = styled.div`
border-radius : 100%;
height : 126px;
width : 126px;
border : 2px solid #d4d4d4;
`
const ChipDiv = styled.div`
margin-right : 0.5em;
margin-bottom : 0.5em;
`
const SizedBox = styled.div`
height : 1em;
`
const StyledDivider = styled.div`
width : 100%;
border-radius : 100%;
margin-bottom : 0.6em;
border : 0.5px solid #d4d4d4;
`
\ No newline at end of file
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