diff --git a/src/Components/AchievementDescriptionCard.js b/src/Components/AchievementDescriptionCard.js
index 3af102fe901acb8f237a4ba1d1637caaf30c97fd..e89adcd1ec7c9b9a475c85ec2b8ec57bc953608f 100644
--- a/src/Components/AchievementDescriptionCard.js
+++ b/src/Components/AchievementDescriptionCard.js
@@ -1,40 +1,221 @@
-import React from 'react'
-import styled from 'styled-components'
-import { Container } from 'react-grid-system'
-import Paper from '@material-ui/core/Paper';
-import { Grid } from '@material-ui/core'
-import RequirementDialog from './RequirementsDialog.js';
-
-export default function AchievementDescriptionCard(props) {
+/*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, { useEffect } from 'react';
+import { makeStyles, useTheme } from '@material-ui/core/styles';
+import clsx from 'clsx';
+import Card from '@material-ui/core/Card';
+import CardHeader from '@material-ui/core/CardHeader';
+import CardContent from '@material-ui/core/CardContent';
+import CardActions from '@material-ui/core/CardActions';
+import Collapse from '@material-ui/core/Collapse';
+import Avatar from '@material-ui/core/Avatar';
+import IconButton from '@material-ui/core/IconButton';
+import Typography from '@material-ui/core/Typography';
+import { red } from '@material-ui/core/colors';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemText from '@material-ui/core/ListItemText';
+import PropTypes from 'prop-types';
+import CircularProgress from '@material-ui/core/CircularProgress';
+import Box from '@material-ui/core/Box';
+import styled from "styled-components";
+import { ListItemAvatar, Button } from '@material-ui/core';
+import Tooltip from '@material-ui/core/Tooltip';
+import Badge from '@material-ui/core/Badge';
+
+
+const useStyles = makeStyles((theme) => ({
+ root: {
+ maxWidth: 345,
+ },
+ media: {
+ height: 0,
+ paddingTop: '56.25%', // 16:9
+ },
+ expand: {
+ transform: 'rotate(0deg)',
+ marginLeft: 'auto',
+ transition: theme.transitions.create('transform', {
+ duration: theme.transitions.duration.shortest,
+ }),
+ },
+ expandOpen: {
+ transform: 'rotate(180deg)',
+ },
+ avatar: {
+ backgroundColor: red[500],
+ },
+}));
+
+export default function BadgeCard(props) {
+ const classes = useStyles();
+
+ const [invisibleBadge, setInvisibleBadge] = React.useState(true);
+ const [disabledButton, setDisabledButton] = React.useState(true);
+ const [expanded, setExpanded] = React.useState(false);
+
+ const handleExpandClick = () => {
+ setExpanded(!expanded);
+ setInvisibleBadge(true);
+ };
+
+ const handleInvisibleBadge = () => {
+ setInvisibleBadge(false);
+ }
+
+ function CircularProgressWithLabel(props) {
+ return (
+ <Box position="relative" display="inline-flex">
+ <CircularProgress variant="determinate" {...props} />
+ <Box
+ top={0}
+ left={0}
+ bottom={0}
+ right={0}
+ position="absolute"
+ display="flex"
+ alignItems="center"
+ justifyContent="center"
+ >
+ <Typography variant="caption" component="div" color="textSecondary">{`${Math.round(
+ props.value,
+ )}%`}</Typography>
+ </Box>
+ </Box>
+ );
+ }
+
+ CircularProgressWithLabel.propTypes = {
+ /**
+ * The value of the progress indicator for the determinate variant.
+ * Value between 0 and 100.
+ */
+ value: PropTypes.number.isRequired,
+ };
+
+ const Progress = (steps, currStep) => {
+ return (currStep / steps) * 100
+ }
+
+ const Color = (steps, currStep) => {
+ const progress = (currStep / steps) * 100;
+
+ if (progress === 100)
+ return "#28B463";
+ else if (progress < 30)
+ return "#CB4335";
+ return "#2874A6";
+ }
+
+ const ChecKIfUserCanCollect = (requirements) => {
+ let canCollect = true;
+ let counter = 0;
+
+ while (canCollect && counter < requirements.length) {
+ let necessarySteps = requirements[counter].steps;
+ let currSteps = requirements[counter].currStep;
+
+ if (currSteps !== necessarySteps)
+ canCollect = false;
+
+ counter++;
+ }
+
+ if(canCollect){
+ setDisabledButton(false);
+ setInvisibleBadge(false);
+ }
+
+ }
+
+ useEffect(() => {
+ ChecKIfUserCanCollect(props.requirements)
+
+ }, [])
+
return (
- <Paper elevation={3}>
- <Grid container direction="row" justify="space-around" alignItems="center">
- <Grid item xs={3}>
- <AchievementImg src={props.src}/>
- </Grid>
- <Grid item xs={7}>
- <AchievementTitle>{props.title}</AchievementTitle>
- <AchievementDescription>{props.description}</AchievementDescription>
- <RequirementDialog
- title={props.title}
- description={props.description}
- requirements={props.requirements}
- />
- </Grid>
- </Grid>
- </Paper>
- );
-}
+ <Card className={classes.root}>
+ <CardHeader
+ avatar={
+ <Avatar src={props.src} />
+ }
+ title={props.name}
+ action={
+ <IconButton
+ className={clsx(classes.expand, {
+ [classes.expandOpen]: expanded,
+ })}
+ onClick={handleExpandClick}
+ aria-expanded={expanded}
+ aria-label="show more"
+ >
+ <Badge color="secondary" variant="dot" invisible={invisibleBadge}>
+ <ExpandMoreIcon />
+ </Badge>
+ </IconButton>
-const AchievementImg = styled.img`
- border-radius: 100px;
- width: 100px;
- height: 100px;
- margin: 30px;
-`
-const AchievementTitle = styled.h2`
-`
+ }
+ />
+ <Collapse in={expanded} timeout="auto" unmountOnExit>
+ <CardContent>
+ <div>
+ <Typography variant="h6" color="textPrimary" component="p">
+ Descrição
+ </Typography>
+ <Typography variant="body2" color="textSecondary" component="p">
+ {props.description}
+ </Typography>
+ </div>
-const AchievementDescription = styled.p`
-`
+ <div style={{ marginTop: "8px" }}>
+ <Typography variant="h6" color="textPrimary" component="p">
+ Requisitos
+ </Typography>
+ <List component="nav" aria-label="mailbox folders">
+ {
+ props.requirements.map((req, index) => {
+ return (
+ <ListItem divider key={index}>
+ <Tooltip arrow title={`${req.currStep} / ${req.steps}`}>
+ <ListItemAvatar>
+ <CircularProgressWithLabel value={Progress(req.steps, req.currStep)} style={{ color: Color(req.steps, req.currStep) }} />
+ </ListItemAvatar>
+ </Tooltip>
+ <ListItemText primary={req.name} secondary={req.description} />
+ </ListItem>
+ )
+ })
+ }
+ </List>
+ </div>
+ </CardContent>
+ <CardActions disableSpacing>
+ <Button
+ variant="contained"
+ color="primary"
+ disabled={disabledButton}
+ >
+ Coletar
+ </Button>
+ </CardActions>
+ </Collapse>
+ </Card>
+ );
+}