From 67502ce333427cdbc3d2efd4fecc42ef1799a85d Mon Sep 17 00:00:00 2001
From: Luis Felipe Risch <lfr20@inf.ufpr.br>
Date: Mon, 15 Mar 2021 12:08:01 -0300
Subject: [PATCH] Add tab to admin
---
src/Components/MenuBar.js | 112 ++++++++++-------
src/Components/MobileDrawerMenu.js | 186 ++++++++++++++++-------------
2 files changed, 171 insertions(+), 127 deletions(-)
diff --git a/src/Components/MenuBar.js b/src/Components/MenuBar.js
index dd911f2b..21cc08c7 100644
--- a/src/Components/MenuBar.js
+++ b/src/Components/MenuBar.js
@@ -16,7 +16,7 @@ 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, {useContext} from 'react';
+import React, { useContext } from 'react';
import { Link } from 'react-router-dom'
import { Container } from 'react-grid-system'
import logo from '../img/logo_small.svg'
@@ -80,7 +80,7 @@ const Right = styled.span`
margin-right : 10px;
`
-const Left = styled.span `
+const Left = styled.span`
width: 100%;
display: inline-flex;
align-items: center;
@@ -96,10 +96,39 @@ export const ButtonPubRecursoStyled = styled(Button)`
`
-export default function MenuBar(props){
+export default function MenuBar(props) {
const { state } = useContext(Store)
+ const buildMyAreaTabs = () => {
+ let canUserAdmin = false;
+ let index = 0;
+ const userRoles = [...state.currentUser.roles]
+ const minhaArea = [
+ { name: "Perfil e Atividades", href: "/perfil", value: '0' },
+ { name: "Recursos Publicados", href: "/perfil", value: '1' },
+ { name: "Favoritos", href: "/perfil", value: '2' },
+ { name: "Coleções", href: "/perfil", value: '3' },
+ { name: "Rede", href: "/perfil", value: '4' },
+ { name: "Configurações", href: "/editarperfil", value: '5'},
+ ]
+
+ while (!canUserAdmin && index < userRoles.length) {
+ if(userRoles[index].id === 3 || userRoles[index].id === 7)
+ canUserAdmin = true
+ index++
+ }
+
+ if(canUserAdmin)
+ minhaArea.push({
+ name: "Administrador",
+ href: "/admin/home",
+ value: '6',
+ })
+
+ return minhaArea;
+ }
+
const menuSobre = [
{ name: "Sobre a Plataforma", href: "sobre" },
{ name: "Portais Parceiros", href: "sobre#portaisparceiros" },
@@ -108,72 +137,65 @@ export default function MenuBar(props){
]
const menuAjuda = [
- { name: "Central de Ajuda", href: "ajuda"},
- { name: "Publicando Recursos", href: "publicando-recurso"},
- { name: "Encontrando Recursos", href: "encontrando-recurso"},
- { name: "Participando da Rede", href: "participando-da-rede"},
- { name: "Gerenciando a Conta", href: "gerenciando-conta"}
+ { name: "Central de Ajuda", href: "ajuda" },
+ { name: "Publicando Recursos", href: "publicando-recurso" },
+ { name: "Encontrando Recursos", href: "encontrando-recurso" },
+ { name: "Participando da Rede", href: "participando-da-rede" },
+ { name: "Gerenciando a Conta", href: "gerenciando-conta" }
]
- const minhaArea = [
- { name: "Perfil e Atividades", href: "/perfil", value : '0'},
- { name: "Recursos Publicados", href: "/perfil", value : '1'},
- { name: "Favoritos", href: "/perfil", value : '2'},
- { name: "Coleções", href: "/perfil", value : '3'},
- { name: "Rede", href: "/perfil", value : '4'},
- { name: "Configurações", href: "/editarperfil"},
- ]
+ const minhaArea = buildMyAreaTabs()
- return(
+ return (
<ContainerStyled fluid={true} >
<Left>
<Link to="/"> <ImageStyled src={logo} alt="Plataforma Integrada" /> </Link>
- <Dropdown name="Sobre" items={menuSobre}/>
- <Dropdown name="Ajuda" items={menuAjuda}/>
+ <Dropdown name="Sobre" items={menuSobre} />
+ <Dropdown name="Ajuda" items={menuAjuda} />
<a href="http://educacaoconectada.mec.gov.br/" rel="noopener noreferrer" target="_blank" >
- <ButtonStyled >Educação Conectada</ButtonStyled>
+ <ButtonStyled >Educação Conectada</ButtonStyled>
</a>
{/*<Link to="/loja">
<ButtonStyled>Lojinha</ButtonStyled>
</Link>*/}
<ButtonStyled onClick={props.openSearchBar} ><IconSearchStyled />Buscar</ButtonStyled>
-
- </Left>
- <Right>
+
+ </Left>
+ <Right>
{
- state.userIsLoggedIn
+ state.userIsLoggedIn
? (
- <>
- <div style={{boxSizing:"border-box"}}>
- <Link to="/termos-publicar-recurso">
- <ButtonPublicarRecurso>
- <CloudUploadIcon style={{color:"white", marginLeft : "0"}}/>
- <span style={{color : "#fff", textAlign: "center", alignSelf : "center", fontWeight:"500"}} >
- PUBLICAR RECURSO
+ <>
+ <div style={{ boxSizing: "border-box" }}>
+ <Link to="/termos-publicar-recurso">
+ <ButtonPublicarRecurso>
+ <CloudUploadIcon style={{ color: "white", marginLeft: "0" }} />
+ <span style={{ color: "#fff", textAlign: "center", alignSelf: "center", fontWeight: "500" }} >
+ PUBLICAR RECURSO
</span>
- </ButtonPublicarRecurso>
- </Link>
- </div>
+ </ButtonPublicarRecurso>
+ </Link>
+ </div>
- <div>
- <Notifications/>
- </div>
+ <div>
+ <Notifications />
+ </div>
- <MenuList items={minhaArea}/>
+ <MenuList items={minhaArea} />
- </>
+ </>
)
: (
- <React.Fragment>
- <ButtonPubRecursoStyled onClick={props.openLogin}>PUBLICAR RECURSO?</ButtonPubRecursoStyled>
- <ButtonStyled onClick={props.openLogin}><ExitToAppIcon style={{color:"#00bcd4"}}/>Entrar</ButtonStyled>
- <ButtonStyled onClick={props.openSignUp}>Cadastre-se</ButtonStyled>
- </React.Fragment>
+ <React.Fragment>
+ <ButtonPubRecursoStyled onClick={props.openLogin}>PUBLICAR RECURSO?</ButtonPubRecursoStyled>
+ <ButtonStyled onClick={props.openLogin}><ExitToAppIcon style={{ color: "#00bcd4" }} />Entrar</ButtonStyled>
+ <ButtonStyled onClick={props.openSignUp}>Cadastre-se</ButtonStyled>
+ </React.Fragment>
)
}
- </Right>
+ </Right>
</ContainerStyled>
);
}
diff --git a/src/Components/MobileDrawerMenu.js b/src/Components/MobileDrawerMenu.js
index 01ca7521..59a723e9 100644
--- a/src/Components/MobileDrawerMenu.js
+++ b/src/Components/MobileDrawerMenu.js
@@ -16,17 +16,17 @@ 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, {useContext} from 'react'
+import React, { useContext } from 'react'
import { Store } from '../Store';
import Drawer from '@material-ui/core/Drawer';
import styled from 'styled-components'
-import {Link} from 'react-router-dom'
+import { Link } from 'react-router-dom'
import HomeIcon from '@material-ui/icons/Home';
import InfoIcon from '@material-ui/icons/Info';
import MailOutlineIcon from '@material-ui/icons/MailOutline';
import HelpOutlineIcon from '@material-ui/icons/HelpOutline';
import AssignmentIcon from '@material-ui/icons/Assignment';
-import {ButtonStyled} from './MenuBar'
+import { ButtonStyled } from './MenuBar'
import ExitToAppIcon from '@material-ui/icons/ExitToApp'
import { Button } from '@material-ui/core';
import DefaultAvatar from '../img/default_profile0.png'
@@ -36,20 +36,49 @@ import HistoryIcon from '@material-ui/icons/History';
import FavoriteBorderIcon from '@material-ui/icons/FavoriteBorder';
import FolderOpenIcon from '@material-ui/icons/FolderOpen';
import SettingsIcon from '@material-ui/icons/Settings';
-import {apiDomain} from '../env.js'
-import {deleteRequest} from './HelperFunctions/getAxiosConfig'
+import { apiDomain } from '../env.js'
+import { deleteRequest } from './HelperFunctions/getAxiosConfig'
import SearchIcon from '@material-ui/icons/Search';
-export default function MobileDrawerMenu (props) {
- const {state, dispatch} = useContext(Store)
+export default function MobileDrawerMenu(props) {
+ const { state, dispatch } = useContext(Store)
+
+ const buildMyAreaTabs = () => {
+ let canUserAdmin = false;
+ let index = 0;
+ const userRoles = [...state.currentUser.roles]
+ const minhaArea = [
+ { name: "Perfil e Atividades", href: "/perfil", value: '0' },
+ { name: "Recursos Publicados", href: "/perfil", value: '1' },
+ { name: "Favoritos", href: "/perfil", value: '2' },
+ { name: "Coleções", href: "/perfil", value: '3' },
+ { name: "Rede", href: "/perfil", value: '4' },
+ { name: "Configurações", href: "/editarperfil", value: '5' },
+ ]
+
+ while (!canUserAdmin && index < userRoles.length) {
+ if (userRoles[index].id === 3 || userRoles[index].id === 7)
+ canUserAdmin = true
+ index++
+ }
+
+ if (canUserAdmin)
+ minhaArea.push({
+ name: "Administrador",
+ href: "/admin/home",
+ value: '6',
+ })
+
+ return minhaArea;
+ }
const menuSobre = [
- { name : "Página Inicial", href : "/", icon : <HomeIcon/>},
- { name : "Sobre a Plataforma", href : "sobre", icon : <InfoIcon/>},
- { name : "Contato", href : "contato", icon : <MailOutlineIcon/>},
- { name : "Central de Ajuda", href : "ajuda", icon : <HelpOutlineIcon/>},
- { name : "Termos de Uso", href : "termos", icon : <AssignmentIcon/>},
- { name : "Busca", href : `busca?query=${state.search.query}&search_class=${state.search.class}`, icon : <SearchIcon/> }
+ { name: "Página Inicial", href: "/", icon: <HomeIcon /> },
+ { name: "Sobre a Plataforma", href: "sobre", icon: <InfoIcon /> },
+ { name: "Contato", href: "contato", icon: <MailOutlineIcon /> },
+ { name: "Central de Ajuda", href: "ajuda", icon: <HelpOutlineIcon /> },
+ { name: "Termos de Uso", href: "termos", icon: <AssignmentIcon /> },
+ { name: "Busca", href: `busca?query=${state.search.query}&search_class=${state.search.class}`, icon: <SearchIcon /> }
]
// {/*used in dynamic css selection*/}
@@ -58,7 +87,7 @@ export default function MobileDrawerMenu (props) {
setSelectedIndex(index);
};
- const getUserAvatar = () => {
+ const getUserAvatar = () => {
if (state.currentUser.avatar === '' || state.currentUser.avatar == null) {
return DefaultAvatar
}
@@ -68,109 +97,102 @@ export default function MobileDrawerMenu (props) {
}
// {/*main user actions array */}
- const minhaArea = [
- { name: "Publicar Recurso", href: "/termos-publicar-recurso", icon : <CloudUploadIcon/>},
- { name: "Recursos Publicados", href: "/perfil", icon : <CloudDoneIcon/>, value : '1'},
- { name: "Perfil e Atividades", href: "/perfil", icon : <HistoryIcon/>, value : '0'},
- { name: "Favoritos", href: "/perfil", icon : <FavoriteBorderIcon/>, value : '2'},
- { name: "Coleções", href: "/perfil", icon : <FolderOpenIcon/>, value : '3'},
- ]
-
+ const minhaArea = buildMyAreaTabs()
- function handleSuccessSignOut (data) {
- dispatch( {
+ function handleSuccessSignOut(data) {
+ dispatch({
type: 'USER_LOGGED_OUT',
userLoggedOut: !state.userIsLoggedIn,
})
}
const handleLogout = () => {
const url = `/auth/sign_out`
- deleteRequest(url, handleSuccessSignOut, (error) => {console.log(error)})
+ deleteRequest(url, handleSuccessSignOut, (error) => { console.log(error) })
}
return (
<StyledDrawer anchor={props.anchor} open={props.open} onClose={props.onClose}>
<MenuBody>
- {/*Renders menuSobre array options*/}
+ {/*Renders menuSobre array options*/}
{
- menuSobre.map( (item, index) =>
+ menuSobre.map((item, index) =>
<Link to={item.href} className={`menu-buttons ${selectedIndex === index ? 'selected' : ''}`} onClick={(event) => handleMenuItemClick(event, index)}>
- {item.icon}
- {item.name}
+ {item.icon}
+ {item.name}
</Link>
)
}
</MenuBody>
- <div style={{borderTop : "1px solid #e5e5e5", borderBottom : "1px solid #e5e5e5", marginTop : "10px", paddingTop : "10px", marginBottom : "10px"}}>
- {
- /*If user is logged in, render user actions menu; else render log in/sign in buttons*/
- state.userIsLoggedIn ?
- (
- <div style={{display : "flex", flexDirection : "column", color : "#666", paddingBottom : "10px"}}>
- <MyArea>
- <div className="user-avatar">
- <img alt="user-avatar"
- src={getUserAvatar()}
- />
+ <div style={{ borderTop: "1px solid #e5e5e5", borderBottom: "1px solid #e5e5e5", marginTop: "10px", paddingTop: "10px", marginBottom: "10px" }}>
+ {
+ /*If user is logged in, render user actions menu; else render log in/sign in buttons*/
+ state.userIsLoggedIn ?
+ (
+ <div style={{ display: "flex", flexDirection: "column", color: "#666", paddingBottom: "10px" }}>
+ <MyArea>
+ <div className="user-avatar">
+ <img alt="user-avatar"
+ src={getUserAvatar()}
+ />
+ </div>
+ <span className="text">Minha área</span>
+ </MyArea>
+
+ {
+ minhaArea.map((item, index) =>
+ <Link to={{
+ pathname: item.href,
+ state: item.value
+ }}
+ className={`menu-buttons ${selectedIndex === (index + menuSobre.length) ? 'selected' : ''}`}
+ onClick={(event) => handleMenuItemClick(event, index + menuSobre.length)}
+ >
+ {item.icon}
+ {item.name}
+ </Link>
+ )
+ }
+
</div>
- <span className="text">Minha área</span>
- </MyArea>
-
- {
- minhaArea.map( (item, index) =>
- <Link to={{
- pathname : item.href,
- state: item.value
- }}
- className={`menu-buttons ${selectedIndex === (index + menuSobre.length) ? 'selected' : ''}`}
- onClick={(event) => handleMenuItemClick(event, index + menuSobre.length)}
- >
- {item.icon}
- {item.name}
- </Link>
- )
- }
-
- </div>
- )
- :
- (
- <React.Fragment>
- <div style={{display : "flex", justifyContent : "center", marginTop : "10px"}}>
- <ButtonPublicarRecurso onClick={props.openLogin}>
- PUBLICAR RECURSO?
+ )
+ :
+ (
+ <React.Fragment>
+ <div style={{ display: "flex", justifyContent: "center", marginTop: "10px" }}>
+ <ButtonPublicarRecurso onClick={props.openLogin}>
+ PUBLICAR RECURSO?
</ButtonPublicarRecurso>
- </div>
+ </div>
- <div style={{display : "flex", flexDirection : "row", margin : "10px 0", justifyContent : "center"}}>
- <div style={{borderRight : "1px solid #e5e5e5"}}>
- <ButtonStyled onClick={props.openLogin}>
- <ExitToAppIcon style={{color:"#00bcd4"}}/>Entrar
+ <div style={{ display: "flex", flexDirection: "row", margin: "10px 0", justifyContent: "center" }}>
+ <div style={{ borderRight: "1px solid #e5e5e5" }}>
+ <ButtonStyled onClick={props.openLogin}>
+ <ExitToAppIcon style={{ color: "#00bcd4" }} />Entrar
</ButtonStyled>
- </div>
+ </div>
- <div>
- <ButtonStyled onClick={props.openSignUp}>
- Cadastre-se
+ <div>
+ <ButtonStyled onClick={props.openSignUp}>
+ Cadastre-se
</ButtonStyled>
- </div>
- </div>
- </React.Fragment>
- )
- }
+ </div>
+ </div>
+ </React.Fragment>
+ )
+ }
</div>
{
/*Renders settings and log off buttons */
state.userIsLoggedIn &&
<React.Fragment>
<Link to={"/editarperfil"} className={`menu-buttons`}>
- <SettingsIcon/> Configurações
+ <SettingsIcon /> Configurações
</Link>
<Link to={"/"} className={`menu-buttons`} onClick={handleLogout}>
- <ExitToAppIcon/> Sair
+ <ExitToAppIcon /> Sair
</Link>
</React.Fragment>
}
--
GitLab