Subpages of the admin page

src/Admin/Pages/Pages/SubPages/Inframe.js

+/*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>
+        )
+    }
+}

src/Admin/Pages/Pages/SubPages/Institutions.js

+/*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

src/Admin/Pages/Pages/SubPages/NoteVariables.js

+/*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