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 1601 additions and 753 deletions
src/Components/TabPanels/PanelComponents/TemplateRecurso.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'
import Grid from '@material-ui/core/Grid';
import NoContent from './NoContent.js'
import ResourceCardFunction from '../../ResourceCardFunction.js'
import Title from './PanelTitle.js'
import {WhiteContainer, StyledGrid} from '../StyledComponents.js'
import {ButtonsAreaRecurso} from './ButtonsArea'
export default function Template (props) {
return (
<WhiteContainer>
<Title
title={props.titleText}
length={props.length}
/>
{
props.length === 0 ?
(
[
<NoContent text={props.noContentText}/>
]
)
:
(
[
<React.Fragment>
<StyledGrid container spacing={1} style={{paddingLeft : "30px", paddingRight : "15px"}}>
{
props.slice.map( (card) =>
<Grid item md={3} xs={12} key={card.id}>
<ResourceCardFunction
avatar = {card.publisher.avatar}
thumbnail = {card.thumbnail}
type = {card.object_type ? card.object_type : "Outros"}
title={card.name}
published={card.state === "published" ? true : false}
likeCount={card.likes_count}
liked={card.liked}
rating={card.score}
tags={card.educational_stages}
/>
</Grid>
)
}
</StyledGrid>
<ButtonsAreaRecurso
sliceLength={props.slice.length}
length={props.length}
showMore={() => props.showMore()}
showAll={() => props.showAll()}
/>
</React.Fragment>
]
)
}
</WhiteContainer>
)
}
src/Components/TabPanels/PanelComponents/TemplateRede.js 0 → 100644
View file @ 4f57647c
import React from 'react'
import ContactCard from '../../ContactCard.js'
import {apiDomain} from '../../../env';
import NoContent from './NoContent.js'
import {WhiteContainer, StyledGrid} from '../StyledComponents.js'
import Title from './PanelTitle.js'
import Grid from '@material-ui/core/Grid';
import {ButtonsAreaRede} from './ButtonsArea'
export default function PanelTemplateRede (props) {
const RenderContactCard = (card, followerBoolean) => {
if (followerBoolean) {
return (
<ContactCard
name = {card.follower.name}
avatar = {card.follower.avatar ? apiDomain + card.follower.avatar : null}
cover={card.follower.cover ? apiDomain + card.follower.cover : null}
numCollections = {card.follower.collections_count}
numLearningObjects = {card.follower.learning_objects_count}
follow_count={card.follower.follows_count}
followed = {card.follower.followed || null}
followerID = {card.follower.id}
href={'/usuario-publico/' + card.follower.id}
/>
)
}
else {
return (
<ContactCard
name = {card.followable.name}
avatar = {card.followable.avatar ? apiDomain + '/' + card.followable.avatar : null}
cover={apiDomain + card.followable.cover}
numCollections = {card.followable.collections_count}
numLearningObjects = {card.followable.learning_objects_count}
follow_count={card.followable.follows_count}
followed = {card.followable.followed || null}
followedID = {card.followable.id}
href={'/usuario-publico/' + card.followable.id}
/>
)
}
}
return (
<WhiteContainer>
<Title
title={props.title}
length={props.length}
/>
{/*if length is 0, display "No Content" text */}
{/*otherwise, display either ContactCard and Buttons */}
{
props.length === 0 ?
(
[
<NoContent text={props.noContentText}/>
]
)
:
(
[
<React.Fragment>
<StyledGrid container spacing={1} style={{paddingLeft : "30px", paddingRight : "15px"}}>
{
props.sliceArr.map( (card) =>
<>
{
card.follower &&
<Grid item md={3} xs={12} key={card.id}>
{RenderContactCard(card, props.follower)}
</Grid>
}
</>
)
}
</StyledGrid>
<ButtonsAreaRede
sliceLength={props.sliceArr.length}
length={props.length}
showMore={() => props.showMore()}
showAll={() => props.showAll()}
/>
</React.Fragment>
]
)
}
</WhiteContainer>
)
}
src/Components/TabPanels/PublicUserPageTabs/LastCollections.js 0 → 100644
View file @ 4f57647c
import React from 'react'
import Grid from '@material-ui/core/Grid';
import {HeaderGrid, StyledGrid} from '../StyledComponents.js'
import {NoContent} from './TabInicio.js'
import CollectionCardFunction from '../../CollectionCardFunction.js'
import NoCol from '../../../img/Pagina_vazia_colecao.png'
export default function LastCols (props) {
return (
<React.Fragment>
<HeaderGrid container>
<Grid item xs={12}>
<h3>Últimas alterações em coleções</h3>
</Grid>
</HeaderGrid>
{
props.count == 0 || props.collections.length == 0?
(
[
<Grid container>
<Grid item xs={12}>
<NoContent
image={NoCol}
text1={props.username + " ainda não disponibilizou nenhuma coleção."}
text2={"Quando disponibilizar, elas aparecerão aqui."}
/>
</Grid>
</Grid>
]
)
:
(
[
<StyledGrid container spacing={1} style={{paddingLeft : "0.5em"}}>
{
props.collections.slice(0,4).map( (card) =>
<Grid item md={3} xs={12} key={card.id}>
<CollectionCardFunction
name={card.name}
rating={card.score}
type={card.object_type}
description={card.description}
author={card.owner.name}
avatar={card.owner.avatar}
thumbnails={card.items_thumbnails}
likeCount={card.likes_count}
liked={card.liked}
followed={card.followed}
tags={card.tags}
/>
</Grid>
)
}
</StyledGrid>
]
)
}
</React.Fragment>
)
}
src/Components/TabPanels/PublicUserPageTabs/LastLearnObj.js 0 → 100644
View file @ 4f57647c
import React from 'react'
import Grid from '@material-ui/core/Grid';
import ResourceCardFunction from '../../ResourceCardFunction.js'
import NoPub from '../../../img/Pagina_vazia_Sem_publicar.png'
import {HeaderGrid, StyledGrid} from '../StyledComponents.js'
import {NoContent} from './TabInicio.js'
export default function LastLearnObjs (props) {
return (
<React.Fragment>
<HeaderGrid container>
<Grid item xs={9}>
<h3>Últimos Recursos Publicados</h3>
</Grid>
<Grid item xs={3} style={{textAlign : "end"}}>
{props.count > 4 &&
<span>
VER MAIS
</span>
}
</Grid>
</HeaderGrid>
{
props.count == 0 ?
(
[
<Grid container>
<Grid item xs={12}>
<NoContent
image={NoPub}
text1={props.username + " ainda não disponibilizou nenhum recurso."}
text2={"Quando disponibilizar, eles aparecerão aqui."}
/>
</Grid>
</Grid>
]
)
:
(
[
<StyledGrid container spacing={1} style={{paddingLeft : "0.5em"}}>
{
props.learningObjs.slice(0,4).map( (card) =>
<Grid item md={3} xs={12} key={card.id}>
<ResourceCardFunction
avatar = {card.publisher.avatar}
thumbnail = {card.thumbnail}
type = {card.object_type ? card.object_type : "Outros"}
title={card.name}
published={card.state === "published" ? true : false}
likeCount={card.likes_count}
liked={card.liked}
rating={card.score}
tags={card.educational_stages}
/>
</Grid>
)
}
</StyledGrid>
]
)
}
</React.Fragment>
)
}
src/Components/TabPanels/PublicUserPageTabs/TabColecoes.js 0 → 100644
View file @ 4f57647c
import React, {useState, useEffect} from 'react'
import styled from 'styled-components'
import {HeaderGrid, ContainerStyled, Carregados} from '../StyledComponents.js'
import Grid from '@material-ui/core/Grid';
import CollectionCardFunction from '../../CollectionCardFunction.js'
import {ButtonMostrarMaisColecao} from '../PanelComponents/ButtonsArea.js'
export default function TabRecursos (props) {
const [arr, setArr] = useState([])
const [colsSlice, setSlice] = useState([])
const handleSlice = (newArr) => {setSlice(newArr)}
useEffect( () => {
setArr(props.collections)
setSlice(props.collections.slice(0,4))
}, [])
const showMore = (quantity) => {
var sliceLength = colsSlice.length
handleSlice(arr.slice(0, sliceLength + quantity))
}
return (
<ContainerStyled style={{flexDirection : "column"}}>
<HeaderGrid container>
<Grid item xs={12}>
<h3>Coleções públicas <b style={{fontWeight:"500"}}>({props.count})</b></h3>
</Grid>
</HeaderGrid>
<Grid container spacing={1} style={{paddingLeft : "0.5em"}}>
{
colsSlice.map( (card) =>
<Grid item md={3} xs={12} key={card.id}>
<CollectionCardFunction
name={card.name}
rating={card.score}
type={card.object_type}
description={card.description}
author={card.owner.name}
avatar={card.owner.avatar}
thumbnails={card.items_thumbnails}
likeCount={card.likes_count}
liked={card.liked}
followed={card.followed}
tags={card.tags}
/>
</Grid>
)
}
</Grid>
<Carregados>
<p style={{margin:"0 0 10px", fontSize:"14px"}}>
Carregados {colsSlice.length} de {arr.length}
</p>
{
props.count > 5 &&
<React.Fragment>
<ButtonMostrarMaisColecao onClick={() => {showMore(4)}}>
<span style={{color:"#fff", fontSize:"14px", fontWeight:"500"}}>MOSTRAR MAIS 4</span>
</ButtonMostrarMaisColecao>
<ButtonMostrarMaisColecao onClick={() => {showMore(20)}}>
<span style={{color:"#fff", fontSize:"14px", fontWeight:"500"}}>MOSTRAR MAIS 20</span>
</ButtonMostrarMaisColecao>
</React.Fragment>
}
</Carregados>
</ContainerStyled>
)
}
src/Components/TabPanels/PublicUserPageTabs/TabInicio.js 0 → 100644
View file @ 4f57647c
import React from 'react'
import styled from 'styled-components'
import UserDescription from './UserDescription.js'
import NoContentImage from '../../../img/img-16.png'
import Grid from '@material-ui/core/Grid';
import LastLearnObjs from './LastLearnObj.js'
import LastCols from './LastCollections.js'
import {ContainerStyled} from '../StyledComponents.js'
const NoContentContainer = styled.div`
height : 250px;
display : flex;
justify-content : center;
align-content : center;
text-align : center;
h3 {
font-size : 24px;
font-weight : lighter;
margin-top : 20px;
margin-bottom : 10px;
}
p {
font-size : 15px;
font-weight : lighter;
margin : 0 0 10px;
}
`
/*Displays given image and text saying user hasn't posted anything yet*/
export function NoContent (props) {
return (
<NoContentContainer>
<div style={{paddingTop : "1em"}}>
<img src={props.image} style={{width : "130px", verticalAlign : "middle", border : "0"}}/>
<h3>
{props.text1}
</h3>
<p>
{props.text2}
</p>
</div>
</NoContentContainer>
)
}
export default function TabInicio (props) {
return (
<React.Fragment>
{/*display user description*/}
{props.user.description &&
<UserDescription text={props.user.description}/>
}
{
props.user.learning_objects_count == 0 && props.user.collections_count == 0 ?
(
[
<ContainerStyled>
<Grid container>
<Grid item xs={12}>
<NoContent
image={NoContentImage}
text1={props.user.name + " ainda não disponibilizou nenhum recurso ou coleção."}
text2={"Quando disponibilizar, eles aparecerão aqui."}
/>
</Grid>
</Grid>
</ContainerStyled>
]
)
:
(
[
<React.Fragment>
<ContainerStyled style={{flexDirection : "column"}}>
<LastLearnObjs
count={props.user.learning_objects_count}
username={props.user.name}
learningObjs={props.learningObjs}
/>
</ContainerStyled>
<ContainerStyled style={{flexDirection : "column", paddingTop : "1em"}}>
<LastCols
count={props.user.collections_count}
username={props.user.name}
collections={props.collections}
/>
</ContainerStyled>
</React.Fragment>
]
)
}
{/*display last published learning objects and last alterations in user collections*/}
</React.Fragment>
)
}
src/Components/TabPanels/PublicUserPageTabs/TabRecursos.js 0 → 100644
View file @ 4f57647c
import React, {useState, useEffect} from 'react'
import styled from 'styled-components'
import {HeaderGrid, ContainerStyled, Carregados} from '../StyledComponents.js'
import Grid from '@material-ui/core/Grid';
import ResourceCardFunction from '../../ResourceCardFunction.js'
import {ButtonMostrarMaisRecurso} from '../PanelComponents/ButtonsArea'
export default function TabRecursos (props) {
const [arr, setArr] = useState([])
const [objsSlice, setSlice] = useState([])
const handleSlice = (newArr) => {setSlice(newArr)}
useEffect( () => {
setArr(props.learningObjs)
setSlice(props.learningObjs.slice(0,4))
}, [])
const showMore = (quantity) => {
var sliceLength = objsSlice.length
handleSlice(arr.slice(0, sliceLength + quantity))
}
return (
<ContainerStyled style={{flexDirection : "column"}}>
<HeaderGrid container>
<Grid item xs={12}>
<h3>Recursos Publicados <b style={{fontWeight:"500"}}>({props.count})</b></h3>
</Grid>
</HeaderGrid>
<Grid container spacing={1} style={{paddingLeft : "0.5em"}}>
{
objsSlice.map( (card) =>
<Grid item md={3} xs={12} key={card.id}>
<ResourceCardFunction
avatar = {card.publisher.avatar}
thumbnail = {card.thumbnail}
type = {card.object_type ? card.object_type : "Outros"}
title={card.name}
published={card.state === "published" ? true : false}
likeCount={card.likes_count}
liked={card.liked}
rating={card.score}
tags={card.educational_stages}
/>
</Grid>
)
}
</Grid>
<Carregados>
<p style={{margin:"0 0 10px", fontSize:"14px"}}>
Carregados {objsSlice.length} de {arr.length}
</p>
{
props.count > 5 &&
<React.Fragment>
<ButtonMostrarMaisRecurso onClick={() => {showMore(4)}}>
<span style={{color:"#fff", fontSize:"14px", fontWeight:"500"}}>MOSTRAR MAIS 4</span>
</ButtonMostrarMaisRecurso>
<ButtonMostrarMaisRecurso onClick={() => {showMore(20)}}>
<span style={{color:"#fff", fontSize:"14px", fontWeight:"500"}}>MOSTRAR MAIS 20</span>
</ButtonMostrarMaisRecurso>
</React.Fragment>
}
</Carregados>
</ContainerStyled>
)
}
src/Components/TabPanels/PublicUserPageTabs/TabRede.js 0 → 100644
View file @ 4f57647c
import React, {useState, useEffect} from 'react'
import axios from 'axios'
import {apiUrl, apiDomain} from '../../../env';
import PanelTemplateRede from '../PanelComponents/TemplateRede.js'
const getConfig = () => {
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')
}
}
return config
}
export default function TabRede (props) {
const [followers, setFollowers] = useState([])
const [followersSlice, setFollowersSlice] = useState([])
const showMoreFollowers = () => {
let varSlice = followersSlice.length
setFollowersSlice(followers.slice(0, varSlice + 4))
}
const showAllFollowers = () => {setFollowersSlice(followers)}
const [following, setFollowing] = useState([])
const [followingSlice, setFollowingSlice] = useState([])
const showMoreFollowing = () => {
let varSlice = followingSlice.length
setFollowingSlice(following.slice(0, varSlice + 4))
}
const showAllFollowing = () => {setFollowingSlice(following)}
useEffect( () => {
axios.all([
axios.get((`${apiUrl}/users/` + props.id + '/followers'), getConfig()),
axios.get((`${apiUrl}/users/` + props.id + '/following/User'), getConfig())
])
.then( (responseArr) => {
console.log('responseArr Rede: ', responseArr)
if (responseArr[0].headers['access-token']) {
sessionStorage.setItem('@portalmec/accessToken', responseArr[0].headers['access-token'])
}
setFollowers(responseArr[0].data)
setFollowersSlice(responseArr[0].data.slice(0,4))
setFollowing(responseArr[1].data)
setFollowingSlice(responseArr[1].data.slice(0,4))
},
(error) => {
console.log('error while running axios all')
}
)
}, [])
return (
<React.Fragment>
<PanelTemplateRede
title={"Seguidores"}
length={followers.length}
sliceArr={followersSlice}
showMore={showMoreFollowers}
showAll={showAllFollowers}
follower={true}
noContentText={props.username + ' não possui nenhum seguidor'}
/>
<PanelTemplateRede
title={"Seguindo"}
length={following.length}
sliceArr={followingSlice}
showMore={showMoreFollowing}
showAll={showAllFollowing}
follower={false}
noContentText={props.username + ' não segue nenhum usuário'}
/>
</React.Fragment>
)
}
src/Components/TabPanels/PublicUserPageTabs/UserDescription.js 0 → 100644
View file @ 4f57647c
import React from 'react'
import styled from 'styled-components'
export default function UserDescription (props) {
return (
<NoPadBox>
<ContainerDiv>
<DivSobre>
<h3>Sobre</h3>
<p>{props.text}</p>
</DivSobre>
</ContainerDiv>
</NoPadBox>
)
}
const DivSobre = styled.div`
position : relative;
min-height : 1px;
padding-left : 30px;
margin-bottom : 20px;
@media screen and (min-width: 992px) {
width : 66.66666667%;
float : left;
}
h3 {
font-size : 24px;
margin-top : 20px;
margin-bottom : 10px;
font-family : inherit;
font-weight: 500;
line-height: 1.1;
color: inherit;
}
p {
margin : 0 0 10px;
}
`
const ContainerDiv = styled.div`
@media screen and (min-width: 1200px) {
width : 1170px;
}
@media screen and (min-width: 992px) and (max-width : 1199px){
width : 970px;
}
@media screen and (min-width: 768px) and (max-width : 991px) {
width : 750px;
}
`
const NoPadBox = styled.div`
display : flex;
flex-direction: column;
margin-right : auto;
margin-left : auto;
padding : 0;
background-color : #fff;
box-shadow : 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
margin-bottom : 30px;
@media screen and (min-width: 768px) {
width : max-content;
}
`
src/Components/TabPanels/StyledComponents.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'
import styled from 'styled-components'
import Grid from '@material-ui/core/Grid';
import Tabs from '@material-ui/core/Tabs';
import { Container } from 'react-grid-system'
{/* COMPONENTS USED IN ALL TABS */}
export const ContainerDivStyled = styled.div`
/*No portal atual: "container nopad box"*/
margin-left : auto;
margin-right : auto;
margin-bottom: 30px;
background-color: #fff;
box-shadow : 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24) !important;
height : auto;
display : flex;
@media screen and (min-width: 1200px) {
width : 1170px;
}
@media screen and (min-width: 992px) and (max-width : 1199px){
width : 970px;
}
@media screen and (min-width: 768px) and (max-width : 991px) {
width : 750px;
}
@media screen and (max-width: 768px) {
width : max-content;
}
`
export const DivContainerRecursosPublicados = styled.div`
/*No portal atual: "container-recursos-privados-dskt col-xs 12"*/
position : relative;
min-height : 1px;
padding-right : 15px;
padding-left : 15px;
`
export const WhiteContainer = styled.div`
padding-top : 1em;
display : flex;
flex-direction : column;
margin-left : auto;
margin-right : auto;
background-color : #fff;
box-shadow : 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
margin-bottom : 30px;
@media screen and (min-width: 1200px) {
width : 1170px;
}
@media screen and (min-width: 992px) and (max-width : 1199px){
width : 970px;
}
@media screen and (min-width: 768px) and (max-width : 991px) {
width : 750px;
}
@media screen and (max-width: 768px) {
width : auto;
}
`
export const StyledGrid = styled(Grid)`
.MuiGrid-item {
@media screen and (max-width: 768px) {
display : flex;
justify-content : center;
}
}
`
export const Carregados = styled.div`
text-align : center;
position : relative;
margin-right : -15px;
margin-left : -15px;
`
export const HeaderGrid = styled(Grid)`
border-bottom : 1px solid #d1d1d1;
padding-bottom : 15px;
margin-bottom : 10px;
h3 {
font-size: 21px;
font-weight: lighter !important;
margin: 0;
@media screen and (max-width: 768px) {
padding-left : 5px;
}
}
span {
color: #ff7f00 !important;
text-transform : uppercase;
font-weight : 700;
font-size : 15px;
@media screen and (max-width: 768px) {
padding-right : 5px;
}
}
`
export const ContainerStyled = styled.div`
padding : 0;
display : flex;
margin-left : auto;
margin-right : auto;
@media screen and (min-width: 1200px) {
width : 1170px;
}
@media screen and (min-width: 992px) and (max-width : 1199px){
width : 970px;
}
@media screen and (min-width: 768px) and (max-width : 991px) {
width : 750px;
}
@media screen and (max-width: 768px) {
width : auto;
}
.marginTop {
margin-top : 50px;
}
`
/*User page and Public User page components: */
export const HeaderContainer = styled.div`
background-color : #afeeee;
position : relative;
`
export const UserProfileContainer = styled.div`
background-color : #fff;
box-shadow : 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
margin-bottom : 30px;
margin-right : auto;
margin-left : auto;
display : flex;
flex-direction : column;
color : #666;
@media screen and (min-width: 1200px) {
width : 1170px;
}
@media screen and (min-width: 992px) and (max-width : 1199px){
width : 970px;
}
@media screen and (min-width: 768px) and (max-width : 991px) {
width : 750px;
}
`
export const CoverContainer = styled.div`
height : 230px;
position : relative;
`
export const UserProfileInfoDiv = styled.div`
position : absolute;
bottom : 0;
left : 260px;
overflow : hidden;
margin-bottom : 20px;
`
export const CheckTeacherDiv = styled.div`
@media screen and (min-width: 500px) {
padding-top : 10px;
padding-left : 250px;
margin-bottom : -10px;
}
p {
margin : 0 0 10px;
font-family: Roboto;
font-size: 15px;
line-height: 22px;
text-align: left;
span {
padding-right : 5px;
img {
display: inline;
height: 20px;
width: 22px;
}
}
}
@media screen and (max-width: 499px) {
display : none;
}
`
export const StyledTabs = styled(Tabs)`
.MuiTab-textColorPrimary.Mui-selected {
color : #00bcd4;
}
`
export const RodapeDiv = styled.div`
display : flex;
flex-direction : row;
justify-content : flex-end;
padding-right : 15px;
.report-button {
@media screen and (max-width: 768px) {
display : none;
}
}
`
export const NavBarContentContainer = styled(Container)`
background-color : transparent;
padding-bottom : 0;
overflow-x : hidden !important;
overflow-y : hiddden !important;
margin-right : 0 !important;
`
export const BackgroundDiv = styled.div`
color : #666;
font-family : 'Roboto', sans serif;
font-size : 14px;
padding-bottom : 50px;
line-height : 20px;
background : #f4f4f4;
`
src/Components/TabPanels/TabPanelColecoes.js deleted 100644 → 0
View file @ f1162cd5
import React, {useContext, useState, useEffect} from 'react'
import styled from 'styled-components'
import { Container } from 'react-grid-system'
import Paper from '@material-ui/core/Paper';
import Button from '@material-ui/core/Button';
import {ButtonMostrarTodos, ButtonMostrarMais, BtnAlinhaRecPvt, DivContainerRecursosPublicados, ContainerDivStyled, DivTitulo, StyledP, StyledHR} from './TabPanelMeusRecursos.js'
import {NoPubSpan, DivConteudoNaoPublicado, DivTextoNoPublications} from './TabPanelMeusRecursos.js'
import LoadingSpinner from '../LoadingSpinner.js'
import PaginaVaziaColecao from '../../img/Pagina_vazia_colecao.png'
import axios from 'axios'
import {apiUrl} from '../../env';
import CreateNewFolderIcon from '@material-ui/icons/CreateNewFolder';
export default function TabPanelColecoes (props) {
const [loading, handleLoading] = useState(true)
const [userCollections, setuserCollections] = useState([])
const [userCollectionsLength, setuserCollectionsLength] = useState(0)
const [followedCollections, setFollowedCollections] = useState([])
const [followedCollectionsLength, setfollowedCollectionsLength] = useState(0)
useEffect( () => {
axios.all([
axios.get((`${apiUrl}/users/` + props.id + '/collections'), props.config),
axios.get((`${apiUrl}/users/` + props.id + '/following/Collection'), props.config),
])
.then( (responseArr) => {
handleLoading(false)
console.log(responseArr)
console.log(responseArr[0].data)
console.log(responseArr[1].data)
},
(error) => {
handleLoading(false)
console.log('error while running axios all')
}
)
}, [])
return (
<>
{
loading ?
(
<LoadingSpinner text={'CARREGANDO COLEÇÕES'}/>
)
:
(
[
<React.Fragment>
<ContainerDivStyled>
<Paper elevation={3}>
<DivTitulo>
<StyledP>Minhas Coleções <b style={{fontWeight:"700", fontSize:"20px"}}>({userCollectionsLength})</b></StyledP>
<StyledHR/>
</DivTitulo>
<div style={{paddingRight:"15px", paddingLeft:"15px"}}>
<CardDiv>
<div style={{backgroundColor:"#673ab7", height:"250px", display:"flex", justifyContent:"center", alignItems:"center"}}>
<CreateNewFolderIcon style={{color:"#fff", fontSize:"70px"}}/>
<p style={{fontSize:"16px", margin:"0 0 10px"}}>
CRIAR COLEÇÃO
</p>
</div>
</CardDiv>
{
userCollectionsLength == 0 ?
(
[
<DivTextoNoPublications style={{width:"50%"}}>
<div style={{position:"relative", top:"50%", transform:"translateY(-50%)"}}>
<div>
<img src={PaginaVaziaColecao} alt="PaginaVaziaColecao"
style={{height:"150px",width:"150px", verticalAlign:"middle", border:"0"}}/>
<br/>
<span style={{fontFamily:"Roboto", fontWeight:"lighter", fontSize:"24px"}}>
Criamos a sua primeira Coleção!
</span>
<p style={{fontFamily:"Roboto", fontSize:"16px", margin:"0 0 10px"}}>
Adicione nela recursos que você queira acessar mais tarde.
<br/>
Crie novas coleções clicando no cartão roxo "Criar Colecão".
</p>
</div>
</div>
</DivTextoNoPublications>
]
)
:
(
<>
<DivContainerRecursosPublicados>
</DivContainerRecursosPublicados>
<BtnAlinhaRecPvt>
<p style={{margin:"0 0 10px", fontSize:"14px"}}>Carregados 2 de 2</p>
</BtnAlinhaRecPvt>
</>
)
}
</div>
</Paper>
</ContainerDivStyled>
<ContainerDivStyled>
<Paper elevation={3}>
<DivTitulo>
<StyledP>Coleções que eu sigo <b style={{fontWeight:"700", fontSize:"20px"}}>({followedCollectionsLength})</b></StyledP>
<StyledHR/>
</DivTitulo>
<div style={{height : "400px"}}>
{
followedCollectionsLength == 0 ?
(
[
<>
<DivTextoNoPublications>
<DivConteudoNaoPublicado>
<NoPubSpan>Você ainda não segue nenhuma coleção.</NoPubSpan>
</DivConteudoNaoPublicado>
</DivTextoNoPublications>
</>
]
)
:
(
[
<>
<DivContainerRecursosPublicados>
</DivContainerRecursosPublicados>
<BtnAlinhaRecPvt>
<p style={{margin:"0 0 10px", fontSize:"14px"}}>Carregados 4 de 4</p>
</BtnAlinhaRecPvt>
</>
]
)
}
</div>
</Paper>
</ContainerDivStyled>
</React.Fragment>
]
)
}
</>
)
}
const CardDiv = styled.div`
margin-top : 10px;
margin-bottom : 10px;
width : 25%;
float : left;
padding-left : 15px;
padding-right : 15px;
`
src/Components/TabPanels/TabPanelFavoritos.js deleted 100644 → 0
View file @ f1162cd5
import React, {useContext, useState, useEffect} from 'react'
import styled from 'styled-components'
import { Container } from 'react-grid-system'
import Paper from '@material-ui/core/Paper';
import Button from '@material-ui/core/Button';
import axios from 'axios'
import {apiUrl} from '../../env';
import {ButtonMostrarTodos, ButtonMostrarMais, BtnAlinhaRecPvt, DivContainerRecursosPublicados, ContainerDivStyled, DivTitulo, StyledP, StyledHR} from './TabPanelMeusRecursos.js'
import {NoPubSpan, DivConteudoNaoPublicado, DivTextoNoPublications} from './TabPanelMeusRecursos.js'
import LoadingSpinner from '../LoadingSpinner.js'
export default function TabPanelFavoritos (props) {
const [loading, handleLoading] = useState(true)
const [likedLearnObjs, setlikedLearnObjs] = useState([])
const [likedLearnObjsLength, setlikedLearnObjsLength] = useState(0)
const [likedCollections, setlikedCollections] = useState([])
const [likedCollectionsLength, setlikedCollectionsLength] = useState(0)
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) => {
handleLoading(false)
console.log(responseArr)
console.log(responseArr[0].data)
console.log(responseArr[1].data)
},
(error) => {
handleLoading(false)
console.log('error while running axios all')
}
)
}, [])
return (
<>
{
loading?
(
<LoadingSpinner text={'CARREGANDO...'}/>
)
:
(
[
<React.Fragment>
<ContainerDivStyled>
<Paper elevation={3}>
<DivTitulo>
<StyledP>Recursos Favoritados <b style={{fontWeight:"700", fontSize:"20px"}}>({likedLearnObjsLength})</b></StyledP>
<StyledHR/>
</DivTitulo>
<div style={{height : "400px"}}>
{
likedLearnObjsLength == 0 ?
(
[
<>
<DivTextoNoPublications>
<DivConteudoNaoPublicado>
<NoPubSpan>Você ainda não curtiu nenhum Recurso.</NoPubSpan>
<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>
</DivConteudoNaoPublicado>
</DivTextoNoPublications>
</>
]
)
:
(
[
<>
<DivContainerRecursosPublicados>
</DivContainerRecursosPublicados>
<BtnAlinhaRecPvt>
<p style={{margin:"0 0 10px", fontSize:"14px"}}>Carregados 4 de 7</p>
<ButtonMostrarMais>
<span style={{color:"#fff", fontSize:"14px", fontWeight:"500"}}>MOSTRAR MAIS</span>
</ButtonMostrarMais>
<ButtonMostrarTodos>
<span style={{color:"#666", fontSize:"14px", fontWeight:"500"}}>MOSTRAR TODOS</span>
</ButtonMostrarTodos>
</BtnAlinhaRecPvt>
</>
]
)
}
</div>
</Paper>
</ContainerDivStyled>
<ContainerDivStyled>
<Paper elevation={3}>
<DivTitulo>
<StyledP>Coleções Favoritadas <b style={{fontWeight:"700", fontSize:"20px"}}>({likedCollectionsLength})</b></StyledP>
<StyledHR/>
</DivTitulo>
<div style={{height : "400px"}}>
{
likedCollectionsLength == 0 ?
(
[
<>
<DivTextoNoPublications>
<DivConteudoNaoPublicado>
<NoPubSpan>Você ainda não curtiu nenhuma coleção.</NoPubSpan>
</DivConteudoNaoPublicado>
</DivTextoNoPublications>
</>
]
)
:
(
[
<>
<DivContainerRecursosPublicados>
</DivContainerRecursosPublicados>
<BtnAlinhaRecPvt>
<p style={{margin:"0 0 10px", fontSize:"14px"}}>Carregados 4 de 7</p>
<ButtonMostrarMaisColecao>
<span style={{color:"#fff", fontSize:"14px", fontWeight:"500"}}>MOSTRAR MAIS</span>
</ButtonMostrarMaisColecao>
<ButtonMostrarTodos>
<span style={{color:"#666", fontSize:"14px", fontWeight:"500"}}>MOSTRAR TODOS</span>
</ButtonMostrarTodos>
</BtnAlinhaRecPvt>
</>
]
)
}
</div>
</Paper>
</ContainerDivStyled>
</React.Fragment>
]
)
}
</>
)
}
const ButtonMostrarMaisColecao = styled(Button)`
background-color : #503096 !important;
font-size: 14px !important;
font-weight: 500 !important;
height: 36px !important;
border-radius: 3px !important;
padding-left: 16px !important;
padding-right: 16px !important;
box-shadow: 0 2px 5px 0 rgba(0,0,0,.26) !important;
outline : none !important;
min-width : 88px !important;
vertical-align : middle !important;
margin : 6px 8px !important;
text-decoration : none !important;
`
src/Components/TabPanels/TabPanelMeusRecursos.js deleted 100644 → 0
View file @ f1162cd5
import React, {useContext, useState, useEffect} from 'react'
import styled from 'styled-components'
import { Container } from 'react-grid-system'
import Paper from '@material-ui/core/Paper';
import Button from '@material-ui/core/Button';
import axios from 'axios'
import {apiUrl} from '../../env';
import LoadingSpinner from '../LoadingSpinner.js'
export default function TabPanelAtividades (props) {
const [loading, handleLoading] = useState(true)
const [learningObjects, setLearningObjects] = useState([]);
const [learningObjectsLength, setLengthLearnObj] = useState(0);
const [drafts, setDrafts] = useState([]);
const [draftsLength, setLengthDrafts] = useState(0);
const [curating, setCurating] = useState([]);
const [curatingLength, setLengthCurating] = useState(0);
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) => {
handleLoading(false)
console.log(responseArr)
console.log(responseArr[0].data)
console.log(responseArr[1].data)
console.log(responseArr[2].data)
},
(error) => {
handleLoading(false)
console.log('error while running axios all')
}
)
}, [])
return (
<>
{
loading ?
(
<LoadingSpinner text={'Carregando Recursos'}/>
)
:
([
<React.Fragment>
<ContainerDivStyled>
<Paper elevation={3}>
<DivTitulo>
<StyledP>Recurso Publicado <b style={{fontWeight:"700", fontSize:"20px"}}>({learningObjectsLength})</b></StyledP>
<StyledHR/>
</DivTitulo>
<div>
{
learningObjectsLength == 0 ?
(
[
<>
<DivTextoNoPublications>
<DivConteudoNaoPublicado>
<NoPubSpan>Você ainda não publicou nenhum Recurso!</NoPubSpan>
</DivConteudoNaoPublicado>
</DivTextoNoPublications>
</>
]
)
:
(
<>
{/**some sort of map with a list of notifications idk what though**/}
<span>stuff goes here</span>
</>
)
}
</div>
</Paper>
</ContainerDivStyled>
<ContainerDivStyled>
<Paper elevation={3}>
<DivTitulo>
<StyledP>Rascunhos <b style={{fontWeight:"700", fontSize:"20px"}}>({draftsLength})</b></StyledP>
<StyledHR/>
</DivTitulo>
<div style={{height : "400px"}}>
{
draftsLength == 0 ?
(
[
<>
<DivTextoNoPublications>
<DivConteudoNaoPublicado>
<NoPubSpan>Você não tem nenhum recurso sendo editado.</NoPubSpan>
</DivConteudoNaoPublicado>
</DivTextoNoPublications>
</>
]
)
: (
[
<>
<DivContainerRecursosPublicados>
</DivContainerRecursosPublicados>
<BtnAlinhaRecPvt>
<p style={{margin:"0 0 10px", fontSize:"14px"}}>Carregados 4 de 7</p>
<ButtonMostrarMais>
<span style={{color:"#fff", fontSize:"14px", fontWeight:"500"}}>MOSTRAR MAIS</span>
</ButtonMostrarMais>
<ButtonMostrarTodos>
<span style={{color:"#666", fontSize:"14px", fontWeight:"500"}}>MOSTRAR TODOS</span>
</ButtonMostrarTodos>
</BtnAlinhaRecPvt>
</>
]
)
}
</div>
</Paper>
</ContainerDivStyled>
<ContainerDivStyled>
<Paper elevation={3}>
<DivTitulo>
<StyledP>Recurso sendo avaliado pela curadoria <b style={{fontWeight:"700", fontSize:"20px"}}>({curatingLength})</b></StyledP>
<StyledHR/>
</DivTitulo>
<div>
{
curatingLength == 0 ?
(
<DivTextoNoPublications>
<DivConteudoNaoPublicado>
<NoPubSpan>Você não tem nenhum recurso sendo avaliado pelos curadores.</NoPubSpan>
</DivConteudoNaoPublicado>
</DivTextoNoPublications>
)
:
(
<>
{/**some sort of map with a list of notifications idk what though**/}
<span>stuff goes here</span>
</>
)
}
</div>
</Paper>
</ContainerDivStyled>
</React.Fragment>
])
}
</>
)
}
export const ButtonMostrarTodos = styled(Button)`
&:hover {
color : #d5d5d5 !important;
}
height : 36px !important;
padding-left: 16px !important;
padding-right: 16px !important;
font-weight: 500 !important;
border-radius: 3px !important;
color:#666 !important;
background-color: #e8e8e8 !important;
min-width : 88px !important;
height: 36px !important;
`
export const ButtonMostrarMais = styled(Button)`
background-color : #ff7f00 !important;
font-size: 14px !important;
font-weight: 500 !important;
height: 36px !important;
border-radius: 3px !important;
padding-left: 16px !important;
padding-right: 16px !important;
box-shadow: 0 2px 5px 0 rgba(0,0,0,.26) !important;
outline : none !important;
min-width : 88px !important;
vertical-align : middle !important;
margin : 6px 8px !important;
text-decoration : none !important;
`
export const BtnAlinhaRecPvt = styled.div`
text-align : center;
width : 100%;
float : left;
position : relative;
min-height : 1px;
padding-right : 15px;
padding-left : 15px;
`
export const DivContainerRecursosPublicados = styled.div`
width : 100%;
float : left;
position : relative;
min-height : 1px;
padding-right : 15px;
padding-left : 15px;
`
export const NoPubSpan = styled.span`
font-size : 24px;
font-family : Roboto;
font-weight : lighter;
`
export const DivConteudoNaoPublicado = styled.div`
position : relative;
top : 50%;
transform : translateY(-50%);
`
export const DivTextoNoPublications = styled.div`
height : 360px;
text-align : center;
width : 100%;
padding-right : 15px;
padding-left : 15px;
`
export const StyledHR = styled.hr`
border-color : #757575;
border-top: 1px solid #eee;
margin : 0 15px 0 15px;
padding-right : 0;
padding-left : 0;
`
export const StyledP = styled.p`
text-align : left;
margin-top : 10px;
padding-left : 15px;
padding-right : 15px;
font-weight : 300;
font-size : 1.875em;
`
export const DivTitulo = styled.div`
padding : 0;
margin-bottom : 10px;
width : 100;
display: flex;
flex-direction : column;
`
export const ContainerDivStyled = styled.div`
max-width : 1140px;
margin-left : auto;
margin-right : auto;
margin-left : 20em;
margin-bottom: 30px;
background-color: #fff;
`
src/Components/TabPanels/TabPanelRede.js deleted 100644 → 0
View file @ f1162cd5
import React, {useContext, useState, useEffect} from 'react'
import styled from 'styled-components'
import { Container } from 'react-grid-system'
import Paper from '@material-ui/core/Paper';
import Button from '@material-ui/core/Button';
import {ButtonMostrarTodos, ButtonMostrarMais, BtnAlinhaRecPvt, DivContainerRecursosPublicados, ContainerDivStyled, DivTitulo, StyledP, StyledHR} from './TabPanelMeusRecursos.js'
import axios from 'axios'
import {apiUrl} from '../../env';
import LoadingSpinner from '../LoadingSpinner.js'
import ContainerRedeVazia from './ContainerRedeVazia.js'
import {NoPubSpan, DivConteudoNaoPublicado, DivTextoNoPublications} from './TabPanelMeusRecursos.js'
export default function TabPanelRede (props) {
const [loading, handleLoading] = useState(true)
const [followingList, setFollowing] = useState([])
const [followingListLength, setFollowingLength] = useState(0)
const [followersList, setFollowers] = useState([])
const [followersListLength, setFollowersLength] = useState(0)
useEffect( () => {
axios.all([
axios.get((`${apiUrl}/users/` + props.id + '/following/User'), props.config),
axios.get((`${apiUrl}/users/` + props.id + '/followers'), props.config)
])
.then( (responseArr) => {
handleLoading(false)
console.log(responseArr)
console.log(responseArr[0].data)
console.log(responseArr[1].data)
},
(error) => {
handleLoading(false)
console.log('error while running axios all')
}
)
}, [])
return (
<>
{
loading ?
(
[
<LoadingSpinner text={'CARREGANDO...'}/>
]
)
:
(
[
<>
{
followingListLength == 0 && followersListLength == 0 ?
(
[
<>
<ContainerRedeVazia/>
</>
]
)
:
(
[
<React.Fragment>
<ContainerDivStyled>
<Paper elevation={3}>
<DivTitulo>
<StyledP>Seguidor <b style={{fontWeight:"700", fontSize:"20px"}}>({followingListLength})</b></StyledP>
<StyledHR/>
</DivTitulo>
<div style={{height : "400px"}}>
{
followingListLength == 0 ?
(
[
<>
<DivTextoNoPublications>
<DivConteudoNaoPublicado>
<NoPubSpan>Você não possui nenhum seguidor.</NoPubSpan>
</DivConteudoNaoPublicado>
</DivTextoNoPublications>
</>
]
)
:
(
[
<>
<DivContainerRecursosPublicados/>
<BtnAlinhaRecPvt>
<p style={{margin:"0 0 10px", fontSize:"14px"}}>Carregado 1 de 1</p>
</BtnAlinhaRecPvt>
</>
]
)
}
</div>
</Paper>
</ContainerDivStyled>
<ContainerDivStyled>
<Paper elevation={3}>
<DivTitulo>
<StyledP>Seguindo <b style={{fontWeight:"700", fontSize:"20px"}}>({followersListLength})</b></StyledP>
<StyledHR/>
</DivTitulo>
<div style={{height : "400px"}}>
{
followersListLength == 0 ?
(
[
<>
<DivTextoNoPublications>
<DivConteudoNaoPublicado>
<NoPubSpan>Você ainda não segue nenhum outro usuário.</NoPubSpan>
</DivConteudoNaoPublicado>
</DivTextoNoPublications>
</>
]
)
:
(
[
<>
<DivContainerRecursosPublicados/>
<BtnAlinhaRecPvt>
<p style={{margin:"0 0 10px", fontSize:"14px"}}>Carregado 1 de 1</p>
</BtnAlinhaRecPvt>
</>
]
)
}
</div>
</Paper>
</ContainerDivStyled>
</React.Fragment>
]
)
}
</>
]
)
}
</>
)
}
src/Components/TabPanels/TabRedeImgDiv.js deleted 100644 → 0
View file @ f1162cd5
import React from 'react'
export default function TabRedeImgDiv (props) {
return (
<div style={{width:"33.33333333%", textAlign : "center"}}>
<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/Components/TabPanels/UserPageTabs/ContainerRedeVazia.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 styled from 'styled-components'
import { Container } from 'react-grid-system'
import NoRede1 from '../../../img/no-rede-1.png'
import NoRede2 from '../../../img/no-rede-2.png'
import NoRede3 from '../../../img/no-rede-3.png'
import Paper from '@material-ui/core/Paper';
import TabRedeImgDiv from './TabRedeImgDiv.js'
import {WhiteContainer} from '../StyledComponents.js'
import Grid from '@material-ui/core/Grid';
export default function ContainerRedeVazia (props) {
return (
<React.Fragment>
<WhiteContainer>
<RedeVaziaBoxContainer>
<StyledSpan>Você ainda não tem uma rede.
<br/>
Veja como começar:
</StyledSpan>
<StyledSpan>
<StyledHr/>
<Grid container style={{paddingLeft : "30px", paddingRight : "15px"}}>
<Grid item md={4} xs={12}>
<TabRedeImgDiv img={NoRede1} text={"Para encontrar um usuário específico, você pode utilizar a barra de busca e selecionar a busca por \"pessoas\""}/>
</Grid>
<Grid item md={4} xs={12}>
<TabRedeImgDiv img={NoRede2} text={"Você pode começar a seguir uma pessoa clicando no botão \"seguir\" no card (A) ou na página dela (B)"}/>
</Grid>
<Grid item md={4} xs={12}>
<TabRedeImgDiv img={NoRede3} text={"Pronto! Agora você poderá acompanhar os novos recursos e coleções dessa pessoas na sua página, na aba \"Perfil e Atividades\""}/>
</Grid>
</Grid>
</StyledSpan>
</RedeVaziaBoxContainer>
</WhiteContainer>
</React.Fragment>
)
}
const DivColumns = styled.div`
display : flex;
flex-direction : row;
aling-items : space-between
padding-right : 15px;
padding-left : 15px
`
const StyledHr = styled.hr`
margin-top : 20px;
margin-bottom : 20px;
border : 0;
border-top: 1px solid #eee;
`
const RedeVaziaBoxContainer = styled.div`
background-color : #fff;
padding: 30px;
padding-right: 30px;
padding-left: 30px;
margin-bottom: 30px;
text-align: center;
height: 100%;
padding-left: 0 !important;
padding-right: 0 !important;
margin-top: 20px;
}
`
const StyledSpan = styled.span`
font-weight : lighter;
margin-top: 0;
font-family: Roboto;
font-size: 24px;
p {
font-weight : normal;
}
`
src/Components/TabPanels/TabPanelAtividades.js → src/Components/TabPanels/UserPageTabs/PanelAtividades.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, useState, useEffect} from 'react'
import styled from 'styled-components'
import { Container } from 'react-grid-system'
import Paper from '@material-ui/core/Paper';
import Button from '@material-ui/core/Button';
import axios from 'axios'
import {apiUrl} from '../../env';
import Bolo from '../../img/Bolo.png'
import LoadingSpinner from '../LoadingSpinner.js'
import {apiUrl, apiDomain} from '../../../env';
import Bolo from '../../../img/Bolo.png'
import LoadingSpinner from '../../LoadingSpinner.js'
import ActivityListItem from '../../ActivityListItem.js'
import List from '@material-ui/core/List';
export default function TabPanelAtividades (props) {
const [loading, handleLoading] = useState(true)
const [notifications, setNotifications] = useState([]);
const [notificatonsLength, setLength] = useState(0);
const [loading, handleLoading] = useState(true)
const [notificationsSlice, setNotificationsSlice] = useState([])
const showMore = (offset) => {
var sliceLength = notificationsSlice.length
setNotificationsSlice(notifications.slice(0, sliceLength + offset))
}
useEffect( () => {
axios.get(`${apiUrl}/feed`, props.config)
axios.get(`${apiUrl}/feed?offset=0&limit=30`, props.config)
.then( (response) => {
handleLoading(false)
//console.log(response)
if ( response.headers['access-token'] ) {
sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token'])
}
console.log('atividades response: ', response)
setNotifications(response.data)
//console.log(response.data.length)
setNotificationsSlice(response.data.slice(0,30))
setLength(response.data.length)
handleLoading(false)
},
(error) => {
console.log('error while running getNotifications')
......@@ -30,7 +63,7 @@ export default function TabPanelAtividades (props) {
return (
<ContainerDivStyled>
<MainContainerDesktop>
<Paper elevation={3}>
<div>
<DivTitulo>
......@@ -64,7 +97,6 @@ export default function TabPanelAtividades (props) {
<br/>
com pessoas envolvidas com experiências que ocorrem em todo o Brasil!
</p>
</div>
</NoNotificationsDiv>
]
......@@ -72,9 +104,25 @@ export default function TabPanelAtividades (props) {
:
(
[ <>
{/*some sort of map with a list of notifications idk what though*/}
<LoadMoreButton><span>CARREGAR MAIS 4</span></LoadMoreButton>
<LoadMoreButton><span>CARREGAR MAIS 20</span></LoadMoreButton>
<List height={400} width={300}>
{
notificationsSlice.map( (notification) =>
<ActivityListItem
avatar = {notification.owner.avatar ? apiDomain + notification.owner.avatar : null}
activity = {notification.activity}
actionType = {notification.trackable_type}
objectType = {notification.recipient_type}
createdAt = {notification.created_at}
ownerName = {notification.owner.name}
ownerHref = {'/usuario-publico/' + notification.owner.id}
recipientName = {notification.recipient.name}
/>
)
}
</List>
<LoadMoreButton onClick={() => {showMore(4)}}><span>CARREGAR MAIS 4</span></LoadMoreButton>
<LoadMoreButton onClick={() => {showMore(20)}}><span>CARREGAR MAIS 20</span></LoadMoreButton>
<span style={{fontSize:"14px", color : "#666"}}>Mostrando {notificationsSlice.length} de {notificatonsLength}</span>
</>
]
)
......@@ -86,10 +134,26 @@ export default function TabPanelAtividades (props) {
}
</div>
</Paper>
</ContainerDivStyled>
</MainContainerDesktop>
)
}
const MainContainerDesktop = styled.div`
padding : 10px 0 8px 0;
margin-left : auto;
margin-right : auto;
@media screen and (min-width: 1200px) {
width : 1170px;
}
@media screen and (min-width: 992px) and (max-width : 1199px){
width : 970px;
}
@media screen and (min-width: 768px) and (max-width : 991px) {
width : 750px;
}
`
const H3Styled = styled.h3`
font-size: 24px;
font-weight : lighter;
......@@ -124,6 +188,11 @@ const LoadMoreButton = styled(Button)`
overflow : hidden !important;
text-transform : uppercase !important;
font-size : 14px !important;
background : transparent !important;
color : #666 !important
&:hover {
background : rgba(158,158,158,0.2) !important
}
`
const TituloContent = styled.div`
......
src/Components/TabPanels/UserPageTabs/PanelColecoes.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 styled from 'styled-components'
import Grid from '@material-ui/core/Grid';
import LoadingSpinner from '../../LoadingSpinner.js'
import axios from 'axios'
import {apiUrl} from '../../../env';
import PanelTemplateColecao from '../PanelComponents/TemplateColecao.js'
import PaginaVaziaColecao from '../../../img/Pagina_vazia_colecao.png'
import NoContent from '../PanelComponents/NoContent.js'
import {WhiteContainer, StyledGrid} from '../StyledComponents.js'
import CreateNewFolderIcon from '@material-ui/icons/CreateNewFolder';
import Title from '../PanelComponents/PanelTitle.js'
import CollectionCardFunction from '../../CollectionCardFunction.js'
import {ButtonsAreaColecao} from '../PanelComponents/ButtonsArea'
export default function TabPanelColecoes (props) {
const [loading, handleLoading] = useState(true)
const [userCollections, setUserCollections] = useState([])
const [userCollectionsSlice, setUserCollectionsSlice] = useState([])
const [followedCollections, setFollowedCollections] = useState([])
const [followedCollectionsSlice, setFollowedCollectionsSlice] = useState([])
useEffect( () => {
axios.all([
axios.get((`${apiUrl}/users/` + props.id + '/collections'), props.config),
axios.get((`${apiUrl}/users/` + props.id + '/following/Collection'), props.config),
])
.then( (responseArr) => {
console.log('responseArr Colecoes: ', responseArr)
if (responseArr[0].headers['access-token']) {
sessionStorage.setItem('@portalmec/accessToken', responseArr[0].headers['access-token'])
}
handleLoading(false)
setUserCollections(responseArr[0].data)
setUserCollectionsSlice(responseArr[0].data.slice(0,3))
setFollowedCollections(responseArr[1].data)
setFollowedCollectionsSlice(responseArr[1].data.slice(0,4))
},
(error) => {
handleLoading(false)
console.log('error while running axios all')
}
)
}, [])
const showMoreUserCollections = () => {
var sliceLength = userCollectionsSlice.length
setUserCollectionsSlice(userCollections.slice(0, sliceLength + 4))
}
const showAllUserCollections = () => {setUserCollectionsSlice(userCollections)}
const showMoreFollowedCollections = () => {
var sliceLength = followedCollectionsSlice.length
setFollowedCollectionsSlice(followedCollections.slice(0, sliceLength + 4))
}
const showAllFollowedCollections = () => {setFollowedCollectionsSlice(followedCollections)}
return (
<>
{
loading ?
(
<LoadingSpinner text={'CARREGANDO COLEÇÕES'}/>
)
:
(
[
<React.Fragment>
<Tentativa
title={"Minhas Coleções"}
length={userCollections.length}
noContentText={
<div>
<img src={PaginaVaziaColecao} alt="PaginaVaziaColecao" style={{height:"150px",width:"150px", verticalAlign:"middle", border:"0"}}/>
<br/>
<span style={{fontFamily:"Roboto", fontWeight:"lighter", fontSize:"24px"}}>
Criamos a sua primeira Coleção!
</span>
<p style={{fontFamily:"Roboto", fontSize:"16px", margin:"10px 0 0", fontWeight : "normal"}}>
Adicione nela recursos que você queira acessar mais tarde.
<br/>
Crie novas coleções clicando no cartão roxo "Criar Colecão".
</p>
</div>
}
sliceArr={userCollectionsSlice}
showMore={showMoreUserCollections}
showAll={showAllUserCollections}
followed={false}
/>
<PanelTemplateColecao
title={"Coleções que eu sigo"}
length={followedCollections.length}
noContentText={"Você ainda não segue nenhuma coleção."}
sliceArr={followedCollectionsSlice}
showMore={showMoreFollowedCollections}
showAll={showAllFollowedCollections}
followed={true}
/>
</React.Fragment>
]
)
}
</>
)
}
function Tentativa (props) {
return (
<WhiteContainer>
<Title
title={props.title}
length={props.length}
/>
<StyledGrid container spacing={1} style={{paddingLeft : "30px", paddingRight : "15px"}}>
<Grid item md={3} xs={12}>
<CardDiv>
<div style={{backgroundColor:"#673ab7", height:"250px", display:"flex", justifyContent:"center", alignItems:"center"}}>
<CreateNewFolderIcon style={{color:"#fff", fontSize:"70px"}}/>
<p style={{fontSize:"16px", margin:"0 0 10px", color : "#fff"}}>
CRIAR COLEÇÃO
</p>
</div>
</CardDiv>
</Grid>
{
props.length === 0 ?
(
[
<Grid item lg={6} md={4} sm={6} xs={12}>
<NoContent text={props.noContentText}/>
</Grid>
]
)
:
(
[
<React.Fragment>
{
props.sliceArr.map( (card) =>
<Grid item md={3} xs={12} key={card.id}>
<CollectionCardFunction
name={card.name}
rating={card.score}
type={card.object_type}
description={card.description}
author={card.owner.name}
avatar={card.owner.avatar}
thumbnails={card.items_thumbnails}
likeCount={card.likes_count}
liked={card.liked}
followed={card.followed}
tags={card.tags}
/>
</Grid>
)
}
</React.Fragment>
]
)
}
</StyledGrid>
{
props.length > 0 &&
<ButtonsAreaColecao
sliceLength={props.sliceArr.length}
length={props.length}
showMore={() => props.showMore()}
showAll={() => props.showAll()}
/>
}
</WhiteContainer>
)
}
const CardDiv = styled.div`
margin-top : 10px;
margin-bottom : 10px;
width : 95%;
float : left;
`
src/Components/TabPanels/UserPageTabs/PanelCuradoria.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 styled from 'styled-components'
import axios from 'axios'
import {apiUrl} from '../../../env';
import LoadingSpinner from '../../LoadingSpinner.js'
import TemplateCuradoria from '../PanelComponents/TemplateCuradoria.js'
export default function TabPanelCuradoria (props) {
const [loading, handleLoading] = useState(true)
const [submissions, setSubmissions] = useState([])
const [submissionsSlice, setSubmissionsSlice] = useState([])
const showMoreSubmissions = () => {
var sliceLength = submissionsSlice.length
setSubmissionsSlice(submissions.slice(0, sliceLength + 4))
}
const showAllSubmissions = () => {setSubmissionsSlice(submissions)}
useEffect( () => {
axios.get( (`${apiUrl}/users/` + props.id + '/submissions?offset=0&status=submitted'), props.config)
.then(response => {
console.log(response)
if (response.headers['access-token']) {
sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token'])
}
handleLoading(false)
setSubmissions(response.data)
setSubmissionsSlice(response.data.slice(0,4))
}, error => {console.log('error while running ComponentDidMout on TabPanelCuradoria')})
}, [])
return (
<React.Fragment>
{
loading ?
(
<LoadingSpinner text={"Carregando Recursos"}/>
)
:
(
[
<React.Fragment>
<TemplateCuradoria
length={submissions.length}
titleText = {"Recursos a serem curados"}
noContentText = {"Você não tem nenhum recurso para ser avaliado"}
sliceArr={submissionsSlice}
showMore={showMoreSubmissions}
showAll={showAllSubmissions}
/>
</React.Fragment>
]
)
}
</React.Fragment>
)
}
src/Components/TabPanels/TabPanelEditarPerfil.js → src/Components/TabPanels/UserPageTabs/PanelEditarPerfil.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, useState} from 'react'
import styled from 'styled-components'
import { Store } from '../../Store.js';
import { Store } from '../../../Store.js';
import {Link} from 'react-router-dom'
import Button from '@material-ui/core/Button';
import IconButton from '@material-ui/core/IconButton';
import PhotoCamera from '@material-ui/icons/PhotoCamera';
import Tooltip from '@material-ui/core/Tooltip';
import FormInput from "../FormInput.js"
import ValidateUserInput from '../FormValidationFunction.js'
import FormInput from "../../FormInput.js"
import ValidateUserInput from '../../FormValidationFunction.js'
import {apiDomain} from '../../../env.js'
export default function TabPanelEditarPerfil (props) {
......@@ -85,7 +103,7 @@ export default function TabPanelEditarPerfil (props) {
<div style={{padding:"0", display:"flex", flexDirection:"column"}}>
<HeaderContainer>
<div style={{position:"relative", height:"100%"}}>
<img src={state.currentUser.userCover} alt="user cover avatar" style={{width:"100%", height:"100%", objectFit:"cover"}}/>
<img src={`${apiDomain}` + 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)}/>
<label htmlFor="icon-button-file">
<Tooltip title={<span style={{fontSize:"14px", overflow:"hidden", transition:"all .5s ease"}}>ALTERAR CAPA</span>} placement="left">
......@@ -96,7 +114,7 @@ export default function TabPanelEditarPerfil (props) {
</label>
</div>
<ProfileAvatarDiv onMouseEnter={handleHoverAlterarFoto} onMouseLeave={handleHoverAlterarFoto}>
<img src={state.currentUser.userAvatar} alt = "user avatar" style={{border:"0", verticalAlign:"middle"}}/>
<img src={`${apiDomain}` + state.currentUser.userAvatar} alt = "user avatar" style={{border:"0", verticalAlign:"middle"}}/>
<ChangeAvatarDiv style={ {display : hoverAlterarFoto ? 'flex' : 'none'}}>
<span>Alterar Foto</span>
</ChangeAvatarDiv>
......