From 2509cdbdb8a2b9e8a24005fbfb856b1cfdbb9c0e Mon Sep 17 00:00:00 2001
From: Luis Felipe Risch <lfr20@inf.ufpr.br>
Date: Wed, 7 Oct 2020 18:34:50 -0300
Subject: [PATCH] Subpages of the admin page
---
src/Admin/Pages/Pages/SubPages/Inframe.js | 40 ++++
.../Pages/Pages/SubPages/Institutions.js | 142 ++++++++++++
.../Pages/Pages/SubPages/NoteVariables.js | 205 ++++++++++++++++++
3 files changed, 387 insertions(+)
create mode 100644 src/Admin/Pages/Pages/SubPages/Inframe.js
create mode 100644 src/Admin/Pages/Pages/SubPages/Institutions.js
create mode 100644 src/Admin/Pages/Pages/SubPages/NoteVariables.js
diff --git a/src/Admin/Pages/Pages/SubPages/Inframe.js b/src/Admin/Pages/Pages/SubPages/Inframe.js
new file mode 100644
index 00000000..cb261c41
--- /dev/null
+++ b/src/Admin/Pages/Pages/SubPages/Inframe.js
@@ -0,0 +1,40 @@
+/*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 from 'react';
+import Welcome from '../../../Components/Components/Welcome';
+
+//This file show the charts
+
+export default class IframeComponent extends React.Component {
+ render() {
+ return (
+ <div>
+ <Welcome/>
+ <div style={{height : '1em'}}></div>
+ <iframe
+ src='https://metabase.c3sl.ufpr.br/public/dashboard/8ada315d-b8df-4b18-b7fb-d06b0ac64623'
+ height='800px'
+ width='100%'
+ // allowTransparency={true}
+ frameBorder={0}
+ />
+ </div>
+ )
+ }
+}
diff --git a/src/Admin/Pages/Pages/SubPages/Institutions.js b/src/Admin/Pages/Pages/SubPages/Institutions.js
new file mode 100644
index 00000000..b220e903
--- /dev/null
+++ b/src/Admin/Pages/Pages/SubPages/Institutions.js
@@ -0,0 +1,142 @@
+/*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 { apiUrl } from '../../../../env';
+import { withStyles } from '@material-ui/core/styles';
+import TableBody from '@material-ui/core/TableBody';
+import TableCell from '@material-ui/core/TableCell';
+import TableRow from '@material-ui/core/TableRow';
+import IconButton from '@material-ui/core/IconButton';
+import VisibilityIcon from '@material-ui/icons/Visibility';
+import TableData from '../../../Components/Components/Table';
+import DataCard from '../../../Components/Components/DataCard';
+
+const StyledTableCell = withStyles((theme) => ({
+ head: {
+ backgroundColor: theme.palette.common.black,
+ color: theme.palette.common.white,
+ },
+ body: {
+ fontSize: 14,
+ },
+}))(TableCell);
+
+const StyledTableRow = withStyles((theme) => ({
+ root: {
+ '&:nth-of-type(odd)': {
+ backgroundColor: theme.palette.action.hover,
+ },
+ },
+}))(TableRow);
+
+
+const Institutions = () => {
+
+ 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 [items, setItems] = useState([]); //Necessary to consult the API, data
+ const productionRoute = 'institutions?filter=%7B%7D&page=0&range=%5B0%2C9%5D&results_per_page=10&sort=%5B"id"%2C"DESC"%5D';
+
+ const [data, setData] = useState([]); // Data that will be used to display the content of the row in full screen, when its clicked
+ const [viewData, setViewData] = useState(false); //Controlls the state, if someone wants to see the data
+
+ useEffect(() => {
+ fetch(apiUrl + '/' + productionRoute)
+ .then(res => res.json())
+ .then(
+ (result) => {
+ setIsLoaded(true);
+ setItems(result);
+ },
+ (error) => {
+ setIsLoaded(true);
+ setError(error);
+ }
+ )
+ }, []);
+
+ if (error) {
+ return <div>Error: {error.message}</div>;
+ } else if (!isLoaded) {
+ return <div>Loading...</div>;
+ } else {
+
+ const topTable = ['ID', 'Nome', 'Descrição', 'Cidade', 'PaÃs', 'Visualizar']
+
+ // i = index of the array of the table
+ const viewDataHandler = (i) => {
+ const item = { ...items[i] };
+ const infoArr = [
+ {
+ subTitle: "ID",
+ prop: item.id,
+ },
+ {
+ subTitle: "Nome",
+ prop: item.name,
+ },
+ {
+ subTitle: "Descrição",
+ prop: item.description,
+ },
+ {
+ subTitle: "Endereço",
+ prop: item.address,
+ },
+ {
+ subTitle: "Cidade",
+ prop: item.city,
+ },
+ {
+ subTitle: "PaÃs",
+ prop: item.country,
+ },
+ ]
+ setData(infoArr);
+ setViewData(!viewData)
+ };
+
+
+ return (
+ !viewData ?
+ <TableData top={topTable}>
+ <TableBody>
+ {items.map((row, index) => (
+ index === 0 ? null :
+ <StyledTableRow key={index}>
+ <StyledTableCell component="th" scope="row">{row.id}</StyledTableCell>
+ <StyledTableCell align="right">{row.name}</StyledTableCell>
+ <StyledTableCell align="right">{row.description}</StyledTableCell>
+ <StyledTableCell align="right">{row.city}</StyledTableCell>
+ <StyledTableCell align="right">{row.country}</StyledTableCell>
+ <StyledTableCell align="right">
+ <IconButton onClick={() => viewDataHandler(index)}>
+ <VisibilityIcon style={{ fill: '#8A2BE2' }} />
+ </IconButton>
+ </StyledTableCell>
+ </StyledTableRow>
+ ))}
+ </TableBody>
+ </TableData> :
+ <DataCard data={data} viewData={() => setViewData(!viewData)}/>
+ );
+ }
+}
+
+export default Institutions;
\ No newline at end of file
diff --git a/src/Admin/Pages/Pages/SubPages/NoteVariables.js b/src/Admin/Pages/Pages/SubPages/NoteVariables.js
new file mode 100644
index 00000000..f8d67133
--- /dev/null
+++ b/src/Admin/Pages/Pages/SubPages/NoteVariables.js
@@ -0,0 +1,205 @@
+/*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, useState } from 'react';
+import { withStyles, makeStyles } from '@material-ui/core/styles';
+import TableBody from '@material-ui/core/TableBody';
+import TableCell from '@material-ui/core/TableCell';
+import TableRow from '@material-ui/core/TableRow';
+import CheckRoundedIcon from "@material-ui/icons/CheckRounded";
+import BlockRoundedIcon from "@material-ui/icons/BlockRounded";
+import IconButton from '@material-ui/core/IconButton';
+import VisibilityIcon from '@material-ui/icons/Visibility';
+import { apiUrl } from '../../../../env';
+import DataCard from '../../../Components/Components/DataCard';
+import TableData from '../../../Components/Components/Table';
+
+const StyledTableCell = withStyles((theme) => ({
+ head: {
+ backgroundColor: theme.palette.common.black,
+ color: theme.palette.common.white,
+ },
+ body: {
+ fontSize: 14,
+ },
+}))(TableCell);
+
+const StyledTableRow = withStyles((theme) => ({
+ root: {
+ '&:nth-of-type(odd)': {
+ backgroundColor: theme.palette.action.hover,
+ },
+ },
+}))(TableRow);
+
+//Function that returns an object with the content of the api
+function createData(id, name, code, weight, active, scoreType, createdAt, updateAt) {
+ return { id, name, code, weight, active, scoreType, createdAt, updateAt };
+}
+
+const useStyles = makeStyles({
+ table: {
+ minWidth: 700,
+ },
+ root: {
+ minWidth: 275,
+ boxShadow: '2px 2px 1px #A9A9A9'
+ },
+ title: {
+ fontSize: 28,
+ fontWeight: "500"
+ },
+ pos: {
+ marginBottom: 12,
+ },
+});
+
+
+const NoteVariables = () => {
+ 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 [items, setItems] = useState([]); //Necessary to consult the API, data
+ const [itemsSecondPage, setItemSecondPage] = useState([]); //Necessary to consult the API, data
+
+ const [data, setData] = useState({}); // Data that will be used to display the content of the row in full screen, when its clicked
+ const [viewData, setViewData] = useState(false); //Controlls the state, if someone wants to see the data
+
+ const productionRoute = 'scores?filter=%7B%7D&page=0&range=%5B0%2C9%5D&results_per_page=10&sort=%5B"id"%2C"DESC"%5D';
+ const productinRouteSecondPage = 'scores?filter=%7B%7D&page=1&range=%5B10%2C19%5D&results_per_page=10&sort=%5B"id"%2C"DESC"%5D';
+
+ useEffect(() => {
+ fetch(apiUrl + '/' + productionRoute)
+ .then(res => res.json())
+ .then(
+ (result) => {
+ setIsLoaded(true);
+ setItems(result);
+ },
+ (error) => {
+ setIsLoaded(true);
+ setError(error);
+ }
+ )
+ }, []);
+
+ useEffect(() => {
+ fetch(apiUrl + '/' + productinRouteSecondPage)
+ .then(res => res.json())
+ .then(
+ (result) => {
+ setIsLoaded(true);
+ setItemSecondPage(result);
+ },
+ (error) => {
+ setIsLoaded(true);
+ setError(error);
+ }
+ )
+ }, [])
+
+
+ if (error) {
+ return <div>Error: {error.message}</div>;
+ } else if (!isLoaded) {
+ return <div>Loading...</div>;
+ } else {
+
+ // Begin of the processing data
+ const rows = []; // Rows of the table
+ for (var i = 0; i < items.length; i++) {
+ const item = { ...items[i] };
+ rows.push(createData(item.id, item.name, item.code, item.weight, item.active, item.score_type[0], item.created_at, item.updated_at))
+ }
+
+ for (i = 0; i < itemsSecondPage.length; i++) {
+ const item = { ...itemsSecondPage[i] };
+ rows.push(createData(item.id, item.name, item.code, item.weight, item.active, item.score_type[0], item.created_at, item.updated_at))
+ }
+ // End of processing data
+
+ // i = index of the array of the table
+ const viewDataHandler = (i) => {
+ const item = { ...rows[i] };
+ const infoArr = [
+ {
+ subTitle: "ID",
+ prop: item.id,
+ },
+ {
+ subTitle: "Nome",
+ prop: item.name,
+ },
+ {
+ subTitle: "Código",
+ prop: item.code,
+ },
+ {
+ subTitle: "Peso",
+ prop: item.weight,
+ },
+ {
+ subTitle: "Criação",
+ prop: item.createdAt,
+ },
+ {
+ subTitle: "Atualizado",
+ prop: item.updateAt,
+ },
+ ]
+ setData(infoArr);
+ setViewData(!viewData)
+ };
+
+ //Words in the top part of the table
+ const topTable = ['ID', 'Name', 'Código', 'Peso', 'Ativo', 'Score Type', 'Visualizar'];
+
+ return (
+ !viewData ?
+ <TableData top={topTable}>
+ <TableBody>
+ {rows.map((row, index) => (
+ <StyledTableRow key={index}>
+ <StyledTableCell component="th" scope="row">{row.id}</StyledTableCell>
+ <StyledTableCell align="right">{row.name}</StyledTableCell>
+ <StyledTableCell align="right">{row.code}</StyledTableCell>
+ <StyledTableCell align="right">{row.weight}</StyledTableCell>
+ <StyledTableCell align="right">
+ {
+ row.active ? <CheckRoundedIcon style={{ fill: '#3CB371' }} /> : <BlockRoundedIcon style={{ fill: '#FA8072' }} />
+ }
+ </StyledTableCell>
+ <StyledTableCell align="right">{row.scoreType}</StyledTableCell>
+ <StyledTableCell align="right">
+ <IconButton onClick={() => viewDataHandler(index)}>
+ <VisibilityIcon style={{ fill: '#8A2BE2' }} />
+ </IconButton>
+ </StyledTableCell>
+ </StyledTableRow>
+ ))}
+ </TableBody>
+ </TableData>
+ :
+
+ // When the user wanna see the data of a row in full screen
+ <DataCard data={data} viewData={() => setViewData(!viewData)}/>
+ )
+ }
+}
+
+
+export default NoteVariables;
\ No newline at end of file
--
GitLab