Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found
Select Git revision
  • Develop
  • Develop_copy_to_implement_acessibility
  • Develop_copy_to_implement_acessibility_in_admin
  • Fix_perfil
  • Fixing_bugs
  • GameficationAdmin
  • Gamification
  • Otimizando_Vinicius
  • Password_recovery_fix
  • centraliza-axios
  • fix/homologa
  • fixHomeScreen
  • fix_admin_bugs_luis
  • fix_remaining_bugs
  • gamificacaoLucas
  • gamification
  • google_oauth
  • homologa
  • homologa_arrumar_termos
  • homologa_fix_bug_1
  • homologa_fix_bug_36
  • homologa_fix_bug_cadastro
  • luis_accesibility_before_develop
  • luis_gamefication
  • master
  • raul
  • test_google_login
  • vinicius_accessibility_from_copy
  • vinicius_accessiblity
  • V1.0.0
  • V1.0.0-RC
  • V1.0.1
  • v1.1.0
  • v1.1.1
  • v1.2.0
35 results

Target

Select target project
  • portalmec/portalmec-react
1 result
Select Git revision
  • Develop
  • Develop_copy_to_implement_acessibility
  • Develop_copy_to_implement_acessibility_in_admin
  • Fix_perfil
  • Fixing_bugs
  • GameficationAdmin
  • Gamification
  • Otimizando_Vinicius
  • Password_recovery_fix
  • centraliza-axios
  • fix/homologa
  • fixHomeScreen
  • fix_admin_bugs_luis
  • fix_remaining_bugs
  • gamificacaoLucas
  • gamification
  • google_oauth
  • homologa
  • homologa_arrumar_termos
  • homologa_fix_bug_1
  • homologa_fix_bug_36
  • homologa_fix_bug_cadastro
  • luis_accesibility_before_develop
  • luis_gamefication
  • master
  • raul
  • test_google_login
  • vinicius_accessibility_from_copy
  • vinicius_accessiblity
  • V1.0.0
  • V1.0.0-RC
  • V1.0.1
  • v1.1.0
  • v1.1.1
  • v1.2.0
