Skip to content
Snippets Groups Projects
Commit 1a1ea9d1 authored by Lucas Eduardo Schoenfelder's avatar Lucas Eduardo Schoenfelder
Browse files

wip

parent bd410ace
No related branches found
No related tags found
3 merge requests!57Merge of develop into master,!56Fixed buttons reportar, seguir, compartilhar, guardar and entrar (in comments...,!24Tela recurso
Hide whitespace changes
Inline Side-by-side
src/Components/ResourcePageComponents/CommentForm.js 0 → 100644
+ 171
− 0
View file @ 1a1ea9d1
import React, {useState} from 'react'
import styled from 'styled-components'
import Rating from '@material-ui/lab/Rating';
import StarBorderIcon from '@material-ui/icons/StarBorder';
import StarIcon from '@material-ui/icons/Star';
import TextField from "@material-ui/core/TextField";
import { Button } from '@material-ui/core';
import axios from 'axios'
import {apiUrl} from '../../env';
export default function CommentForm (props) {
const [rating, setRating] = useState({
error : true,
value : 0
})
const [comment, setComment] = useState({
error : false,
value : ''
})
const handleChange = (e) => {
const userInput = e.target.value
const flag = (userInput.length === 0 ? true : false);
setComment({...comment, error : flag, value : userInput})
}
const [attemptedSubmit, setAttempt] = useState(false)
const handleSubmit = (e) => {
e.preventDefault()
const finalRating = rating
const finalComment = comment
if (!(finalRating.error || finalComment.error)) {
let config = {
headers : {
'Accept': 'application/json',
'Content-Type': 'application/json',
'Access-Token': sessionStorage.getItem('@portalmec/accessToken'),
'Client': sessionStorage.getItem('@portalmec/clientToken'),
'Uid': sessionStorage.getItem('@portalmec/uid'),
}
}
let payload = {
"review" : {
"description" : finalComment.value,
"review_ratings_attributes" : [
{
"rating_id" : 1,
"value" : finalRating.value
}
]
}
}
console.log(payload)
axios.post( (`${apiUrl}/learning_objects/` + props.recursoId + '/reviews'), payload, config
).then((response) => {
if ( response.headers['access-token'] ) {
sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token'])
}
console.log(response.data);
props.handleSnackbar(1);
props.rerenderCallback()},
(error) => {console.log(error)})
}
else {
setAttempt(true)
}
}
return (
<StyledForm onSubmit={handleSubmit}>
<label htmlFor="avaliacao-estrelas" className="start-label">
Este recurso foi útil?*
</label>
<div className="stars-container">
<Rating
name="avaliacao-estrelas"
value={rating.value}
precision={0.5}
style={{color:"#ff9226"}}
onChange = {(e, newValue) => {setRating({...rating, error : newValue === null ? true : false, value : newValue})}}
emptyIcon={<StarIcon fontSize="inherit" style={{color : "#666"}} />}
getLabelText={(value) => {return(value + ' Estrela' + (value !== 1 ? 's' : ''))}}
/>
</div>
<div className="star-alert" style={attemptedSubmit ? {visibility : "visible"} : {visibility : "hidden" }}>Avalie se o recurso foi útil.</div>
<span>
<StyledTextField
value={comment.value}
multiline
rows="5"
error={comment.error}
label={"Escreva aqui a sua experiência com este Recurso"}
onChange={e => handleChange(e)}
required={true}
help = {comment.error ? 'Escreva aqui seu comentário sobre o Recurso.' : ''}
/>
<OrangeButton type="submit">Publicar</OrangeButton>
<div className="campos-obrigatorios">* Campos obrigatórios.</div>
</span>
</StyledForm>
)
}
const OrangeButton = styled(Button)`
color : rgba(255,255,255,0.87) !important;
box-shadow : 0 2px 5px 0 rgba(0,0,0,.26) !important;
font-weight : 600 !important;
background-color : #ff7f00 !important;
`
const StyledTextField = styled(TextField)`
.MuiInputBase-root {
margin-bottom : 42px;
}
label.Mui-focused {
color : rgb(255,127,0);
}
.MuiInput-underline::after {
border-bottom: 2px solid rgb(255,127,0);
}
label.Mui-focused.Mui-error {
color : red;
}
max-width: 80%;
width : 80% !important;
full-width : 80% !important;
`
const StyledForm = styled.form`
display : flex;
flex-direction : column;
text-align : start;
.start-label {
font-size : 14px;
max-width : 100%;
display : inline-block;
margin-bottom : 0;
color : #a5a5a5;
font-weight : 400;
}
.stars-container {
padding-top : 10px;
padding-bottom : 5px;
display : flex;
flex-direction : row;
align-self : flex-start;
margin-bottom : 5px;
color : #a5a5a5;
}
.star-alert {
color : #666;
text-align : start;
}
.campos-obrigatorios {
font-weight : 400;
font-size : 12px;
color :#a5a5a5;
}
`
src/Components/ResourcePageComponents/CommentsArea.js 0 → 100644
+ 218
− 0
View file @ 1a1ea9d1
/*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, useContext, useEffect} from 'react'
import {Store} from '../../Store.js'
import styled from 'styled-components'
import Grid from '@material-ui/core/Grid';
import { Button } from '@material-ui/core';
import ExitToAppIcon from '@material-ui/icons/ExitToApp';
import Comentarios from '../../img/comentarios.png'
import {apiUrl, apiDomain} from '../../env';
import CommentForm from './CommentForm.js'
import axios from 'axios'
import Comment from '../Comment.js'
export default function CommentsArea (props) {
const {state} = useContext(Store)
const [comentarios, setComentarios] = useState([])
const [gambiarra, setState] = useState(0)
const forceUpdate = () => {setState(gambiarra + 1)}
useEffect( () => {
axios.get( (`${apiUrl}/learning_objects/` + props.recursoId + '/reviews')
).then( (response) => {
if ( response.headers['access-token'] ) {
sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token'])
}
console.log(response)
setComentarios(response.data.sort((a, b) => a.updated_at > b.updated_at ? -1 : 1))
}, (error) => {console.log(error)})
}, [gambiarra])
return (
<Grid container spacing={2} style={{padding : "10px"}}>
{
(state.currentUser.id !== '') ?
(
[
<Grid item xs={12} >
<GrayContainer>
<h3>Conte sua experiência com o Recurso</h3>
<Grid container style={{paddingTop : "20px"}}>
<Grid item xs={2} style={{paddingLeft : "15px", paddingRight : "15px"}}>
<img src={apiDomain + state.currentUser.userAvatar} className="minha-imagem" alt="user avatar"/>
</Grid>
<Grid item xs={10}>
<CommentForm
recursoId={props.recursoId}
handleSnackbar={props.handleSnackbar}
rerenderCallback={forceUpdate}
/>
</Grid>
</Grid>
</GrayContainer>
</Grid>
]
)
:
(
[
<Grid item xs={12}>
<LogInToComment>
<span className="span-laranja">Você precisa entrar para comentar</span>
{/*adicionar funcionalidade ao botao de entrar*/}
<Button style={{textTransform : "uppercase", color : "#666", fontWeight : "700"}}>
<ExitToAppIcon/>ENTRAR
</Button>
</LogInToComment>
</Grid>
]
)
}
{
comentarios.length !== 0 ?
(
[
<ComentariosBox>
<h3>{comentarios.length} {comentarios.length != 1 ? 'Relatos' : 'Relato'} sobre o uso do Recurso</h3>
{
comentarios.map( comentario =>
<div className="comentario-template" key={comentario.id}>
<Comment
authorID={comentario.user ? comentario.user.id : null}
authorAvatar={comentario.user ? comentario.user.avatar : null}
authorName={comentario.user ? comentario.user.name : null}
name={comentario.name}
rating={comentario.rating_average}
reviewRatings = {comentario.review_ratings}
description={comentario.description}
createdAt={comentario.created_at}
recurso={true}
reviewID={comentario.id}
objectID={props.recursoId}
rerenderCallback={forceUpdate}
handleSnackbar={props.handleSnackbar}
/>
</div>
)
}
</ComentariosBox>
]
)
:
(
[
<Grid item xs={12}>
<LogInToComment>
<img src={Comentarios} />
<span className="span-laranja">Compartilhe sua experiência com a Rede!</span>
<AoRelatar>
Ao relatar sua experiência de uso do Recurso você estará auxiliando professores de todo país.
</AoRelatar>
</LogInToComment>
</Grid>
]
)
}
</Grid>
)
}
const ComentariosBox = styled.div`
display : flex;
flex-direction : column;
padding : 20px;
width : 100%;
h3 {
font-family: 'Roboto Light','Roboto Regular',Roboto;
font-weight: 300;
font-style: normal;
color:#666;
font-size: 1.857em;
margin: 15px 2%;
text-align : flex-start;
}
.comentario-template {
padding : 20px 0;
border-bottom : 1px solid #f4f4f4;
}
`
const AoRelatar = styled.div`
width : 70%;
font-size : 20px;
font-weight : 300;
text-align : center;
padding-bottom : 20px;
`
const LogInToComment = styled.div`
display : flex;
flex-direction : column;
text-align : center;
padding : 20px;
align-items : center;
.span-laranja {
font-size : 24px;
font-weight : 700;
padding-bottom : 5px;
color : #ff7f00;
}
img {
object-fit : contain !important;
background-color : transparent !important;
}
`
const GrayContainer = styled.div`
background-color : #fafafa;
font-weight : 400;
display : flex;
flex-direction : column;
justify-content : space-between;
padding-right : 15px;
padding-left : 15px;
padding-bottom : 20px;
h3 {
font-family : 'Roboto Light','Roboto Regular',Roboto;
font-weight: 300;
font-style: normal;
color: #666;
font-size: 1.857em;
margin-bottom : 10px;
margin-left : 2%;
margin-top : 2%;
}
.minha-imagem {
height: 60px;
width: 60px;
border-radius: 50%;
margin-left: 2%;
margin-top: 5%;
}
img {
vertical-align :middle;
}
`
src/Components/ResourcePageComponents/Footer.js
+ 66
− 39
View file @ 1a1ea9d1
import React from 'react'
import React, {useState, useContext} from 'react'
import {Store} from '../../Store.js'
import styled from 'styled-components'
import Grid from '@material-ui/core/Grid';
import { Button } from '@material-ui/core';
......@@ -7,46 +8,73 @@ import ShareIcon from '@material-ui/icons/Share';
import FolderIcon from '@material-ui/icons/Folder';
import GetAppIcon from '@material-ui/icons/GetApp';
import CallMadeIcon from '@material-ui/icons/CallMade';
import {Link} from 'react-router-dom'
import ReportModal from '../ReportModal.js'
import ReportRecursoForm from '../ReportRecursoForm.js'
import ShareModal from '../ShareModal.js'
export default function Footer (props) {
const {state} = useContext(Store)
const enableDownload = () => {
const url = props.downloadableLink
window.open(url, '_blank');
props.handleSnackbar(0)
}
const [reportOpen, toggleReport] = useState(false)
const [shareOpen, toggleShare] = useState(false)
return (
<OpcoesDiv>
<StyledGrid container>
<Grid item xs={3}>
<ButtonGrey>
<span className="button-text">
<ErrorIcon className="icon"/> Reportar abuso ou erro
</span>
</ButtonGrey>
</Grid>
<Grid item xs={3}>
<ButtonGrey>
<span className="button-text">
<ShareIcon className="icon"/> Compartilhar
</span>
</ButtonGrey>
</Grid>
<Grid item xs={3}>
<ButtonGrey>
<span className="button-text">
<FolderIcon className="icon"/>Guardar
</span>
</ButtonGrey>
</Grid>
<Grid item xs={3} style={{justifyContent : "right !important"}}>
<ButtonOrange>
<span className="text">
<GetAppIcon className="icon"/> Baixar Recurso
</span>
</ButtonOrange>
</Grid>
</StyledGrid>
</OpcoesDiv>
<React.Fragment>
<ReportModal open={reportOpen} handleClose={() => {toggleReport(false)}}
form="recurso"
complainableId={props.recursoId}
complainableType={"LearningObject"}
/>
<ShareModal open={shareOpen} handleClose={() => {toggleShare(false)}}
thumb={props.thumb} title={props.title} link={props.link}
/>
<OpcoesDiv>
<StyledGrid container>
{/*Botao Reportar*/}
<Grid item xs={3}>
<ButtonGrey onClick={state.currentUser.id === '' ? () => console.log('abrir login modal') : () => toggleReport(true)}>
<span className="button-text">
<ErrorIcon className="icon"/> Reportar abuso ou erro
</span>
</ButtonGrey>
</Grid>
{/*Botao Compartilhar*/}
<Grid item xs={3}>
<ButtonGrey onClick={state.currentUser.id === '' ? () => console.log('abrir login modal') : () => toggleShare(true)}>
<span className="button-text">
<ShareIcon className="icon"/> Compartilhar
</span>
</ButtonGrey>
</Grid>
<Grid item xs={3}>
<ButtonGrey>
<span className="button-text">
<FolderIcon className="icon"/>Guardar
</span>
</ButtonGrey>
</Grid>
<Grid item xs={3} style={{justifyContent : "right !important"}}>
<ButtonOrange onClick={() => {enableDownload()}}>
<span className="text">
<GetAppIcon className="icon"/> Baixar Recurso
</span>
</ButtonOrange>
</Grid>
</StyledGrid>
</OpcoesDiv>
</React.Fragment>
)
}
......@@ -118,7 +146,7 @@ const ButtonOrange = styled(Button)`
text-align : center !important;
max-height : 36px;
margin-top : 5px !important;
.icon {
vertical-align : middle !important;
font-weight : normal !important;
......@@ -137,6 +165,5 @@ const ButtonOrange = styled(Button)`
.text {
font-size : 14px;
font-weight : 600;
}
`
src/Components/ResourcePageComponents/Sobre.js
+ 14
− 2
View file @ 1a1ea9d1
......@@ -60,7 +60,7 @@ export default function Sobre (props) {
aux.push(<AdditionalInfoItem
icon={<SdCardIcon/>}
label={'Tamanho: '}
value={props.attachments[0].size}
value={(props.attachments[0].size / 1000000).toFixed(2) + ' Mb'}
/>)
}
props.language.map( (lang) =>
......@@ -107,7 +107,18 @@ export default function Sobre (props) {
</div>
}/>)
}
console.log(aux)
else {
aux.push(<AdditionalInfoItem
icon={<AssignmentIcon/>}
label={'Tipo de licença: '}
value={
<div className="license-link">
<p>
Informação não disponível.
</p>
</div>
}/>)
}
setAdditionalInfo(aux)
}, [])
......@@ -218,6 +229,7 @@ const CollapseControl = styled.div`
border-top : 1px solid #e5e5e5;
color : #666;
font-weight : 700;
cursor : pointer;
.MuiSvgIcon-root {
vertical-align : middle
......
src/Components/ResourcePageComponents/TextoObjeto.js
+ 16
− 3
View file @ 1a1ea9d1
......@@ -16,14 +16,20 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
import React, {useEffect, useState} from 'react'
import React, {useEffect, useState, useContext} from 'react'
import {Store} from '../../Store.js'
import styled from 'styled-components'
import Firulas from '../Firulas.js'
import Grid from '@material-ui/core/Grid';
import VisibilityIcon from '@material-ui/icons/Visibility';
import GetAppIcon from '@material-ui/icons/GetApp';
import EditIcon from '@material-ui/icons/Edit';
import DeleteForeverIcon from '@material-ui/icons/DeleteForever';
import Button from '@material-ui/core/Button';
export default function TextoObjeto (props) {
const {state} = useContext(Store)
const [outrasTematicas, setOutrasTem] = useState('')
const [componentesCurriculares, setCompCurr] = useState('')
const [eduStages, setEduStages] = useState('')
......@@ -64,7 +70,7 @@ export default function TextoObjeto (props) {
return (
<TextoObjetoDiv>
<Grid container style={{paddingRight : "15px", paddingLeft : "15px"}}>
<Grid container style={{paddingLeft : "15px"}}>
<Grid item xs={11}>
<h3>{props.name}</h3>
<Firulas
......@@ -96,7 +102,14 @@ export default function TextoObjeto (props) {
</Grid>
<Grid item xs={1}>
<span>(WIP)botoes caso usuario visualizando seja o publisher</span>
{/*|| checkUserRole('publisher')*/}
{(props.id === state.currentUser.id && (props.stateRecurso === 'draft' )) &&
<React.Fragment>
<Button style={{color : "#666"}}><EditIcon/></Button>
<Button style={{color : "#666"}}><DeleteForeverIcon/></Button>
</React.Fragment>
}
</Grid>
</Grid>
</TextoObjetoDiv>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment