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

curatorship flow done; needs testing

parent 44b724df
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/ModalAvaliarRecurso.js
+ 171
− 36
View file @ b307fa81
......@@ -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, {useRef} from 'react';
import React, {useState} from 'react';
import { Button } from '@material-ui/core';
import Modal from '@material-ui/core/Modal';
import Backdrop from '@material-ui/core/Backdrop';
......@@ -31,30 +31,87 @@ import Radio from '@material-ui/core/Radio';
import FormControl from '@material-ui/core/FormControl';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import CloseModalButton from './CloseModalButton'
import Snackbar from '@material-ui/core/Snackbar';
import Alert from '../Components/Alert.js';
import TextField from '@material-ui/core/TextField';
import { withStyles } from '@material-ui/core/styles';
const StyledRadio = withStyles({
root: {
color: '#666',
'&$checked': {
color: '#ff7f00',
},
},
checked: {},
})((props) => <Radio color="default" {...props} />);
export default function ModalAvaliarRecurso (props) {
const options = [
{
text : "O recurso apresenta conteúdo de cunho político-partidário? (Ex: o conteúdo expressa qualquer forma de manifestação que se caracterize como propaganda política)?", value : "", id : 1
text : "O recurso apresenta conteúdo de cunho político-partidário? (Ex: o conteúdo expressa qualquer forma de manifestação que se caracterize como propaganda política)?", id : 1
},
{
text : "O recurso apresenta conteúdo ofensivo? (Ex: material pornográfico e/ou que invada a privacidade de terceiros, viole os Direitos Humanos ou seja ilegal, ofensivo, e que incite a violência)?", value : "", id : 2
text : "O recurso apresenta conteúdo ofensivo? (Ex: material pornográfico e/ou que invada a privacidade de terceiros, viole os Direitos Humanos ou seja ilegal, ofensivo, e que incite a violência)?", id : 2
},
{
text : "O recurso apresenta algum tipo de propaganda ou marca? (Ex: o conteúdo tem cunho comercial)?", value : "", id : 3
text : "O recurso apresenta algum tipo de propaganda ou marca? (Ex: o conteúdo tem cunho comercial)?", id : 3
},
{
text : "Outro motivo para rejeição (falta de descrição, autor, objeto, erros)? Indicar na justificativa se for o caso?", value : "", id : 4
text : "Outro motivo para rejeição (falta de descrição, autor, objeto, erros)? Indicar na justificativa se for o caso?", id : 4
}
]
const [avaliacao, setAvaliacao] = useState([null,null,null,null])
const handleRadios = (event, id) => {
console.log(event.target.value)
console.log(id)
let newValue = avaliacao
newValue[id - 1] = (event.target.value === "Sim" ? true : false)
setAvaliacao(newValue)
if(avaliacao.indexOf(null) === -1) {
toggleDisableButton(false)
}
}
const [justificativa, setJustificativa] = useState("")
const handleChangeJustificativa = (e) => {
setJustificativa(e.target.value)
}
const [snackbarCancelar, toggleSnackbarCancelar] = useState(false)
const handleSnackbarCancelar = (value) => toggleSnackbarCancelar(value)
const handleCancel = () => {
handleSnackbarCancelar(true)
props.handleClose()
}
const [buttonDisabled, toggleDisableButton] = useState(true)
const handleAvaliar = () => {
let criteria = options
avaliacao.map((criterium, index) =>
criteria[index]['accepted'] = !criterium
)
props.confirm(criteria, justificativa)
returnToDefault()
}
const returnToDefault = () => {
setAvaliacao([null,null,null,null])
setJustificativa('')
toggleDisableButton(true)
}
return (
<>
<Snackbar open={snackbarCancelar} autoHideDuration={1000} onClose={toggleSnackbarCancelar}
anchorOrigin = {{ vertical:'top', horizontal:'right' }}
message="Você cancelou a avaliação deste recurso."
/>
<StyledModal
aria-labelledby="transition-modal-title"
aria-describedby="transition-modal-description"
......@@ -71,7 +128,7 @@ export default function ModalAvaliarRecurso (props) {
<Container>
<Header>
<h2>Você está avaliando o recurso
<span style={{fontWeight : "bolder"}}>{props.title}</span>
<span style={{fontWeight : "bolder"}}> {props.title}</span>
</h2>
<CloseModalButton handleClose={props.handleClose}/>
</Header>
......@@ -79,21 +136,23 @@ export default function ModalAvaliarRecurso (props) {
<Content>
<Grid container>
<Grid item xs={12}>
<p>Esse recurso está em conformidade com os critérios? Marque as opções e justifique aquela(s)que não estiverem em conformidade.</p>
<p>Esse recurso está em conformidade com os critérios? Marque as opções e justifique aquela(s) que não estiverem em conformidade.</p>
</Grid>
<FormControl component="fieldset" style={{display:"BlockRuby"}} fullWidth={true}>
{
options.map( (option) =>
<Grid item xs={12} key={option.id}>
<Grid item xs={12} key={option.id} style={{paddingTop : "10px"}}>
<Grid container>
<Grid item xs={10}>
<p>{option.text}</p>
<div style={{height : "100%", display : "flex", alignItems : "center"}}>
<p>{option.text}</p>
</div>
</Grid>
<Grid item xs={2}>
<RadioGroup row onChange={(e) => {handleRadios(e, option.id)}}>
<FormControlLabel value={true} control={<Radio color="primary"/>} label="Sim"/>
<FormControlLabel value={false} control={<Radio color="primary"/>} label="Não"/>
<FormControlLabel value={"Sim"} control={<StyledRadio/>} label="Sim"/>
<FormControlLabel value={"Não"} control={<StyledRadio/>} label="Não"/>
</RadioGroup>
</Grid>
</Grid>
......@@ -101,31 +160,37 @@ export default function ModalAvaliarRecurso (props) {
)
}
</FormControl>
<Grid item xs={12}>
<FormControl style={{width : "100%", height : "100px"}}>
<StyledTextField
id = {"title-form"}
label={"Justificativa (opcional)"}
type = {"text"}
value = {justificativa}
onChange = {e => {handleChangeJustificativa(e)}}
multiline
fullWidth
/>
</FormControl>
</Grid>
<Grid item xs={12}>
<ButtonsDiv>
<ButtonEnviarAvaliar disabled={buttonDisabled} onClick={() => {handleAvaliar()}}>ENVIAR AVALIAÇÂO</ButtonEnviarAvaliar>
<GreyButton onClick={ () => {handleCancel()}}>CANCELAR</GreyButton>
</ButtonsDiv>
</Grid>
</Grid>
</Content>
</Container>
</Fade>
</StyledModal>
</>
)
}
const ShareButton = styled(Button)`
text-align :center;
margin : 0 !important;
.MuiButton-label {
display : flex !important;
flex-direction : column !important;
justify-content : center !important;
font-weight : 700 !important;
}
p {
margin : 0 0 10px;
}
`
const Content = styled.div`
padding : 10px 75px 0 75px;
overflow : visible;
......@@ -148,15 +213,22 @@ const Content = styled.div`
const Header = styled.div`
display : flex;
flex-direction : row;
padding : 10px 75px 0 75px;
padding : 20px 75px 0 75px;
align-items : center;
justify-content : space-between;
height : 64px;
color : #666;
@media screen and (min-width : 990px) {
height : 64px;
}
@media screen and (max-width : 989px) {
max-height : none;
}
h2 {
font-size : 26px;
font-weight : lighter;
color : #666
}
`
......@@ -194,12 +266,10 @@ const Container = styled.div`
max-height : none;
position : relative;
border-radius : 4px;
@media screen and (min-width : 700px) {
max-width : 100%;
}
max-width : 100%;
@media screen and (max-width : 699px) {
overflow : scroll;
width : 100%;
height : 100%;
}
......@@ -208,3 +278,68 @@ const Container = styled.div`
margin : 0 0 10px;
}
`
const StyledTextField = styled(TextField)`
font-size : 14px;
width : 100% !important;
full-width : 100% !important;
.MuiFormControl-root {
margin : 18px 0 !important;
}
label.Mui-focused {
color : #ff7f00;
}
label.Mui-focused.Mui-error {
color : red;
}
.MuiInput-underline::after {
border-bottom: 2px solid #ff7f00;
}
`
const ButtonsDiv = styled.div`
display : flex;
max-width : 100%;
text-align : start;
align-items : center;
padding : 0 0 20px 0;
@media screen and (min-width : 990px) {
flex-direction : row;
}
@media screen and (max-width : 989px) {
flex-direction : column;
}
`
const GreyButton = styled(Button)`
&:hover {
background-color : rgba(158,158,158,0.2) !important;
}
max-height : 36px !important;
background-color : transparent !important;
color : #666 !important;
text-decoration : none !important;
outline : none !important;
text-align : center !important;
font-weight : 600 !important;
`
const ButtonEnviarAvaliar = styled(Button)`
color : ${(props) => props.disabled ? "rgba(0,0,0,0.38)" : "rgba(255,255,255,0.87) !important"};
box-shadow : ${(props) => props.disabled ? "none !important" : "0 2px 5px 0 rgba(0,0,0,.26) !important"};
font-weight : 600 !important;
background-color : ${(props) => props.disabled ? "#e9e9e9 !important" : "#ff7f00 !important"};
margin-left : 8px !important;
margin-right : 8px !important;
.MuiButton-label {
padding-left : 32px !important;
padding-right : 32px !important;
}
`
src/Components/ModalConfirmarCuradoria.js 0 → 100644
+ 260
− 0
View file @ b307fa81
/*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 { Button } from '@material-ui/core';
import Modal from '@material-ui/core/Modal';
import Backdrop from '@material-ui/core/Backdrop';
import Fade from '@material-ui/core/Fade';
import styled from 'styled-components'
import {Store} from '../Store.js'
import axios from 'axios'
import {apiDomain, apiUrl} from '../env';
import Grid from '@material-ui/core/Grid';
import RadioGroup from '@material-ui/core/RadioGroup';
import Radio from '@material-ui/core/Radio';
import FormControl from '@material-ui/core/FormControl';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import CloseModalButton from './CloseModalButton'
import {getAxiosConfig} from './HelperFunctions/getAxiosConfig'
export default function ModalConfirmarCuradoriaOpen (props) {
const handleCancel = () => {
props.handleClose()
props.cancel()
}
const transformReportCriteria = (criteria) => {
let newArr = []
criteria.map((criterium) =>
newArr.push({"question_id" : criterium.id, "accepted" : criterium.accepted})
)
return newArr
}
const handleConfirmation = () => {
let config = getAxiosConfig()
let payload = {
"submission" : {
"justification" : props.justificativa,
"answers" : transformReportCriteria(props.reportCriteria)
}
}
axios.post( (`${apiUrl}/submissions/` + props.recursoId + '/answer'), payload, config).then(
(response) => {
if ( response.headers['access-token'] ) {
sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token'])
}
console.log(response.data)
props.finalizeCuratorshipFlow()
}, (error) => {console.log(error)}
)
}
return (
<StyledModal
aria-labelledby="transition-modal-title"
aria-describedby="transition-modal-description"
open={props.open}
centered="true"
onClose={props.handleClose}
closeAfterTransition
BackdropComponent={Backdrop}
BackdropProps={{
timeout: 500,
}}
>
<Fade in={props.open}>
<Container recusado={!props.aceito}>
<Header>
<span style={{width:"32px"}}/>
<h2>Recurso a ser {props.aceito ? 'aprovado' : 'recusado'}</h2>
<CloseModalButton handleClose={props.handleClose}/>
</Header>
<Content>
{
props.aceito ?
(
<p>Este recurso será publicado na plataforma. Você confirma essa avaliação?
</p>
)
:
(
<>
<p>Agradecemos a sua contribuição. Você avaliou que o recurso não está em conformidade com o(s) seguinte(s) critério(s):
</p>
{
props.reportCriteria.filter((criterium) => criterium.accepted === false).map( (criterium) =>
<p key={criterium.id} className="reason-offensive">{criterium.text}</p>
)
}
<p>Você confirma essa avaliação? Ao confirmar, o recurso não será publicado na plataforma.</p>
</>
)
}
<ButtonsDiv>
{
props.aceito ?
(
<ButtonEnviarAvaliar onClick={() => {handleConfirmation()}}>SIM, CONFIRMAR</ButtonEnviarAvaliar>
)
:
(
<ButtonEnviarAvaliar onClick={() => {handleConfirmation()}}>SIM, CONFIRMAR</ButtonEnviarAvaliar>
)
}
<GreyButton onClick={handleCancel}>NÃO, ALTERAR AVALIAÇÃO</GreyButton>
</ButtonsDiv>
</Content>
</Container>
</Fade>
</StyledModal>
)
}
const Content = styled.div`
padding : 30px;
overflow : visible;
max-width : 100%;
color : #666;
font-size : 16px;
text-align : start;
.reason-offensive {
font-weight : 700;
}
p {
margin : 0 0 10px;
}
`
const Header = styled.div`
display : flex;
flex-direction : row;
align-items : center;
max-height : none;
justify-content : space-between;
color : #666;
h2 {
font-size : 30px;
margin-top : 20px;
margin-bottom : 10px;
font-weight : lighter;
}
`
const StyledCloseModalButton = styled(Button)`
display : inline-block;
position : relative;
float : right !important;
margin-right : 4px !important;
background : transparent !important;
min-width: 0 !important;
width : 40px;
`
const StyledModal = styled(Modal)`
.djXaxP{
margin : 0 !important;
}
display : flex;
align-items: center;
justify-content : center;
text-align : center;
padding : 10px !important;
max-width : none;
max-height : none;
`
const Container = styled.div`
box-sizing : border-box;
box-shadow : 0 7px 8px -4px rgba(0,0,0,.2),0 13px 19px 2px rgba(0,0,0,.14),0 5px 24px 4px rgba(0,0,0,.12);
background-color : #fff;
align : center;
display : flex;
flex-direction : column;
min-width : 240px;
position : relative;
border-radius : 4px;
max-width : 100%;
max-height : ${props => props.recusado ? 'none' : '370px'};
@media screen and (max-width : 699px) {
overflow : ${props => props.recusado ? 'scroll' : 'visible'};
width : 100%;
height : 100%;
}
p {
margin : 0 0 10px;
}
`
const ButtonsDiv = styled.div`
display : flex;
max-width : 100%;
text-align : center;
align-items : center;
justify-content : center;
padding-top : 20px;
@media screen and (min-width : 990px) {
flex-direction : row;
}
@media screen and (max-width : 989px) {
flex-direction : column;
}
`
const GreyButton = styled(Button)`
&:hover {
background-color : rgba(158,158,158,0.2) !important;
}
max-height : 36px !important;
background-color : transparent !important;
color : #666 !important;
text-decoration : none !important;
outline : none !important;
text-align : center !important;
font-weight : 600 !important;
.MuiButton-label {
padding-left : 16px !important;
padding-right : 16px !important;
}
@media screen and (max-width : 989px) {
margin-top : 10px !important;
}
`
const ButtonEnviarAvaliar = 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;
margin-left : 8px !important;
margin-right : 8px !important;
.MuiButton-label {
padding-left : 16px !important;
padding-right : 16px !important;
}
`
src/Pages/ResourcePage.js
+ 49
− 15
View file @ b307fa81
......@@ -35,6 +35,8 @@ import { makeStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import ButtonAvaliarRecurso from '../Components/ButtonAvaliarRecurso'
import ModalAvaliarRecurso from '../Components/ModalAvaliarRecurso'
import ModalConfirmarCuradoria from '../Components/ModalConfirmarCuradoria'
import {getAxiosConfig} from '../Components/HelperFunctions/getAxiosConfig'
function urlVerify (url) {
return (url ? url.indexOf("youtu") !== -1 || url.indexOf("vimeo") !== -1 : false)
......@@ -67,7 +69,7 @@ export default function LearningObjectPage (props){
console.log(response)
setRecurso(response.data)
toggle(false)
}, (error) => {console.log(error); toggle(false)})
}, (error) => {console.log(error);})
}, [, state.currentUser])
......@@ -86,7 +88,6 @@ export default function LearningObjectPage (props){
const handleModalCuradoria = (value) => {toggleModalCuradoria(value)}
const checkAccessLevel = (levelToCheck) => {
console.log(state.currentUser)
if (state.currentUser.id != '') {
return(checkUserRole(levelToCheck))
}
......@@ -99,6 +100,33 @@ export default function LearningObjectPage (props){
return(state.currentUser.roles.filter((role) => role.name === userRole).length > 0)
}
const [modalConfirmarCuradoriaOpen, toggleModalConfirmarCuradoria] = useState(false)
const handleModalConfirmarCuradoria = (value) => {toggleModalConfirmarCuradoria(value)}
const [reportCriteria, setReportCriteria] = useState([])
const [justificativa, setJustificativa] = useState('')
const handleConfirm = (criteria, justification) => {
console.log('criteria: ', criteria)
console.log('justification: ', justification)
setReportCriteria(criteria)
setJustificativa(justification)
handleModalCuradoria(false)
handleModalConfirmarCuradoria(true)
}
const finalizeCuratorshipFlow = () => {
handleModalConfirmarCuradoria(false)
let config = getAxiosConfig()
axios.get( (`${apiUrl}/learning_objects/` + id), config
).then( (response) => {
if ( response.headers['access-token'] ) {
sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token'])
}
console.log(response)
setRecurso(response.data)
}, (error) => {console.log(error);})
}
return (
<React.Fragment>
<Snackbar open={snackbarOpen} autoHideDuration={1000} onClose={toggleSnackbar}
......@@ -110,7 +138,11 @@ export default function LearningObjectPage (props){
</Snackbar>
<ModalAvaliarRecurso open={modalCuradoriaOpen} handleClose={() => {handleModalCuradoria(false)}}
title={recurso.name}/>
title={recurso.name} confirm={handleConfirm} setCriteria={setReportCriteria}
/>
<ModalConfirmarCuradoria aceito={reportCriteria.length === 0} reportCriteria={reportCriteria} justificativa={justificativa} open={modalConfirmarCuradoriaOpen} handleClose={() => {handleModalConfirmarCuradoria(false)}} cancel={() => {handleModalCuradoria(true)}} recursoId={id}
finalizeCuratorshipFlow={finalizeCuratorshipFlow}
/>
<Background>
{
carregando ?
......@@ -211,18 +243,20 @@ export default function LearningObjectPage (props){
</Card>
</Grid>
<Grid item xs={12}>
<Card>
{/*adicionar funcionalidade ao botao de entrar*/}
<CommentsArea
recursoId = {id}
handleSnackbar={handleSnackbar}
objType={recurso.object_type}
recurso={true}
/>
</Card>
</Grid>
{
recurso.state !== "submitted" &&
<Grid item xs={12}>
<Card>
{/*adicionar funcionalidade ao botao de entrar*/}
<CommentsArea
recursoId = {id}
handleSnackbar={handleSnackbar}
objType={recurso.object_type}
recurso={true}
/>
</Card>
</Grid>
}
</Grid>
{
......
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