35 results
Show changes
Show whitespace changes
Inline Side-by-side
Showing
with 1747 additions and 949 deletions
src/Components/TabPanels/UserPageTabs/PanelFavoritos.js 0 → 100644
View file @ 4f57647c
/*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, {useContext, useState, useEffect} from 'react'
import axios from 'axios'
import {apiUrl} from '../../../env';
import LoadingSpinner from '../../LoadingSpinner.js'
import Template from '../PanelComponents/TemplateRecurso.js'
import PanelTemplateColecao from '../PanelComponents/TemplateColecao.js'
export default function TabPanelFavoritos (props) {
const [loading, handleLoading] = useState(true)
const [likedLearnObjs, setlikedLearnObjs] = useState([])
const [likedLearnObjsSlice, setlikedLearnObjsSlice] = useState([])
const [likedCollections, setlikedCollections] = useState([])
const [likedCollectionsSlice, setlikedCollectionsSlice] = useState([])
useEffect( () => {
axios.all([
axios.get((`${apiUrl}/users/` + props.id + '/learning_objects/liked'), props.config),
axios.get((`${apiUrl}/users/` + props.id + '/collections/liked'), props.config),
])
.then( (responseArr) => {
console.log('responseArr favoritos: ', responseArr)
if (responseArr[0].headers['access-token']) {
sessionStorage.setItem('@portalmec/accessToken', responseArr[0].headers['access-token'])
}
setlikedLearnObjs(responseArr[0].data)
setlikedLearnObjsSlice(responseArr[0].data.slice(0,4))
setlikedCollections(responseArr[1].data)
setlikedCollectionsSlice(responseArr[1].data.slice(0,4))
handleLoading(false)
},
(error) => {
handleLoading(false)
console.log('error while running axios all')
}
)
}, [])
const showMoreLikedLearnObj = () => {
var sliceLength = likedLearnObjsSlice.length
setlikedLearnObjsSlice(likedLearnObjs.slice(0, sliceLength + 4))
}
const showAllLikedLearnObjs = () => {setlikedLearnObjsSlice(likedLearnObjs)}
const showMoreLikedCollections = () => {
var sliceLength = likedCollectionsSlice.length
setlikedCollectionsSlice(likedCollections.slice(0, sliceLength + 4))
}
const showAllLikedCollections = () => {setlikedCollectionsSlice(likedCollections)}
return (
<>
{
loading?
(
<LoadingSpinner text={'CARREGANDO...'}/>
)
:
(
[
<React.Fragment>
<Template
length = {likedLearnObjs.length}
titleText = {"Recursos Favoritados"}
noContentText={<p style={{fontFamily:"Roboto",fontSize:"16px"}}>Quando você favorita um recurso ele aparece nesta seção. Além disso, você
<br/>
aumenta o prestígio dele na Plataforma. Para favoritar, basta clicar no ícone de
<br/>
coração que aparece nos Recursos.
</p>}
slice={likedLearnObjsSlice}
showMore={showMoreLikedLearnObj}
showAll={showAllLikedLearnObjs}
/>
<PanelTemplateColecao
title={"Coleções favoritadas"}
length={likedCollections.length}
noContentText={"Você ainda não curtiu nenhuma coleção."}
sliceArr={likedCollectionsSlice}
showMore={showMoreLikedCollections}
showAll={showAllLikedCollections}
followed={false}
/>
</React.Fragment>
]
)
}
</>
)
}
src/Components/TabPanels/TabPanelGerenciarConta.js → src/Components/TabPanels/UserPageTabs/PanelGerenciarConta.js
View file @ 4f57647c
/*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 React, {useState} from 'react'
import Paper from '@material-ui/core/Paper'; import Paper from '@material-ui/core/Paper';
import Button from '@material-ui/core/Button'; import Button from '@material-ui/core/Button';
import FormInput from "../FormInput.js" import FormInput from "../../FormInput.js"
import {CompletarCadastroButton} from './TabPanelSolicitarContaProfessor.js' import {CompletarCadastroButton} from './PanelSolicitarContaProfessor.js'
import {ButtonCancelar} from './TabPanelEditarPerfil.js' import {ButtonCancelar} from './PanelEditarPerfil.js'
import ValidateUserInput from '../FormValidationFunction.js' import ValidateUserInput from '../../FormValidationFunction.js'
export default function TabPanelGerenciarConta (props) { export default function TabPanelGerenciarConta (props) {
const [senhaAtual, setSenhaAtual] = useState( const [senhaAtual, setSenhaAtual] = useState(
......
src/Components/TabPanels/UserPageTabs/PanelMeusRecursos.js 0 → 100644
View file @ 4f57647c
/*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 axios from 'axios'
import {apiUrl} from '../../../env';
import LoadingSpinner from '../../LoadingSpinner.js'
import Template from '../PanelComponents/TemplateRecurso.js'
import TemplateCuradoria from '../PanelComponents/TemplateCuradoria.js'
export default function TabPanelAtividades (props) {
const [loading, handleLoading] = useState(true)
const [learningObjects, setLearningObjects] = useState([]);
const [learningObjectsSlice, setLearningObjectsSlice] = useState([])
const [drafts, setDrafts] = useState([]);
const [draftsSlice, setDraftsSlice] = useState([])
const [curating, setCurating] = useState([]);
const [curatingSlice, setCuratingSlice] = useState([])
useEffect( () => {
axios.all([
axios.get((`${apiUrl}/users/` + props.id + '/learning_objects'), props.config),
axios.get((`${apiUrl}/users/` + props.id + '/drafts'), props.config),
axios.get((`${apiUrl}/users/` + props.id + '/submissions?status=submitted'), props.config)
])
.then( (responseArr) => {
console.log('responseArr Meus recursos: ', responseArr)
if (responseArr[0].headers['access-token']) {
sessionStorage.setItem('@portalmec/accessToken', responseArr[0].headers['access-token'])
}
setLearningObjects(responseArr[0].data)
setLearningObjectsSlice(responseArr[0].data.slice(0, 4))
setDrafts(responseArr[1].data)
setDraftsSlice(responseArr[1].data.slice(0, 4))
setCurating(responseArr[2].data)
setCuratingSlice(responseArr[2].data.slice(0, 4))
handleLoading(false)
},
(error) => {
handleLoading(false)
console.log('error while running axios all')
}
)
}, [])
const showMoreLearnObj = () => {
var sliceLength = learningObjectsSlice.length
setLearningObjectsSlice(learningObjects.slice(0, sliceLength + 4))
}
const showAllLearnObj = () => {setLearningObjectsSlice(learningObjects)}
const showMoreDrafts = () => {
var sliceLength = draftsSlice.length
setDraftsSlice(drafts.slice(0, sliceLength + 4))
}
const showAllDrafts = () => {setDraftsSlice(drafts)}
const showMoreCurating = () => {
var sliceLength = curatingSlice.length
setCuratingSlice(curating.slice(0, sliceLength + 4))
}
const showAllCurating = () => {setCuratingSlice(curating)}
return (
<>
{
loading ?
(
<LoadingSpinner text={'Carregando Recursos'}/>
)
:
(
[
<React.Fragment>
<Template
length = {learningObjects.length}
titleText = {learningObjects.length == 1 ? "Recurso Publicado" : "Recursos Publicados"}
noContentText={"Você ainda não publicou nenhum Recurso!"}
slice={learningObjectsSlice}
showMore={showMoreLearnObj}
showAll={showAllLearnObj}
/>
<Template
length = {drafts.length}
titleText = {drafts.length == 1 ? "Rascunho Publicado" : "Rascunhos Publicados"}
noContentText={"Você não tem nenhum recurso sendo editado."}
slice={draftsSlice}
showMore={showMoreDrafts}
showAll={showAllDrafts}
/>
<TemplateCuradoria
length={curating.length}
titleText = {curating.length === 1 ? "Recurso sendo avaliado pela curadoria" : "Recursos sendo avaliados pela curadoria"}
noContentText={"Você não tem nenhum recurso sendo avaliado pelos curadores."}
sliceArr={curatingSlice}
showMore={showMoreCurating}
showAll={showAllCurating}
/>
</React.Fragment>
]
)
}
</>
)
}
src/Components/TabPanels/UserPageTabs/PanelRede.js 0 → 100644
View file @ 4f57647c
/*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, {useContext, useState, useEffect} from 'react'
import axios from 'axios'
import {apiUrl, apiDomain} from '../../../env';
import LoadingSpinner from '../../LoadingSpinner.js'
import ContainerRedeVazia from './ContainerRedeVazia.js'
import PanelTemplateRede from '../PanelComponents/TemplateRede.js'
export default function TabPanelRede (props) {
const [loading, handleLoading] = useState(true)
const [followingList, setFollowing] = useState([])
const [followingSlice, setFollowingSlice] = useState([])
const [followersList, setFollowers] = useState([])
const [followersSlice, setFollowersSlice] = useState([])
const showMoreFollowing = () => {
var sliceLength = followingSlice.length
setFollowingSlice(followingList.slice(0, sliceLength + 4))
}
const showAllFollowing = () => {setFollowingSlice(followingList)}
const showMoreFollowers = () => {
var sliceLength = followersSlice.length
setFollowersSlice(followersList.slice(0, sliceLength + 4))
}
const showAllFollowers = () => {setFollowersSlice(followersList)}
useEffect( () => {
axios.all([
axios.get((`${apiUrl}/users/` + props.id + '/following/User'), props.config),
axios.get((`${apiUrl}/users/` + props.id + '/followers'), props.config)
])
.then( (responseArr) => {
console.log('responseArr Rede: ', responseArr)
if (responseArr[0].headers['access-token']) {
sessionStorage.setItem('@portalmec/accessToken', responseArr[0].headers['access-token'])
}
setFollowing(responseArr[0].data)
setFollowingSlice(responseArr[0].data.slice(0,4))
setFollowers(responseArr[1].data)
setFollowersSlice(responseArr[1].data.slice(0,4))
handleLoading(false)
},
(error) => {
handleLoading(false)
console.log('error while running axios all')
}
)
}, [])
return (
<>
{
loading ?
(
[
<LoadingSpinner text={'CARREGANDO...'}/>
]
)
:
(
[
<>
{
followingList.length == 0 && followersList.length == 0 ?
(
[
<>
<ContainerRedeVazia/>
</>
]
)
:
(
[
<React.Fragment>
<PanelTemplateRede
title={followersList.length == 1 ? "Seguidor" : "Seguidores"}
length={followersList.length}
sliceArr={followersSlice}
showMore={showMoreFollowers}
showAll={showAllFollowers}
follower={true}
noContentText={'Você não possui nenhum seguidor'}
/>
<PanelTemplateRede
title={"Seguindo"}
length={followingList.length}
sliceArr={followingSlice}
showMore={showMoreFollowing}
showAll={showAllFollowing}
follower={false}
noContentText={'Você ainda não segue nenhum usuário'}
/>
</React.Fragment>
]
)
}
</>
]
)
}
</>
)
}
src/Components/TabPanels/TabPanelSolicitarContaProfessor.js → src/Components/TabPanels/UserPageTabs/PanelSolicitarContaProfessor.js
View file @ 4f57647c
/*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, {useContext} from 'react' import React, {useContext} from 'react'
import { Store } from '../../Store.js'; import { Store } from '../../../Store.js';
import styled from 'styled-components' import styled from 'styled-components'
import Button from '@material-ui/core/Button'; import Button from '@material-ui/core/Button';
......
src/Components/TabPanels/UserPageTabs/TabRedeImgDiv.js 0 → 100644
View file @ 4f57647c
/*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'
export default function TabRedeImgDiv (props) {
return (
<div>
<img src={props.img} alt={'no rede 1'} style={{width : "100%", verticalAlign : "middle", border : "0"}}/>
<p style={{fontSize : "14px", fontFamily : "Roboto", margin : "0 0 10px"}}>{props.text}</p>
</div>
)
}
src/Pages/Contact.js
View file @ 4f57647c
...@@ -16,17 +16,12 @@ GNU Affero General Public License for more details. ...@@ -16,17 +16,12 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License 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/>.*/ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
import React, { Component, useState, useEffect } from 'react'; import React from "react";
import styled from 'styled-components'; import styled from "styled-components";
import Banner1 from '../img/banner-sobre.jpg'; import Banner1 from "../img/banner-sobre.jpg";
import { TextField } from '@material-ui/core'; import InputFormulario from "../Components/ContactForm.js";
import FormInput from "../Components/FormInput.js";
import Formulario from "../Components/ContactForm.js";
import axios from 'axios'
import {apiUrl} from '../env';
const Secao1 = styled.div`
const Seção1 = styled.div `
width: 100%; width: 100%;
background-image: url(${Banner1}); background-image: url(${Banner1});
background-size: cover; background-size: cover;
...@@ -53,19 +48,18 @@ const Seção1 = styled.div ` ...@@ -53,19 +48,18 @@ const Seção1 = styled.div `
font-family: Roboto, sans-serif; font-family: Roboto, sans-serif;
font-size: 30px; font-size: 30px;
font-weight: lighter; font-weight: lighter;
} }
` `;
const Seção2 = styled.div ` const Secao2 = styled.div`
height: 708px; height: 708px;
background-color: #f4f4f4; background-color: #f4f4f4;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
` `;
const Seção3 = styled.div ` const Secao3 = styled.div`
height: 127px; height: 127px;
background-color: #f4f4f4; background-color: #f4f4f4;
color: #666; color: #666;
...@@ -74,16 +68,12 @@ const Seção3 = styled.div ` ...@@ -74,16 +68,12 @@ const Seção3 = styled.div `
text-align: center; text-align: center;
padding-top: 70px; padding-top: 70px;
p { p {
margin: 0 0 10px 0; margin: 0 0 10px 0;
} }
`;
const Formulario = styled.div`
`
const Formulário = styled.div `
background-color: #fff; background-color: #fff;
box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24); box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
padding: 40px; padding: 40px;
...@@ -144,39 +134,40 @@ const Formulário = styled.div ` ...@@ -144,39 +134,40 @@ const Formulário = styled.div `
text-align: center; text-align: center;
} }
` `;
function Contact(props) { function Contact(props) {
return ( return (
<> <>
<link href="https://fonts.googleapis.com/css?family=Kalam|Pompiere|Roboto:300,400&display=swap" rel="stylesheet"/> <link
<Seção1> href="https://fonts.googleapis.com/css?family=Kalam|Pompiere|Roboto:300,400&display=swap"
rel="stylesheet"
/>
<Secao1>
<h2>CONTATO</h2> <h2>CONTATO</h2>
<h3>Quer enviar uma mensagem?</h3> <h3>Quer enviar uma mensagem?</h3>
</Seção1> </Secao1>
<Seção2> <Secao2>
<Formulário noValidate autoComplete="off"> <Formulario noValidate autoComplete="off">
<h2>Entre em contato para enviar dúvidas,<br/>sugestões ou críticas</h2> <h2>
<Formulario/> Entre em contato para enviar dúvidas,
</Formulário> <br />
</Seção2> sugestões ou críticas
</h2>
<Seção3> <InputFormulario />
</Formulario>
</Secao2>
<Secao3>
<span>MEC - Ministério da Educação </span> <span>MEC - Ministério da Educação </span>
<p>Endereço: Esplanada dos Ministérios Bloco L - Ed.Sede e Anexos. CEP: 70.047-900 - Brasília/DF. Telefone: 0800 616161</p> <p>
Endereço: Esplanada dos Ministérios Bloco L - Ed.Sede e Anexos. CEP:
</Seção3> 70.047-900 - Brasília/DF. Telefone: 0800 616161
</p>
</Secao3>
</> </>
); );
} }
export default Contact; export default Contact;
src/Pages/EditProfilePage.js
View file @ 4f57647c
import React, {useState, useContext, useEffect} from 'react'; import React, {useState, useContext, useEffect} from 'react';
import styled from 'styled-components' import styled from 'styled-components'
import {Link} from 'react-router-dom' import {Link} from 'react-router-dom'
import Breadcrumbs from '@material-ui/core/Breadcrumbs';
import {BreadcrumbsDiv, StyledBreadcrumbs} from './UserPage.js'
import Tabs from '@material-ui/core/Tabs' import Tabs from '@material-ui/core/Tabs'
import Tab from '@material-ui/core/Tab'; import Tab from '@material-ui/core/Tab';
import Paper from '@material-ui/core/Paper'; import Paper from '@material-ui/core/Paper';
import TabPanelEditarPerfil from '../Components/TabPanels/TabPanelEditarPerfil.js' import TabPanelEditarPerfil from '../Components/TabPanels/UserPageTabs/PanelEditarPerfil.js'
import TabPanelSolicitarContaProfessor from '../Components/TabPanels/TabPanelSolicitarContaProfessor.js' import TabPanelSolicitarContaProfessor from '../Components/TabPanels/UserPageTabs/PanelSolicitarContaProfessor.js'
import TabPanelGerenciarConta from '../Components/TabPanels/TabPanelGerenciarConta.js' import TabPanelGerenciarConta from '../Components/TabPanels/UserPageTabs/PanelGerenciarConta.js'
import Snackbar from '@material-ui/core/Snackbar'; import Snackbar from '@material-ui/core/Snackbar';
import MuiAlert from '@material-ui/lab/Alert'; import MuiAlert from '@material-ui/lab/Alert';
import {Alert} from '../Components/LoginModal.js' import {Alert} from '../Components/LoginModal.js'
import Grid from '@material-ui/core/Grid' import Grid from '@material-ui/core/Grid'
import CustomizedBreadcrumbs from '../Components/TabPanels/Breadcrumbs.js'
export default function EditProfilePage (props) { export default function EditProfilePage (props) {
const [tabs, setTabs] = useState([ const [tabs, setTabs] = useState([
...@@ -38,22 +37,10 @@ export default function EditProfilePage (props) { ...@@ -38,22 +37,10 @@ export default function EditProfilePage (props) {
> >
<Alert severity="success" style={{backgroundColor:"#00acc1"}}>Senha alterada com sucesso!</Alert> <Alert severity="success" style={{backgroundColor:"#00acc1"}}>Senha alterada com sucesso!</Alert>
</Snackbar> </Snackbar>
<BreadcrumbsDiv>
<StyledBreadcrumbs> <CustomizedBreadcrumbs
<Link to="/" style={{color:"#00bcd4", textDecoration:"none"}}> values={["Minha área", "Configurações da Conta", tabs[tabValue]]}
Página Inicial />
</Link>
<span>
Minha área
</span>
<span>
Configurações da Conta
</span>
<span>
{tabs[tabValue]}
</span>
</StyledBreadcrumbs>
</BreadcrumbsDiv>
<div style={{justifyContent:"center", width:"1170px", margin:"auto"}}> <div style={{justifyContent:"center", width:"1170px", margin:"auto"}}>
<MainContainerDiv container spacing={3}> <MainContainerDiv container spacing={3}>
......
src/Pages/PasswordRecoveryPage.js
View file @ 4f57647c
import React, {useState, useContext} from 'react' import React, {useState, useContext} from 'react'
import {HeaderDiv, BreadcrumbsDiv, StyledBreadcrumbs} from './UserPage.js' import {BackgroundDiv} from '../Components/TabPanels/StyledComponents.js'
import Breadcrumbs from '@material-ui/core/Breadcrumbs';
import {Link} from 'react-router-dom' import {Link} from 'react-router-dom'
import Paper from '@material-ui/core/Paper'; import Paper from '@material-ui/core/Paper';
import styled from 'styled-components' import styled from 'styled-components'
import FormInput from "../Components/FormInput.js" import FormInput from "../Components/FormInput.js"
import ValidateUserInput from '../Components/FormValidationFunction.js' import ValidateUserInput from '../Components/FormValidationFunction.js'
import {CompletarCadastroButton} from '../Components/TabPanels/TabPanelSolicitarContaProfessor.js' import {CompletarCadastroButton} from '../Components/TabPanels/UserPageTabs/PanelSolicitarContaProfessor.js'
import Default from '../Components/PasswordRecoveryComponents/Default.js' import Default from '../Components/PasswordRecoveryComponents/Default.js'
import Success from '../Components/PasswordRecoveryComponents/Success.js' import Success from '../Components/PasswordRecoveryComponents/Success.js'
import {Store} from '../Store.js' import {Store} from '../Store.js'
import Error from '../Components/PasswordRecoveryComponents/Error.js' import Error from '../Components/PasswordRecoveryComponents/Error.js'
import CustomizedBreadcrumbs from '../Components/TabPanels/Breadcrumbs.js'
export default function PasswordRecoveryPage (props) { export default function PasswordRecoveryPage (props) {
const {state, dispatch} = useContext(Store) const {state, dispatch} = useContext(Store)
...@@ -73,18 +73,11 @@ export default function PasswordRecoveryPage (props) { ...@@ -73,18 +73,11 @@ export default function PasswordRecoveryPage (props) {
return ( return (
<> <>
<HeaderDiv> <BackgroundDiv>
<div style={{minWidth:"1170px"}}> <div style={{minWidth:"1170px"}}>
<BreadcrumbsDiv> <CustomizedBreadcrumbs
<StyledBreadcrumbs> values={["Recuperar senha"]}
<Link to="/" style={{color:"#00bcd4", textDecoration:"none"}}> />
Página Inicial
</Link>
<span>
Recuperar senha
</span>
</StyledBreadcrumbs>
</BreadcrumbsDiv>
</div> </div>
<div style={{justifyContent:"center", textAlign:"center", maxWidth:"600px", margin:"auto"}}> <div style={{justifyContent:"center", textAlign:"center", maxWidth:"600px", margin:"auto"}}>
...@@ -94,7 +87,7 @@ export default function PasswordRecoveryPage (props) { ...@@ -94,7 +87,7 @@ export default function PasswordRecoveryPage (props) {
</CardDiv> </CardDiv>
</Paper> </Paper>
</div> </div>
</HeaderDiv> </BackgroundDiv>
</> </>
) )
} }
......
src/Pages/PublicUserPage.js 0 → 100644
View file @ 4f57647c
/*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 styled from 'styled-components'
import axios from 'axios'
import {apiUrl, apiDomain} from '../env';
import CustomizedBreadcrumbs from '../Components/TabPanels/Breadcrumbs.js'
import {Link} from 'react-router-dom';
import Grid from '@material-ui/core/Grid';
import FollowButton from '../Components/ContactButtons/FollowButton.js'
import FollowingButton from '../Components/ContactButtons/FollowingButton.js'
import FollowersCountButton from '../Components/ContactButtons/FollowersCountButton.js'
import noAvatar from "../img/default_profile.png";
import Button from '@material-ui/core/Button';
import Tab from '@material-ui/core/Tab';
import Tabs from '@material-ui/core/Tabs';
import TabInicio from '../Components/TabPanels/PublicUserPageTabs/TabInicio.js'
import TabRecursos from '../Components/TabPanels/PublicUserPageTabs/TabRecursos.js'
import TabColecoes from '../Components/TabPanels/PublicUserPageTabs/TabColecoes.js'
import TabRede from '../Components/TabPanels/PublicUserPageTabs/TabRede.js'
import CheckDecagram from '../img/check-decagram-blue.svg'
import ReportButton from '../Components/ReportButton.js'
import {HeaderContainer, UserProfileContainer, CoverContainer, UserProfileInfoDiv, StyledTabs, CheckTeacherDiv, RodapeDiv, NavBarContentContainer, BackgroundDiv} from '../Components/TabPanels/StyledComponents.js'
const RenderFollowContainer = (boolUserFollowed, id, followCount) => {
return (
<FollowContainer>
<>
{
boolUserFollowed ?
(
[
<FollowingButton followedID={id}/>
]
)
:
(
[
<FollowButton followerID={id}/>
]
)
}
<FollowersCountButton followCount={followCount}/>
</>
</FollowContainer>
)
}
const RenderProfileAvatar = (userAvatar) => {
return (
<ProfileAvatarDiv>
<img src={userAvatar ? apiDomain + userAvatar : noAvatar} alt = "user avatar" style={{height : "inherit", width : "inherit", border:"0", verticalAlign:"middle"}}/>
</ProfileAvatarDiv>
)
}
const RenderUserProfileInfo = (userName) => {
return (
<UserProfileInfoDiv>
<p
style={{fontSize:"28px", color:"#fff", marginBottom : "2px", fontWeight:"500", borderRadius : "5px"}}
>
{userName}
</p>
</UserProfileInfoDiv>
)
}
const RenderCheckTeacher = (submitter_request) => {
if (submitter_request === "accepted") {
return (
<CheckTeacherDiv>
<p>
<span>
<img src={CheckDecagram}/>
</span>
Professor(a)
</p>
</CheckTeacherDiv>
)
}
}
export default function PublicUserPage (props) {
/*user info variables--------------------------------------*/
const id = props.match.params.userId
const [userData, setUserData] = useState({})
const fillUserInfo = (data) => {
setUserData(data)
}
/*---------------------------------------------------------*/
/*content control variables--------------------------------*/
const [tabs, setTabs] = useState([
'Início', 'Recursos', 'Coleções', 'Rede'
])
const [tabValue, setTabValue] = useState(0);
const handleChangeTab = (event, newValue) => {
setTabValue(newValue)
}
/*---------------------------------------------------------*/
/*content variables--------------------------------*/
const [learningObjArr, setLearningObjects] = useState([])
const handleLearningObjects = (data) => {setLearningObjects(data)}
const [collectionsArr, setCollections] = useState([])
const handleCollections = (data) => {setCollections(data)}
/*---------------------------------------------------------*/
/*Component Will Mount*/
useEffect( () => {
let config = {
headers : {
'Accept': 'application/json',
'Content-Type': 'application/json',
'Access-Token': sessionStorage.getItem('@portalmec/accessToken'),
'Client': sessionStorage.getItem('@portalmec/clientToken'),
'Uid': sessionStorage.getItem('@portalmec/uid'),
}
}
axios.all([
axios.get( (`${apiUrl}/users/` + id ), config ),
axios.get( (`${apiUrl}/users/` + id + '/learning_objects'), {'Accept': 'application/json','Content-Type':'application/json'}),
axios.get( (`${apiUrl}/users/` + id + '/collections'), {'Accept': 'application/json','Content-Type':'application/json'})
])
.then( (responseArr) => {
console.log(responseArr)
fillUserInfo(responseArr[0].data)
console.log(responseArr[1])
handleLearningObjects(responseArr[1].data)
console.log(responseArr[2])
handleCollections(responseArr[2].data)
},
(error) => {
console.log('error while running ComponentDidMout')
}
)
}, [])
/*---------------------------------------------------------*/
return (
<React.Fragment>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,400,500&display=swap" rel="stylesheet"/>
<BackgroundDiv>
<CustomizedBreadcrumbs
values={["Usuário Público", tabs[tabValue]]}
/>
<Grid container spacing={2}>
<Grid item xs={12}>
<div style={{padding : "10px 0 8px 0"}}>
<UserProfileContainer>
<HeaderContainer>
<>
{RenderFollowContainer(userData.followed, id, userData.follows_count)}
{RenderProfileAvatar(userData.avatar ? userData.avatar : noAvatar)}
<CoverContainer>
{userData.cover && <img src={apiDomain + userData.cover} alt = '' style= {{width:"100%", height:"100%", objectFit : "cover" }}/>}
</CoverContainer>
{RenderUserProfileInfo(userData.name)}
</>
</HeaderContainer>
{RenderCheckTeacher(userData.submitter_request)}
<RodapeDiv>
<NavBarContentContainer>
<StyledTabs
value ={tabValue}
onChange ={handleChangeTab}
indicatorColor ="primary"
textColor ="primary"
variant = "fullwidth"
scrollButtons = "desktop"
TabIndicatorProps={{style : {background:"#00bcd4"}}}
>
{
tabs.map( (tab) =>
<Tab label ={tab} key={tab}
disabled={tab === "Recursos" && learningObjArr.length === 0 || tab === "Coleções" && collectionsArr.length === 0}
/>
)
}
</StyledTabs>
</NavBarContentContainer>
<ReportButton className="report-button" complainableId={userData.id} complainableType={"User"}/>
</RodapeDiv>
</UserProfileContainer>
</div>
</Grid>
<Grid item xs={12}>
{tabValue === 0 &&
<TabInicio id={id} user={userData} learningObjs={learningObjArr} collections={collectionsArr}/>}
{tabValue === 1 &&
<TabRecursos count={userData.learning_objects_count} learningObjs={learningObjArr}/>}
{tabValue === 2 &&
<TabColecoes count={userData.collections_count} collections={collectionsArr}
/>}
{tabValue === 3 &&
<TabRede id={id} username={userData.name}/>}
</Grid>
</Grid>
</BackgroundDiv>
</React.Fragment>
)
}
const ProfileAvatarDiv = styled.div`
overflow : hidden;
border-radius : 100%;
bottom : -10px;
left : 20px;
z-index : 10;
box-sizing : content-box;
position : absolute;
width : 150px;
height : 150px;
border : 8px solid #fff;
outline : 0;
background-color : #fff;
`
const FollowContainer = styled.div`
padding : 4px 10px;
right : 0;
position : absolute;
z-index : 1;
`
src/Pages/PublicationPermissionsPage.js
View file @ 4f57647c
...@@ -15,16 +15,16 @@ GNU Affero General Public License for more details. ...@@ -15,16 +15,16 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License 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/>.*/ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
import React, {useState, useContext} from 'react'; import React, { useState, useContext } from "react";
import Card from '@material-ui/core/Card'; import Card from "@material-ui/core/Card";
import CardActions from '@material-ui/core/CardActions'; import CardActions from "@material-ui/core/CardActions";
import { Button } from '@material-ui/core'; import { Button } from "@material-ui/core";
import LabeledCheckbox from "../Components/Checkbox.js" import LabeledCheckbox from "../Components/Checkbox.js";
import styled from 'styled-components' import styled from "styled-components";
import {device} from '../Components/device.js' import { device } from "../Components/device.js";
import { Store } from '../Store.js'; import { Store } from "../Store.js";
import IllegalContentModal from '../Components/IllegalContentModal.js' import IllegalContentModal from "../Components/IllegalContentModal.js";
import PublicationPermissionsContent from '../Components/PublicationPermissionsContent.js' import PublicationPermissionsContent from "../Components/PublicationPermissionsContent.js";
const CardStyled = styled(Card)` const CardStyled = styled(Card)`
box-sizing: border-box; box-sizing: border-box;
...@@ -36,102 +36,141 @@ const CardStyled = styled(Card)` ...@@ -36,102 +36,141 @@ const CardStyled = styled(Card)`
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
` `;
const Styledspan = styled.span` const Styledspan = styled.span`
font-family: 'Roboto', sans serif; font-family: "Roboto", sans serif;
font-style: normal; font-style: normal;
font-weight: 500; font-weight: 500;
line-height: 22px; line-height: 22px;
font-size: 15px; font-size: 15px;
letter-spacing: .01em; letter-spacing: 0.01em;
` `;
const Styledhr = styled.hr` const Styledhr = styled.hr`
color: #dadada; color: #dadada;
` `;
export default function PermissionsContainer(props) { export default function PermissionsContainer(props) {
const {state, dispatch} = useContext(Store) const { state, dispatch } = useContext(Store);
const [unavailableCheckbox, setCheckboxAvailability] = useState(true); const [unavailableCheckbox, setCheckboxAvailability] = useState(true);
const [unavailableButton, setButtonAvailability] = useState(true); const [unavailableButton, setButtonAvailability] = useState(true);
const [radios, setRadioValues] = useState({ const [radios, setRadioValues] = useState({
radio1 : '', radio1: "",
radio2 : '' , radio2: "",
radio3 : '' radio3: ""
} });
) const [modalOpen, setModalOpen] = useState(false);
const [modalOpen, setModalOpen] = useState(false)
const closeModal = () => { const closeModal = () => {
setModalOpen(false) setModalOpen(false);
props.history.push('/termos-publicar-recurso') props.history.push("/termos-publicar-recurso");
window.scrollTo(0, 0) window.scrollTo(0, 0);
} };
const handleChecked = e => { const handleChecked = e => {
setButtonAvailability(!unavailableButton); setButtonAvailability(!unavailableButton);
} };
const handleRadios = (e) => { const handleRadios = e => {
let temp = radios let temp = radios;
temp[e.target.name] = e.target.value temp[e.target.name] = e.target.value;
setRadioValues(temp) setRadioValues(temp);
setCheckboxAvailability(!(radios.radio1 && radios.radio2 && radios.radio3));
setCheckboxAvailability(!(radios.radio1 && radios.radio2 && radios.radio3)) };
}
const handleAgreement = () => { const handleAgreement = () => {
if (
if(radios.radio1 == 'Sim' || radios.radio2 == 'Sim' || radios.radio3 == 'Sim'){ radios.radio1 === "Sim" ||
setModalOpen(true) radios.radio2 === "Sim" ||
} radios.radio3 === "Sim"
else{ ) {
setModalOpen(true);
} else {
dispatch({ dispatch({
type: 'USER_AGREED_TO_PUBLICATION_PERMISSIONS', type: "USER_AGREED_TO_PUBLICATION_PERMISSIONS",
userAgreement: true userAgreement: true
}) });
props.history.push('/upload') props.history.push("/upload");
}
} }
};
const redirect = () => { const redirect = () => {
props.history.push('/termos-publicar-recurso') props.history.push("/termos-publicar-recurso");
} };
return ( return (
<> <>
{ {state.userAgreedToPublicationTerms ? (
state.userAgreedToPublicationTerms ?
(
[ [
<> <>
<IllegalContentModal open={modalOpen} handleClose={closeModal} disableBackdropClick={true}/> <IllegalContentModal
<div style={{paddingTop:"5vh", paddingBottom:"5vh", backgroundColor :"#f4f4f4"}}> open={modalOpen}
handleClose={closeModal}
disableBackdropClick={true}
/>
<div
style={{
paddingTop: "5vh",
paddingBottom: "5vh",
backgroundColor: "#f4f4f4"
}}
>
<div style={{}}> <div style={{}}>
<CardStyled variant="outlined"> <CardStyled variant="outlined">
<PublicationPermissionsContent handleRadios={handleRadios} /> <PublicationPermissionsContent handleRadios={handleRadios} />
<Styledhr /> <Styledhr />
<CardActions style={{justifyContent:"center", padding:"25px"}}> <CardActions
style={{ justifyContent: "center", padding: "25px" }}
>
<div> <div>
<div style={{ fontSize: "14px" }}> <div style={{ fontSize: "14px" }}>
<LabeledCheckbox disabledCheckbox = {unavailableCheckbox} <LabeledCheckbox
label={<Styledspan>Li e permito a publicação do meu recurso na Plataforma Integrada de RED do MEC, assim como atesto que o meu recurso atende aos critérios especificados acima.</Styledspan>} disabledCheckbox={unavailableCheckbox}
label={
<Styledspan>
Li e permito a publicação do meu recurso na
Plataforma Integrada de RED do MEC, assim como
atesto que o meu recurso atende aos critérios
especificados acima.
</Styledspan>
}
handleChange={handleChecked} handleChange={handleChecked}
/> />
<div style={{justifyContent:"center",display:"flex"}}> <div
<Button disabled={unavailableButton} style={{ justifyContent: "center", display: "flex" }}
style={unavailableButton ? {backgroundColor:"#e9e9e9"} : {backgroundColor:"#00bcd4"}} >
<Button
disabled={unavailableButton}
style={
unavailableButton
? { backgroundColor: "#e9e9e9" }
: { backgroundColor: "#00bcd4" }
}
onClick={handleAgreement} onClick={handleAgreement}
> >
<Styledspan style = {unavailableButton ? {color:"#666666"} : {color:"#ffffff"}}>Continuar </Styledspan> <Styledspan
style={
unavailableButton
? { color: "#666666" }
: { color: "#ffffff" }
}
>
Continuar{" "}
</Styledspan>
</Button> </Button>
<Button style={{marginLeft:"45px", backgroundColor:"#e9e9e9"}}> <Button
<Styledspan style={{color:"rgb(102, 102, 102)"}}>Cancelar</Styledspan> style={{
marginLeft: "45px",
backgroundColor: "#e9e9e9"
}}
>
<Styledspan style={{ color: "rgb(102, 102, 102)" }}>
Cancelar
</Styledspan>
</Button> </Button>
</div> </div>
</div> </div>
...@@ -142,15 +181,9 @@ export default function PermissionsContainer (props) { ...@@ -142,15 +181,9 @@ export default function PermissionsContainer (props) {
</div> </div>
</> </>
] ]
) ) : (
: <>{redirect()}</>
( )}
<>
{redirect()}
</> </>
) );
}
</>
)
} }
src/Pages/Search.js
View file @ 4f57647c
...@@ -16,79 +16,259 @@ GNU Affero General Public License for more details. ...@@ -16,79 +16,259 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License 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/>.*/ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
import React, { useEffect, useState, useContext } from 'react'; import React, { useEffect, useState, useContext } from "react";
import axios from 'axios'; import axios from "axios";
import { Link } from "react-router-dom";
import styled from "styled-components";
import Paper from "@material-ui/core/Paper";
// import ResourceCard from '../Components/ResourceCard' // import ResourceCard from '../Components/ResourceCard'
// import CollectionCard from '../Components/CollectionCard' // import CollectionCard from '../Components/CollectionCard'
// import UserCard from '../Components/UserCard' // import UserCard from '../Components/UserCard'
import Breadcrumbs from "@material-ui/core/Breadcrumbs";
import {apiUrl} from '../env'; import { apiUrl } from "../env";
import './Styles/Home.css'; import "./Styles/Home.css";
import { Store } from '../Store'; import { Store } from "../Store";
import { Grid } from "@material-ui/core";
import Dropdown from 'react-dropdown'
import 'react-dropdown/style.css'
import SearchExpansionPanel from "../Components/SearchExpansionPanel/SearchExpansionPanel";
import ResourceCard from "../Components/ResourceCard";
export default function Search(props) { export default function Search(props) {
const { state, dispatch } = useContext(Store);
const [results, setResults] = useState([]);
const [page] = useState(0);
const [resultsPerPage, setResultsPerPage] = useState(12);
const [order] = useState("score");
const options = [
{value:"LearningObject", label:"Recursos"},
{value:"Collection", label:"Coleções"},
{value:"User", label:"Usuários"}
];
const ordenar = [
{label:"Mais Estrelas"},
{label:"Mais Relevante"},
{label:"Mais Baixados"},
{label:"Mais Favoritados"},
{label:"Mais Recentes"},
{label:"Ordem Alfabética"},
];
const { state, dispatch } = useContext(Store) const [defaultOption,setDefaultOption] =useState( options[0]);
const [ results, setResults ] = useState([]) const [defaultOrder,setDefaultOrder] =useState( ordenar[0]);
const [ page, ] = useState(0)
const [ resultsPerPage, ] = useState(12) const collectStuff = (tipoBusca=state.search.class,option=undefined) => {
const [ order, ] = useState('score')
axios
.get(
`${apiUrl}/search?page=${page}&results_per_page=${resultsPerPage}&order=${order}&query=${state.search.query}&search_class=${tipoBusca}`
)
.then(res => {
setResults(res.data);
if (option != undefined) {
let aux = undefined;
for (let i=0; i < options.length;i=i+1){
console.log("Vamo dale0")
if (options[i].label==option){
console.log("Vamo dale")
setDefaultOption(options[i]);
}
}
}
console.log(res.data);
console.log(tipoBusca);
})};
useEffect(() => { useEffect(() => {
dispatch({ dispatch({
type: 'HANDLE_SEARCH_BAR', type: "HANDLE_SEARCH_BAR",
opened: true opened: false
}) });
const urlParams = new URLSearchParams(window.location.search)
const query = urlParams.get('query')
const searchClass = urlParams.get('search_class')
const urlParams = new URLSearchParams(window.location.search);
const query = urlParams.get("query");
const searchClass = urlParams.get("search_class");
console.log(searchClass);
if (state.search.query !== query || state.search.class !== searchClass) { if (state.search.query !== query || state.search.class !== searchClass) {
dispatch({ dispatch({
type: 'SAVE_SEARCH', type: "SAVE_SEARCH",
newSearch: { newSearch: {
query: query, query: query,
class: searchClass class: searchClass
} }
}) });
} }
return () => dispatch({ return () =>
type: 'HANDLE_SEARCH_BAR', dispatch({
type: "HANDLE_SEARCH_BAR",
opened: false opened: false
}) });
},[]) }, []);
useEffect(() => { useEffect(() => {
axios.get(`${apiUrl}/search?page=${page}&results_per_page=${resultsPerPage}&order=${order}&query=${state.search.query}&search_class=${state.search.class}`) collectStuff();
.then( res => { }, [state.search, resultsPerPage]);
setResults(res.data)
})
},[state.search])
return ( return (
<div style={{ backgroundColor: "#f4f4f4" }}>
<React.Fragment> <React.Fragment>
<h1>Search for {state.search.query!=='*'?state.search.query:'all'} in {state.search.class}</h1> <h1>
{ Search for {state.search.query !== "*" ? state.search.query : "all"}{" "}
state.search.class === 'LearningObject' && in {state.search.class}
</h1>
{state.search.class === "LearningObject" && (
<ul> <ul>
{results.map((res)=><li key={res.id}> {res.name} </li>)} {results.map(res => (
<li key={res.id}> {res.name} </li>
))}
</ul> </ul>
} )}
{state.search.class === 'Collection' && {state.search.class === "Collection" && (
<ul> <ul>
{results.map((res)=><li key={res.id}> {res.name} </li>)} {results.map(res => (
<li key={res.id}> {res.name} </li>
))}
</ul> </ul>
} )}
{state.search.class === 'User' && {state.search.class === "User" && (
<ul> <ul>
{results.map((res)=><li key={res.id}> {res.name} </li>)} {results.map(res => (
<li key={res.id}> {res.name} </li>
))}
</ul> </ul>
} )}
</React.Fragment> </React.Fragment>
)
<Principal>
<BreadCrumbsDiv>
<StyledBreadCrumbs>
<Link to="/">Página Inicial</Link>
<span>Busca</span>
</StyledBreadCrumbs>
</BreadCrumbsDiv>
<HeaderFilters elevation={4} square>
<Grid container spacing={0} style={{ height: "100%" }}>
<Grid
item
xs={4}
style={{
display: "flex",
flexDirection: "column",
justifyContent: "center"
}}
>
<div style={{display:"flex",flexDirection:"row"}}>
<div style={{ textAlign: "left" }}>Mostrar</div>
<Dropdown options={options} onChange={()=>{collectStuff(options.value,options.label )}} value={defaultOption} placeholder="Select an option" />
</div>
</Grid>
<Grid
item
xs={4}
style={{
display: "flex",
flexDirection: "column",
justifyContent: "center"
}}
>
<div>Numero</div>
</Grid>
<Grid
item
xs={4}
style={{
display: "flex",
flexDirection: "column",
justifyContent: "center"
}}
>
<div style={{ textAlign: "right" }}>Ordenar por:</div>
<Dropdown options={ordenar} onChange={()=>{collectStuff(ordenar.label )}} value={defaultOrder} placeholder="Select an order "/>
</Grid>
</Grid>
</HeaderFilters>
<GridBusca container spacing={2}>
<Grid item md={3} xs={12}>
<Paper elevation={4} square>
<SearchExpansionPanel />
</Paper>
</Grid>
<Grid item md={9} xs={12}>
<Grid container spacing={2}>
{results.map(card => (
<Grid item md={4} xs={6} key={card.id}>
<ResourceCard
name={card.name}
rating={card.score}
type={card.object_type}
description={card.description}
thumbnail={card.thumbnail}
author={card.author}
avatar={card.publisher.avatar}
/>
</Grid>
))}
</Grid>
<button onClick={() => setResultsPerPage(resultsPerPage + 12)}>
Número de recursos mostrados {resultsPerPage}
</button>
</Grid>
</GridBusca>
</Principal>
</div>
);
} }
const GridBusca = styled(Grid)`
color: #666;
h4 {
padding: 0 15px;
font-size: 18px;
margin-block: 10px;
text-transform: uppercase;
}
`;
const HeaderFilters = styled(Paper)`
height: 60px;
text-align: center;
background-color: #fff;
margin-bottom: 30px;
color: #666;
`;
const StyledBreadCrumbs = styled(Breadcrumbs)`
display: flex;
justify-content: flex-start;
max-width: 1170px;
span {
color: #a5a5a5;
}
a {
color: #00bcd4;
text-decoration: none;
}
`;
const BreadCrumbsDiv = styled.div`
padding: 10px;
display: flex;
`;
const Principal = styled.div`
width: 1170px;
margin-inline: auto;
`;
src/Pages/TabsHelp/TabManageAc.js
View file @ 4f57647c
...@@ -16,56 +16,63 @@ GNU Affero General Public License for more details. ...@@ -16,56 +16,63 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License 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/>.*/ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
import React, { Component, useState, useEffect } from 'react'; import React, { Component, useState, useEffect } from "react";
import styled from 'styled-components'; import styled from "styled-components";
import Tabs from '@material-ui/core/Tabs' import Tabs from "@material-ui/core/Tabs";
import Tab from '@material-ui/core/Tab'; import Tab from "@material-ui/core/Tab";
import Breadcrumbs from '@material-ui/core/Breadcrumbs'; import Breadcrumbs from "@material-ui/core/Breadcrumbs";
import Grid from '@material-ui/core/Grid'; import Grid from "@material-ui/core/Grid";
import GerenciandoConta from '../../img/ajuda/Gerenciando_a_conta.png'; import GerenciandoConta from "../../img/ajuda/Gerenciando_a_conta.png";
import Why from '../../Components/HelpCenter/TabsManageAc/Why' import Why from "../../Components/HelpCenter/TabsManageAc/Why";
import HowToDo from '../../Components/HelpCenter/TabsManageAc/HowToDo'; import HowToDo from "../../Components/HelpCenter/TabsManageAc/HowToDo";
import HowToChange from '../../Components/HelpCenter/TabsManageAc/HowToChange'; import HowToChange from "../../Components/HelpCenter/TabsManageAc/HowToChange";
import HowToAccess from '../../Components/HelpCenter/TabsManageAc/HowToAccess'; import HowToAccess from "../../Components/HelpCenter/TabsManageAc/HowToAccess";
import Forget from '../../Components/HelpCenter/TabsManageAc/Forget'; import Forget from "../../Components/HelpCenter/TabsManageAc/Forget";
import CardParticipando from '../../Components/HelpCenter/Cards/CardParticipando'; import CardParticipando from "../../Components/HelpCenter/Cards/CardParticipando";
import CardEncontrando from '../../Components/HelpCenter/Cards/CardEncontrando'; import CardEncontrando from "../../Components/HelpCenter/Cards/CardEncontrando";
import CardPublicando from '../../Components/HelpCenter/Cards/CardPublicando'; import CardPublicando from "../../Components/HelpCenter/Cards/CardPublicando";
import { Link } from "react-router-dom";
export default function TabManageAc(props) { export default function TabManageAc(props) {
const tabs = [ const tabs = [
'Por que me cadastrar?', "Por que me cadastrar?",
'Como fazer meu cadastro?', "Como fazer meu cadastro?",
'Como alterar minha senha?', "Como alterar minha senha?",
'Como acessar a conta?', "Como acessar a conta?",
'Esqueci minha senha. O que fazer?' "Esqueci minha senha. O que fazer?",
] "Gerenciando a Conta"
];
const [tabValue, setTabValue] = useState( const [tabValue, setTabValue] = useState(
Number(props.location.state.value) || 0); Number(props.location.state.value) || 0
);
const handleChangeTab = (e, newValue) => { const handleChangeTab = (e, newValue) => {
setTabValue(newValue) setTabValue(newValue);
} };
return ( return (
<div style={{ backgroundColor: "#f4f4f4" }}> <div style={{ backgroundColor: "#f4f4f4" }}>
<link href="https://fonts.googleapis.com/css?family=Pompiere|Roboto:500,400&display=swap" rel="stylesheet"/> <link
href="https://fonts.googleapis.com/css?family=Pompiere|Roboto:500,400&display=swap"
rel="stylesheet"
/>
<Secao> <Secao>
<BreadCrumbsDiv>
<StyledBreadCrumbs>
<Link to="/">Página Inicial</Link>
<Link to="ajuda">Ajuda</Link>
<span>{tabs[5]}</span>
</StyledBreadCrumbs>
</BreadCrumbsDiv>
<Grid container spacing={4}> <Grid container spacing={4}>
<Grid item xs={3}> <Grid item xs={3}>
<Menu> <Menu>
<h4>Gerenciando a conta</h4> <h4>{tabs[5]}</h4>
<TabsStyled orientation = "vertical" <TabsStyled
orientation="vertical"
variant="scrollable" variant="scrollable"
value={tabValue} value={tabValue}
onChange={handleChangeTab} onChange={handleChangeTab}
...@@ -93,7 +100,7 @@ export default function TabManageAc (props) { ...@@ -93,7 +100,7 @@ export default function TabManageAc (props) {
<Principal> <Principal>
<div className="fixo"> <div className="fixo">
<img src={GerenciandoConta} alt="Gerenciando a conta" /> <img src={GerenciandoConta} alt="Gerenciando a conta" />
<span>Gerenciando a conta</span> <span>{tabs[5]}</span>
</div> </div>
{tabValue === 0 && <Why title={tabs[0]} />} {tabValue === 0 && <Why title={tabs[0]} />}
{tabValue === 1 && <HowToDo title={tabs[1]} />} {tabValue === 1 && <HowToDo title={tabs[1]} />}
...@@ -103,7 +110,10 @@ export default function TabManageAc (props) { ...@@ -103,7 +110,10 @@ export default function TabManageAc (props) {
<div className="resultadosProcura"> <div className="resultadosProcura">
<span>Não era bem o que você procurava?</span> <span>Não era bem o que você procurava?</span>
<div className="subtitulo"> <div className="subtitulo">
<span>Você pode navegar pelos tópicos de ajuda ou entrar em <a href="contato">Contato</a>.</span> <span>
Você pode navegar pelos tópicos de ajuda ou entrar em{" "}
<a href="contato">Contato</a>.
</span>
</div> </div>
</div> </div>
<Grid style={{ marginBottom: "50px" }} container spacing={2}> <Grid style={{ marginBottom: "50px" }} container spacing={2}>
...@@ -117,45 +127,52 @@ export default function TabManageAc (props) { ...@@ -117,45 +127,52 @@ export default function TabManageAc (props) {
<CardParticipando /> <CardParticipando />
</Grid> </Grid>
</Grid> </Grid>
</Principal> </Principal>
</Grid> </Grid>
</Grid> </Grid>
</Secao> </Secao>
</div> </div>
); );
} }
const StyledBreadCrumbs = styled(Breadcrumbs)`
display: flex;
justify-content: flex-start;
max-width: 1170px;
span {
color: #a5a5a5;
}
a {
color: #00bcd4;
text-decoration: none;
}
`;
const BreadCrumbsDiv = styled.div`
padding: 10px;
display: flex;
`;
const Principal = styled.div` const Principal = styled.div`
.fixo { .fixo {
height: 40px; height: 40px;
text-align: center; text-align: center;
background-color: #fff; background-color: #fff;
box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
padding: 30px; padding: 30px;
margin-bottom: 30px; margin-bottom: 30px;
color: #666; color: #666;
img { img {
height: 50px; height: 50px;
width: 50px; width: 50px;
margin-right: 40px; margin-right: 40px;
vertical-align: middle; vertical-align: middle;
} }
span { span {
font-size: 20px; font-size: 20px;
vertical-align: ;
} }
} }
.resultadosProcura { .resultadosProcura {
text-align: center; text-align: center;
...@@ -169,7 +186,7 @@ const Principal = styled.div` ...@@ -169,7 +186,7 @@ const Principal = styled.div`
margin-top: 10px; margin-top: 10px;
span { span {
font-size: 15px font-size: 15px;
} }
a { a {
...@@ -178,14 +195,11 @@ const Principal = styled.div` ...@@ -178,14 +195,11 @@ const Principal = styled.div`
color: #00bcd4; color: #00bcd4;
text-decoration: none; text-decoration: none;
} }
} }
} }
`;
`
const TabsStyled = styled(Tabs)` const TabsStyled = styled(Tabs)`
.Mui-selected { .Mui-selected {
background-color: #e7e4e4; background-color: #e7e4e4;
} }
...@@ -193,32 +207,25 @@ const TabsStyled = styled(Tabs)` ...@@ -193,32 +207,25 @@ const TabsStyled = styled(Tabs)`
.MuiTab-root { .MuiTab-root {
text-transform: none !important; text-transform: none !important;
} }
`;
`
const TabStyled = styled(Tab)` const TabStyled = styled(Tab)`
padding: 4px 15px !important; padding: 4px 15px !important;
font-weight: 500; font-weight: 500;
font-size: 14px !important; font-size: 14px !important;
border-radius: 4px !important; border-radius: 4px !important;
&:hover { &:hover {
background-color: #e7e4e4; background-color: #e7e4e4;
} }
` `;
const Menu = styled.div` const Menu = styled.div`
width: auto; width: auto;
background-color: #fff; background-color: #fff;
color: #666; color: #666;
padding-block: 10px; padding-block: 10px;
box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
h4 { h4 {
padding-inline: 15px; padding-inline: 15px;
...@@ -258,13 +265,10 @@ const Menu = styled.div` ...@@ -258,13 +265,10 @@ const Menu = styled.div`
color: #00bcd4; color: #00bcd4;
text-decoration: none; text-decoration: none;
} }
} }
`;
`
const Secao = styled.div` const Secao = styled.div`
width: 1138px; width: 1138px;
margin-inline: auto; margin-inline: auto;
`;
`
src/Pages/TabsHelp/TabNetPart.js
View file @ 4f57647c
...@@ -28,6 +28,7 @@ import What from '../../Components/HelpCenter/TabsNetPart/What' ...@@ -28,6 +28,7 @@ import What from '../../Components/HelpCenter/TabsNetPart/What'
import CardEncontrando from '../../Components/HelpCenter/Cards/CardEncontrando'; import CardEncontrando from '../../Components/HelpCenter/Cards/CardEncontrando';
import CardPublicando from '../../Components/HelpCenter/Cards/CardPublicando'; import CardPublicando from '../../Components/HelpCenter/Cards/CardPublicando';
import CardGerenciando from '../../Components/HelpCenter/Cards/CardGerenciando'; import CardGerenciando from '../../Components/HelpCenter/Cards/CardGerenciando';
import { Link } from 'react-router-dom';
...@@ -39,6 +40,7 @@ export default function TabNetPart (props) { ...@@ -39,6 +40,7 @@ export default function TabNetPart (props) {
const tabs= [ const tabs= [
'Como comentar ou avaliar um recurso?', 'Como comentar ou avaliar um recurso?',
'Que tipo de comentário posso fazer sobre o recurso?', 'Que tipo de comentário posso fazer sobre o recurso?',
'Participando da Rede'
] ]
const [tabValue, setTabValue] = useState( const [tabValue, setTabValue] = useState(
...@@ -55,10 +57,27 @@ export default function TabNetPart (props) { ...@@ -55,10 +57,27 @@ export default function TabNetPart (props) {
<link href="https://fonts.googleapis.com/css?family=Pompiere|Roboto:500,400&display=swap" rel="stylesheet"/> <link href="https://fonts.googleapis.com/css?family=Pompiere|Roboto:500,400&display=swap" rel="stylesheet"/>
<Secao> <Secao>
<BreadCrumbsDiv>
<StyledBreadCrumbs>
<Link to="/" >
Página Inicial
</Link>
<Link to="ajuda" >
Ajuda
</Link>
<span>
{tabs[2]}
</span>
</StyledBreadCrumbs>
</BreadCrumbsDiv>
<Grid container spacing={4}> <Grid container spacing={4}>
<Grid item xs={3}> <Grid item xs={3}>
<Menu> <Menu>
<h4>Participando da rede</h4> <h4>{tabs[2]}</h4>
<TabsStyled orientation = "vertical" <TabsStyled orientation = "vertical"
variant = "scrollable" variant = "scrollable"
value = {tabValue} value = {tabValue}
...@@ -84,7 +103,7 @@ export default function TabNetPart (props) { ...@@ -84,7 +103,7 @@ export default function TabNetPart (props) {
<Principal> <Principal>
<div className="fixo"> <div className="fixo">
<img src={ParticipandoRede} alt="Participando da Rede"/> <img src={ParticipandoRede} alt="Participando da Rede"/>
<span>Participando da rede</span> <span>{tabs[2]}</span>
</div> </div>
{tabValue === 0 && <How title={tabs[0]}/>} {tabValue === 0 && <How title={tabs[0]}/>}
{tabValue === 1 && <What title={tabs[1]}/>} {tabValue === 1 && <What title={tabs[1]}/>}
...@@ -116,6 +135,26 @@ export default function TabNetPart (props) { ...@@ -116,6 +135,26 @@ export default function TabNetPart (props) {
</div> </div>
); );
} }
const StyledBreadCrumbs = styled(Breadcrumbs)`
display : flex;
justify-content : flex-start;
max-width : 1170px;
span {
color : #a5a5a5;
}
a {
color: #00bcd4;
text-decoration: none;
}
`
const BreadCrumbsDiv = styled.div`
padding : 10px;
display : flex;
`
const Principal = styled.div` const Principal = styled.div`
.fixo { .fixo {
......
src/Pages/TabsHelp/TabPlataformaMEC.js
View file @ 4f57647c
...@@ -31,6 +31,7 @@ import Which from '../../Components/HelpCenter/TabsPlataformaMEC/Which'; ...@@ -31,6 +31,7 @@ import Which from '../../Components/HelpCenter/TabsPlataformaMEC/Which';
import Types from '../../Components/HelpCenter/TabsPlataformaMEC/Types'; import Types from '../../Components/HelpCenter/TabsPlataformaMEC/Types';
import Software from '../../Components/HelpCenter/TabsPlataformaMEC/Software'; import Software from '../../Components/HelpCenter/TabsPlataformaMEC/Software';
import How from '../../Components/HelpCenter/TabsPlataformaMEC/How'; import How from '../../Components/HelpCenter/TabsPlataformaMEC/How';
import { Link } from 'react-router-dom';
...@@ -45,7 +46,8 @@ export default function TabPlataformaMEC (props) { ...@@ -45,7 +46,8 @@ export default function TabPlataformaMEC (props) {
'Entendendo as 3 áreas da Plataforma', 'Entendendo as 3 áreas da Plataforma',
'Quais são os Portais Parceiros?', 'Quais são os Portais Parceiros?',
'Tipos de recursos', 'Tipos de recursos',
'Softwares específicos' 'Softwares específicos',
'Plataforma MEC'
] ]
const [tabValue, setTabValue] = useState( const [tabValue, setTabValue] = useState(
...@@ -62,10 +64,26 @@ export default function TabPlataformaMEC (props) { ...@@ -62,10 +64,26 @@ export default function TabPlataformaMEC (props) {
<link href="https://fonts.googleapis.com/css?family=Pompiere|Roboto:500,400&display=swap" rel="stylesheet"/> <link href="https://fonts.googleapis.com/css?family=Pompiere|Roboto:500,400&display=swap" rel="stylesheet"/>
<Secao> <Secao>
<BreadCrumbsDiv>
<StyledBreadCrumbs>
<Link to="/" >
Página Inicial
</Link>
<Link to="ajuda" >
Ajuda
</Link>
<span>
{tabs[6]}
</span>
</StyledBreadCrumbs>
</BreadCrumbsDiv>
<Grid container spacing={4}> <Grid container spacing={4}>
<Grid item xs={3}> <Grid item xs={3}>
<Menu> <Menu>
<h4>Plataforma MEC</h4> <h4>{tabs[6]}</h4>
<TabsStyled orientation = "vertical" <TabsStyled orientation = "vertical"
variant = "scrollable" variant = "scrollable"
value = {tabValue} value = {tabValue}
...@@ -123,6 +141,26 @@ export default function TabPlataformaMEC (props) { ...@@ -123,6 +141,26 @@ export default function TabPlataformaMEC (props) {
); );
} }
const StyledBreadCrumbs = styled(Breadcrumbs)`
display : flex;
justify-content : flex-start;
max-width : 1170px;
span {
color : #a5a5a5;
}
a {
color: #00bcd4;
text-decoration: none;
}
`
const BreadCrumbsDiv = styled.div`
padding : 10px;
display : flex;
`
const Principal = styled.div` const Principal = styled.div`
.fixo { .fixo {
......
src/Pages/TabsHelp/TabResourseFind.js
View file @ 4f57647c
...@@ -29,6 +29,7 @@ import HowToFilter from '../../Components/HelpCenter/TabsResourseFind/HowToFilte ...@@ -29,6 +29,7 @@ import HowToFilter from '../../Components/HelpCenter/TabsResourseFind/HowToFilte
import CardPublicando from '../../Components/HelpCenter/Cards/CardPublicando'; import CardPublicando from '../../Components/HelpCenter/Cards/CardPublicando';
import CardParticipando from '../../Components/HelpCenter/Cards/CardParticipando'; import CardParticipando from '../../Components/HelpCenter/Cards/CardParticipando';
import CardGerenciando from '../../Components/HelpCenter/Cards/CardGerenciando'; import CardGerenciando from '../../Components/HelpCenter/Cards/CardGerenciando';
import { Link } from 'react-router-dom';
...@@ -40,7 +41,8 @@ export default function TabResourseFind (props) { ...@@ -40,7 +41,8 @@ export default function TabResourseFind (props) {
const tabs= [ const tabs= [
'Como fazer uma busca?', 'Como fazer uma busca?',
'Como filtrar os resultados?', 'Como filtrar os resultados?',
'Como os recursos são ranqueados?' 'Como os recursos são ranqueados?',
'Encontrando Recursos'
] ]
const [tabValue, setTabValue] = useState( const [tabValue, setTabValue] = useState(
...@@ -56,10 +58,26 @@ export default function TabResourseFind (props) { ...@@ -56,10 +58,26 @@ export default function TabResourseFind (props) {
<link href="https://fonts.googleapis.com/css?family=Pompiere|Roboto:500,400&display=swap" rel="stylesheet"/> <link href="https://fonts.googleapis.com/css?family=Pompiere|Roboto:500,400&display=swap" rel="stylesheet"/>
<Secao> <Secao>
<BreadCrumbsDiv>
<StyledBreadCrumbs>
<Link to="/" >
Página Inicial
</Link>
<Link to="ajuda" >
Ajuda
</Link>
<span>
{tabs[3]}
</span>
</StyledBreadCrumbs>
</BreadCrumbsDiv>
<Grid container spacing={4}> <Grid container spacing={4}>
<Grid item xs={3}> <Grid item xs={3}>
<Menu> <Menu>
<h4>Encontrando Recursos</h4> <h4>{tabs[3]}</h4>
<TabsStyled orientation = "vertical" <TabsStyled orientation = "vertical"
variant = "scrollable" variant = "scrollable"
value = {tabValue} value = {tabValue}
...@@ -86,7 +104,7 @@ export default function TabResourseFind (props) { ...@@ -86,7 +104,7 @@ export default function TabResourseFind (props) {
<Principal> <Principal>
<div className="fixo"> <div className="fixo">
<img src={EncontrandoRecurso} alt="Encontrando Recursos"/> <img src={EncontrandoRecurso} alt="Encontrando Recursos"/>
<span>Encontrando recursos</span> <span>{tabs[3]}</span>
</div> </div>
{tabValue === 0 && <HowToDo title={tabs[0]}/>} {tabValue === 0 && <HowToDo title={tabs[0]}/>}
{tabValue === 1 && <HowToFilter title={tabs[1]}/>} {tabValue === 1 && <HowToFilter title={tabs[1]}/>}
...@@ -119,6 +137,26 @@ export default function TabResourseFind (props) { ...@@ -119,6 +137,26 @@ export default function TabResourseFind (props) {
); );
} }
const StyledBreadCrumbs = styled(Breadcrumbs)`
display : flex;
justify-content : flex-start;
max-width : 1170px;
span {
color : #a5a5a5;
}
a {
color: #00bcd4;
text-decoration: none;
}
`
const BreadCrumbsDiv = styled.div`
padding : 10px;
display : flex;
`
const Principal = styled.div` const Principal = styled.div`
.fixo { .fixo {
......
src/Pages/TabsHelp/TabResoursePub.js
View file @ 4f57647c
...@@ -29,6 +29,7 @@ import Which from '../../Components/HelpCenter/TabsResoursePub/Which' ...@@ -29,6 +29,7 @@ import Which from '../../Components/HelpCenter/TabsResoursePub/Which'
import CardEncontrando from '../../Components/HelpCenter/Cards/CardEncontrando'; import CardEncontrando from '../../Components/HelpCenter/Cards/CardEncontrando';
import CardParticipando from '../../Components/HelpCenter/Cards/CardParticipando'; import CardParticipando from '../../Components/HelpCenter/Cards/CardParticipando';
import CardGerenciando from '../../Components/HelpCenter/Cards/CardGerenciando'; import CardGerenciando from '../../Components/HelpCenter/Cards/CardGerenciando';
import { Link } from 'react-router-dom';
...@@ -40,7 +41,8 @@ export default function TabResoursePub (props) { ...@@ -40,7 +41,8 @@ export default function TabResoursePub (props) {
const tabs= [ const tabs= [
'Por que enviar um recurso?', 'Por que enviar um recurso?',
'Como publicar um recurso?', 'Como publicar um recurso?',
'Quais tipos de recursos e formatos de arquivo a plataforma aceita?' 'Quais tipos de recursos e formatos de arquivo a plataforma aceita?',
'Publicando Recursos'
] ]
const [tabValue, setTabValue] = useState( const [tabValue, setTabValue] = useState(
...@@ -57,10 +59,27 @@ export default function TabResoursePub (props) { ...@@ -57,10 +59,27 @@ export default function TabResoursePub (props) {
<link href="https://fonts.googleapis.com/css?family=Pompiere|Roboto:500,400&display=swap" rel="stylesheet"/> <link href="https://fonts.googleapis.com/css?family=Pompiere|Roboto:500,400&display=swap" rel="stylesheet"/>
<Secao> <Secao>
<BreadCrumbsDiv>
<StyledBreadCrumbs>
<Link to="/" >
Página Inicial
</Link>
<Link to="ajuda" >
Ajuda
</Link>
<span>
{tabs[3]}
</span>
</StyledBreadCrumbs>
</BreadCrumbsDiv>
<Grid container spacing={4}> <Grid container spacing={4}>
<Grid item xs={3}> <Grid item xs={3}>
<Menu> <Menu>
<h4>Publicando Recursos</h4> <h4>{tabs[3]}</h4>
<TabsStyled orientation = "vertical" <TabsStyled orientation = "vertical"
variant = "scrollable" variant = "scrollable"
value = {tabValue} value = {tabValue}
...@@ -87,7 +106,7 @@ export default function TabResoursePub (props) { ...@@ -87,7 +106,7 @@ export default function TabResoursePub (props) {
<Principal> <Principal>
<div className="fixo"> <div className="fixo">
<img src={PublicandoRecursos} alt="Publicando Recursos"/> <img src={PublicandoRecursos} alt="Publicando Recursos"/>
<span>Publicando Recursos</span> <span>{tabs[3]}</span>
</div> </div>
{tabValue === 0 && <Why title={tabs[0]}/>} {tabValue === 0 && <Why title={tabs[0]}/>}
{tabValue === 1 && <How title={tabs[1]}/>} {tabValue === 1 && <How title={tabs[1]}/>}
...@@ -120,6 +139,26 @@ export default function TabResoursePub (props) { ...@@ -120,6 +139,26 @@ export default function TabResoursePub (props) {
</div> </div>
); );
} }
const StyledBreadCrumbs = styled(Breadcrumbs)`
display : flex;
justify-content : flex-start;
max-width : 1170px;
span {
color : #a5a5a5;
}
a {
color: #00bcd4;
text-decoration: none;
}
`
const BreadCrumbsDiv = styled.div`
padding : 10px;
display : flex;
`
const Principal = styled.div` const Principal = styled.div`
.fixo { .fixo {
......
src/Pages/Teste.js
View file @ 4f57647c
...@@ -16,339 +16,120 @@ GNU Affero General Public License for more details. ...@@ -16,339 +16,120 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License 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/>.*/ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
import React, { Component, useState, useEffect } from 'react'; import React, { Component } from 'react'
import styled from 'styled-components'; import Dropdown from 'react-dropdown'
import Banner1 from '../img/banner-sobre.jpg';
import { TextField } from '@material-ui/core';
import FormInput from "../Components/FormInput.js"
import axios from 'axios'
import {apiUrl} from '../env';
const Seção1 = styled.div `
width: 100%;
background-image: url(${Banner1});
background-size: cover;
background-position: bottom center;
height: 250px;
color:#fff;
line-height: 1.1;
text-align: center;
padding-top: 120px;
h2 {
font-family: Pompiere,cursive;
font-size: 52px;
color:#fff;
margin: 0;
padding-left: 0;
padding-right: 0;
font-weight: 500;
}
h3 {
margin-top: 20px;
margin-bottom: 10px;
font-family: Roboto,sans-serif;
font-size: 30px;
font-weight: lighter;
}
`
const Seção2 = styled.div `
height: 708px;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
`
const Button = styled.button`
`
const Formulário = styled.div `
background-color: #fff;
box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
padding: 40px;
height: 520px;
width: 420px;
color: #666;
form .inputBlock {
margin-block: 22px;
class ObjectArrayExample extends Component {
constructor (props) {
super(props)
this.state = {
selected: { value: 'two', label: 'Two'}
} }
this._onSelect = this._onSelect.bind(this)
form .inputBlock label {
font-size: 14px;
font-weight: bold;
display: block;
}
form .inputBlock input {
width: 100%;
height: 32px;
font-size: 14px;
border: 0;
border-bottom: 1px solid #eee;
} }
form .inputBlock.Message input { _onSelect (option) {
height: 131px; console.log('You selected ', option.label)
} this.setState({selected: option})
form buttom[type=submit] {
width: 100%;
border: 0;
margin-top: 30px;
background: #7d40e7
border-radius: 2px;
padding: 15px 20px;
font-size: 16px;
font-weight: bold;
color: #fff;
cursor: pointer;
transition: background 0.5s;
}
form buttom[type=submit]:hover {
background: #6931ac
}
h2 {
font-size: 24px;
font-weight: lighter;
margin-bottom: 50px;
margin-top: 20px;
text-align: center;
}
`
const Seção3 = styled.div `
height: 127px;
background-color: #f4f4f4;
color:#666;
line-height: 1.42857143;
font-size:18px;
text-align: center;
padding-top: 70px;
p {
margin: 0 0 10px 0;
}
`
function validateNome (nome) {
let flag = false
if(nome.length === 0) {
flag = true
}
return flag
}
function validateMensagem (mensagem) {
let flag = false
if(mensagem.length === 0) {
flag = true
}
return flag
}
function validateEmail (email) {
let flag = false
if (email.split("").filter(x => x === "@").length !== 1) {
flag = true
}
return flag
} }
render () {
const { toggleClassName, togglePlaholderClassName, toggleMenuClassName, toggleOptionsClassName } = this.state
const options = [
function Contact (props) { { value: 'one', label: 'One' },
{ value: 'two', label: 'Two', className: toggleOptionsClassName && 'my-custom-class' },
const [nome, handleNome] = useState(
{
dict : {
key:false,
value:""
}
})
const [email, handleEmail] = useState(
{ {
dict : { type: 'group', name: 'group1', items: [
key:false, { value: 'three', label: 'Three', className: toggleOptionsClassName && 'my-custom-class' },
value:"" { value: 'four', label: 'Four' }
} ]
}) },
const [mensagem, handleMensagem] = useState(
{
dict : {
key: false,
value:""
}
})
const preencheNome = (e) => {
const aux2 = e.target.value
const flag = validateNome(aux2)
handleNome({...nome, dict : {
key : flag,
value : e.target.value
}})
console.log(nome)
}
const preencheEmail = (e) => {
const aux = e.target.value
const flag = validateEmail(aux)
handleEmail({...email, dict : {
key : flag,
value : e.target.value
}})
console.log(email)
}
const preencheMensagem = (e) => {
const msg = e.target.value
console.log(msg)
let flag = validateMensagem(msg)
handleMensagem({...mensagem, dict : {
key : flag,
value : msg
}})
console.log(mensagem)
}
const limpaTudo = () => {
handleNome({
dict : {
key: false,
value:""
}}
);
handleEmail({
dict : {
key: false,
value:""
}}
)
handleMensagem({
dict : {
key: false,
value:""
}}
)
}
const onSubmit = (e) => {
//on submit we should prevent the page from refreshing
e.preventDefault(); //though this is arguable
console.log(!(nome.dict.key && email.dict.key && mensagem.dict.key ))
if (!(nome.dict.key && email.dict.key && mensagem.dict.key )) {
axios.post(`${apiUrl}/contacts`,
{ {
contact : { type: 'group', name: 'group2', items: [
name: nome.dict.value, { value: 'five', label: 'Five' },
email: email.dict.value, { value: 'six', label: 'Six' }
message: mensagem.dict.value ]
}
}
).then()
limpaTudo();
}
} }
]
const defaultOption = this.state.selected
const placeHolderValue = typeof this.state.selected === 'string' ? this.state.selected : this.state.selected.label
return ( return (
<> <section>
<link href="https://fonts.googleapis.com/css?family=Kalam|Pompiere|Roboto:300,400&display=swap" rel="stylesheet"/> <h3>Object Array and Custom ClassNames Example </h3>
<Seção1> <div className="buttons">
<h2>CONTATO</h2> <button onClick={() => this.setState({ toggleClassName: !toggleClassName })}>
<h3>Quer enviar uma mensagem?</h3> Toggle dropdown custom class
</Seção1> </button>
<button onClick={() => this.setState({ togglePlaholderClassName: !togglePlaholderClassName })}>
<Seção2> Toggle placeholder custom class
</button>
<Formulário noValidate autoComplete="off"> <button onClick={() => this.setState({ toggleMenuClassName: !toggleMenuClassName })}>
<h2>Entre em contato para enviar dúvidas,<br/>sugestões ou críticas</h2> Toggle menu custom class
<form onSubmit={e => onSubmit(e)}> </button>
<FormInput <button onClick={() => this.setState({ toggleOptionsClassName: !toggleOptionsClassName })}>
inputType={"text"} Toggle options custom class
name={"nome"} </button>
value={nome.dict.value} </div>
placeholder={"Nome *"} <Dropdown
error = {nome.dict.key} options={options}
help = {nome.dict.key ? "insira seu nome para o contato " : ""} onChange={this._onSelect}
handleChange={e => preencheNome(e)} value={defaultOption}
/> placeholder="Select an option"
<FormInput className={ toggleClassName ? 'my-custom-class' : '' }
inputType={"text"} placeholderClassName={ togglePlaholderClassName ? 'my-custom-class' : '' }
name={"email"} menuClassName={ toggleMenuClassName ? 'my-custom-class' : '' }
value={email.dict.value}
placeholder={"E-mail *"}
error = {email.dict.key}
help = {email.dict.key ? "Formato de e-mail inadequado tente : usuario@provedor.com" : ""}
handleChange={e => preencheEmail(e)}
/> />
<FormInput <div className='result'>
inputType={"text"} You selected
name={"mensagem"} <strong> {placeHolderValue} </strong>
value={mensagem.dict.value} </div>
placeholder={"Mensagem *"} <section>
multi = {true} <h4>Options: </h4>
rows = "3" <div className='code'>
rowsMax = "5" <pre>
error = {mensagem.dict.key} {`
help = {mensagem.dict.key ? "Faltou escrever sua mensagem de sugestão, crítica ou dúvida." : "Escreva sua mensagem no campo acima."} const options = [
handleChange={e => preencheMensagem(e)} { value: 'one', label: 'One' },
{ value: 'two', label: 'Two'${toggleOptionsClassName ? ', classNames \'my-custom-class\'' : ''} },
{
type: 'group', name: 'group1', items: [
{ value: 'three', label: 'Three' },
{ value: 'four', label: 'Four'${toggleOptionsClassName ? ', className: \'my-custom-class\'' : ''} }
]
},
{
type: 'group', name: 'group2', items: [
{ value: 'five', label: 'Five' },
{ value: 'six', label: 'Six' }
]
}
]
`}
</pre>
</div>
<h4>Usage with custom classeNames: </h4>
<div className='code'>
<pre>{
`
<Dropdown
options={options}
value={defaultOption}
placeholder="Select an option"
className=${ toggleClassName ? '"my-custom-class"' : '""' }
placeholderClassName=${ togglePlaholderClassName ? '"my-custom-class"' : '""' }
menuClassName=${ toggleMenuClassName ? '"my-custom-class"' : '""' }
/> />
<Button onClick={e => onSubmit(e)} >ENVIAR MENSAGEM</Button> `}
</form> </pre>
</div>
</Formulário> </section>
</Seção2> </section>
)
<Seção3> }
<span>MEC - Ministério da Educação </span>
<p>Endereço: Esplanada dos Ministérios Bloco L - Ed.Sede e Anexos. CEP: 70.047-900 - Brasília/DF. Telefone: 0800 616161</p>
</Seção3>
</>
);
} }
export default Contact; export default ObjectArrayExample
\ No newline at end of file
src/Pages/UserPage.js
View file @ 4f57647c
...@@ -18,12 +18,11 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/> ...@@ -18,12 +18,11 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
import React, {useState, useContext, useEffect} from 'react'; import React, {useState, useContext, useEffect} from 'react';
import styled from 'styled-components' import styled from 'styled-components'
import { Container } from 'react-grid-system'
import Button from '@material-ui/core/Button'; import Button from '@material-ui/core/Button';
import IconButton from '@material-ui/core/IconButton'; import IconButton from '@material-ui/core/IconButton';
import PhotoCamera from '@material-ui/icons/PhotoCamera'; import PhotoCamera from '@material-ui/icons/PhotoCamera';
import Tooltip from '@material-ui/core/Tooltip'; import Tooltip from '@material-ui/core/Tooltip';
import Breadcrumbs from '@material-ui/core/Breadcrumbs'; import CustomizedBreadcrumbs from '../Components/TabPanels/Breadcrumbs.js'
import {Link} from 'react-router-dom'; import {Link} from 'react-router-dom';
import Popover from '@material-ui/core/Popover'; import Popover from '@material-ui/core/Popover';
import { Store } from '../Store.js'; import { Store } from '../Store.js';
...@@ -32,14 +31,126 @@ import CheckDecagram from '../img/check-decagram-gray.svg' ...@@ -32,14 +31,126 @@ import CheckDecagram from '../img/check-decagram-gray.svg'
import Tabs from '@material-ui/core/Tabs'; import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab'; import Tab from '@material-ui/core/Tab';
import Paper from '@material-ui/core/Paper'; import Paper from '@material-ui/core/Paper';
import TabPanelAtividades from '../Components/TabPanels/TabPanelAtividades.js' import TabPanelAtividades from '../Components/TabPanels/UserPageTabs/PanelAtividades.js'
import TabPanelMeusRecursos from '../Components/TabPanels/TabPanelMeusRecursos.js' import TabPanelMeusRecursos from '../Components/TabPanels/UserPageTabs/PanelMeusRecursos.js'
import TabPanelFavoritos from '../Components/TabPanels/TabPanelFavoritos.js' import TabPanelFavoritos from '../Components/TabPanels/UserPageTabs/PanelFavoritos.js'
import TabPanelColecoes from '../Components/TabPanels/TabPanelColecoes.js' import TabPanelColecoes from '../Components/TabPanels/UserPageTabs/PanelColecoes.js'
import TabPanelRede from '../Components/TabPanels/TabPanelRede.js' import TabPanelRede from '../Components/TabPanels/UserPageTabs/PanelRede.js'
import TabPanelCuradoria from '../Components/TabPanels/UserPageTabs/PanelCuradoria.js'
import axios from 'axios' import axios from 'axios'
import {apiUrl} from '../env'; import {apiUrl, apiDomain} from '../env';
import ModalAlterarAvatar from '../Components/ModalAlterarAvatar.js' import ModalAlterarAvatar from '../Components/ModalAlterarAvatar.js'
import Grid from '@material-ui/core/Grid';
import noAvatar from "../img/default_profile.png";
import {HeaderContainer, UserProfileContainer, UserProfileInfoDiv, CoverContainer, CheckTeacherDiv, StyledTabs, RodapeDiv, NavBarContentContainer, BackgroundDiv} from '../Components/TabPanels/StyledComponents.js'
const PageCover = (currentCover, updateCover) => {
//displays current user cover and lets them upload a new cover
//on accepting file input, calls coverModal to handle further customization
return (
<CoverContainer>
{currentCover && <img src={apiDomain + currentCover} alt = '' style= {{width:"100%", height:"100%", objectFit : "cover" }}/>}
<input accept="image/*" style = {{display:"none"}} id="icon-button-file" type="file" onChange={(e) => updateCover(e)}/>
<label htmlFor="icon-button-file">
<Tooltip title={<span style={{fontSize:"14px", overflow:"hidden", transition:"all .5s ease"}}>ALTERAR CAPA</span>} placement="left">
<IconButton style={{position:"absolute",right:"0",top:"0",color:"#fff"}}color="primary" aria-label="upload picture" component="span">
<PhotoCamera />
</IconButton>
</Tooltip>
</label>
</CoverContainer>
)
}
const ProfileAvatar = (currentAvatar, hoverTrue, handleHoverAlterarFoto, modalControl) => {
//display current user avatar and lets them upload a new one
//on click, calls AvatarModal to handle file selection
return (
<ProfileAvatarDiv onMouseEnter={handleHoverAlterarFoto} onMouseLeave={handleHoverAlterarFoto} onClick={modalControl}>
<img src={currentAvatar ? apiDomain + currentAvatar : noAvatar} alt = "user avatar" style={{height : "inherit", width : "inherit", border:"0", verticalAlign:"middle"}}/>
<ChangeAvatarDiv style={ {display : hoverTrue ? 'flex' : 'none'}}>
<span>Alterar Foto</span>
</ChangeAvatarDiv>
</ProfileAvatarDiv>
)
}
const UserProfileInfo = (user, education) => {
return (
<UserProfileInfoDiv>
<p style={{fontSize:"28px", color:"#fff", paddingTop:"5px", paddingBottom:"5px", fontWeight:"500", backgroundColor:"#77777796", borderRadius : "5px"}}>{user}</p>
<div style={{fontSize:"14px", color:"#fff", marginBottom:"2px"}}>
<p>{education}</p>
</div>
</UserProfileInfoDiv>
)
}
const EditProfileButton = () => {
const {state} = React.useContext(Store)
return (
<EditProfileAnchor to="/editarperfil">
<Button>
{state.windowSize.width >=900 ?
(
<React.Fragment>
<EditIcon style={{marginRight:"5px", verticalAlign:"middle"}}/> <span>EDITAR PERFIL</span>
</React.Fragment>
)
:
(
<EditIcon style={{marginRight:"5px", verticalAlign:"middle"}}/>
)
}
</Button>
</EditProfileAnchor>
)
}
const SubmitterStatus = (status) => {
let text;
switch (status) {
case 'requested':
text = "Verificando cadastro de professor(a)"
break;
case 'accepted':
text = "Professor(a)"
break;
default:
text = "Você é professor(a) e gostaria de publicar recursos?"
}
return (
<React.Fragment>
<p style={{fontSize:"15px", lineHeight:"22px", textAlign:"left", margin:"0 0 10px"}}>
<span style={{cursor:"pointer"}}>
<span style={{paddingRight:"5px"}}>
<img src={CheckDecagram}/>
</span>
{text}
<span style={{color:"#00bcd4"}}> SAIBA MAIS</span>
</span>
</p>
</React.Fragment>
)
}
const GetHeaderConfig = () => {
let config = {
headers : {
'Accept': 'application/json',
'Content-Type': 'application/json',
'Access-Token': sessionStorage.getItem('@portalmec/accessToken'),
'Client': sessionStorage.getItem('@portalmec/clientToken'),
'Uid': sessionStorage.getItem('@portalmec/uid'),
}
}
{/*'Host': 'api.portalmec.c3sl.ufpr.br',
'Cookie': ''*/}
return config
}
export default function UserPage (props){ export default function UserPage (props){
const {state, dispatch} = useContext(Store) const {state, dispatch} = useContext(Store)
...@@ -50,21 +161,12 @@ export default function UserPage (props){ ...@@ -50,21 +161,12 @@ export default function UserPage (props){
const [tabs, setTabs] = useState([ const [tabs, setTabs] = useState([
'Atividades', 'Meus Recursos', 'Favoritos', 'Coleções', 'Rede' 'Atividades', 'Meus Recursos', 'Favoritos', 'Coleções', 'Rede'
]) ])
const user = sessionStorage.getItem('@portalmec/username') {/*sessionStorage.getItem('@portalmec/username')*/}
const id = sessionStorage.getItem('@portalmec/id') const user = state.currentUser.username
{/*sessionStorage.getItem('@portalmec/id')*/}
const id = state.currentUser.id
const [modalOpen, handleModal] = useState(false) const [modalOpen, handleModal] = useState(false)
const [coverImg, setCoverImg] = useState(state.currentUser.userCover)
const config = {
headers : {
'Accept': 'application/json',
'Content-Type': 'application/json',
'Access-Token': sessionStorage.getItem('@portalmec/accessToken'),
'Client': sessionStorage.getItem('@portalmec/clientToken'),
'Uid': sessionStorage.getItem('@portalmec/uid'),
'Host': 'api.portalmec.c3sl.ufpr.br',
'Cookie': ''
}
}
const modalControl = () => { const modalControl = () => {
handleModal(!modalOpen) handleModal(!modalOpen)
...@@ -75,6 +177,7 @@ export default function UserPage (props){ ...@@ -75,6 +177,7 @@ export default function UserPage (props){
} }
useEffect( () => { useEffect( () => {
if (id != '') {
axios.get( (`${apiUrl}/users/` + id), { axios.get( (`${apiUrl}/users/` + id), {
'Accept': 'application/json', 'Accept': 'application/json',
'Content-Type': 'application/json', 'Content-Type': 'application/json',
...@@ -82,24 +185,32 @@ export default function UserPage (props){ ...@@ -82,24 +185,32 @@ export default function UserPage (props){
'Cookie': '' 'Cookie': ''
}) })
.then( (response) => { .then( (response) => {
console.log(response)
dispatch ({ dispatch ({
type : 'USER_ACCESSED_USER_PAGE', type : 'USER_ACCESSED_USER_PAGE',
set: { set: {
id : response.data.id, id : response.data.id,
email : response.data.email, email : response.data.email,
username : response.data.name, username : response.data.name,
education : response.data.education, accessToken : response.headers['access-token'],
clientToken : state.currentUser.clientToken,
userAvatar : response.data.avatar, userAvatar : response.data.avatar,
userCover : response.data.cover, userCover : response.data.cover,
followCount : response.data.follow_count, followCount : response.data.follow_count,
collectionsCount: response.data.collections_count, collectionsCount: response.data.collections_count,
submitter_request : response.data.submitter_request,
} }
}) })
if((response.data.role_ids.includes(4))) {
setTabs([
'Atividades', 'Meus Recursos', 'Favoritos', 'Coleções', 'Rede', 'Curadoria'
])
}
}, },
(error) => { (error) => {
console.log('error while running ComponentDidMout') console.log('error while running ComponentDidMout')
} }
) )}
}, []) }, [])
const redirect = () => { const redirect = () => {
...@@ -111,8 +222,12 @@ export default function UserPage (props){ ...@@ -111,8 +222,12 @@ export default function UserPage (props){
} }
const updateCover = (selectorFiles : FileList) => { const updateCover = (selectorFiles : FileList) => {
console.log(selectorFiles) const objectURL = URL.createObjectURL(selectorFiles[0])
console.log(selectorFiles[0]) console.log(objectURL)
//setCoverImg(img)
//modal selecionar posicao do coverImg
} }
return ( return (
...@@ -126,86 +241,31 @@ export default function UserPage (props){ ...@@ -126,86 +241,31 @@ export default function UserPage (props){
<ModalAlterarAvatar <ModalAlterarAvatar
open={modalOpen} open={modalOpen}
handleClose={modalControl} handleClose={modalControl}
userAvatar={state.currentUser.userAvatar}
/> />
<HeaderDiv> <BackgroundDiv>
<ContainerNoPad>
<BreadcrumbsDiv>
<StyledBreadcrumbs>
<Link to="/" style={{color:"#00bcd4", textDecoration:"none"}}>
Página Inicial
</Link>
<span>
Minha área
</span>
<span>
{tabs[tabValue]}
</span>
</StyledBreadcrumbs>
</BreadcrumbsDiv>
<div style={{display:"flex", flexDirection:"column"}}> <CustomizedBreadcrumbs
<MainContainerDesktop maxwidth="xl"> values={["Minha área", tabs[tabValue]]}
<Paper elevation={3} style= {{width:"max-content"}}> />
<ContainerUserProfile> <Grid container spacing={2}>
<Grid item xs={12}>
<div style={{padding : "10px 0 8px 0"}}>
<UserProfileContainer>
<HeaderContainer> <HeaderContainer>
<CoverContainer> {PageCover(state.currentUser.userCover, (e) => updateCover(e.target.files))}
<img src={state.currentUser.userCover} alt = "user cover avatar" style= {{width:"100%", height:"100%", objectFit : "cover" }}/>
<input accept="image/*" style = {{display:"none"}} id="icon-button-file" type="file" onChange={(e) => updateCover(e.target.files)}/> {ProfileAvatar(state.currentUser.userAvatar, hoverAlterarFoto, handleHoverAlterarFoto, modalControl)}
<label htmlFor="icon-button-file">
<Tooltip title={<span style={{fontSize:"14px", overflow:"hidden", transition:"all .5s ease"}}>ALTERAR CAPA</span>} placement="left"> {UserProfileInfo(user, state.currentUser.education)}
<IconButton style={{position:"absolute",right:"0",top:"0",color:"#fff"}}color="primary" aria-label="upload picture" component="span">
<PhotoCamera /> {EditProfileButton()}
</IconButton>
</Tooltip>
</label>
</CoverContainer>
<ProfileAvatarDiv onMouseEnter={handleHoverAlterarFoto} onMouseLeave={handleHoverAlterarFoto} onClick={modalControl}>
<img src={state.currentUser.userAvatar} alt = "user avatar" style={{height : "inherit", width : "inherit", border:"0", verticalAlign:"middle"}}/>
<ChangeAvatarDiv style={ {display : hoverAlterarFoto ? 'flex' : 'none'}}>
<span>Alterar Foto</span>
</ChangeAvatarDiv>
</ProfileAvatarDiv>
<UserProfileInfoDiv>
<p style={{fontSize:"28px", color:"#fff", marginBottom:"2px", fontWeight:"500", backgroundColor:"#77777796", backgroundRadius : "8px"}}>{user}</p>
<div style={{fontSize:"14px", color:"#fff", marginBottom:"2px"}}>
<p>{state.currentUser.education}</p>
</div>
</UserProfileInfoDiv>
<EditProfileAnchor to="/editarperfil">
<Button>
<EditIcon style={{marginRight:"5px", verticalAlign:"middle"}}/> <span>EDITAR PERFIL</span>
</Button>
</EditProfileAnchor>
</HeaderContainer> </HeaderContainer>
<CheckTeacherDiv> <CheckTeacherDiv>
<> {SubmitterStatus(state.currentUser.submitter_request)}
{
state.currentUser.isCollaborativeTeacher ?
(
[
<>
<img src={CheckDecagram} style={{color:"#00bcd4"}}/>
<span>Professor(a)</span>
</>
]
)
:
(
[
<p style={{fontSize:"15px", lineHeight:"22px", textAlign:"left", margin:"0 0 10px"}}>
<span style={{cursor:"pointer"}}>
<span style={{paddingRight:"5px"}}>
<img src={CheckDecagram}/>
</span>
Você é professor(a) e gostaria de publicar recursos?
<span style={{color:"#00bcd4"}}> SAIBA MAIS</span>
</span>
</p>
]
)
}
</>
</CheckTeacherDiv> </CheckTeacherDiv>
<RodapeDiv> <RodapeDiv>
<NavBarContentContainer> <NavBarContentContainer>
<StyledTabs <StyledTabs
...@@ -217,25 +277,35 @@ export default function UserPage (props){ ...@@ -217,25 +277,35 @@ export default function UserPage (props){
scrollButtons = "auto" scrollButtons = "auto"
TabIndicatorProps={{style : {background:"#00bcd4"}}} TabIndicatorProps={{style : {background:"#00bcd4"}}}
> >
<StyledTab label={tabs[0]}/> {
<StyledTab label={tabs[1]}/> tabs.map( (tab) =>
<StyledTab label={tabs[2]}/> <StyledTab label ={tab} key={tab}/>
<StyledTab label={tabs[3]}/> )
<StyledTab label={tabs[4]}/> }
</StyledTabs> </StyledTabs>
</NavBarContentContainer> </NavBarContentContainer>
</RodapeDiv> </RodapeDiv>
</ContainerUserProfile> </UserProfileContainer>
</Paper>
</MainContainerDesktop>
</div> </div>
{tabValue === 0 && <TabPanelAtividades id={id} config={config}/>} </Grid>
{tabValue === 1 && <TabPanelMeusRecursos id={id} config={config}/>}
{tabValue === 2 && <TabPanelFavoritos id={id} config={config}/>} <Grid item xs={12}>
{tabValue === 3 && <TabPanelColecoes id={id} config={config}/>} {tabValue === 0 &&
{tabValue === 4 && <TabPanelRede id={id} config={config}/>} <TabPanelAtividades id={id} config={GetHeaderConfig()}/>}
</ContainerNoPad> {tabValue === 1 &&
</HeaderDiv> <TabPanelMeusRecursos id={id} config={GetHeaderConfig()}/>}
{tabValue === 2 &&
<TabPanelFavoritos id={id} config={GetHeaderConfig()}/>}
{tabValue === 3 &&
<TabPanelColecoes id={id} config={GetHeaderConfig()}/>}
{tabValue === 4 &&
<TabPanelRede id={id} config={GetHeaderConfig()}/>}
{tabValue === 5 &&
<TabPanelCuradoria id={id} config={GetHeaderConfig()}/>}
</Grid>
</Grid>
</BackgroundDiv>
</React.Fragment> </React.Fragment>
] ]
) )
...@@ -251,59 +321,6 @@ export default function UserPage (props){ ...@@ -251,59 +321,6 @@ export default function UserPage (props){
} }
export const HeaderDiv = styled.div`
background-color : #f4f4f4;
color : #666;
font-size : 14px;
line-height : 20px;
padding-bottom : 40px;
`
const ContainerNoPad = styled.div`
min-width : 1170px;
`
export const BreadcrumbsDiv = styled.div`
padding : 10px;
display : flex;
justify-content : center;
`
export const StyledBreadcrumbs = styled(Breadcrumbs)`
display : flex;
justify-content : flex-start;
max-width : 1170px;
span {
color : #a5a5a5;
}
`
const MainContainerDesktop = styled(Container)`
padding : 10px 0 8px 0;
.MuiContainer-maxWidthXl {
max-width : 1170px !important;
}
`
const ContainerUserProfile = styled(Container)`
padding : 0;
background-color : #fff;
margin-bottom: 30px;
width : 1170px;
margin-right : auto;
padding-left : 0 !important;
padding-right : 0 !important;
margin-left : auto;
`
const HeaderContainer = styled(Container)`
background-color : #afeeee;
position : relative;
`
const CoverContainer = styled(Container)`
height : 230px;
position : relative;
`
const ProfileAvatarDiv = styled.div` const ProfileAvatarDiv = styled.div`
bottom : -65px; bottom : -65px;
...@@ -316,6 +333,7 @@ const ProfileAvatarDiv = styled.div` ...@@ -316,6 +333,7 @@ const ProfileAvatarDiv = styled.div`
border : 8px solid #fff; border : 8px solid #fff;
outline : 0; outline : 0;
cursor : pointer; cursor : pointer;
background-color : #a5a5a5;
` `
export const ChangeAvatarDiv = styled.div` export const ChangeAvatarDiv = styled.div`
...@@ -329,13 +347,6 @@ export const ChangeAvatarDiv = styled.div` ...@@ -329,13 +347,6 @@ export const ChangeAvatarDiv = styled.div`
justify-content : center; justify-content : center;
` `
const UserProfileInfoDiv = styled.div`
position : absolute;
bottom : 0;
left : 260px;
overflow : hidden;
margin-bottom : 20px;
`
const EditProfileAnchor = styled(Link)` const EditProfileAnchor = styled(Link)`
Button { Button {
...@@ -349,8 +360,10 @@ const EditProfileAnchor = styled(Link)` ...@@ -349,8 +360,10 @@ const EditProfileAnchor = styled(Link)`
padding : 0 10px; padding : 0 10px;
text-decoration : none; text-decoration : none;
border-radius : 3px; border-radius : 3px;
@media screen and (min-width: 800px) {
min-height : 36px; min-height : 36px;
min-width : 88px; min-width : 88px;
}
line-height : 36px; line-height : 36px;
border : 0; border : 0;
display: inline-block; display: inline-block;
...@@ -358,39 +371,13 @@ const EditProfileAnchor = styled(Link)` ...@@ -358,39 +371,13 @@ const EditProfileAnchor = styled(Link)`
:hover{ :hover{
background-color : #fafafa; background-color : #fafafa;
} }
@media screen and (max-width: 600px) {
max-width : 44px !important ;
}
} }
` `
const CheckTeacherDiv = styled.div`
font-size : 14px;
padding-top : 10px;
padding-left : 250px;
margin-bottom : -10px;
color : #666 !important;
`
const RodapeDiv = styled.div`
justify-content : flex-end;
display : flex;
`
const NavBarContentContainer = styled(Container)`
background-color : #fff;
padding-bottom : 0;
overflow-x : hidden !important;
overflow-y : hid1den !important;
margin-right : 0 !important;
`
const StyledTabs = styled(Tabs)`
.MuiTab-textColorPrimary.Mui-selected {
color : #00bcd4 !important;
border-bottom-color : #00bcd4 !important;
}
.Mui-selected {
border-bottom-color : #00bcd4 !important;
}
`
const StyledTab = styled(Tab)` const StyledTab = styled(Tab)`
.Mui-selected { .Mui-selected {
border-bottom-color : #00bcd4 !important; border-bottom-color : #00bcd4 !important;
......
src/Store.js
View file @ 4f57647c
...@@ -23,7 +23,7 @@ export const Store = React.createContext() ...@@ -23,7 +23,7 @@ export const Store = React.createContext()
const initialState = { const initialState = {
searchOpen: false, searchOpen: false,
userIsLoggedIn : false, userIsLoggedIn : false,
userAgreedToPublicationTerms: true, userAgreedToPublicationTerms: false,
userAgreedToPublicationPermissions: false, userAgreedToPublicationPermissions: false,
modalColaborarPlataformaOpen : false, modalColaborarPlataformaOpen : false,
search: { search: {
...@@ -40,8 +40,6 @@ const initialState = { ...@@ -40,8 +40,6 @@ const initialState = {
email : '', email : '',
accessToken : '', accessToken : '',
clientToken : '', clientToken : '',
education : '',
isCollaborativeTeacher : false,
userAvatar : '', userAvatar : '',
userCover : '', userCover : '',
uid : '', uid : '',
......