diff --git a/src/Components/AreasSubPages.js b/src/Components/AreasSubPages.js
index 73b9f823e520aefc8e3a2ade0ed4ccbb2fc75858..502eb6af0190c3f4e8e0b36f2d866fe3527877fb 100644
--- a/src/Components/AreasSubPages.js
+++ b/src/Components/AreasSubPages.js
@@ -48,38 +48,38 @@ class ReqResources extends Component {
this.setState({ resources: res.data });
});
}
-
- resourcesPerPage(){
+
+ resourcesPerPage() {
var pageWidth = window.innerWidth
- if (pageWidth >= 1200){
+ if (pageWidth >= 1200) {
return 3
}
- else{
+ else {
if (pageWidth > 766) {
return 2
}
- else{
+ else {
return 1
}
}
}
-
+
render() {
var rows = []
var resources_per_page = this.resourcesPerPage()
- for(let i = 0; i < 12/resources_per_page; i++){
- rows.push(this.state.resources.slice(i*resources_per_page, resources_per_page*(i+1)))
+ for (let i = 0; i < 12 / resources_per_page; i++) {
+ rows.push(this.state.resources.slice(i * resources_per_page, resources_per_page * (i + 1)))
}
return (
<Carousel showThumbs={false} infiniteLoop={true} showStatus={false}>
{
rows.map((row, index) => (
- <Row style={{ paddingBottom: "5px", margin:'0 auto', width:"80%", justifyContent: "center"}} key={(index+1)}>
+ <Row style={{ paddingBottom: "5px", margin: '0 auto', width: "80%", justifyContent: "center" }} key={(index + 1)}>
{row.map((card) => (
- <div style={{marginLeft:10, display: 'flex' }} key={card.id*(index+1)}>
+ <div style={{ marginLeft: 10, display: 'flex' }} key={card.id * (index + 1)}>
<ResourceCardFunction
avatar={card.publisher.avatar}
id={card.id}
@@ -90,9 +90,8 @@ class ReqResources extends Component {
likeCount={card.likes_count}
liked={card.liked}
rating={card.review_average}
- // author={card.author}
author={card.publisher.name}
- tags={card.educational_stages}
+ tags={card.tags}
href={"/recurso/" + card.id}
downloadableLink={card.default_attachment_location}
/>
@@ -120,16 +119,16 @@ class ReqCollections extends Component {
console.log(res.data);
});
}
- collectionsPerPage(){
+ collectionsPerPage() {
var pageWidth = window.innerWidth
- if (pageWidth >= 1200){
+ if (pageWidth >= 1200) {
return 3
}
- else{
+ else {
if (pageWidth > 766) {
return 2
}
- else{
+ else {
return 1
}
}
@@ -138,18 +137,19 @@ class ReqCollections extends Component {
render() {
var rows = []
var collections_per_page = this.collectionsPerPage()
- for(let i = 0; i < 12/collections_per_page; i++){
- rows.push(this.state.collections.slice(i*collections_per_page, collections_per_page*(i+1)))
+ for (let i = 0; i < 12 / collections_per_page; i++) {
+ rows.push(this.state.collections.slice(i * collections_per_page, collections_per_page * (i + 1)))
}
return (
<Carousel showThumbs={false} infiniteLoop={true} showStatus={false}>
{
rows.map((row, index) => (
- <Row style={{ paddingBottom: "5px", margin:'0 auto', width:"80%", justifyContent: "center" }} key={(index+1)}>
+ <Row style={{ paddingBottom: "5px", margin: '0 auto', width: "80%", justifyContent: "center" }} key={(index + 1)}>
{row.map((card) => (
- <div style={{marginLeft:10, display: 'flex' }} key={card.id*(index+1)}>
+ <div style={{ marginLeft: 10, display: 'flex' }} key={card.id * (index + 1)}>
<CollectionCardFunction
name={card.name}
+ tags={card.tags}
rating={card.score}
id={card.id}
author={card.owner.name}
@@ -157,11 +157,15 @@ class ReqCollections extends Component {
thumbnails={card.items_thumbnails}
avatar={card.owner.avatar}
likeCount={card.likes_count}
+ followed={card.followed}
+ liked={card.liked}
+ collections={card.collection_items}
+ authorID={card.owner.id}
/>
</div>
))}
</Row>
- ))}
+ ))}
</Carousel>
);
}
@@ -183,20 +187,20 @@ class SubPages extends Component {
case "Recursos":
return (
<React.Fragment>
- <div style={{ backgroundColor: "#ff7f00", position:"relative" }}>
- <div style={{ textAlign: "justify", color: "#fff", minHeight:195, paddingLeft:10, paddingRight:10, paddingTop:20, paddingBottom:20 }}>
+ <div style={{ backgroundColor: "#ff7f00", position: "relative" }}>
+ <div style={{ textAlign: "justify", color: "#fff", minHeight: 195, paddingLeft: 10, paddingRight: 10, paddingTop: 20, paddingBottom: 20 }}>
<img
src={recursos}
alt="aba recursos"
height="155"
- style={{ float: "left", marginRight:20, marginBottom:20, marginLeft: window.innerWidth >= 825? "25%" : "0px" }}
+ style={{ float: "left", marginRight: 20, marginBottom: 20, marginLeft: window.innerWidth >= 825 ? "25%" : "0px" }}
/>
- <p style={{ textAlign: "justify", color: "#fff", marginRight: window.innerWidth >= 825? "25%" : "0px"}}>
- Nesta área, você tem acesso a Recursos Educacionais
- Digitais, isto é, a vÃdeos, animações e a outros recursos
- destinados à educação. São Recursos de portais parceiros
- do MEC e de professores que, como você, atuam na Educação
- Básica!
+ <p style={{ textAlign: "justify", color: "#fff", marginRight: window.innerWidth >= 825 ? "25%" : "0px" }}>
+ Nesta área, você tem acesso a Recursos Educacionais
+ Digitais, isto é, a vÃdeos, animações e a outros recursos
+ destinados à educação. São Recursos de portais parceiros
+ do MEC e de professores que, como você, atuam na Educação
+ Básica!
</p>
</div>
</div>
@@ -241,20 +245,20 @@ class SubPages extends Component {
return (
<React.Fragment>
- <div style={{ backgroundColor: "#e81f4f", position:"relative" }}>
- <div style={{ textAlign: "justify", color: "#fff", minHeight:195, paddingLeft:10, paddingRight:10, paddingTop:20, paddingBottom:20 }}>
+ <div style={{ backgroundColor: "#e81f4f", position: "relative" }}>
+ <div style={{ textAlign: "justify", color: "#fff", minHeight: 195, paddingLeft: 10, paddingRight: 10, paddingTop: 20, paddingBottom: 20 }}>
<img
src={materiais}
alt="aba recursos"
height="155"
- style={{ float: "left", marginRight:20, marginBottom:20, marginLeft: window.innerWidth >= 825? "25%" : "0px" }}
+ style={{ float: "left", marginRight: 20, marginBottom: 20, marginLeft: window.innerWidth >= 825 ? "25%" : "0px" }}
/>
- <p style={{ textAlign: "justify", color: "#fff", marginRight: window.innerWidth >= 825? "25%" : "0px"}}>
- Nesta área, você acessa livremente materiais completos de
- formação, como cursos já oferecidos pelo MEC e seus
- parceiros. São conteúdos elaborados por equipes
- multidisciplinares e de autoria de pesquisadores e
- educadores renomados nas áreas.
+ <p style={{ textAlign: "justify", color: "#fff", marginRight: window.innerWidth >= 825 ? "25%" : "0px" }}>
+ Nesta área, você acessa livremente materiais completos de
+ formação, como cursos já oferecidos pelo MEC e seus
+ parceiros. São conteúdos elaborados por equipes
+ multidisciplinares e de autoria de pesquisadores e
+ educadores renomados nas áreas.
</p>
</div>
</div>
@@ -306,19 +310,19 @@ class SubPages extends Component {
case "Colecoes":
return (
<React.Fragment>
- <div style={{ backgroundColor: "#673ab7", position:"relative" }}>
- <div style={{ textAlign: "justify", color: "#fff", minHeight:195, paddingLeft:10, paddingRight:10, paddingTop:20, paddingBottom:20 }}>
+ <div style={{ backgroundColor: "#673ab7", position: "relative" }}>
+ <div style={{ textAlign: "justify", color: "#fff", minHeight: 195, paddingLeft: 10, paddingRight: 10, paddingTop: 20, paddingBottom: 20 }}>
<img
src={colecoes}
alt="aba recursos"
height="155"
- style={{ float: "left", marginRight:20, marginBottom:20, marginLeft: window.innerWidth >= 825? "25%" : "0px" }}
+ style={{ float: "left", marginRight: 20, marginBottom: 20, marginLeft: window.innerWidth >= 825 ? "25%" : "0px" }}
/>
- <p style={{ textAlign: "justify", color: "#fff", marginRight: window.innerWidth >= 825? "25%" : "0px"}}>
- Nesta área, você tem acesso às coleções criadas e
- organizadas pelos usuários da plataforma. É mais uma
- possibilidade de buscar recursos educacionais para sua
- aula!
+ <p style={{ textAlign: "justify", color: "#fff", marginRight: window.innerWidth >= 825 ? "25%" : "0px" }}>
+ Nesta área, você tem acesso às coleções criadas e
+ organizadas pelos usuários da plataforma. É mais uma
+ possibilidade de buscar recursos educacionais para sua
+ aula!
</p>
</div>
</div>
diff --git a/src/Components/ButtonGuardarColecao.js b/src/Components/ButtonGuardarColecao.js
index 65ae71a2ab7c2de703e21e81679c32f7c4454481..4d8865f7cb57e8c35ece36587f77922b0d0ab48a 100644
--- a/src/Components/ButtonGuardarColecao.js
+++ b/src/Components/ButtonGuardarColecao.js
@@ -1,30 +1,67 @@
-import React, {useState, useContext} from 'react'
-import {Store} from '../Store.js'
+import React, { useState, useContext } from 'react'
+import { Store } from '../Store.js'
import Button from '@material-ui/core/Button';
import styled from 'styled-components'
import CreateNewFolderIcon from '@material-ui/icons/CreateNewFolder';
import GuardarModal from './GuardarModal'
+import SignUpModal from './SignUpModal'
+import LoginModal from './LoginModal.js'
+import Snackbar from '@material-ui/core/Snackbar';
+import MuiAlert from '@material-ui/lab/Alert';
-export default function ButtonGuardarColecao (props) {
- const {state} = useContext(Store)
+export default function ButtonGuardarColecao(props) {
+ const { state } = useContext(Store)
const [saveToCol, toggleSave] = useState(false)
const handleGuardar = () => {
- if(state.currentUser.id === '') {
- console.log('abrir login modal');
+ if (!state.currentUser.id) {
+ handleLogin()
}
else {
toggleSave(true);
}
}
+ const handleSignUp = () => {
+ setSignUp(!signUpOpen)
+ }
+
+ const handleLogin = () => {
+ setLogin(!loginOpen)
+ }
+
+ function Alert(props) {
+ return <MuiAlert elevation={6} variant="filled" {...props} />;
+ }
+
+ function toggleLoginSnackbar(reason) {
+ if (reason === 'clickaway') {
+ return;
+ }
+ handleSuccessfulLogin(false);
+ }
+
+ const [signUpOpen, setSignUp] = useState(false)
+ const [loginOpen, setLogin] = useState(false)
+ const [successfulLoginOpen, handleSuccessfulLogin] = useState(false)
+
return (
<>
- <GuardarModal open={saveToCol} handleClose={() => {toggleSave(false)}}
- thumb={props.thumb} title={props.title} recursoId={props.learningObjectId}
- />
- <StyledButton onClick={handleGuardar}>
- <CreateNewFolderIcon/> GUARDAR
- </StyledButton>
+ <SignUpModal open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin}
+ />
+ <LoginModal open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
+ openSnackbar={() => { handleSuccessfulLogin(true) }}
+ />
+ <Snackbar open={successfulLoginOpen} autoHideDuration={1000} onClose={toggleLoginSnackbar}
+ anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
+ >
+ <Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert>
+ </Snackbar>
+ <GuardarModal open={saveToCol} handleClose={() => { toggleSave(false) }}
+ thumb={props.thumb} title={props.title} recursoId={props.learningObjectId}
+ />
+ <StyledButton onClick={handleGuardar}>
+ <CreateNewFolderIcon /> GUARDAR
+ </StyledButton>
</>
)
}
diff --git a/src/Components/ColCardPublicOptions.js b/src/Components/ColCardPublicOptions.js
index 53c8e8a3b85234b22a1cac61948777cbfbbf9911..0974c292c6b58ee14844c88eddd88c98d418a9f7 100644
--- a/src/Components/ColCardPublicOptions.js
+++ b/src/Components/ColCardPublicOptions.js
@@ -16,92 +16,137 @@ 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 Button from '@material-ui/core/Button';
-import Menu from '@material-ui/core/Menu';
-import ListItemIcon from '@material-ui/core/ListItemIcon';
-import MenuItem from '@material-ui/core/MenuItem';
-import OpenIcon from '@material-ui/icons/OpenInNew';
-import {Link} from 'react-router-dom'
-import MoreVertIcon from '@material-ui/icons/MoreVert';
-import styled from 'styled-components'
-import ErrorIcon from '@material-ui/icons/Error';
-import ReportModal from './ReportModal.js'
-import {getAxiosConfig} from '../Components/HelperFunctions/getAxiosConfig'
-import axios from 'axios'
-import {apiUrl} from '../env';
-
-export default function ColCardPublicOptions (props) {
- const [anchorEl, setAnchorEl] = React.useState(null);
-
- function handleClick(event) {
- setAnchorEl(event.currentTarget);
- }
-
- function handleClose() {
- setAnchorEl(null);
- }
-
- const [reportModalOpen, toggleReportModal] = useState(false)
- const handleReportModal = (value) => {toggleReportModal(value)}
-
- const handleUnfollow = () => {
- let config = getAxiosConfig()
- let payload = {}
+import React, { useState } from "react";
+import Button from "@material-ui/core/Button";
+import Menu from "@material-ui/core/Menu";
+import ListItemIcon from "@material-ui/core/ListItemIcon";
+import MenuItem from "@material-ui/core/MenuItem";
+import OpenIcon from "@material-ui/icons/OpenInNew";
+import { Link } from "react-router-dom";
+import MoreVertIcon from "@material-ui/icons/MoreVert";
+import styled from "styled-components";
+import ErrorIcon from "@material-ui/icons/Error";
+import ReportModal from "./ReportModal.js";
+import { getAxiosConfig } from "../Components/HelperFunctions/getAxiosConfig";
+import axios from "axios";
+import ReportProblemIcon from '@material-ui/icons/ReportProblem';
+import OpenInBrowserIcon from '@material-ui/icons/OpenInBrowser';
+import { apiUrl } from "../env";
+
+export default function ColCardPublicOptions(props) {
+ const [anchorEl, setAnchorEl] = React.useState(null);
+
+ function handleClick(event) {
+ setAnchorEl(event.currentTarget);
+ }
- axios.put( (`${apiUrl}/collections/` + props.id + '/follow'),payload, config).then(
- (response) => {
- console.log(response.data)
- if ( response.headers['access-token'] ) {
- sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token'])
- }
- }, (error) => {console.log(error)})
- }
+ function handleClose() {
+ setAnchorEl(null);
+ }
- return (
- <>
- <ReportModal open={reportModalOpen} handleClose={() => handleReportModal(false)}
- form="colecao" complainableId={props.id}
- complainableType={"Collection"}
- />
- <div style={{fontSize: "12px"}}>
- <Button aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick} style={{color : "#666"}}>
- <MoreVertIcon style={{color : "inherit"}}/>
- </Button>
- <Menu
- id="simple-menu"
- anchorEl={anchorEl}
- keepMounted
- open={Boolean(anchorEl)}
- onClose={handleClose}
- >
- <StyledMenuItem>
- <Link to={"/colecao-do-usuario/" + props.id}>
- <ListItemIcon><OpenIcon /></ListItemIcon>Abrir
- </Link>
- </StyledMenuItem>
-
- <StyledMenuItem onClick={handleUnfollow}>
- <ListItemIcon><ErrorIcon /></ListItemIcon>Deixar de Seguir
- </StyledMenuItem>
-
- <StyledMenuItem onClick={() => {handleReportModal(true)}}>
- <ListItemIcon><ErrorIcon /></ListItemIcon>Reportar
- </StyledMenuItem>
- </Menu>
- </div>
+ const [reportModalOpen, toggleReportModal] = useState(false);
+ const handleReportModal = (value) => {
+ toggleReportModal(value);
+ };
+
+ const handleUnfollow = () => {
+ let config = getAxiosConfig();
+ let payload = {};
+
+ axios
+ .put(`${apiUrl}/collections/` + props.id + "/follow", payload, config)
+ .then(
+ (response) => {
+ console.log(response.data);
+ if (response.headers["access-token"]) {
+ sessionStorage.setItem(
+ "@portalmec/accessToken",
+ response.headers["access-token"]
+ );
+ }
+ },
+ (error) => {
+ console.log(error);
+ }
+ );
+ };
+
+ return (
+ <>
+ <ReportModal
+ open={reportModalOpen}
+ handleClose={() => handleReportModal(false)}
+ form="colecao"
+ complainableId={props.id}
+ complainableType={"Collection"}
+ />
+ <div style={{ fontSize: "12px" }}>
+ <Button
+ aria-controls="simple-menu"
+ aria-haspopup="true"
+ onClick={handleClick}
+ style={{ color: "#666" }}
+ >
+ <MoreVertIcon style={{ color: "inherit" }} />
+ </Button>
+ <Menu
+ id="simple-menu"
+ anchorEl={anchorEl}
+ keepMounted
+ open={Boolean(anchorEl)}
+ onClose={handleClose}
+ >
+ <StyledMenuItem>
+ <Link to={"/colecao-do-usuario/" + props.id}>
+ <ListItemIcon>
+ <OpenIcon />
+ </ListItemIcon>
+ Abrir
+ </Link>
+ </StyledMenuItem>
+
+ <StyledMenuItem
+ onClick={() =>
+ window.open("/colecao-do-usuario/" + props.id, "_blank")
+ }
+ >
+ <ListItemIcon>
+ <OpenInBrowserIcon />
+ </ListItemIcon>
+ Abrir em nova guia
+ </StyledMenuItem>
+
+ <StyledMenuItem onClick={handleUnfollow}>
+ <ListItemIcon>
+ <ErrorIcon />
+ </ListItemIcon>
+ Deixar de Seguir
+ </StyledMenuItem>
+
+ <StyledMenuItem
+ onClick={() => {
+ handleReportModal(true);
+ }}
+ >
+ <ListItemIcon>
+ <ReportProblemIcon />
+ </ListItemIcon>
+ Reportar
+ </StyledMenuItem>
+ </Menu>
+ </div>
</>
- )
+ );
}
export const StyledMenuItem = styled(MenuItem)`
- color : #666 !important;
+ color: #666 !important;
- .MuiSvgIcon-root {
- vertical-align : middle !important;
- }
- a {
- text-decoration : none !important;
- color : #666 !important;
- }
-`
+ .MuiSvgIcon-root {
+ vertical-align: middle !important;
+ }
+ a {
+ text-decoration: none !important;
+ color: #666 !important;
+ }
+`;
diff --git a/src/Components/CollectionCardFunction.js b/src/Components/CollectionCardFunction.js
index 5b015705196ea7e9faa7915548e304270969ca99..02503a44714e9eb7b4e55cbe5a6bc1872084aaee 100644
--- a/src/Components/CollectionCardFunction.js
+++ b/src/Components/CollectionCardFunction.js
@@ -16,15 +16,15 @@ 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, useContext} from 'react';
-import {Store} from '../Store.js'
-import {apiDomain, apiUrl} from '../env';
+import React, { useState, useContext, useEffect } from 'react';
+import { Store } from '../Store.js'
+import { apiDomain, apiUrl } from '../env';
import noAvatar from "../img/default_profile.png";
import Button from '@material-ui/core/Button';
import styled from 'styled-components'
import Slide from '@material-ui/core/Slide';
import Grid from '@material-ui/core/Grid';
-import {StyledCard, CardDiv, CardReaDiv, Footer, LikeCounter, ButtonNoWidth, EnviadoPor, TagContainer} from './ResourceCardFunction.js'
+import { StyledCard, CardDiv, CardReaDiv, Footer, LikeCounter, ButtonNoWidth, EnviadoPor, TagContainer, HeaderContainer, AvatarDiv } from './ResourceCardFunction.js'
import Rating from '@material-ui/lab/Rating';
import StarBorderIcon from '@material-ui/icons/StarBorder';
import FolderIcon from '@material-ui/icons/Folder';
@@ -34,86 +34,154 @@ import CheckIcon from '@material-ui/icons/Check';
import LockIcon from '@material-ui/icons/Lock';
import ColCardOwnerOptions from './ColCardOwnerOptions.js'
import ColCardPublicOptions from './ColCardPublicOptions'
-import {Link} from 'react-router-dom';
+import { Link } from 'react-router-dom';
import axios from 'axios'
-import {getAxiosConfig} from '../Components/HelperFunctions/getAxiosConfig'
+import { getAxiosConfig } from '../Components/HelperFunctions/getAxiosConfig'
+import { saveHeaders } from '../Components/HelperFunctions/saveTokens';
+import SignUpModal from './SignUpModal'
+import LoginModal from './LoginModal.js'
+import Snackbar from '@material-ui/core/Snackbar';
+import MuiAlert from '@material-ui/lab/Alert';
-export default function CollectionCardFunction (props) {
- const {state} = useContext(Store)
+export default function CollectionCardFunction(props) {
+ // console.log(props);
+ const { state } = useContext(Store)
// eslint-disable-next-line
const [userAvatar] = useState(props.avatar ? (`${apiDomain}` + props.avatar) : noAvatar)
- const [userFollowingCol, toggleUserFollowingCol] = useState(props.followed)
- const handleToggleUserFollowingCol = () => {toggleUserFollowingCol(!userFollowingCol)}
+ const [userFollowingCol, toggleUserFollowingCol] = useState(props.followed ? props.followed : false)
+ const handleToggleUserFollowingCol = () => { toggleUserFollowingCol(!userFollowingCol) }
const [likesCount, setLikesCount] = useState(props.likeCount)
const [liked, toggleLiked] = useState(props.liked)
+
+ const [signUpOpen, setSignUp] = useState(false)
+ const [loginOpen, setLogin] = useState(false)
+ const [successfulLoginOpen, handleSuccessfulLogin] = useState(false)
+
const handleLike = () => {
- let payload = {}
let config = getAxiosConfig()
- axios.put( (`${apiUrl}/collections/` + props.id + '/like'),payload, config
- ).then(
- (response) => {
- if ( response.headers['access-token'] ) {
- sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token'])
- }
- toggleLiked(!liked)
- setLikesCount(response.data.count)
- },
- (error) => {console.log(error)}
- )
+ if (state.currentUser.id) {
+ axios({
+ method: 'put',
+ url: `${apiUrl}/collections/` + props.id + '/like',
+ headers: config.headers
+ }).then(
+ (response) => {
+ toggleLiked(!liked)
+ setLikesCount(response.data.count)
+ saveHeaders(response)
+ },
+ (error) => { console.log(error) }
+ )
+ }
+ else {
+ setLogin(!loginOpen)
+ }
}
const [followingHover, handleFollowingHover] = useState(false)
- const toggleFollowingHover = (value) => {handleFollowingHover(value)}
+ const toggleFollowingHover = (value) => { handleFollowingHover(value) }
const [slideIn, setSlide] = useState(false)
- const controlSlide = () => {setSlide(!slideIn)}
+ const controlSlide = () => { setSlide(!slideIn) }
const handleFollow = () => {
let config = getAxiosConfig()
let payload = {}
- axios.put( (`${apiUrl}/collections/` + props.id + '/follow'),payload, config).then(
- (response) => {
- if ( response.headers['access-token'] ) {
- sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token'])
- }
- console.log(response.data)
- handleToggleUserFollowingCol()
- },
- (error) => {console.log(error)}
- )
+ if (state.currentUser.id) {
+ axios.put((`${apiUrl}/collections/` + props.id + '/follow'), payload, config).then(
+ (response) => {
+ saveHeaders(response)
+ handleToggleUserFollowingCol()
+ },
+ (error) => { console.log(error) }
+ )
+ }
+ else {
+ setLogin(!loginOpen)
+ }
}
const RenderFollowButton = () => {
return (
<FollowButton onClick={handleFollow}>
- <AddIcon/><span>SEGUIR</span>
+ <AddIcon /><span>SEGUIR</span>
</FollowButton>
)
}
+ useEffect(() => {
+ // setTimeout(function () {
+ // if (state.currentUser.id) {
+ // const config = getAxiosConfig();
+ // axios({
+ // method: 'get',
+ // url: `${apiUrl}/users/${state.currentUser.id}/following/Collection`,
+ // headers: config.headers
+ // }).then(
+ // (response) => {
+ // const data = response.data
+ // for (let i = 0; i < data.length; i++)
+ // if (data[i].followable.id === props.id)
+ // toggleUserFollowingCol(true)
+ // saveHeaders(response)
+ // })
+ // }
+ // else {
+ // toggleLiked(false);
+ // toggleUserFollowingCol(false);
+ // }
+ // }, 1000);
+
+ // setTimeout(function () {
+ // if (state.currentUser.id) {
+ // const config = getAxiosConfig();
+ // axios({
+ // method: 'get',
+ // url: `${apiUrl}/users/${state.currentUser.id}/collections/liked`,
+ // headers: config.headers
+ // }).then(
+ // (response) => {
+ // const data = response.data
+ // for (let i = 0; i < data.length; i++)
+ // if (data[i].id === props.id)
+ // toggleLiked(true)
+ // saveHeaders(response)
+ // })
+ // }
+ // else {
+ // toggleLiked(false);
+ // toggleUserFollowingCol(false);
+ // }
+ // }, 2000);
+ if (!state.currentUser.id) {
+ toggleLiked(false);
+ toggleUserFollowingCol(false);
+ }
+ }, [state.currentUser.id])
+
const RenderFollowingButton = () => {
return (
<FollowingButton onMouseOver={() => toggleFollowingHover(true)}
onMouseLeave={() => toggleFollowingHover(false)} onClick={handleFollow}>
{
followingHover ?
- (
- [
- <span>DEIXAR DE SEGUIR</span>
- ]
- )
- :
- (
- [
- <React.Fragment>
- <CheckIcon/><span>SEGUINDO</span>
- </React.Fragment>
- ]
- )
+ (
+ [
+ <span>DEIXAR DE SEGUIR</span>
+ ]
+ )
+ :
+ (
+ [
+ <React.Fragment>
+ <CheckIcon /><span>SEGUINDO</span>
+ </React.Fragment>
+ ]
+ )
}
</FollowingButton>
)
@@ -122,171 +190,182 @@ export default function CollectionCardFunction (props) {
const SlideAnimationContent = () => {
return (
<SlideContentDiv>
- <div style={{display:"flex", flex:"1"}}>{/*marginBottom:10px*/}
- <SlideAvatarDiv>
- <img className="img" src={userAvatar} alt="user avatar"/>
- </SlideAvatarDiv>
- <EnviadoPor>
+ <HeaderContainer container="row" justify="flex-start" alignItems="center">
+ <AvatarDiv item xs={2}>
+ <img className="img" src={userAvatar} alt="user avatar" />
+ </AvatarDiv>
+ <EnviadoPor item xs={10}>
Enviado por:
- <br/>
+ <br />
<p>{props.author}</p>
</EnviadoPor>
- </div>
- {
- props.tags &&
- <TagContainer>
- <Grid container spacing={1} justify='safe' style={{height : "inherit"}}>
+ </HeaderContainer>
+ <TagContainer container direction="row">
{
- props.tags.map( (tag) =>
+ props.tags.map((tag) =>
<Grid item key={tag.id}>
- <span key={tag.id}>{tag.name}</span>
+ <span >{tag.name}</span>
</Grid>
)
}
- </Grid>
</TagContainer>
- }
</SlideContentDiv>
)
}
- return (
- <StyledCard>
- <CardDiv>
- <CardReaDiv>
- <Header onMouseEnter={controlSlide} onMouseLeave={controlSlide}>
- {/*slide animation and content*/}
- <Slide direction="right" in={slideIn} timeout={300}>
- <Link to={"/colecao-do-usuario/" + props.id} className="text">
- {/* <a href={"/colecao-do-usuario/" + props.id} className="text"> */}
- {SlideAnimationContent()}
- </Link>
- </Slide>
- <Slide direction="left" in={!slideIn} timeout={700}>
- <a href={"/colecao-do-usuario/" + props.id}>
-
- <UserInfo>
- <AvatarDiv>
- <img src={userAvatar} alt="user avatar"/>
- </AvatarDiv>
- <UserAndTitle>
- <span>{props.author}</span>
- <span className={"col-name"}>{props.name}</span>
- </UserAndTitle>
- </UserInfo>
+ const handleSignUp = () => {
+ setSignUp(!signUpOpen)
+ }
+
+ const handleLogin = () => {
+ setLogin(!loginOpen)
+ }
+ function Alert(props) {
+ return <MuiAlert elevation={6} variant="filled" {...props} />;
+ }
+
+ function toggleLoginSnackbar(reason) {
+ if (reason === 'clickaway') {
+ return;
+ }
+ handleSuccessfulLogin(false);
+ }
+ return (
+ <>
+ <SignUpModal open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin}
+ />
+ <LoginModal open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
+ openSnackbar={() => { handleSuccessfulLogin(true) }}
+ />
+ <Snackbar open={successfulLoginOpen} autoHideDuration={1000} onClose={toggleLoginSnackbar}
+ anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
+ >
+ <Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert>
+ </Snackbar>
+ <StyledCard>
+ <CardDiv>
+ <CardReaDiv>
+ <Header onMouseEnter={controlSlide} onMouseLeave={controlSlide}>
+ <Slide direction="left" in={slideIn} timeout={1000}>
+ <div className={`slideContentLinkAfterActive${slideIn}`} style={{ width: '100%', height: "100%" }}>
+ <Link to={"/colecao-do-usuario/" + props.id} className="text" style={{ textDecoration: "none" }} >
+ {SlideAnimationContent()}
+ </Link>
+ </div>
+ </Slide>
+ <div className={`slideContentLinkBeforeActive${slideIn}`} style={{ width: '100%', height: '100%' }}>
+ <UserInfo>
+ {/* I(Luis) dont know why, but if i use styled components, sometimes the avatar will be deconfigured */}
+ <img src={userAvatar} alt="user avatar" style={{
+ height: "70px", width: "70px", borderRadius: "50%",
+ zIndex: 1, border: "2px solid white",
+ boxShadow: "0 1px 3px rgba(0,0,0,.45)"
+
+ }} />
+ <UserAndTitle>
+ <span>{props.author}</span>
+ <span className={"col-name"}>{props.name}</span>
+ </UserAndTitle>
+ </UserInfo>
<StyledGrid container direction="row">
{
- props.thumbnails.map( (thumb) =>
- <Grid item xs={props.thumbnails <= 4 && props.thumbnails > 0 ? 12/props.thumbnails.length : 6}>
- <div style={{backgroundImage : `url(${ `${apiDomain}` + thumb})`, height : "100%", width : "100%", backgroundSize : "cover", backgroundPosition : "center"}}/>
+ props.thumbnails.map((thumb) =>
+ <Grid item xs={props.thumbnails <= 4 && props.thumbnails > 0 ? 12 / props.thumbnails.length : 6}>
+ <div style={{ backgroundImage: `url(${`${apiDomain}` + thumb})`, height: "100%", width: "100%", backgroundSize: "cover", backgroundPosition: "center" }} />
</Grid>
)
}
</StyledGrid>
- </a>
- </Slide>
- </Header>
-
- <Description> {/*renders rating, number of learning objects and likes count*/}
- {
- props.authorID !== state.currentUser.id &&
- <Rating
- name="customized-empty"
- value={props.rating*10}
- precision={0.5}
- style={{color:"#666"}}
- emptyIcon={<StarBorderIcon fontSize="inherit" />}
- />
- }
-
- <Footer>
- <Type>
- <FolderIcon />
- <span style={{fontWeight:"bold"}}>{props.thumbnails.length} </span>
- <span>{props.thumbnails.length !== 1 ? "Recursos" : "Recurso"}</span>
- </Type>
- <LikeCounter>
- <span>{likesCount}</span>
- <ButtonNoWidth onClick={handleLike}>
- <FavoriteIcon style={{color : liked ? "red" : "#666" }}/>
- </ButtonNoWidth>
- </LikeCounter>
- </Footer>
- </Description>
-
- </CardReaDiv>
+ </div>
+ </Header>
+
+ <Description> {/*renders rating, number of learning objects and likes count*/}
+ {
+ props.authorID !== state.currentUser.id &&
+ <Rating
+ name="customized-empty"
+ value={props.rating}
+ readOnly
+ style={{ color: "#666" }}
+ emptyIcon={<StarBorderIcon fontSize="inherit" />}
+ />
+ }
+
+ <Footer>
+ <Type>
+ <FolderIcon />
+ <span style={{ fontWeight: "bold" }}>{props.collections.length} </span>
+ <span>{props.collections.length !== 1 ? "Recursos" : "Recurso"}</span>
+ </Type>
+ <LikeCounter>
+ <span>{likesCount}</span>
+ <ButtonNoWidth onClick={handleLike}>
+ <FavoriteIcon style={{ color: liked ? "red" : "#666" }} />
+ </ButtonNoWidth>
+ </LikeCounter>
+ </Footer>
+ </Description>
+
+ </CardReaDiv>
- {
- props.authorID === state.currentUser.id ?
- (
- <CardReaFooter style={{justifyContent : "space-between"}}> {/*renders following/unfollow and follow button*/}
- <Grid container>
- <Grid item xs={6} style={{display : "flex", justifyContent : "center"}}>
- {
- props.privacy === 'private' &&
- <LockIcon style={{color : "#666"}}/>
- }
- </Grid>
- <Grid item xs={6} style={{display : "flex", justifyContent : "flex-end"}}>
- <ColCardOwnerOptions
- id={props.id}
- />
- </Grid>
- </Grid>
- </CardReaFooter>
- )
- :
- (
- <CardReaFooter> {/*renders following/unfollow and follow button*/}
- {
- userFollowingCol ?
+ {
+ props.authorID === state.currentUser.id ?
(
- [
- RenderFollowingButton()
- ]
+ <CardReaFooter style={{ justifyContent: "space-between" }}> {/*renders following/unfollow and follow button*/}
+ <Grid container>
+ <Grid item xs={6} style={{ display: "flex", justifyContent: "center" }}>
+ {
+ props.privacy === 'private' &&
+ <LockIcon style={{ color: "#666" }} />
+ }
+ </Grid>
+ <Grid item xs={6} style={{ display: "flex", justifyContent: "flex-end" }}>
+ <ColCardOwnerOptions
+ id={props.id}
+ />
+ </Grid>
+ </Grid>
+ </CardReaFooter>
)
:
(
- [
- RenderFollowButton()
- ]
+ <CardReaFooter> {/*renders following/unfollow and follow button*/}
+ {
+ userFollowingCol ?
+ (
+ [
+ RenderFollowingButton()
+ ]
+ )
+ :
+ (
+ [
+ RenderFollowButton()
+ ]
+ )
+ }
+ <ColCardPublicOptions
+ id={props.id}
+ />
+ </CardReaFooter>
)
- }
- <ColCardPublicOptions
- id={props.id}
- />
- </CardReaFooter>
- )
- }
+ }
- </CardDiv>
- </StyledCard>
+ </CardDiv>
+ </StyledCard>
+ </>
)
}
-const SlideAvatarDiv = styled.div`
- vertical-align : middle;
- border : 0;
- img {
- height : 40px !important;
- width : 40px !important;
- border : 0;
- vertical-align : middle;
- border-radius : 50%;
- }
-`
const SlideContentDiv = styled.div`
background-color : #7e57c2;
padding : 10px;
width : 100%;
height : 100%;
- position : absolute;
- display : flex;
- flex-direction : column;
`
const UserAndTitle = styled.div`
@@ -317,19 +396,19 @@ const UserAndTitle = styled.div`
}
`
-const AvatarDiv = styled.div`
- z-index : 5;
- overflow : hidden;
-
- img {
- border-radius : 50%;
- height : 70px;
- width : 70px;
- border : 2px solid #fff !important;
- background-color : #fff;
- box-shadow : 0 1px 3px rgba(0,0,0,.45);
- }
-`
+// const AvatarDiv = styled.div`
+// z-index : 5;
+// overflow : hidden;
+
+// img {
+// border-radius : 50%;
+// height : 70px;
+// width : 70px;
+// border : 2px solid #fff !important;
+// background-color : #fff;
+// box-shadow : 0 1px 3px rgba(0,0,0,.45);
+// }
+// `
const UserInfo = styled.div`
position : absolute;
diff --git a/src/Components/ExpandedMaterialCard.js b/src/Components/ExpandedMaterialCard.js
deleted file mode 100644
index 120cdfa3bacf3a0a7b4ea8ddb95b73a77fa7d508..0000000000000000000000000000000000000000
--- a/src/Components/ExpandedMaterialCard.js
+++ /dev/null
@@ -1,67 +0,0 @@
-/*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 Card from '@material-ui/core/Card';
-import CardContent from '@material-ui/core/CardContent';
-import CardActions from '@material-ui/core/CardActions';
-import Typography from '@material-ui/core/Typography';
-import styled from 'styled-components';
-import Button from '@material-ui/core/Button';
-import ExpandMoreRoundedIcon from '@material-ui/icons/ExpandMoreRounded';
-import ExpandLessRoundedIcon from '@material-ui/icons/ExpandLessRounded';
-
-export default function MaterialCard(props) {
-
- const [expanded, setExpanded] = useState(false);
-
- const thumb = require(`../../public/${props.thumb}`)
-
- return (
- <Card>
- <img style={{maxHeight : "100%", maxWidth:"100%"}} src={thumb} alt="thumbnail do recurso" />
- <CardContent style={{ height: "50px"}}>
- <Title>
- {props.name}
- </Title>
- </CardContent>
- <CardActions style={{ borderTop: "1px solid #e5e5e5", justifyContent: "center" }}>
- <Button
- color="secondary"
- endIcon={expanded ? <ExpandLessRoundedIcon /> : <ExpandMoreRoundedIcon />}
- >
-
- Ver módulos
- </Button>
- </CardActions>
- </Card >
- )
-}
-
-const SizedBox = styled.div`
- width : 5px;
-`
-const Title = styled(Typography)`
- text-overflow: ellipsis;
- overflow: hidden;
- margin-bottom: 10px;
- font-size: 1.2em;
- line-height: 1.1;
- max-height: 46px;
- color: #666;
-`
\ No newline at end of file
diff --git a/src/Components/ExpandedMaterials.js b/src/Components/ExpandedMaterials.js
index 3cf9b5253312dab18728d8a246c1c46eb32a7ed3..603ec4ed4f8053d3c72d8ed36527fec9cb221bc9 100644
--- a/src/Components/ExpandedMaterials.js
+++ b/src/Components/ExpandedMaterials.js
@@ -4,9 +4,10 @@ import styled from 'styled-components';
import Chip from '@material-ui/core/Chip';
import Grid from '@material-ui/core/Grid';
import Button from '@material-ui/core/Button';
-import ExpandedMaterialCard from './ExpandedMaterialCard';
+import TopicCard from './TopicCard';
import Paper from '@material-ui/core/Paper';
import Library from '@material-ui/icons/LibraryBooks';
+import { Link } from 'react-router-dom';
const useStyles = makeStyles((theme) => ({
root: {
@@ -25,7 +26,7 @@ const ExpandedMaterial = (props) => {
return (
<Paper elevation={3} style={{ backgroundColor: "#444444", padding: "20px" }}>
<Grid container direction="row" spacing={2}>
- <Grid item direction="column" xs={4}>
+ <Grid item direction="column" xs={12} md={4}>
<Grid item>
<Title variant="body2">
{
@@ -53,13 +54,15 @@ const ExpandedMaterial = (props) => {
}
</DevelopedByDiv>
<SizedHeightBox3 />
- <Button variant="contained" color="secondary">
- Ver todos
- </Button>
+ <StyledLink to={`/colecao?colecao=${material.id}`}>
+ <Button variant="contained" color="secondary">
+ Ver todos
+ </Button>
+ </StyledLink>
</Grid>
</Grid>
- <Grid item direction="column" xs={8}>
- <Grid container direction="row" alignItems="center">
+ <Grid item direction="column" xs={12} md={8}>
+ <Grid container direction="row">
<Library style={{ color: "White" }} />
<SizedWidthBox />
<Title>
@@ -67,25 +70,25 @@ const ExpandedMaterial = (props) => {
</Title>
</Grid>
<SizedHeightBox />
- <Grid container direction="row" spacing={3}>
- {/* <Grid item md={3}>
- <ExpandedMaterialCard
- name={material.topics[1].pre_title + material.topics[1].title}
- thumb={material.topics[1].img}
+ <Grid container direction="row" justify="center" alignItems="center" spacing={3}>
+ <Grid item md={4}>
+ <TopicCard
+ topic={material.topics[0]}
+ colecao_id={material.id}
/>
- </Grid> */}
- {
- material.topics.map((material, index) => {
- return (
- <Grid item key={index} md={4}>
- <ExpandedMaterialCard
- name={material.pre_title + material.title}
- thumb={material.img}
- />
- </Grid>
- )
- })
- }
+ </Grid>
+ <Grid item md={4}>
+ <TopicCard
+ topic={material.topics[1]}
+ colecao_id={material.id}
+ />
+ </Grid>
+ <Grid item md={4}>
+ <TopicCard
+ topic={material.topics[2]}
+ colecao_id={material.id}
+ />
+ </Grid>
</Grid>
</Grid>
</Grid>
@@ -117,5 +120,10 @@ const SizedHeightBox3 = styled.div`
const SizedWidthBox = styled.div`
width : 5px;
`
+const StyledLink = styled(Link)`
+ text-decoration: none !important;
+ color: inherit !important;
+`
+
export default ExpandedMaterial;
\ No newline at end of file
diff --git a/src/Components/FormationMaterialDescription.js b/src/Components/FormationMaterialDescription.js
index ab8b6b4a70dd32d649c8b49051b9355725ef53ff..5771aef3448785bc86fc45db7f65a3a10e353bdc 100644
--- a/src/Components/FormationMaterialDescription.js
+++ b/src/Components/FormationMaterialDescription.js
@@ -21,87 +21,84 @@ export default function FormationMaterialDescription(props) {
const colecao_obj = props.colecao_obj;
const topico_obj = props.topico_obj;
- return (
+ return (
<WrappingCard>
<Grid container
direction="row"
justify="flex-start"
alignItems="center"
>
- <Grid item xs={9}>
- <HeightAdjustment>
+ <Grid item xs={12} md={8}>
<TextContainer>
<Title>
- { colecao ?
- "Sobre o Material"
- : "Resumo do "+props.colecao_obj.topic_name.slice(0, -1)
+ {colecao ?
+ "Sobre o Material"
+ : "Resumo do " + props.colecao_obj.topic_name.slice(0, -1)
}
</Title>
<Description>
- { colecao ?
+ {colecao ?
colecao_obj.description
: topico_obj.description
}
</Description>
- { colecao ?
- <SubTitle>Histórico do Curso</SubTitle>
- : <Strong>Autoria (autores):</Strong>
- }
+ {colecao ?
+ <SubTitle>Histórico do Curso</SubTitle>
+ : <Strong>Autoria (autores):</Strong>
+ }
<Description>
- { colecao ?
+ {colecao ?
colecao_obj.historic
: topico_obj.author
}
</Description>
</TextContainer>
- </HeightAdjustment>
</Grid>
- <Grid item xs={3}>
- <HeightAdjustment>
+ <Grid item xs={12} md={3}>
<IconList>
<IconItem>
- <LibraryBooksIcon/>
+ <LibraryBooksIcon />
<Strong>Tipo de recurso: </Strong>
Material de Formação
- <br/>
+ <br />
</IconItem>
<IconItem>
- <MoveToInboxIcon/>
+ <MoveToInboxIcon />
<Strong>Ano de publicação: </Strong>
- { colecao ?
+ {colecao ?
colecao_obj.created_at.split('-')[0]
: topico_obj.created_at.split('-')[0]
}
- <br/>
+ <br />
</IconItem>
- { [0, 1, 2].map(i => {
- const content = colecao ?
- (colecao_obj.language[i] ?
- colecao_obj.language[i].name
- : '')
- : (topico_obj.language[i] ?
- topico_obj.language[i].name
- : '')
- return (
- <IconItem>
- <TranslateIcon/>
- <Strong>Idioma: </Strong>
- { content }
- <br/>
- </IconItem>
- );
- })}
+ {[0, 1, 2].map(i => {
+ const content = colecao ?
+ (colecao_obj.language[i] ?
+ colecao_obj.language[i].name
+ : '')
+ : (topico_obj.language[i] ?
+ topico_obj.language[i].name
+ : '')
+ return (
+ <IconItem>
+ <TranslateIcon />
+ <Strong>Idioma: </Strong>
+ {content}
+ <br />
+ </IconItem>
+ );
+ })}
<IconItem>
- <Strong>{ colecao ? "Criado" : "Enviado" } por:</Strong>
- <br/>
+ <Strong>{colecao ? "Criado" : "Enviado"} por:</Strong>
+ <br />
<StyledAnchor href={colecao_obj.developedurl}>
{
- colecao_obj.id === 3 ? <LongUserIcon src="img/logo_parceiros/ic_peninsula.png" />
- : <div>
- <UserIcon src="img/logo_parceiros/ic_nute.png"/>
+ colecao_obj.id === 3 ? <LongUserIcon src={require("../img/logo_parceiros/ic_peninsula.png")} />
+ : <div>
+ <UserIcon src={require("../img/logo_parceiros/ic_nute.png")} />
<Red>
{colecao_obj.developed}
</Red>
@@ -110,67 +107,76 @@ export default function FormationMaterialDescription(props) {
</StyledAnchor>
</IconItem>
</IconList>
- </HeightAdjustment>
</Grid>
</Grid>
</WrappingCard>
- );
+ );
}
-const Title=styled.h1`
+const Title = styled.h1`
font-weight: 100;
color: rgb(102, 102, 102);
`
-const SubTitle=styled.h3`
+const SubTitle = styled.h3`
font-weight: 900;
padding-top: 10px;
color: rgb(102, 102, 102);
`
-const UserIcon=styled.img`
+const UserIcon = styled.img`
width: 50px;
height: 50px;
border-radius: 100px;
margin: 10px 5px 10px 10px;
`
-const LongUserIcon=styled.img`
+const LongUserIcon = styled.img`
width: 90px;
margin: 10px;
`
-const Description=styled.p`
+const Description = styled.p`
color: #666;
`
-const TextContainer=styled.div`
+const TextContainer = styled.div`
margin: 15px;
height: 100%;
- border-right: solid 1px #e5e5e5;
-`
-const HeightAdjustment=styled.div`
- height: 450px;
+ @media screen and (max-width: 768px) {
+ border-bottom: solid 1px #e5e5e5;
+ padding : 0 0 10px 0
+ }
+ @media screen and (max-width: 990px) {
+ border-bottom: solid 1px #e5e5e5;
+ padding : 0 0 10px 0
+ }
+ @media screen and (min-width: 992px) {
+ border-right: solid 1px #e5e5e5;
+ padding : 0 15px 0 0
+
+ }
+ @media screen and (min-width: 1200px) {
+ border-right: solid 1px #e5e5e5;
+ padding : 0 15px 0 0
+ }
`
-const WrappingCard=styled(Card)`
+
+const WrappingCard = styled(Card)`
border-radius: 0;
- height: 500px !important;
margin-right : auto;
margin-left : auto;
margin-bottom: 30px;
@media screen and (max-width: 768px) {
width : 100% !important;
- height: 600px !important;
}
@media screen and (min-width: 992px) {
width : 770px;
- height: 600px !important;
}
@media screen and (min-width: 1200px) {
width : 970px !important;
- height: 600px !important;
}
`
-const IconList=styled.div`
- margin-top: 50px;
+const IconList = styled.div`
+ margin: 15px;
`
-const IconItem=styled.span`
+const IconItem = styled.span`
width: 100%;
display: inline-block;
margin-bottom: 15px;
@@ -185,18 +191,15 @@ const IconItem=styled.span`
vertical-align: middle
}
- span {
- margin-left : 2%;
- }
`
-const Strong=styled.span`
+const Strong = styled.span`
font-weight: bold;
color: #666;
`
-const Red=styled.span`
+const Red = styled.span`
color: #e81f4f;
`
-const StyledAnchor=styled.a`
+const StyledAnchor = styled.a`
text-decoration: none !important;
color: inherit !important;
`
diff --git a/src/Components/FormationMaterialHeader.js b/src/Components/FormationMaterialHeader.js
index 03a81692c80016028802bb1005eeebd15ca85b14..0c49772337828e81ec2ccfb9b045d3cb4f7ef2b9 100644
--- a/src/Components/FormationMaterialHeader.js
+++ b/src/Components/FormationMaterialHeader.js
@@ -4,119 +4,131 @@ import styled from 'styled-components'
import Grid from '@material-ui/core/Grid';
import Card from '@material-ui/core/Card';
import Button from '@material-ui/core/Button';
+import Chip from '@material-ui/core/Chip';
+import { makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles((theme) => ({
+ root: {
+ display: 'flex',
+ flexWrap: 'wrap',
+ '& > *': {
+ margin: theme.spacing(0.5),
+ },
+ },
+}));
+
export default function FormationMaterialHeader(props) {
const colecao = props.colecao;
const colecao_obj = props.colecao_obj;
const topico_obj = props.topico_obj;
+ const classes = useStyles();
+
const get_title = () => {
return colecao ?
- colecao_obj.name
- : (topico_obj.pre_title + topico_obj.title);
+ colecao_obj.name
+ : (topico_obj.pre_title + topico_obj.title);
}
const get_subtitle = () => {
return colecao ?
- colecao_obj.topics.length+' '+colecao_obj.topic_name
- : colecao_obj.name;
+ colecao_obj.topics.length + ' ' + colecao_obj.topic_name
+ : colecao_obj.name;
}
- return (
+ const getThumb = () => {
+ return colecao ?
+ require(`../../public/${colecao_obj.img}`)
+ : require(`../../public/${topico_obj.img}`)
+ }
+
+ return (
<WrappingCard>
- <Grid container
- direction="row"
+ <Grid container
+ direction="row"
+ justify="flex-start"
+ alignItems="stretch"
+ >
+ <Grid item xs={12} lg={5}>
+ <Img src={getThumb()} />
+ </Grid>
+ <Grid item xs={12} lg={7}
+ direction="column"
justify="flex-start"
alignItems="stretch"
+ style={{ padding: "8px 10px" }}
>
- <Grid item xs={5}>
- <Img src={colecao_obj.img}/>
+ <Grid item>
+ <Title>{get_title()}</Title>
+ </Grid>
+ <Grid item>
+ <SubTitle>
+ {colecao ?
+ get_subtitle()
+ : <StyledLink to={'/colecao?id=' + colecao_obj.id}>{get_subtitle()}</StyledLink>}
+ </SubTitle>
</Grid>
- <Grid item container xs={7}
- direction="column"
- justify="flex-start"
- alignItems="stretch"
- >
- <Grid item>
- <Title>{get_title()}</Title>
- </Grid>
- <Grid item>
- <SubTitle>
- { colecao ?
- get_subtitle()
- : <StyledLink to={'/colecao?id='+colecao_obj.id}>{get_subtitle()}</StyledLink> }
- </SubTitle>
- </Grid>
- <Grid item>
- <TagList>
- {colecao_obj.tags.map((t) => {
- return (<Badge>{t.name}</Badge>);
- })}
- </TagList>
- </Grid>
- <Grid item>
- { colecao ?
- <Button
- variant="contained"
- color="secondary"
- style={{marginLeft: '15px'}}
- onClick={props.handleClick}
- >
- { props.colecao ? "Ver todos os módulos" : "Iniciar leitura" }
- </Button>
- :
- <StyledLink to={'/iframe-colecao?colecao='+colecao_obj.id+'&topico='+topico_obj.id}>
- <Button
- variant="contained"
- color="secondary"
- style={{marginLeft: '15px'}}
- onClick={props.handleClick}
- >
- { props.colecao ? "Ver todos os módulos" : "Iniciar leitura" }
- </Button>
- </StyledLink>
- }
- </Grid>
+ <Grid item>
+ <ChipsDiv className={classes.root}>
+ {colecao_obj.tags.map((t, index) => {
+ return (<Chip color="default" label={t.name} key={index} style={{ padding: "0.5px" }} />);
+ })}
+ </ChipsDiv>
+ </Grid>
+ <Grid item>
+ {colecao ?
+ <Button
+ variant="contained"
+ color="secondary"
+ style={{ marginLeft: '15px' }}
+ onClick={props.handleClick}
+ >
+ {props.colecao ? "Ver todos os módulos" : "Iniciar leitura"}
+ </Button>
+ :
+ <StyledLink to={'/iframe-colecao?colecao=' + colecao_obj.id + '&topico=' + topico_obj.id}>
+ <Button
+ variant="contained"
+ color="secondary"
+ style={{ marginLeft: '15px', marginTop: '10px' }}
+ onClick={props.handleClick}
+ >
+ {props.colecao ? "Ver todos os módulos" : "Iniciar leitura"}
+ </Button>
+ </StyledLink>
+ }
</Grid>
</Grid>
+ </Grid>
</WrappingCard>
- );
+ );
}
-const Badge=styled.span`
- background-color: #e5e5e5;
- color: #666;
- border-radius: 15px;
- margin-left: 5px;
- padding: 3px 7px;
- line-height: 1.2em;
- font-size: 0.7em;
- display: inline-block;
-`
-const TagList=styled.div`
+const ChipsDiv = styled.div`
margin-bottom: 10px;
width: 100%;
margin-left: 10px;
`
-const Img=styled.img`
- max-width: 100%;
+const Img = styled.img`
+ width: 100%;
+ height: 100%;
+ display: block; /* remove extra space below image */
background-color: #e5e5e5;
- display: inline-block;
`
-const Title=styled.h1`
+const Title = styled.h2`
font-weight: 100;
margin: 15px;
color: rgb(102, 102, 102);
`
-const SubTitle=styled.h3`
- font-weight: 100;
+const SubTitle = styled.h4`
+ font-weight: 50;
margin: 15px;;
margin-top: 0;
color: rgb(102, 102, 102);
`
-export const WrappingCard=styled(Card)`
+export const WrappingCard = styled(Card)`
border-radius: 0;
- height: 250px !important;
margin-right : auto;
margin-left : auto;
margin-bottom: 30px;
@@ -132,7 +144,8 @@ export const WrappingCard=styled(Card)`
width : 970px !important;
}
`
+
const StyledLink = styled(Link)`
text-decoration: none !important;
- color: inherit !important;
+ color: #e81f4f !important;
`
diff --git a/src/Components/HelperFunctions/saveTokens.js b/src/Components/HelperFunctions/saveTokens.js
new file mode 100644
index 0000000000000000000000000000000000000000..15b89b05f5779c53cfdd209a8e33418e3074b944
--- /dev/null
+++ b/src/Components/HelperFunctions/saveTokens.js
@@ -0,0 +1,6 @@
+export const saveHeaders = (response) => {
+ if (response.headers['access-token'])
+ sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token'])
+ if (response.headers.client)
+ sessionStorage.setItem('@portalmec/clientToken', response.headers.client)
+}
\ No newline at end of file
diff --git a/src/Components/IframeOverlay/DrawerContent.js b/src/Components/IframeOverlay/DrawerContent.js
index 8bd7e483f68d011d783a7f944cfd9e96872cce71..cd4772a6d1ab6c33b1b113420ae6337ebb8c1588 100644
--- a/src/Components/IframeOverlay/DrawerContent.js
+++ b/src/Components/IframeOverlay/DrawerContent.js
@@ -6,15 +6,19 @@ import SearchInput from './SearchInput.js';
import ResourceCard from './ResourceCard.js';
import { apiUrl } from '../../env';
import SmallFooter from './SmallFooter.js';
+import CircularProgress from '@material-ui/core/CircularProgress';
export default function DrawerContent(props) {
const [resources, setResources] = useState([]);
+ const [isLoading, setIsLoading] = useState(false);
const search = (query) => {
+ setIsLoading(true);
axios.get(`${apiUrl}/search?
- page=0&results_per_page=5&query=${query}&search_class=LearningObject`)
+ page=0&results_per_page=12&query=${query}&search_class=LearningObject`)
.then(res => {
setResources(res.data);
+ setIsLoading(false);
});
}
@@ -40,13 +44,18 @@ export default function DrawerContent(props) {
Recursos Relacionados na Plataforma MEC:
</Description>
</Grid>
- {resources.map(r => {
+
+ {
+ isLoading ? <CircularProgress style={{color : 'white'}}/>
+ :
+ resources.map((r, index) => {
return(
- <Grid item xs={11}>
+ <Grid item xs={11} key={index}>
<ResourceCard
id={r.id}
name={r.name}
likes={r.likes_count}
+ thumb={r.thumbnail}
/>
</Grid>
);}
diff --git a/src/Components/IframeOverlay/ResourceCard.js b/src/Components/IframeOverlay/ResourceCard.js
index 57f2b5be670911f2f5916362409e1b087867d10e..365ea9a3d6574cd63503c060bf94d08308be7748 100644
--- a/src/Components/IframeOverlay/ResourceCard.js
+++ b/src/Components/IframeOverlay/ResourceCard.js
@@ -6,10 +6,17 @@ import Grid from '@material-ui/core/Grid';
import WhiteAreaOfCard from './WhiteAreaOfCard.js';
export default function ResourceCard(props) {
+
+ const getThumb = () => {
+ return props.thumb ?
+ `https://api.portalmec.c3sl.ufpr.br${props.thumb}`
+ : require('../../img/laranja/IMAGEM.jpg');
+
+ }
+
return(
<Anchor
- to={'/recurso?id='+props.id
- +'&name='+props.name}
+ to={'/recurso/'+props.id}
>
<CardPaper elevation={3}>
<Grid container
@@ -18,7 +25,7 @@ export default function ResourceCard(props) {
alignItems="center"
>
<Grid item>
- <Img src="https://api.portalmec.c3sl.ufpr.br/system/learning_objects/thumbnails/000/032/128/original/1427119781385_thumb_w300_h160.jpg?1544253610" />
+ <Img src={getThumb()} />
</Grid>
<Grid item>
<WhiteAreaOfCard name={props.name} likes={props.likes} />
diff --git a/src/Components/IframeOverlay/SearchInput.js b/src/Components/IframeOverlay/SearchInput.js
index f201d3143be7501aa4631ecacdecfd972a985130..3fd246cb70a501f5d0c091df2e133ce8c2ac3f80 100644
--- a/src/Components/IframeOverlay/SearchInput.js
+++ b/src/Components/IframeOverlay/SearchInput.js
@@ -5,6 +5,8 @@ import IconButton from '@material-ui/core/IconButton';
import OutlinedInput from '@material-ui/core/OutlinedInput';
import InputAdornment from '@material-ui/core/InputAdornment';
import FormControl from '@material-ui/core/FormControl';
+import Divider from '@material-ui/core/Divider';
+import CloseRoundedIcon from '@material-ui/icons/CloseRounded';
export default function SearchInput(props) {
const [text, setText] = useState(props.stdin);
@@ -17,31 +19,56 @@ export default function SearchInput(props) {
props.search(text);
}
+ const handleCleanInput = () => {
+ setText("");
+ }
+
+ const handleKeyUp = (event) => {
+ if (event.key === "Enter")
+ handleClickSearch()
+ }
+
return (
<Wrapper>
- <FormControl variant="outlined" style={{width: '100%'}}>
+ <FormControl variant="outlined" style={{ width: '100%' }}>
<OutlinedInput
type="text"
value={text}
+ placeholder="O quê você está buscando?"
onChange={handleChange}
+ onKeyUp={handleKeyUp}
endAdornment={
- <InputAdornment position="end">
- <IconButton
- onClick={handleClickSearch}
- edge="end"
- >
- <SearchIcon />
- </IconButton>
- </InputAdornment>
+ <>
+ <InputAdornment position="end">
+ <IconButton
+ onClick={handleCleanInput}
+ edge="end"
+ >
+ <CloseRoundedIcon />
+ </IconButton>
+ </InputAdornment>
+ <SizedWidhtBox />
+ <Divider orientation="vertical" flexItem />
+ <InputAdornment position="end">
+ <IconButton
+ onClick={handleClickSearch}
+ edge="end"
+ >
+ <SearchIcon style={{ fill: "#00bcd4" }} />
+ </IconButton>
+ </InputAdornment>
+ </>
}
/>
</FormControl>
</Wrapper>
);
}
-const Wrapper=styled.div`
+const Wrapper = styled.div`
background-color: white;
border-radius: 5px;
margin: 20px;
-
+`
+const SizedWidhtBox = styled.div`
+ margin-right : 22px;
`
diff --git a/src/Components/MaterialCard.js b/src/Components/MaterialCard.js
index ae90a16f8375fef7d4b2b5e111ca7fc700f6e0d2..33cf3d8ddccf32591fdb77753956331d3ec87b51 100644
--- a/src/Components/MaterialCard.js
+++ b/src/Components/MaterialCard.js
@@ -16,7 +16,7 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, {useState} from 'react';
+import React from 'react';
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
import CardActions from '@material-ui/core/CardActions';
@@ -28,14 +28,18 @@ import Grid from '@material-ui/core/Grid';
import styled from 'styled-components';
import Button from '@material-ui/core/Button';
import ExpandMoreRoundedIcon from '@material-ui/icons/ExpandMoreRounded';
-import ExpandLessRoundedIcon from '@material-ui/icons/ExpandLessRounded';
+import {Link} from 'react-router-dom';
export default function MaterialCard(props) {
- const [expanded, setExpanded] = useState(false);
-
const thumb = require(`../../public/${props.thumb}`)
+ const HandleButtonPressed = () => {
+ props.handleExpand(props.id);
+ }
+
+ const width = window.innerWidth;
+
return (
<Card>
<img src={thumb} alt="thumbnail do recurso" />
@@ -66,14 +70,27 @@ export default function MaterialCard(props) {
</Grid>
</CardActions>
<CardActions style={{ borderTop: "1px solid #e5e5e5", justifyContent: "center" }}>
- <Button
- color="secondary"
- endIcon={expanded ? <ExpandLessRoundedIcon/> : <ExpandMoreRoundedIcon/>}
- onClick={() => props.handleExpand(props.id)}
- >
-
- Ver módulos
- </Button>
+ {
+ width <= 767 ?
+ <StyledLink to={`/colecao?colecao=${props.id}`}>
+ <Button
+ color="secondary"
+ endIcon={<ExpandMoreRoundedIcon />}
+ >
+
+ Ver módulos
+ </Button>
+ </StyledLink>
+ :
+ <Button
+ color="secondary"
+ endIcon={<ExpandMoreRoundedIcon />}
+ onClick={HandleButtonPressed}
+ >
+
+ Ver módulos
+ </Button>
+ }
</CardActions>
</Card >
)
@@ -83,11 +100,18 @@ const SizedBox = styled.div`
width : 5px;
`
const Title = styled(Typography)`
- text-overflow: ellipsis;
+ font-weight: 500;
+ color: rgb(102, 102, 102);
+ font-size: 0.9em;
+ margin-left: 10px;
+ margin-right: 10px;
+
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
overflow: hidden;
- margin-bottom: 10px;
- font-size: 1.2em;
- line-height: 1.1;
- max-height: 46px;
- color: #666;
+`
+const StyledLink = styled(Link)`
+ text-decoration: none ;
+ color: inherit ;
`
\ No newline at end of file
diff --git a/src/Components/ResourceCard.js b/src/Components/ResourceCard.js
index 03576afd0ada0fd7794198681c73cda37cdf68b1..2e76e5fc66116d288e3be56b7af41c85ef77878e 100644
--- a/src/Components/ResourceCard.js
+++ b/src/Components/ResourceCard.js
@@ -25,6 +25,7 @@ import CardActions from "@material-ui/core/CardActions";
import IconButton from "@material-ui/core/IconButton";
import Typography from "@material-ui/core/Typography";
import FavoriteIcon from "@material-ui/icons/Favorite";
+import styled from 'styled-components';
import animacao from "../img/laranja/ANIMACAO_SIMULACAO.jpg";
import apresentacao from "../img/laranja/APRESENTACAO.jpg";
import aplicativo from "../img/laranja/APP.jpg";
@@ -74,7 +75,7 @@ const slideStyle = {
const publisherStyle = {
color: "white",
paddinLeft: "30px",
- fontSize: "15px"
+ fontSize: "15px",
};
class ResourceCard extends Component {
@@ -86,16 +87,16 @@ class ResourceCard extends Component {
userAvatar: null
};
}
- renderType(type){
- if (!this.state.thumbnail) {
- if(!this.props.thumbnail) {
- const aux = types.find(function(element){return element.label === type});
- this.setState({thumbnail: aux.thumb});
- }
- else{
- this.setState({thumbnail: `${apiDomain}` + this.props.thumbnail});
- }
+ renderType(type) {
+ if (!this.state.thumbnail) {
+ if (!this.props.thumbnail) {
+ const aux = types.find(function (element) { return element.label === type });
+ this.setState({ thumbnail: aux.thumb });
}
+ else {
+ this.setState({ thumbnail: `${apiDomain}` + this.props.thumbnail });
+ }
+ }
// {/*if (!this.state.thumbnail && !this.props.thumbnail ) {
// var aux = types.find(function(element){ return element.label === type});
// this.setState({thumbnail: aux.thumb});
@@ -135,10 +136,10 @@ class ResourceCard extends Component {
>
<div className={this.state.userStyle}>
<img style={slideStyle} src={this.state.userAvatar} alt="Avatar" />
- <Typography style={publisherStyle}>
+ <StyledPublisher style={publisherStyle}>
Enviado por: <br />
{this.props.author}
- </Typography>
+ </StyledPublisher>
</div>
<img
src={this.state.thumbnail}
@@ -163,6 +164,7 @@ class ResourceCard extends Component {
name="customized-empty"
value={this.props.rating * 10}
precision={0.5}
+ readOnly
emptyIcon={<StarBorderIcon fontSize="inherit" />}
/>
</Container>
@@ -172,8 +174,8 @@ class ResourceCard extends Component {
{this.props.type === "VÃdeo" ? (
<Video style={{ color: "#ff7f00" }} />
) : (
- <br />
- )}
+ <br />
+ )}
<IconButton aria-label="Favoritar" size="small">
<FavoriteIcon />
</IconButton>
@@ -194,4 +196,11 @@ class ResourceCard extends Component {
}
}
+const StyledPublisher = styled(Typography)`
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+`
+
export default ResourceCard;
diff --git a/src/Components/ResourceCardFunction.js b/src/Components/ResourceCardFunction.js
index ede74c3f2fc37d04bcce83901a6115cb91c6a85a..6fbee114729d61f7cd480b4736cbcf6ea101c988 100644
--- a/src/Components/ResourceCardFunction.js
+++ b/src/Components/ResourceCardFunction.js
@@ -16,10 +16,10 @@ 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 React, { useState, useEffect } from 'react';
import Card from '@material-ui/core/Card';
import axios from 'axios'
-import {apiDomain, apiUrl} from '../env';
+import { apiDomain, apiUrl } from '../env';
import ResourceCardOptions from './ResourceCardOptions'
import noAvatar from "../img/default_profile.png";
// import { makeStyles } from '@material-ui/core/styles';
@@ -48,27 +48,27 @@ import FavoriteIcon from '@material-ui/icons/Favorite';
import ButtonGuardarColecao from './ButtonGuardarColecao.js'
import Slide from '@material-ui/core/Slide';
import Grid from '@material-ui/core/Grid';
-import {Link} from 'react-router-dom';
-import {getDefaultThumbnail} from './HelperFunctions/getDefaultThumbnail'
+import { Link } from 'react-router-dom';
+import { getDefaultThumbnail } from './HelperFunctions/getDefaultThumbnail'
import GetIconByName from './UploadPageComponents/GetIconByName'
-import {getAxiosConfig} from './HelperFunctions/getAxiosConfig'
-
+import { getAxiosConfig } from './HelperFunctions/getAxiosConfig'
+// import DefaultAvatar from '../../public/img/logo_parceiros/ic_default.png'
import "./ResourceCard.css";
// const types = [{label: "Animação", thumb: animacao}, {label: "Apresentação", thumb: apresentacao},
// {label: "Aplicativo" , thumb: aplicativo}, {label: "Ãudio", thumb: audio}, {label: "Vazio", thumb: vazio}, {label: "Imagem", thumb: imagem}, {label: "Gráfico", thumb: grafico}, {label: "Jogo", thumb: jogo}, {label: "Livro", thumb: livro}, {label:"Livro digital", thumb: livro}, {label: "Mapa", thumb: mapa}, {label: "Outros", thumb: outros}, {label: "Software Educacional", thumb:software}, {label: "Software", thumb:software}, {label: "Texto", thumb:texto}, {label: "VÃdeo", thumb:video}]
-export default function ResourceCardFunction (props) {
+export default function ResourceCardFunction(props) {
const [thumbnail, setThumbnail] = useState(null)
// eslint-disable-next-line
const [label, setLabel] = useState(props.type)
const [userAvatar, setUserAvatar] = useState(noAvatar)
const [slideIn, setSlide] = useState(false)
- const controlSlide = () => {setSlide(!slideIn)}
+ const controlSlide = () => { setSlide(!slideIn) }
const [liked, toggleLiked] = useState(props.liked)
const [likesCount, setLikesCount] = useState(props.likeCount)
- useEffect( () => {
+ useEffect(() => {
//decide which thumbnail to use
if (props.thumbnail) {
setThumbnail(`${apiDomain}` + props.thumbnail)
@@ -80,6 +80,9 @@ export default function ResourceCardFunction (props) {
if (props.avatar) {
setUserAvatar(`${apiDomain}` + props.avatar)
}
+ else {
+ setUserAvatar(require('../img/logo_parceiros/ic_default.png'))
+ }
}, [])
@@ -87,45 +90,45 @@ export default function ResourceCardFunction (props) {
let payload = {}
let config = getAxiosConfig()
- axios.put( (`${apiUrl}/learning_objects/` + props.id + '/like'),payload, config
+ axios.put((`${apiUrl}/learning_objects/` + props.id + '/like'), payload, config
).then(
(response) => {
console.log(response.data)
- if ( response.headers['access-token'] ) {
+ if (response.headers['access-token']) {
sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token'])
}
toggleLiked(!liked)
setLikesCount(response.data.count)
},
- (error) => {console.log(error)}
+ (error) => { console.log(error) }
)
}
const SlideAnimationContent = () => {
return (
<SlideContentDiv>
- <div style={{display:"flex", flex:"1"}}>{/*marginBottom:10px*/}
- <AvatarDiv>
- <img className="img" src={userAvatar} alt="user avatar"/>
- </AvatarDiv>
- <EnviadoPor>
- Enviado por:
- <br/>
- <p>{props.author}</p>
- </EnviadoPor>
+ <div style={{padding : 7}}>
+ <HeaderContainer container="row" justify="flex-start" alignItems="center" >{/*marginBottom:10px*/}
+ <AvatarDiv item xs={2}>
+ <img className="img" src={userAvatar} alt="user avatar" />
+ </AvatarDiv>
+ <EnviadoPor item xs={10}>
+ Enviado por:
+ <br />
+ <p>{props.author}</p>
+ </EnviadoPor>
+ </HeaderContainer>
+ <TagContainer container direction="row">
+ {
+ props.tags.map((tag) =>
+ <Grid item key={tag.id}>
+ <span >{tag.name}</span>
+ </Grid>
+ )
+ }
+ </TagContainer>
</div>
- <TagContainer>
- <Grid container spacing={0} justify='flex-start' style={{height : "inherit"}}>
- {
- props.tags.map( (tag) =>
- <Grid item key={tag.id}>
- <span key={tag.id}>{tag.name}</span>
- </Grid>
- )
- }
- </Grid>
- </TagContainer>
</SlideContentDiv>
)
}
@@ -136,54 +139,47 @@ export default function ResourceCardFunction (props) {
<CardReaDiv>
<Header onMouseEnter={controlSlide} onMouseLeave={controlSlide}>
{
- props.published &&
- <Slide direction="left" in={slideIn} timeout={500}>
- <div className={`slideContentLinkAfterActive${slideIn}`} style={{}}>
+ <Slide direction="left" in={slideIn} timeout={1000}>
+ <div className={`slideContentLinkAfterActive${slideIn}`}>
<Link to={props.href} className="text" >
{SlideAnimationContent()}
</Link>
-
</div>
</Slide >
}
- <div className={`slideContentLinkBeforeActive${slideIn}`} style={{}}>
-
+ <div className={`slideContentLinkBeforeActive${slideIn}`} style={{ height: '100%' }}>
<Link to={props.href}>
- <img className="img-cover" src={thumbnail} alt="learning object thumbnail"/>
+ <img className="img-cover" src={thumbnail} alt="learning object thumbnail" style={{ width: "272.5px" }} />
</Link>
</div>
</Header>
-
<Description>
- <Link to={props.href} className="text"> {/*add link to learningObject*/}
- <span>
+ <Link to={props.href} className="text" style={{ height: '45px' }}> {/*add link to learningObject*/}
+ <Title>
{props.title}
- </span>
+ </Title>
</Link>
-
{
props.published &&
<Rating
- name="customized-empty"
- value={props.rating}
- precision={0.5}
- style={{color:"#666"}}
- emptyIcon={<StarBorderIcon fontSize="inherit" />}
+ name="customized-empty"
+ value={props.rating}
+ readOnly
+ style={{ color: "#666" }}
+ emptyIcon={<StarBorderIcon fontSize="inherit" />}
/>
}
-
<Footer>
<Type>
{GetIconByName(label)}
<span>{label}</span>
</Type>
-
{
props.published &&
<LikeCounter>
<span>{likesCount}</span>
<ButtonNoWidth onClick={handleLike}>
- <FavoriteIcon style={{color : liked ? "red" : "#666" }}/>
+ <FavoriteIcon style={{ color: liked ? "red" : "#666" }} />
</ButtonNoWidth>
</LikeCounter>
}
@@ -194,16 +190,16 @@ export default function ResourceCardFunction (props) {
{
props.published &&
<CardReaFooter>
- <div style={{display : "flex", height : "100%"}}>
+ <div style={{ display: "flex", height: "100%" }}>
<ButtonGuardarColecao thumb={props.thumbnail} title={props.title} recursoId={props.id}
- />
+ />
</div>
<ResourceCardOptions
learningObjectId={props.id}
- downloadableLink = {props.downloadableLink}
+ downloadableLink={props.downloadableLink}
thumb={props.thumbnail}
title={props.title}
- />
+ />
</CardReaFooter>
}
</CardDiv>
@@ -211,27 +207,34 @@ export default function ResourceCardFunction (props) {
)
}
/*---------- USED IN SLIDE DIV ONLY -----------*/
-export const TagContainer = styled.div`
- display : flex;
- flex-direction : row;
- width : 100%;
- overflow : hidden;
- flex : 2;
- height : 120px;
+export const HeaderContainer = styled(Grid)`
+`
+
+export const TagContainer = styled(Grid)`
+ margin-top: 0.5em;
+ height : 120px ;
+ overflow-y : hidden;
+ ${'' /* border : 2px solid red; */}
span {
+ word-wrap: break-word;
background-color : #fff;
- height : 20px;
+ display : flex;
+ justify-content : center;
+ align-items : center;
+ height : 22px;
+ tet-align : center;
+ margin: 3px;
+ -webkit-box-direction: normal;
overflow : hidden;
- margin : 2px;
- padding : 3px 8px;
+ padding : 1px 8px;
border-radius : 10px;
color : #666;
font-size : 11px;
}
`
-export const EnviadoPor = styled.div`
+export const EnviadoPor = styled(Grid)`
display : inline-block;
padding-left : 10px;
overflow : hidden;
@@ -239,20 +242,21 @@ export const EnviadoPor = styled.div`
padding-right : 1em;
p {
- text-overflow : ellipsis;
- overflow : hidden;
- white-space : nowrap;
margin : 0;
+ display: -webkit-box;
+ -webkit-line-clamp: 1;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
}
`
-const AvatarDiv = styled.div`
+export const AvatarDiv = styled(Grid)`
vertical-align : middle;
border : 0;
- width : 45px;
+ width : 40px;
+ height : 40px;
img {
- width : 45px;
- height : 40px !important;
- width : 40px !important;
+ max-height: 100%;
+ max-width: 100%;
border : 0;
vertical-align : middle;
border-radius : 50%;
@@ -261,12 +265,9 @@ const AvatarDiv = styled.div`
const SlideContentDiv = styled.div`
background-color : #ff9226;
- padding : 10px;
- width : 100%;
- height : 100%;
- // position : absolute;
- // display : flex;
- // flex-direction : column;
+ ${'' /* padding : 10px; */}
+ width : 272.5px;
+ height : 189px;
`
/*--------------------------------------------*/
@@ -341,6 +342,7 @@ export const Footer = styled.div`
display : flex;
flex-direction : row;
justify-content : space-between;
+ margin-top : 5px;
`
const Description = styled.div`
@@ -355,16 +357,13 @@ const Description = styled.div`
text-decoration : none !important;
color : inherit;
}
-
- .title {
- text-overflow : ellipsis;
- overflow : hidden;
- margin-bottom : 10px;
- font-size : 1.2em;
- line-height : 1.1;
- max-height : 46px;
- color : #666;
- }
+`
+const Title = styled.span`
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+ color : #666;
`
export const Header = styled.div`
@@ -382,7 +381,7 @@ export const CardReaDiv = styled.div`
display : flex;
flex-direction : column;
height : 320px;
- width : 272.5px;
+ ${'' /* width : 272.5px; */}
margin : 0 auto;
.img-cover {
@@ -393,7 +392,7 @@ export const CardReaDiv = styled.div`
display : block;
background-position : center;
background-size : cover;
- width : 100%;
+ ${'' /* width : 100%; */}
}
`
@@ -409,7 +408,7 @@ export const StyledCard = styled(Card)`
max-height : 380px;
margin-top : 10px;
margin-bottom : 10px;
- max-width : 345px;
+ ${'' /* max-width : 345px; */}
border-radius : 0;
box-shadow : 0 0 5px 0 rgba(0,0,0,.25);
`
diff --git a/src/Components/ResourceCardOptions.js b/src/Components/ResourceCardOptions.js
index 7503fec2c073b37341548b355a7fc3f23e81ebbf..44bc52df18fd48f3deeeae344a8457ff06e6a8b6 100644
--- a/src/Components/ResourceCardOptions.js
+++ b/src/Components/ResourceCardOptions.js
@@ -16,8 +16,8 @@ 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 {Store} from '../Store.js'
+import React, { useContext, useState } from 'react';
+import { Store } from '../Store.js'
import styled from 'styled-components'
import Button from '@material-ui/core/Button';
import Menu from '@material-ui/core/Menu';
@@ -27,16 +27,22 @@ import MoreVertIcon from '@material-ui/icons/MoreVert';
import OpenIcon from '@material-ui/icons/OpenInNew';
import ReportIcon from '@material-ui/icons/Error';
import ReportModal from './ReportModal.js'
-import {Link} from 'react-router-dom'
+import { Link } from 'react-router-dom'
import DownloadIcon from '@material-ui/icons/CloudDownload';
import ShareIcon from '@material-ui/icons/Share';
import AddIcon from '@material-ui/icons/CreateNewFolder';
import GuardarModal from './GuardarModal'
import ShareModal from './ShareModal'
import SnackbarComponent from './SnackbarComponent'
-
-export default function ResourceCardOptions (props) {
- const {state} = useContext(Store)
+import OpenInBrowserIcon from '@material-ui/icons/OpenInBrowser';
+import Tooltip from '@material-ui/core/Tooltip';
+import SignUpModal from './SignUpModal'
+import LoginModal from './LoginModal.js'
+import Snackbar from '@material-ui/core/Snackbar';
+import MuiAlert from '@material-ui/lab/Alert';
+
+export default function ResourceCardOptions(props) {
+ const { state } = useContext(Store)
const [anchorEl, setAnchorEl] = React.useState(null);
function handleClick(event) {
@@ -60,8 +66,8 @@ export default function ResourceCardOptions (props) {
const [saveToCol, toggleSave] = useState(false)
const handleGuardar = () => {
- if(state.currentUser.id === '') {
- console.log('abrir login modal');
+ if (!state.currentUser.id) {
+ handleLogin();
}
else {
toggleSave(true);
@@ -78,8 +84,8 @@ export default function ResourceCardOptions (props) {
const [shareOpen, toggleShare] = useState(false)
const handleShare = () => {
- if(state.currentUser.id === '') {
- console.log('abrir login modal');
+ if (!state.currentUser.id) {
+ handleLogin()
}
else {
toggleShare(true);
@@ -87,65 +93,109 @@ export default function ResourceCardOptions (props) {
handleClose()
}
const getShareablePageLink = () => {
- return (window.location.href + "/recurso/" + props.learningObjectId)
+ return (window.origin + "/recurso/" + props.learningObjectId)
+ }
+
+ const handleSignUp = () => {
+ setSignUp(!signUpOpen)
+ }
+
+ const handleLogin = () => {
+ setLogin(!loginOpen)
+ }
+
+ function Alert(props) {
+ return <MuiAlert elevation={6} variant="filled" {...props} />;
+ }
+
+ function toggleLoginSnackbar(reason) {
+ if (reason === 'clickaway') {
+ return;
+ }
+ handleSuccessfulLogin(false);
}
const [snackbarOpen, toggleSnackbar] = useState(false)
+ const [signUpOpen, setSignUp] = useState(false)
+ const [loginOpen, setLogin] = useState(false)
+ const [successfulLoginOpen, handleSuccessfulLogin] = useState(false)
return (
- <React.Fragment>
- <ReportModal open={reportModal} handleClose={() => handleModalReportar(false)}
- form="recurso" complainableId={props.learningObjectId}
- complainableType={"LearningObject"}
- {...props}
- />
- <GuardarModal open={saveToCol} handleClose={() => {toggleSave(false)}}
- thumb={props.thumb} title={props.title} recursoId={props.learningObjectId}
- />
- <ShareModal open={shareOpen} handleClose={() => {toggleShare(false)}}
- thumb={props.thumb} title={props.title} link={getShareablePageLink()}
- />
- <SnackbarComponent snackbarOpen={snackbarOpen} severity={"info"} handleClose={() => {toggleSnackbar(false)}} text={"Baixando o Recurso... Lembre-se de relatar sua experiência após o uso do Recurso!"}
- />
- <div style={{fontSize: "12px", display : "flex", flexDirection : "column", justifyContent : "center"}}>
- <ButtonNoWidth aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick} style={{color : "#666"}}>
- <MoreVertIcon style={{color : "#666"}}/>
- </ButtonNoWidth>
- <Menu
- id="simple-menu"
- anchorEl={anchorEl}
- keepMounted
- open={Boolean(anchorEl)}
- onClose={handleClose}
- >
- <StyledMenuItem onClick={handleClose}>
- <Link to={"/recurso/" + props.learningObjectId}>
- <ListItemIcon><OpenIcon /></ListItemIcon>Abrir
- </Link>
- </StyledMenuItem>
-
- {
- props.downloadableLink &&
- <StyledMenuItem onClick={() => {enableDownload(); handleClose()}}>
- <ListItemIcon><DownloadIcon /></ListItemIcon>Baixar
- </StyledMenuItem>
- }
-
- <StyledMenuItem onClick={handleShare}>
- <ListItemIcon><ShareIcon /></ListItemIcon>Compartilhar
- </StyledMenuItem>
-
- <StyledMenuItem onClick={handleGuardar}>
- <ListItemIcon><AddIcon /></ListItemIcon>Guardar
- </StyledMenuItem>
-
- <StyledMenuItem onClick={() => {handleModalReportar(true); handleClose()}}>
- <ListItemIcon><ReportIcon /></ListItemIcon>Reportar
- </StyledMenuItem>
- </Menu>
- </div>
- </React.Fragment>
- );
+ <>
+
+ <React.Fragment>
+ <ReportModal open={reportModal} handleClose={() => handleModalReportar(false)}
+ form="recurso" complainableId={props.learningObjectId}
+ complainableType={"LearningObject"}
+ {...props}
+ />
+ <GuardarModal open={saveToCol} handleClose={() => { toggleSave(false) }}
+ thumb={props.thumb} title={props.title} recursoId={props.learningObjectId}
+ />
+ <ShareModal open={shareOpen} handleClose={() => { toggleShare(false) }}
+ thumb={props.thumb} title={props.title} link={getShareablePageLink()}
+ />
+ <SnackbarComponent snackbarOpen={snackbarOpen} severity={"info"} handleClose={() => { toggleSnackbar(false) }} text={"Baixando o Recurso... Lembre-se de relatar sua experiência após o uso do Recurso!"}
+ />
+ <SignUpModal open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin}
+ />
+ <LoginModal open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
+ openSnackbar={() => { handleSuccessfulLogin(true) }}
+ />
+ <Snackbar open={successfulLoginOpen} autoHideDuration={1000} onClose={toggleLoginSnackbar}
+ anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
+ >
+ <Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert>
+ </Snackbar>
+ <div style={{ fontSize: "12px", display: "flex", flexDirection: "column", justifyContent: "center" }}>
+ <ButtonNoWidth aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick} style={{ color: "#666" }}>
+ <MoreVertIcon style={{ color: "#666" }} />
+ </ButtonNoWidth>
+ <Menu
+ id="simple-menu"
+ anchorEl={anchorEl}
+ keepMounted
+ open={Boolean(anchorEl)}
+ onClose={handleClose}
+ >
+ <Tooltip title="Não preserva filtro" arrow>
+ <StyledMenuItem onClick={handleClose}>
+ <Link to={"/recurso/" + props.learningObjectId}>
+ <ListItemIcon><OpenIcon /></ListItemIcon>Abrir
+ </Link>
+ </StyledMenuItem>
+ </Tooltip>
+
+ <Tooltip title="Preserva filtro" arrow>
+ <StyledMenuItem onClick={() => window.open("/recurso/" + props.learningObjectId, "_blank")}>
+ <ListItemIcon><OpenInBrowserIcon /></ListItemIcon> Abrir em nova guia
+ </StyledMenuItem>
+ </Tooltip>
+
+ {
+ props.downloadableLink &&
+ <StyledMenuItem onClick={() => { enableDownload(); handleClose() }}>
+ <ListItemIcon><DownloadIcon /></ListItemIcon>Baixar
+ </StyledMenuItem>
+ }
+
+ <StyledMenuItem onClick={handleShare}>
+ <ListItemIcon><ShareIcon /></ListItemIcon>Compartilhar
+ </StyledMenuItem>
+
+ <StyledMenuItem onClick={handleGuardar}>
+ <ListItemIcon><AddIcon /></ListItemIcon>Guardar
+ </StyledMenuItem>
+
+ <StyledMenuItem onClick={() => { handleModalReportar(true); handleClose() }}>
+ <ListItemIcon><ReportIcon /></ListItemIcon>Reportar
+ </StyledMenuItem>
+
+ </Menu>
+ </div>
+ </React.Fragment>
+ </>
+ );
}
const ButtonNoWidth = styled(Button)`
diff --git a/src/Components/ResourceList.js b/src/Components/ResourceList.js
index 1925388cbb5a35552ed35bb1a4eacca0a8d6538a..79d0936ac7ea15277dc989882dc63ae29364495d 100644
--- a/src/Components/ResourceList.js
+++ b/src/Components/ResourceList.js
@@ -31,14 +31,14 @@ import MuiAlert from '@material-ui/lab/Alert';
import { apiUrl } from '../env.js';
function Alert(props) {
- return <MuiAlert elevation={6} variant="filled" {...props} />;
+ return <MuiAlert elevation={6} variant="filled" {...props} />;
}
export default function ResourceList(props) {
const [selected, setSelected] = useState(Array.apply(
- null, {length: props.resources.length}).map(i => false));
+ null, { length: props.resources.length }).map(i => false));
const [selectable, setSelectable] = useState(false);
const [download_url, setDownloadUrl] = useState('');
const [snackbar_open, setSnackbarOpen] = useState(false);
@@ -67,31 +67,32 @@ export default function ResourceList(props) {
let i = 0;
while (i < props.resources.length) {
if (selected[i])
- resources.push({"type": "LearningObject", "id": props.resources[i].id});
+ resources.push({ "type": "LearningObject", "id": props.resources[i].id });
i++;
}
const body = {
"package": {
"object": resources
- }};
+ }
+ };
if (resources.length)
axios
- .post(apiUrl+'/package', body)
+ .post(apiUrl + '/package', body)
.catch(err => {
if (err.response && err.response.status === 302) {
- setDownloadUrl(apiUrl.slice().replace('/v1', '')+'/'+err.response.data.url);
+ setDownloadUrl(apiUrl.slice().replace('/v1', '') + '/' + err.response.data.url);
}
});
}
}, [selected, selectable]);
-
+ console.log("CARD >>", props.resources)
return (
<ResourceListContainer>
<Grid container direction="row" justify="space-around" alignItems="center">
<Grid item>
<Title>
- {props.resources.length ?
- props.resources.length+" recurso"+(props.resources.length === 1 ? "" : "s")
+ {props.resources.length ?
+ props.resources.length + " recurso" + (props.resources.length === 1 ? "" : "s")
: "Carregando coleção"}
</Title>
</Grid>
@@ -104,10 +105,10 @@ export default function ResourceList(props) {
</Grid>
<Grid item>
<UnstyledAnchor href={download_url}>
- <Button
- color="primary"
+ <Button
+ color="primary"
variant="outlined"
- startIcon={<GetAppIcon fontSize="large"/>}
+ startIcon={<GetAppIcon fontSize="large" />}
onClick={handleDownloadSelection}
>
<PanelButtonText>baixar seleção</PanelButtonText>
@@ -116,33 +117,36 @@ export default function ResourceList(props) {
</Grid>
</Grid>
<Grid container direction="row" justify="flex-start" alignItems="center">
- {props.resources.map((r) => {
+ {props.resources.map((card) => {
return (
- <ResourceGrid item key={r.title}>
+ <ResourceGrid item key={card.title}>
<ResourceCardFunction
- type={r.type}
- author={r.author}
- tags={r.tags}
- published={r.published}
- title={r.title}
- rating={r.rating}
- likeCount={r.likeCount}
- liked={r.liked}
- thumbnail={r.thumbnail}
- href={"/recurso/" + r.id}
+ avatar={card.avatar}
+ id={card.id}
+ thumbnail={card.thumbnail}
+ type={card.type ? card.type : "Outros"}
+ title={card.title}
+ published={card.state === "published" ? true : false}
+ likeCount={card.likeCount}
+ liked={card.liked}
+ rating={card.rating}
+ author={card.publisher}
+ tags={card.tags}
+ href={"/recurso/" + card.id}
+ downloadableLink={card.downloadableLink}
/>
- {selectable ?
+ {selectable ?
(<SelectButton
variant="outline"
color="primary"
- startIcon={checkBoxIcon(selected[props.resources.indexOf(r)])}
- onClick={() => updateSelected(props.resources.indexOf(r))}
+ startIcon={checkBoxIcon(selected[props.resources.indexOf(card)])}
+ onClick={() => updateSelected(props.resources.indexOf(card))}
>
Selecionar
</SelectButton>)
:
<span></span>}
-
+
</ResourceGrid>
);
})}
@@ -151,35 +155,35 @@ export default function ResourceList(props) {
open={snackbar_open}
autoHideDuration={6000}
onClose={() => setSnackbarOpen(false)}
- anchorOrigin={{vertical: 'top', horizontal: 'right'}}
+ anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
>
<Alert onClose={() => setSnackbarOpen(false)} severity="info">
Os recursos serão baixados
</Alert>
</Snackbar>
- <FloatingDownloadButton url={download_url} empty={selected.indexOf(true) === -1}/>
+ <FloatingDownloadButton url={download_url} empty={selected.indexOf(true) === -1} />
</ResourceListContainer>
);
}
-const ResourceListContainer=styled.div`
+const ResourceListContainer = styled.div`
margin-left: 20;
margin-right: 20;
`
-const Title=styled.p`
+const Title = styled.p`
color: rgb(102, 102, 102);
font-size: 2em;
font-weigth: 300;
`
-const SelectButton=styled(Button)`
+const SelectButton = styled(Button)`
width: 100%;
`
-const PanelButtonText=styled.span`
+const PanelButtonText = styled.span`
font-weight: 900;
`
-const ResourceGrid=styled(Grid)`
+const ResourceGrid = styled(Grid)`
padding-right: 7px;
`
-const UnstyledAnchor=styled.a`
+const UnstyledAnchor = styled.a`
text-decoration: none !important;
`
diff --git a/src/Components/ShareModal.js b/src/Components/ShareModal.js
index 4089314b3fb30149b211bd7b3d83a4e1b016c033..93eb4828efc78e5cf0b8216caa8297d3c5c4331c 100644
--- a/src/Components/ShareModal.js
+++ b/src/Components/ShareModal.js
@@ -73,7 +73,7 @@ export default function ReportModal (props) {
{/*Share to facebook*/}
<Grid item xs={4}>
- <a
+ <StyledLink
href={"https://www.facebook.com/sharer/sharer.php?u=" + props.link}
rel="noreferrer"
target="_blank">
@@ -81,12 +81,12 @@ export default function ReportModal (props) {
<img src={Facebook} alt="facebook-logo"/>
<p>FACEBOOK</p>
</ShareButton>
- </a>
+ </StyledLink>
</Grid>
{/*Share to Twitter*/}
<Grid item xs={4}>
- <a
+ <StyledLink
href={"https://www.twitter.com/intent/tweet?url=" + props.link}
rel="noreferrer"
target="_blank">
@@ -94,7 +94,7 @@ export default function ReportModal (props) {
<img src={Twitter} alt="twitter-logo"/>
<p>TWITTER</p>
</ShareButton>
- </a>
+ </StyledLink>
</Grid>
{/*Get shareable link*/}
@@ -242,3 +242,6 @@ const Container = styled.div`
height : 100%;
}
`
+const StyledLink = styled.a`
+ text-decoration : none;
+`
\ No newline at end of file
diff --git a/src/Components/TabPanels/PanelComponents/TemplateColecao.js b/src/Components/TabPanels/PanelComponents/TemplateColecao.js
index dfb193fc5a5db0774c39c7df8095153eedc36c59..24c98c021cd500d8a4ada31e310f1ba5ca00aacb 100644
--- a/src/Components/TabPanels/PanelComponents/TemplateColecao.js
+++ b/src/Components/TabPanels/PanelComponents/TemplateColecao.js
@@ -21,17 +21,18 @@ import Grid from '@material-ui/core/Grid';
import NoContent from './NoContent.js'
import CollectionCardFunction from '../../CollectionCardFunction.js'
import Title from './PanelTitle.js'
-import {WhiteContainer, StyledGrid} from '../StyledComponents.js'
-import {ButtonsAreaColecao} from './ButtonsArea'
+import { WhiteContainer, StyledGrid } from '../StyledComponents.js'
+import { ButtonsAreaColecao } from './ButtonsArea'
-export default function PanelTemplateColecao (props) {
+export default function PanelTemplateColecao(props) {
const RenderFollowedColCard = (card, followerBoolean) => {
if (followerBoolean) {
return (
<CollectionCardFunction
- name={card.followable.name}
- rating={card.followable.score}
+ name={card.name}
+ collections={card.followable.collection_items}
+ rating={card.followable.review_average}
type={card.followable.object_type}
description={card.followable.description}
author={card.followable.owner.name}
@@ -43,27 +44,27 @@ export default function PanelTemplateColecao (props) {
followed={card.followable.followed}
privacy={card.followable.privacy}
id={card.followable.id}
- />
+ tags={card.followable.tags}
+ />
)
}
else {
return (
<CollectionCardFunction
- name={card.name}
- rating={card.score}
- type={card.object_type}
- description={card.description}
- author={card.owner.name}
- avatar={card.owner.avatar}
- authorID={card.owner.id}
- thumbnails={card.items_thumbnails}
- likeCount={card.likes_count}
- privacy={card.privacy}
- liked={card.liked}
- followed={card.followed}
- tags={card.tags}
- id={card.id}
- />
+ name={card.name}
+ tags={card.tags}
+ rating={card.review_average}
+ id={card.id}
+ author={card.owner.name}
+ description={card.description}
+ thumbnails={card.items_thumbnails}
+ avatar={card.owner.avatar}
+ likeCount={card.likes_count}
+ followed={card.followed}
+ liked={card.liked}
+ collections={card.collection_items}
+ authorID={card.owner.id}
+ />
)
}
}
@@ -77,35 +78,35 @@ export default function PanelTemplateColecao (props) {
{
props.length === 0 ?
- (
- [
- <NoContent text={props.noContentText}/>
- ]
- )
- :
- (
- [
- <React.Fragment>
+ (
+ [
+ <NoContent text={props.noContentText} />
+ ]
+ )
+ :
+ (
+ [
+ <React.Fragment>
- <StyledGrid container spacing={1} style={{paddingLeft : "30px", paddingRight : "15px"}}>
- {
- props.sliceArr.map( (card) =>
- <Grid item md={3} xs={12} key={card.id}>
- {RenderFollowedColCard(card, props.followed)}
- </Grid>
- )
- }
- </StyledGrid>
+ <StyledGrid container spacing={1} style={{ paddingLeft: "30px", paddingRight: "15px" }}>
+ {
+ props.sliceArr.map((card) =>
+ <Grid item md={3} xs={12} key={card.id}>
+ {RenderFollowedColCard(card, props.followed)}
+ </Grid>
+ )
+ }
+ </StyledGrid>
- <ButtonsAreaColecao
- sliceLength={props.sliceArr.length}
- length={props.length}
- showMore={() => props.showMore()}
- showAll={() => props.showAll()}
- />
- </React.Fragment>
- ]
- )
+ <ButtonsAreaColecao
+ sliceLength={props.sliceArr.length}
+ length={props.length}
+ showMore={() => props.showMore()}
+ showAll={() => props.showAll()}
+ />
+ </React.Fragment>
+ ]
+ )
}
</WhiteContainer>
diff --git a/src/Components/TabPanels/PanelComponents/TemplateCuradoria.js b/src/Components/TabPanels/PanelComponents/TemplateCuradoria.js
index 132b96efa8ba381fa3ad1eb5cdfc0fb66611965f..f4e1a73717a01ff64cd9c5fe0a5b2d59117f2b56 100644
--- a/src/Components/TabPanels/PanelComponents/TemplateCuradoria.js
+++ b/src/Components/TabPanels/PanelComponents/TemplateCuradoria.js
@@ -21,10 +21,10 @@ 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'
+import { WhiteContainer, StyledGrid } from '../StyledComponents.js'
+import { ButtonsAreaRecurso } from './ButtonsArea'
-export default function Template (props) {
+export default function Template(props) {
return (
<WhiteContainer>
<Title
@@ -34,44 +34,48 @@ export default function Template (props) {
{
props.length === 0 ?
- (
- [
- <NoContent text={props.noContentText}/>
- ]
- )
- :
- (
- [
- <React.Fragment>
- <StyledGrid container spacing={1} style={{paddingLeft : "30px", paddingRight : "15px"}}>
- {
- props.sliceArr.map( (card) =>
- <Grid item md={3} xs={12} key={card.id}>
- <ResourceCardFunction
- id={card.learning_object.id}
- avatar = {card.submitter.avatar}
- thumbnail = {card.learning_object.thumbnail}
- type = {card.learning_object.object_type ? card.learning_object.object_type : "Outros"}
- title={card.learning_object.name}
- published={false}
- tags={card.educational_stages}
- href={"/recurso/" + card.learning_object.id}
- downloadableLink={card.default_attachment_location}
- />
- </Grid>
- )
- }
- </StyledGrid>
+ (
+ [
+ <NoContent text={props.noContentText} />
+ ]
+ )
+ :
+ (
+ [
+ <React.Fragment>
+ <StyledGrid container spacing={1} style={{ paddingLeft: "30px", paddingRight: "15px" }}>
+ {
+ props.sliceArr.map((card) =>
+ <Grid item md={3} xs={12} key={card.id}>
+ <ResourceCardFunction
+ avatar={card.publisher.avatar}
+ id={card.id}
+ thumbnail={card.thumbnail}
+ type={card.object_type ? card.object_type : "Outros"}
+ title={card.name}
+ published={false}
+ likeCount={card.likes_count}
+ liked={card.liked}
+ rating={card.review_average}
+ author={card.publisher.name}
+ tags={card.tags}
+ href={"/recurso/" + card.id}
+ downloadableLink={card.default_attachment_location}
+ />
+ </Grid>
+ )
+ }
+ </StyledGrid>
- <ButtonsAreaRecurso
- sliceLength={props.sliceArr.length}
- length={props.length}
- showMore={() => props.showMore()}
- showAll={() => props.showAll()}
- />
- </React.Fragment>
- ]
- )
+ <ButtonsAreaRecurso
+ sliceLength={props.sliceArr.length}
+ length={props.length}
+ showMore={() => props.showMore()}
+ showAll={() => props.showAll()}
+ />
+ </React.Fragment>
+ ]
+ )
}
</WhiteContainer>
diff --git a/src/Components/TabPanels/PanelComponents/TemplateRecurso.js b/src/Components/TabPanels/PanelComponents/TemplateRecurso.js
index 6d46e423e6c596efbff5a2725d7ba5d8bb26feab..7fe23657690955daee2580a278001f1605b9c7e0 100644
--- a/src/Components/TabPanels/PanelComponents/TemplateRecurso.js
+++ b/src/Components/TabPanels/PanelComponents/TemplateRecurso.js
@@ -21,10 +21,10 @@ 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'
+import { WhiteContainer, StyledGrid } from '../StyledComponents.js'
+import { ButtonsAreaRecurso } from './ButtonsArea'
-export default function Template (props) {
+export default function Template(props) {
return (
<WhiteContainer>
<Title
@@ -34,48 +34,49 @@ export default function Template (props) {
{
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}
- id={card.id}
- thumbnail = {card.thumbnail}
- type = {card.object_type !== null? card.object_type : "Outros"}
- title={card.name}
- published={card.state === "published" ? true : false}
- likeCount={card.likes_count}
- liked={card.liked}
- rating={card.review_average}
- tags={card.educational_stages}
- href={"/recurso/" + card.id}
- downloadableLink={card.default_attachment_location}
+ (
+ [
+ <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}
+ id={card.id}
+ 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.review_average}
+ author={card.publisher.name}
+ tags={card.tags}
+ href={"/recurso/" + card.id}
+ downloadableLink={card.default_attachment_location}
- />
- </Grid>
- )
- }
- </StyledGrid>
+ />
+ </Grid>
+ )
+ }
+ </StyledGrid>
- <ButtonsAreaRecurso
- sliceLength={props.slice.length}
- length={props.length}
- showMore={() => props.showMore()}
- showAll={() => props.showAll()}
- />
- </React.Fragment>
- ]
- )
+ <ButtonsAreaRecurso
+ sliceLength={props.slice.length}
+ length={props.length}
+ showMore={() => props.showMore()}
+ showAll={() => props.showAll()}
+ />
+ </React.Fragment>
+ ]
+ )
}
</WhiteContainer>
diff --git a/src/Components/TabPanels/PublicUserPageTabs/LastCollections.js b/src/Components/TabPanels/PublicUserPageTabs/LastCollections.js
index 3aab2492a7eb15ad72766c1a8506520d3489ae5c..a7c78a9a5244154f839368883ed7190e25cce210 100644
--- a/src/Components/TabPanels/PublicUserPageTabs/LastCollections.js
+++ b/src/Components/TabPanels/PublicUserPageTabs/LastCollections.js
@@ -1,11 +1,11 @@
import React from 'react'
import Grid from '@material-ui/core/Grid';
-import {HeaderGrid, StyledGrid} from '../StyledComponents.js'
-import {NoContent} from './TabInicio.js'
+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) {
+export default function LastCols(props) {
return (
<React.Fragment>
<HeaderGrid container>
@@ -16,47 +16,48 @@ export default function LastCols (props) {
{
- 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."}
- />
+ 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>
- </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}
- id={card.id}
- />
- </Grid>
- )
- }
- </StyledGrid>
- ]
- )
+ ]
+ )
+ :
+ (
+ [
+ <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}
+ tags={card.tags}
+ rating={card.review_average}
+ id={card.id}
+ author={card.owner.name}
+ description={card.description}
+ thumbnails={card.items_thumbnails}
+ avatar={card.owner.avatar}
+ likeCount={card.likes_count}
+ followed={card.followed}
+ liked={card.liked}
+ collections={card.collection_items}
+ authorID={card.owner.id}
+ />
+ </Grid>
+ )
+ }
+ </StyledGrid>
+ ]
+ )
}
</React.Fragment>
)
diff --git a/src/Components/TabPanels/PublicUserPageTabs/LastLearnObj.js b/src/Components/TabPanels/PublicUserPageTabs/LastLearnObj.js
index 044ebc5bf03964c7290da1c41bc5fc1d7a1c62d0..ff42a36aad88e690f0d33c1f104cd9d31beecf77 100644
--- a/src/Components/TabPanels/PublicUserPageTabs/LastLearnObj.js
+++ b/src/Components/TabPanels/PublicUserPageTabs/LastLearnObj.js
@@ -2,17 +2,17 @@ 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'
+import { HeaderGrid, StyledGrid } from '../StyledComponents.js'
+import { NoContent } from './TabInicio.js'
-export default function LastLearnObjs (props) {
+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"}}>
+ <Grid item xs={3} style={{ textAlign: "end" }}>
{props.count > 4 &&
<span>
VER MAIS
@@ -23,47 +23,48 @@ export default function LastLearnObjs (props) {
{
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 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>
- </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}
- id={card.id}
- thumbnail = {card.thumbnail}
- type = {card.object_type !== null? card.object_type : "Outros"}
- title={card.name}
- published={card.state === "published" ? true : false}
- likeCount={card.likes_count}
- liked={card.liked}
- rating={card.review_average}
- tags={card.educational_stages}
- href={"/recurso/" + card.id}
- downloadableLink={card.default_attachment_location}
+ ]
+ )
+ :
+ (
+ [
+ <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}
+ id={card.id}
+ 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.review_average}
+ author={card.publisher.name}
+ tags={card.tags}
+ href={"/recurso/" + card.id}
+ downloadableLink={card.default_attachment_location}
- />
- </Grid>
- )
- }
- </StyledGrid>
- ]
- )
+ />
+ </Grid>
+ )
+ }
+ </StyledGrid>
+ ]
+ )
}
</React.Fragment>
)
diff --git a/src/Components/TabPanels/PublicUserPageTabs/TabColecoes.js b/src/Components/TabPanels/PublicUserPageTabs/TabColecoes.js
index 3622356c42741f668544d26565a31a3825848ae4..79a3b3cad97c821a72a8fe55a5baed9ba7b24c55 100644
--- a/src/Components/TabPanels/PublicUserPageTabs/TabColecoes.js
+++ b/src/Components/TabPanels/PublicUserPageTabs/TabColecoes.js
@@ -1,17 +1,17 @@
-import React, {useState, useEffect} from 'react'
-import {HeaderGrid, ContainerStyled, Carregados} from '../StyledComponents.js'
+import React, { useState, useEffect } from 'react'
+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'
+import { ButtonMostrarMaisColecao } from '../PanelComponents/ButtonsArea.js'
-export default function TabRecursos (props) {
+export default function TabRecursos(props) {
const [arr, setArr] = useState([])
const [colsSlice, setSlice] = useState([])
- const handleSlice = (newArr) => {setSlice(newArr)}
+ const handleSlice = (newArr) => { setSlice(newArr) }
- useEffect( () => {
+ useEffect(() => {
setArr(props.collections)
- setSlice(props.collections.slice(0,4))
+ setSlice(props.collections.slice(0, 4))
}, [])
const showMore = (quantity) => {
@@ -20,31 +20,32 @@ export default function TabRecursos (props) {
}
return (
- <ContainerStyled style={{flexDirection : "column"}}>
+ <ContainerStyled style={{ flexDirection: "column" }}>
<HeaderGrid container>
<Grid item xs={12}>
- <h3>Coleções públicas <b style={{fontWeight:"500"}}>({props.count})</b></h3>
+ <h3>Coleções públicas <b style={{ fontWeight: "500" }}>({props.count})</b></h3>
</Grid>
</HeaderGrid>
- <Grid container spacing={1} style={{paddingLeft : "0.5em"}}>
+ <Grid container spacing={1} style={{ paddingLeft: "0.5em" }}>
{
- colsSlice.map( (card) =>
+ 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}
+ tags={card.tags}
+ rating={card.review_average}
+ id={card.id}
author={card.owner.name}
- avatar={card.owner.avatar}
+ description={card.description}
thumbnails={card.items_thumbnails}
+ avatar={card.owner.avatar}
likeCount={card.likes_count}
- liked={card.liked}
followed={card.followed}
- tags={card.tags}
- id={card.id}
+ liked={card.liked}
+ collections={card.collection_items}
+ authorID={card.owner.id}
/>
</Grid>
)
@@ -52,19 +53,19 @@ export default function TabRecursos (props) {
</Grid>
<Carregados>
- <p style={{margin:"0 0 10px", fontSize:"14px"}}>
+ <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 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 onClick={() => { showMore(20) }}>
+ <span style={{ color: "#fff", fontSize: "14px", fontWeight: "500" }}>MOSTRAR MAIS 20</span>
</ButtonMostrarMaisColecao>
</React.Fragment>
}
diff --git a/src/Components/TabPanels/PublicUserPageTabs/TabRecursos.js b/src/Components/TabPanels/PublicUserPageTabs/TabRecursos.js
index 6f2a08ba5c7ac1aadb39eb24550d70000b652f87..b7431b12b2ff3e321f01b19f8c2eae79707fc2df 100644
--- a/src/Components/TabPanels/PublicUserPageTabs/TabRecursos.js
+++ b/src/Components/TabPanels/PublicUserPageTabs/TabRecursos.js
@@ -1,17 +1,17 @@
-import React, {useState, useEffect} from 'react'
-import {HeaderGrid, ContainerStyled, Carregados} from '../StyledComponents.js'
+import React, { useState, useEffect } from 'react'
+import { HeaderGrid, ContainerStyled, Carregados } from '../StyledComponents.js'
import Grid from '@material-ui/core/Grid';
import ResourceCardFunction from '../../ResourceCardFunction.js'
-import {ButtonMostrarMaisRecurso} from '../PanelComponents/ButtonsArea'
+import { ButtonMostrarMaisRecurso } from '../PanelComponents/ButtonsArea'
-export default function TabRecursos (props) {
+export default function TabRecursos(props) {
const [arr, setArr] = useState([])
const [objsSlice, setSlice] = useState([])
- const handleSlice = (newArr) => {setSlice(newArr)}
+ const handleSlice = (newArr) => { setSlice(newArr) }
- useEffect( () => {
+ useEffect(() => {
setArr(props.learningObjs)
- setSlice(props.learningObjs.slice(0,4))
+ setSlice(props.learningObjs.slice(0, 4))
}, [])
const showMore = (quantity) => {
@@ -20,31 +20,32 @@ export default function TabRecursos (props) {
}
return (
- <ContainerStyled style={{flexDirection : "column"}}>
+ <ContainerStyled style={{ flexDirection: "column" }}>
<HeaderGrid container>
<Grid item xs={12}>
- <h3>Recursos Publicados <b style={{fontWeight:"500"}}>({props.count})</b></h3>
+ <h3>Recursos Publicados <b style={{ fontWeight: "500" }}>({props.count})</b></h3>
</Grid>
</HeaderGrid>
- <Grid container spacing={1} style={{paddingLeft : "0.5em"}}>
+ <Grid container spacing={1} style={{ paddingLeft: "0.5em" }}>
{
- objsSlice.map( (card) =>
+ objsSlice.map((card) =>
<Grid item md={3} xs={12} key={card.id}>
<ResourceCardFunction
- avatar = {card.publisher.avatar}
+ avatar={card.publisher.avatar}
id={card.id}
- thumbnail = {card.thumbnail}
- type = {card.object_type ? card.object_type : "Outros"}
+ 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.review_average}
- tags={card.educational_stages}
+ author={card.publisher.name}
+ tags={card.tags}
+ href={"/recurso/" + card.id}
downloadableLink={card.default_attachment_location}
-
/>
</Grid>
)
@@ -52,19 +53,19 @@ export default function TabRecursos (props) {
</Grid>
<Carregados>
- <p style={{margin:"0 0 10px", fontSize:"14px"}}>
+ <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 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 onClick={() => { showMore(20) }}>
+ <span style={{ color: "#fff", fontSize: "14px", fontWeight: "500" }}>MOSTRAR MAIS 20</span>
</ButtonMostrarMaisRecurso>
</React.Fragment>
}
diff --git a/src/Components/TabPanels/UserPageTabs/PanelColecoes.js b/src/Components/TabPanels/UserPageTabs/PanelColecoes.js
index f7883396f3359173d24eace08e1826429bdd8210..0e3654a5e9d73f7eec7c73de968a16c4bbd00e7b 100644
--- a/src/Components/TabPanels/UserPageTabs/PanelColecoes.js
+++ b/src/Components/TabPanels/UserPageTabs/PanelColecoes.js
@@ -16,24 +16,24 @@ 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 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 { 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 { 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'
+import { ButtonsAreaColecao } from '../PanelComponents/ButtonsArea'
import CriarColecaoModal from '../../CriarColecaoModal.js'
-export default function TabPanelColecoes (props) {
+export default function TabPanelColecoes(props) {
const [loading, handleLoading] = useState(true)
const [userCollections, setUserCollections] = useState([])
@@ -47,7 +47,7 @@ export default function TabPanelColecoes (props) {
axios.get((`${apiUrl}/users/` + props.id + '/collections'), props.config),
axios.get((`${apiUrl}/users/` + props.id + '/following/Collection'), props.config),
])
- .then( (responseArr) => {
+ .then((responseArr) => {
console.log('responseArr Colecoes: ', responseArr)
if (responseArr[1].headers['access-token']) {
sessionStorage.setItem('@portalmec/accessToken', responseArr[1].headers['access-token'])
@@ -55,20 +55,20 @@ export default function TabPanelColecoes (props) {
handleLoading(false)
setUserCollections(responseArr[0].data)
- setUserCollectionsSlice(responseArr[0].data.slice(0,3))
+ setUserCollectionsSlice(responseArr[0].data.slice(0, 3))
setFollowedCollections(responseArr[1].data)
- setFollowedCollectionsSlice(responseArr[1].data.slice(0,4))
+ setFollowedCollectionsSlice(responseArr[1].data.slice(0, 4))
},
- (error) => {
- handleLoading(false)
- console.log('error while running axios all')
- }
- )
+ (error) => {
+ handleLoading(false)
+ console.log('error while running axios all')
+ }
+ )
}
- useEffect( () => {
+ useEffect(() => {
getInfo()
}, [])
@@ -77,86 +77,86 @@ export default function TabPanelColecoes (props) {
setUserCollectionsSlice(userCollections.slice(0, sliceLength + 4))
}
- const showAllUserCollections = () => {setUserCollectionsSlice(userCollections)}
+ const showAllUserCollections = () => { setUserCollectionsSlice(userCollections) }
const showMoreFollowedCollections = () => {
var sliceLength = followedCollectionsSlice.length
setFollowedCollectionsSlice(followedCollections.slice(0, sliceLength + 4))
}
- const showAllFollowedCollections = () => {setFollowedCollectionsSlice(followedCollections)}
+ const showAllFollowedCollections = () => { setFollowedCollectionsSlice(followedCollections) }
return (
<>
- {
- loading ?
- (
- <LoadingSpinner text={'CARREGANDO COLEÇÕES'}/>
+ {
+ 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!
+ )
+ :
+ (
+ [
+ <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/>
+ <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}
- callback={getInfo}
- />
-
- <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>
- ]
- )
- }
+ </div>
+ }
+ sliceArr={userCollectionsSlice}
+ showMore={showMoreUserCollections}
+ showAll={showAllUserCollections}
+ callback={getInfo}
+ />
+
+ <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) {
+function Tentativa(props) {
const [modalOpen, toggleModal] = useState(false)
- const handleModal = () => {toggleModal(!modalOpen)};
+ const handleModal = () => { toggleModal(!modalOpen) };
return (
<WhiteContainer>
- <CriarColecaoModal open={modalOpen} handleClose={() => {handleModal(); props.callback()}}/>
+ <CriarColecaoModal open={modalOpen} handleClose={() => { handleModal(); props.callback() }} />
<Title
title={props.title}
length={props.length}
/>
- <StyledGrid container spacing={1} style={{paddingLeft : "30px", paddingRight : "15px"}}>
+ <StyledGrid container spacing={1} style={{ paddingLeft: "30px", paddingRight: "15px" }}>
<Grid item md={3} xs={12}>
- <CardDiv onClick={()=>{handleModal()}}>
- <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"}}>
+ <CardDiv onClick={() => { handleModal() }}>
+ <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>
@@ -165,53 +165,52 @@ function Tentativa (props) {
{
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}
- authorID={card.owner.id}
- thumbnails={card.items_thumbnails}
- likeCount={card.likes_count}
- liked={card.liked}
- followed={card.followed}
- tags={card.tags}
- privacy={card.privacy}
- id={card.id}
- />
+ (
+ [
+ <Grid item lg={6} md={4} sm={6} xs={12}>
+ <NoContent text={props.noContentText} />
</Grid>
- )
- }
- </React.Fragment>
- ]
- )
- }
- </StyledGrid>
- {
- props.length > 0 &&
- <ButtonsAreaColecao
- sliceLength={props.sliceArr.length}
- length={props.length}
- showMore={() => props.showMore()}
- showAll={() => props.showAll()}
- />
+ ]
+ )
+ :
+ (
+ [
+ <React.Fragment>
+ {
+ props.sliceArr.map((card) =>
+ <Grid item md={3} xs={12} key={card.id}>
+ <CollectionCardFunction
+ name={card.name}
+ tags={card.tags}
+ rating={card.review_average}
+ id={card.id}
+ author={card.owner.name}
+ description={card.description}
+ thumbnails={card.items_thumbnails}
+ avatar={card.owner.avatar}
+ likeCount={card.likes_count}
+ followed={card.followed}
+ liked={card.liked}
+ collections={card.collection_items}
+ authorID={card.owner.id}
+ />
+ </Grid>
+ )
+ }
+ </React.Fragment>
+ ]
+ )
}
+ </StyledGrid>
+ {
+ props.length > 0 &&
+ <ButtonsAreaColecao
+ sliceLength={props.sliceArr.length}
+ length={props.length}
+ showMore={() => props.showMore()}
+ showAll={() => props.showAll()}
+ />
+ }
</WhiteContainer>
)
}
diff --git a/src/Components/TopicCard.js b/src/Components/TopicCard.js
index c0f25eaceecafa88bf9d8d07914dbc26dbea6efa..7a1e0e0aa094982d0c03aae4958ddf85c7f0a159 100644
--- a/src/Components/TopicCard.js
+++ b/src/Components/TopicCard.js
@@ -1,66 +1,74 @@
+/*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 { Link } from 'react-router-dom';
-import styled from 'styled-components'
import Card from '@material-ui/core/Card';
+import CardContent from '@material-ui/core/CardContent';
import CardActions from '@material-ui/core/CardActions';
+import Typography from '@material-ui/core/Typography';
+import styled from 'styled-components';
+import Button from '@material-ui/core/Button';
+import { Link } from 'react-router-dom';
-export default function TopicCard(props) {
- return (
- <CardModel>
- <StyledLink to={"topico?colecao="+props.colecao_id+"&topico="+props.topico_obj.id}>
- <CardImage src={props.topico_obj.img}/>
- <Title>
- <BoldTitle>
- { props.topico_obj.pre_title }
- </BoldTitle>
- { props.topico_obj.title }
- </Title>
- <StyledCardActions>
- <StyledLink to={"topico?colecao="+props.colecao_id+"&topico="+props.topico_obj.id}>
- <Red><strong>Ver mais</strong></Red>
- </StyledLink>
- </StyledCardActions>
- </StyledLink>
- </CardModel>
- );
+export default function MaterialCard(props) {
+ console.log(props);
+ const thumb = require(`../../public/${props.topic.img}`)
+
+ return (
+ <Card style={{ maxHeight: "100%", maxWidth: "300px" }}>
+ <img style={{ maxHeight: "100%", maxWidth: "100%" }} src={thumb} alt="thumbnail do recurso" />
+ <CardContent style={{ height: "50px" }}>
+ <Title>
+ <BoldTitle>
+ {props.topic.pre_title}
+ </BoldTitle>
+ {props.topic.title}
+ </Title>
+ </CardContent>
+ <CardActions style={{ borderTop: "1px solid #e5e5e5", justifyContent: "center" }}>
+ <StyledLink to={"topico?colecao=" + props.colecao_id + "&topico=" + props.topic.id}>
+ <Button
+ color="secondary"
+ >
+ Ver módulos
+ </Button>
+ </StyledLink>
+ </CardActions>
+ </Card >
+ )
}
-const Title=styled.h1`
- font-weight: 500;
+const Title = styled(Typography)`
+ font-weight: 500;
color: rgb(102, 102, 102);
font-size: 0.9em;
margin-left: 10px;
margin-right: 10px;
display: -webkit-box;
- -webkit-line-clamp: 3;
- -webkit-box-orient: vertical;
- overflow: hidden;
-`
-const CardModel=styled(Card)`
- position: relative;
- width: 18%;
- margin-bottom: 30px;
- padding: 0;
- height: 225px;
-`
-const CardImage=styled.img`
- width: 100%;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
`
-const BoldTitle=styled.span`
+const BoldTitle = styled.span`
font-weight: bold;
`
-const StyledLink=styled(Link)`
+const StyledLink = styled(Link)`
text-decoration: none !important;
color: inherit !important;
-`
-const Red=styled.span`
- color: #e81f4f;
- font-size: 14px;
-`
-const StyledCardActions=styled(CardActions)`
- position: absolute;
- padding: 10px;
- left: 0;
- bottom: 0;
-`
+`
\ No newline at end of file
diff --git a/src/Components/TopicFooter.js b/src/Components/TopicFooter.js
index 2e04b8b1628e7127cd193a5e479e864572ea8884..c6ce8ea42ddf97ec278bc6cd63e779b4cd28ec5e 100644
--- a/src/Components/TopicFooter.js
+++ b/src/Components/TopicFooter.js
@@ -9,11 +9,11 @@ export default function TopicFooter(props) {
<Grid
container
direction="row"
- justify="flex-start"
+ justify="center"
alignItems="center"
>
<Grid item>
- <FormationMaterialImage src={props.src}/>
+ <FormationMaterialImage src={require(`../../public/${props.src}`)}/>
</Grid>
<Grid item>
<Text>
@@ -36,7 +36,6 @@ const Container=styled.div`
`
const FormationMaterialImage=styled.img`
width: 300px;
- display: block;
margin-right: 20px;
`
const Text=styled.h2`
diff --git a/src/Components/TopicList.js b/src/Components/TopicList.js
index 77b8e4687255081a5bf4454a88777fafea31b6e3..e965adad1b530fbf96d090fa028b1fc83ebad01a 100644
--- a/src/Components/TopicList.js
+++ b/src/Components/TopicList.js
@@ -13,23 +13,25 @@ export default function TopicList(props) {
setExpanded(!expanded);
}
- return (
+ return (
<Wrapper>
<Title>Módulos</Title>
<Grid
container
- direction="row"
- justify="space-evenly"
+ spacing={3}
+ justify="center"
alignItems="center"
>
- { props.topicos.slice(0, (expanded ? -1 : 5)).map(t => {
- return (
- <TopicCard topico_obj={t} colecao_id={props.colecao_id}/>
- );
- })
+ {props.topicos.slice(0, (expanded ? -1 : 5)).map((t, index) => {
+ return (
+ <Grid item key={index} md={3}>
+ <TopicCard topic={t} colecao_id={props.colecao_id} />
+ </Grid>
+ );
+ })
}
</Grid>
- { props.topicos.length > 5 ?
+ {props.topicos.length > 5 ?
<Grid container
direction="column"
justify="flex-start"
@@ -37,32 +39,32 @@ export default function TopicList(props) {
>
<Grid item>
<Fab size="medium" color="secondary" aria-label="edit" onClick={handleFabClick}>
- {expanded ? <ExpandLessIcon /> : <ExpandMoreIcon /> }
+ {expanded ? <ExpandLessIcon /> : <ExpandMoreIcon />}
</Fab>
</Grid>
<Grid item>
<FabText>
- { expanded ? "VER MENOS" : "VER TODOS OS MÓDULOS" }
+ {expanded ? "VER MENOS" : "VER TODOS OS MÓDULOS"}
</FabText>
</Grid>
</Grid>
- : <div></div>
+ : <div></div>
}
</Wrapper>
- );
+ );
}
-const FabText=styled.span`
+const FabText = styled.span`
color: #666;
font-weight: 900;
line-height: 2em;
`
-const Title=styled.h1`
+const Title = styled.h1`
font-weight: 100;
margin-left: 30px;
color: rgb(102, 102, 102);
`
-const Wrapper=styled.div`
+const Wrapper = styled.div`
margin-right : auto;
margin-left : auto;
margin-bottom: 30px;
diff --git a/src/Pages/CollectionPage.js b/src/Pages/CollectionPage.js
index d2b712158f9b80bc6420ddf98984a529c595da26..35070a817b0e9fea3019581837d7b95df71e791e 100644
--- a/src/Pages/CollectionPage.js
+++ b/src/Pages/CollectionPage.js
@@ -51,7 +51,7 @@ export default function CollectionPage(props) {
const handleScrollToComments = () => {
window.scrollTo(0, comment_ref.current.offsetTop);
}
-
+ console.log("COLLECTION >> ", collection)
return (
<>
<BreadCrumbsDiv>
@@ -112,7 +112,6 @@ export default function CollectionPage(props) {
return {
type: i.collectionable.object_type,
author: i.collectionable.author,
- published: i.collectionable.published_at,
title: i.collectionable.name,
rating: i.collectionable.review_average,
likeCount: i.collectionable.likes_count,
@@ -121,6 +120,9 @@ export default function CollectionPage(props) {
thumbnail: i.collectionable.thumbnail,
tags: i.collectionable.tags.map(t => t),
id: i.collectionable.id,
+ downloadableLink: i.collectionable.default_attachment_location,
+ publisher: i.collectionable.publisher.name,
+ published: i.collectionable.state
}
})
: []
diff --git a/src/Pages/Search.js b/src/Pages/Search.js
index 67be27045435b3195dc7a8012c9a1d82315ecce5..26bf2ed3c08d592ffc301b848bda6d8b24d13a3e 100644
--- a/src/Pages/Search.js
+++ b/src/Pages/Search.js
@@ -39,6 +39,10 @@ import ResourceCardFunction from "../Components/ResourceCardFunction";
import CollectionCardFunction from "../Components/CollectionCardFunction";
import ContactCard from "../Components/ContactCard";
import CircularProgress from '@material-ui/core/CircularProgress';
+import { getAxiosConfig } from '../Components/HelperFunctions/getAxiosConfig';
+import { saveHeaders } from '../Components/HelperFunctions/saveTokens';
+
+
let order = "review_average";
let currFilter = "";
@@ -75,36 +79,34 @@ export default function Search(props) {
const [optionResult, setOptionResult] = useState(option);
const collectStuff = (tipoBusca, filtro) => {
- if(!loadingMoreData) // this line prevents resetting filter when loading more data
+ if (!loadingMoreData) // this line prevents resetting filter when loading more data
currFilter = filtro;
if (filtro)
setIsFiltering(true);
-
- console.log(currFilter)
- console.log(`${apiUrl}/search?page=${page}&results_per_page=${resultsPerPage}&order=${order}&query=${state.search.query}${currFilter ? currFilter : ""}&search_class=${tipoBusca}`)
- axios
- .get(
- `${apiUrl}/search?page=${page}&results_per_page=${resultsPerPage}&order=${order}&query=${state.search.query}${currFilter ? currFilter : ""}&search_class=${tipoBusca}`
- )
- .then((res) => {
- if (tipoBusca === "LearningObject") setResultsResource(res.data);
- else if (tipoBusca === "Collection") setResultsCollection(res.data);
- else if (tipoBusca === "User") setResultsUser(res.data);
- setOptionResult(tipoBusca);
- dispatch({
- type: "SAVE_SEARCH",
- newSearch: {
- query: state.search.query,
- class: tipoBusca,
- },
- });
- console.log(res);
- setTotalResults(res.headers["x-total-count"]);
- setIsLoading(false);
- setIsFiltering(false);
- setLoadingMoreData(false);
+ const axiosConfig = getAxiosConfig();
+ axios({
+ method: 'get',
+ url: `${apiUrl}/search?page=${page}&results_per_page=${resultsPerPage}&order=${order}&query=${state.search.query}${currFilter ? currFilter : ""}&search_class=${tipoBusca}`,
+ headers: axiosConfig.headers
+ }).then(res => {
+ if (tipoBusca === "LearningObject") setResultsResource(res.data);
+ else if (tipoBusca === "Collection") setResultsCollection(res.data);
+ else if (tipoBusca === "User") setResultsUser(res.data);
+ setOptionResult(tipoBusca);
+ dispatch({
+ type: "SAVE_SEARCH",
+ newSearch: {
+ query: state.search.query,
+ class: tipoBusca,
+ },
});
+ setTotalResults(res.headers["x-total-count"]);
+ setIsLoading(false);
+ setIsFiltering(false);
+ setLoadingMoreData(false);
+ saveHeaders(res);
+ })
};
useEffect(() => {
@@ -116,7 +118,6 @@ export default function Search(props) {
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) {
dispatch({
type: "SAVE_SEARCH",
@@ -207,13 +208,20 @@ export default function Search(props) {
<Grid item xs key={card.id}>
<CollectionCardFunction
name={card.name}
- rating={card.score}
+ tags={card.tags}
+ rating={card.review_average}
id={card.id}
author={card.owner.name}
description={card.description}
thumbnails={card.items_thumbnails}
avatar={card.owner.avatar}
+ likeCount={card.likes_count}
+ followed={card.followed}
+ liked={card.liked}
+ collections={card.collection_items}
+ authorID={card.owner.id}
/>
+
</Grid>
))}
</Grid>