From 2be6ecaee36bfa1c165452ea74f012cfaef9b4f5 Mon Sep 17 00:00:00 2001
From: Luis Felipe Risch <lfr20@inf.ufpr.br>
Date: Wed, 30 Sep 2020 12:31:01 -0300
Subject: [PATCH] Page of the admin. It contains the Drawer, DisplayContent and
DisplayIcon
---
src/Admin/Pages/Pages/Admin.js | 115 +++++++++++++++++++++++++++++++++
1 file changed, 115 insertions(+)
create mode 100644 src/Admin/Pages/Pages/Admin.js
diff --git a/src/Admin/Pages/Pages/Admin.js b/src/Admin/Pages/Pages/Admin.js
new file mode 100644
index 00000000..477b319d
--- /dev/null
+++ b/src/Admin/Pages/Pages/Admin.js
@@ -0,0 +1,115 @@
+/*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 } from 'react';
+import clsx from 'clsx';
+import { makeStyles } from '@material-ui/core/styles';
+import Drawer from '@material-ui/core/Drawer';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import IconButton from '@material-ui/core/IconButton';
+import DisplayIcon from '../../Components/Components/DisplayIcon';
+import ListItemText from '@material-ui/core/ListItemText';
+import MenuIcon from '@material-ui/icons/Menu';
+import Fab from '@material-ui/core/Fab';
+import { TabsItens } from '../AdminLabelTabs/LabelTabs';
+import DisplayContent from '../../Components/Components/DisplayContent';
+
+const useStyles = makeStyles({
+ list: {
+ width: 250,
+ },
+ fullList: {
+ width: 'auto',
+ },
+});
+
+const fab = {
+ margin: 0,
+ top: 'auto',
+ right: 20,
+ bottom: 20,
+ left: 'auto',
+ position: 'fixed',
+}
+
+
+export default function Admin() {
+ const classes = useStyles();
+ const [state, setState] = React.useState({
+ left: false
+ });
+ const [IndexIcon, setIndexIcon] = useState(0);
+
+ {/**************** Controlls the state of the Drawer ****************/}
+ const toggleDrawer = (anchor, open) => (event) => {
+ if (event.type === 'keydown' && (event.key === 'Tab' || event.key === 'Shift')) {
+ return;
+ }
+
+ setState({ ...state, [anchor]: open });
+ };
+
+ {/**************** Dsiplay the itens of the Drawer ****************/}
+ const list = (anchor) => (
+ <div
+ className={clsx(classes.list, {
+ [classes.fullList]: anchor === 'top' || anchor === 'bottom',
+ })}
+ role="presentation"
+ onClick={toggleDrawer(anchor, false)}
+ onKeyDown={toggleDrawer(anchor, false)}
+ >
+ <List>
+ {TabsItens.map((text, index) => (
+ <ListItem button key={text.label} onClick={() => setIndexIcon(index)}>
+ <IconButton>
+ <DisplayIcon label={text.label} />
+ </IconButton>
+ <ListItemText primary={text.label} />
+ </ListItem>
+ ))}
+ </List>
+ </div>
+ );
+
+ return (
+ <div>
+ {/**************** Begin of the Drawer ****************/}
+ {['left'].map((anchor) => (
+ <React.Fragment key={anchor}>
+ <Drawer anchor={anchor} open={state[anchor]} onClose={toggleDrawer(anchor, false)}>
+ {list(anchor)}
+ </Drawer>
+ </React.Fragment>
+ ))}
+ {/**************** End of the Drawer****************/}
+
+ {/**************** Begin of the Content ****************/}
+ <div style={{ paddingTop: '2em', paddingLeft: '2em', paddingRight: '2em', paddingBottom: '2em', backgroundColor: ' #D3D3D3' }}>
+ <DisplayContent selectedIcon={IndexIcon} />
+ </div>
+ {/**************** End of the Content ****************/}
+
+ {/**************** FLoating action Button ****************/}
+ <Fab color="primary" aria-label="add" style={fab} onClick={toggleDrawer('left', true)}>
+ <MenuIcon />
+ </Fab>
+ </div>
+ );
+}
--
GitLab