diff --git a/src/Admin/Components/Components/DataCards/ActivityCard.js b/src/Admin/Components/Components/DataCards/ActivityCard.js
new file mode 100644
index 0000000000000000000000000000000000000000..dc6e775c6740fed497a16c859d2f4dada4fd7d2c
--- /dev/null
+++ b/src/Admin/Components/Components/DataCards/ActivityCard.js
@@ -0,0 +1,141 @@
+/*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";
+// 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 ListRoundedIcon from "@material-ui/icons/ListRounded";
+import ButtonGroup from "@material-ui/core/ButtonGroup";
+import { useStyles } from "../../Styles/DataCard";
+//imports from local files
+import { GetAData } from "../../../Filters";
+import { GetSpecificData } from '../../../Services';
+import { Link } from 'react-router-dom'
+
+const ActivityCard = ({ match }) => {
+ console.log(match);
+ const classes = useStyles();
+
+ 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({}); //Necessary to consult the API, data
+
+ //getting data from server
+ useEffect(() => {
+ const headers = {
+ Accept: "application/json",
+ "Content-Type": "application/json; charset=utf-8",
+ "access-token": sessionStorage.getItem("@portalmec/accessToken"),
+ client: sessionStorage.getItem("@portalmec/clientToken"),
+ uid: sessionStorage.getItem("@portalmec/uid"),
+ };
+
+ GetSpecificData(GetAData("activities", match.params.id), headers).then(
+ (res) => {
+ if (res.state) {
+ setItem(res.data);
+ setIsLoaded(true);
+ setError(false);
+ } else {
+ setIsLoaded(true);
+ setError(true);
+ }
+ }
+ );
+ }, []);
+
+ if (error) {
+ return <div>Houve um erro</div>;
+ } else if (!isLoaded) {
+ return <div>Loading...</div>;
+ } else {
+ console.log(item)
+ const DATA = [
+ {
+ subTitle: "ID",
+ prop: item.id,
+ },
+ {
+ subTitle: "DONO(A)",
+ prop: item.owner === null ? '' : item.owner.name
+ },
+ {
+ subTitle: "Trackable type",
+ prop: item["trackable_type"],
+ },
+ {
+ subTitle: "Atividade",
+ prop: item.activity,
+ },
+ {
+ subTitle: "Privacidade",
+ prop: item.privacy,
+ },
+ {
+ subTitle: "Criado em",
+ prop: item["created_at"],
+ },
+ {
+ subTitle: "Recipient type",
+ prop: item["recipient_type"],
+ },
+
+ ];
+
+ return (
+ <Card className={classes.root} variant="outlined">
+ <CardContent>
+ <div className={classes.displayRow}>
+ <Typography className={classes.title} color="inherit" gutterBottom>
+ {item.id}
+ </Typography>
+ <ButtonGroup
+ color="primary"
+ aria-label="outlined primary button group"
+ >
+ <Link to={`/admin/activities`}>
+ <Button
+ startIcon={<ListRoundedIcon />}
+ color="primary"
+ variant="outlined"
+ >
+ Listar
+ </Button>
+ </Link>
+ </ButtonGroup>
+ </div>
+ {DATA.map((info, index) => (
+ <div className={classes.displayColumn} key={index}>
+ <Typography color="initial" className={classes.subTitle}>
+ {info.subTitle}
+ </Typography>
+ <Typography color="textSecondary">
+ {info.prop === null ? "Sem dados" : info.prop}
+ </Typography>
+ </div>
+ ))}
+ </CardContent>
+ </Card>
+ );
+ }
+};
+
+export default ActivityCard;
diff --git a/src/Admin/Pages/Pages/SubPages/Activity.js b/src/Admin/Pages/Pages/SubPages/Activity.js
index a4d5149e9d274af05134fffdb7e2192310dd556c..181ac4b4f1e840cedb0a1d1053b6d25b5d67dcff 100644
--- a/src/Admin/Pages/Pages/SubPages/Activity.js
+++ b/src/Admin/Pages/Pages/SubPages/Activity.js
@@ -37,6 +37,8 @@ import AddRoundedIcon from "@material-ui/icons/AddRounded";
import UpdateRoundedIcon from "@material-ui/icons/UpdateRounded";
import FilterListRoundedIcon from "@material-ui/icons/FilterListRounded";
import VisibilityIcon from "@material-ui/icons/Visibility";
+//routers
+import {Link} from 'react-router-dom';
let currPage = 0;
let viewItem = {};
@@ -240,6 +242,7 @@ const Activity = () => {
} else if (!isLoaded) {
return <div>Loading...</div>;
} else {
+
return showDataActivity ? (
<EditLanguage
editInfo={viewItem}
@@ -344,7 +347,7 @@ const Activity = () => {
<TableBody>
{items.map((row, index) =>
index === items.length - 1 ? (
- <div style={{ padding: "1em" }}>
+ <StyledTableRow style={{ padding: "1em" }}>
{/* Button to load more data */}
<Button
color="primary"
@@ -371,7 +374,7 @@ const Activity = () => {
"Carregar mais itens"
)}
</Button>
- </div>
+ </StyledTableRow>
) : (
<StyledTableRow key={index}>
<StyledTableCell component="th" scope="row">
@@ -379,7 +382,7 @@ const Activity = () => {
</StyledTableCell>
<StyledTableCell align="right">
{
- row.owner.name === null ? '' : row.owner.name
+ row.owner === null ? '' : row.owner.name
}
</StyledTableCell>
<StyledTableCell align="right">
@@ -387,14 +390,11 @@ const Activity = () => {
</StyledTableCell>
<StyledTableCell align="right">{row.privacy}</StyledTableCell>
<StyledTableCell align="right">
- <IconButton
- onClick={() => {
- currPage = 0;
- HandleButtonViewClicked(index);
- }}
- >
- <VisibilityIcon style={{ fill: "#00bcd4" }} />
- </IconButton>
+ <Link to={`/admin/activity/${row.id}`}>
+ <IconButton>
+ <VisibilityIcon style={{ fill: "#00bcd4" }} />
+ </IconButton>
+ </Link>
</StyledTableCell>
</StyledTableRow>
)