From 44b724df1878e1d4725a06cafdf17a3793232158 Mon Sep 17 00:00:00 2001
From: Lucas Schoenfelder <les17@inf.ufpr.br>
Date: Wed, 8 Jul 2020 21:20:40 -0300
Subject: [PATCH] bug fixes and styling fixes
---
src/App.js | 2 +
src/Components/ButtonAvaliarRecurso.js | 26 +
.../HelperFunctions/checkAccessLevel.js | 14 +
.../HelperFunctions/getAxiosConfig.js | 15 +
.../HelperFunctions/getDefaultThumbnail.js | 63 +++
src/Components/LoginModal.js | 4 +-
src/Components/MenuBar.js | 4 +-
src/Components/ModalAvaliarRecurso.js | 210 ++++++++
.../ModalLearningObjectPublished.js | 236 +++++++++
.../PublicationPermissionsContent.js | 26 +-
src/Components/ResourceCardFunction.js | 7 +-
.../ResourcePageComponents/TextoObjeto.js | 40 +-
.../PanelComponents/TemplateCuradoria.js | 1 +
.../PanelComponents/TemplateRecurso.js | 3 +-
.../UploadPageComponents/DragAndDrop.js | 3 +-
.../UploadPageComponents/Forms/Autor.js | 7 +-
.../UploadPageComponents/Forms/Idioma.js | 12 +-
.../UploadPageComponents/Forms/Keywords.js | 7 +-
.../UploadPageComponents/Forms/NewTitle.js | 7 +-
.../Forms/SobreORecurso.js | 9 +-
.../Forms/TipoDeRecurso.js | 5 +-
.../UploadPageComponents/PartOne.js | 15 +-
.../UploadPageComponents/PartThree.js | 449 +++++++++++++++++-
.../UploadPageComponents/PartTwo.js | 75 ++-
.../CustomCircularProgress.js | 17 +
.../PartTwoComponents/DisplayThumbnail.js | 100 ++++
.../PartTwoComponents/DragAndDropThumbnail.js | 5 +-
.../PartTwoComponents/EditThumbnail.js | 37 ++
.../PartTwoComponents/EducationalStage.js | 5 +-
.../PartTwoComponents/Licenca.js | 5 +-
.../PartTwoComponents/SubjectsAndThemes.js | 13 +-
.../UploadPageComponents/SendInfo.js | 33 +-
.../UploadPageComponents/StyledComponents.js | 27 +-
src/Pages/EditLearningObjectPage.js | 278 +++++++++++
src/Pages/PublicationPermissionsPage.js | 40 +-
src/Pages/ResourcePage.js | 73 +++
src/Pages/TermsPage.js | 35 +-
src/Pages/UploadPage.js | 126 +++--
src/Pages/UserPage.js | 16 +-
src/Pages/UserTerms.js | 2 +-
src/Store.js | 4 +-
41 files changed, 1864 insertions(+), 192 deletions(-)
create mode 100644 src/Components/ButtonAvaliarRecurso.js
create mode 100644 src/Components/HelperFunctions/checkAccessLevel.js
create mode 100644 src/Components/HelperFunctions/getAxiosConfig.js
create mode 100644 src/Components/HelperFunctions/getDefaultThumbnail.js
create mode 100644 src/Components/ModalAvaliarRecurso.js
create mode 100644 src/Components/ModalLearningObjectPublished.js
create mode 100644 src/Components/UploadPageComponents/PartTwoComponents/CustomCircularProgress.js
create mode 100644 src/Components/UploadPageComponents/PartTwoComponents/DisplayThumbnail.js
create mode 100644 src/Components/UploadPageComponents/PartTwoComponents/EditThumbnail.js
create mode 100644 src/Pages/EditLearningObjectPage.js
diff --git a/src/App.js b/src/App.js
index 66a090e3..fc192578 100644
--- a/src/App.js
+++ b/src/App.js
@@ -44,6 +44,7 @@ import ItemStore from './Pages/ItemStore.js'
import EditProfilePage from './Pages/EditProfilePage.js'
import PublicUserPage from './Pages/PublicUserPage.js'
import UploadPage from './Pages/UploadPage.js'
+import EditLearningObjectPage from './Pages/EditLearningObjectPage.js'
export default function App(){
// eslint-disable-next-line
@@ -101,6 +102,7 @@ export default function App(){
<Route path="/plataforma-mec" component={TabPlataformaMEC}/>
<Route path="/recuperar-senha" component={PasswordRecoveryPage}/>
<Route path="/usuario-publico/:userId" component={PublicUserPage}/>
+ <Route path="/editar-recurso/:recursoId" component={EditLearningObjectPage}/>
<Route path='/professor' component={PageProfessor}/>
<Route path="/upload" component={UploadPage}/>
<Route path='/loja' component={ItemStore} />
diff --git a/src/Components/ButtonAvaliarRecurso.js b/src/Components/ButtonAvaliarRecurso.js
new file mode 100644
index 00000000..3e41d4fa
--- /dev/null
+++ b/src/Components/ButtonAvaliarRecurso.js
@@ -0,0 +1,26 @@
+import React, {useState} from 'react'
+import { Button } from '@material-ui/core';
+import styled from 'styled-components'
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+
+export default function ButtonAvaliarRecurso (props) {
+
+ return (
+ <StyledButton onClick={props.callback}>
+ <ExpandMoreIcon/> AVALIAR RECURSO
+ </StyledButton>
+ )
+}
+
+const StyledButton = styled(Button)`
+ &:hover {
+ background-color : #ed6f00 !important;
+ }
+ background-color : #ff7f00 !important;
+ color : #fff !important;
+ font-weight : 600 !important;
+ box-shadow : 0 2px 5px 0 rgba(0,0,0,.26) !important;
+ .MuiSvgIcon-root {
+ vertical-align : middle !important;
+ }
+`
diff --git a/src/Components/HelperFunctions/checkAccessLevel.js b/src/Components/HelperFunctions/checkAccessLevel.js
new file mode 100644
index 00000000..5cc5ea4b
--- /dev/null
+++ b/src/Components/HelperFunctions/checkAccessLevel.js
@@ -0,0 +1,14 @@
+import React, {useContext} from 'react'
+import {Store} from '../../Store.js'
+
+export function checkAccessLevel (levelToCheck) {
+ const {state} = useContext(Store)
+
+ if (state.currentUser.id != '') {
+ return(checkUserRole(levelToCheck))
+ }
+
+ const checkUserRole = (userRole) => {
+ return(state.currentUser.roles.filter((role) => role.name === userRole).length > 0)
+ }
+}
diff --git a/src/Components/HelperFunctions/getAxiosConfig.js b/src/Components/HelperFunctions/getAxiosConfig.js
new file mode 100644
index 00000000..99aef6a0
--- /dev/null
+++ b/src/Components/HelperFunctions/getAxiosConfig.js
@@ -0,0 +1,15 @@
+import React from 'react'
+
+export const getAxiosConfig = () => {
+ let config = {
+ headers : {
+ 'Accept': 'application/json',
+ 'Content-Type': 'application/json',
+ }
+ }
+ config.headers["Access-Token"] = sessionStorage.getItem('@portalmec/accessToken');
+ config.headers.Client = sessionStorage.getItem('@portalmec/clientToken')
+ config.headers.Uid = sessionStorage.getItem('@portalmec/uid')
+
+ return config
+}
diff --git a/src/Components/HelperFunctions/getDefaultThumbnail.js b/src/Components/HelperFunctions/getDefaultThumbnail.js
new file mode 100644
index 00000000..7bdaa5f2
--- /dev/null
+++ b/src/Components/HelperFunctions/getDefaultThumbnail.js
@@ -0,0 +1,63 @@
+import React from 'react'
+import Animacao from '../../img/laranja/ANIMACAO_SIMULACAO.jpg'
+import AplicativoMovel from '../../img/laranja/APP.jpg'
+import Apresentacao from '../../img/laranja/APRESENTACAO.jpg'
+import Audio from '../../img/laranja/AUDIO.jpg'
+import Empty from '../../img/laranja/EMPTY.jpg'
+import Imagem from '../../img/laranja/IMAGEM.jpg'
+import Infografico from '../../img/laranja/INFOGRAFICO.jpg'
+import Jogo from '../../img/laranja/JOGO.jpg'
+import LivroDigital from '../../img/laranja/LIVRO_DIGITAL.jpg'
+import Mapa from '../../img/laranja/MAPA.jpg'
+import Outros from '../../img/laranja/OUTROS.jpg'
+import SoftwareEducacional from '../../img/laranja/SOFTWARE.jpg'
+import Texto from '../../img/laranja/TEXTO.jpg'
+import Video from '../../img/laranja/VIDEO.jpg'
+
+export const getDefaultThumbnail = (objType) => {
+ switch (objType.toLowerCase()) {
+ case "imagem":
+ return Imagem;
+ break;
+ case "mapa":
+ return Mapa;
+ break;
+ case "software educacional" :
+ return SoftwareEducacional;
+ break;
+ case "aplicativo móvel":
+ return AplicativoMovel;
+ break;
+ case "apresentação":
+ return Apresentacao;
+ break;
+ case "áudio":
+ return Audio;
+ break;
+ case "infográfico":
+ return Infografico;
+ break;
+ case "jogo":
+ return Jogo;
+ break;
+ case "livro digital" :
+ return LivroDigital;
+ break;
+ case "texto":
+ return Texto;
+ break;
+ case "vÃdeo":
+ return Video;
+ break;
+ case "animação":
+ return Animacao;
+ break;
+ case null:
+ return Empty;
+ break;
+ default:
+ return Outros;
+ break;
+
+ }
+}
diff --git a/src/Components/LoginModal.js b/src/Components/LoginModal.js
index 9f96c8d0..5f2c5931 100644
--- a/src/Components/LoginModal.js
+++ b/src/Components/LoginModal.js
@@ -69,6 +69,7 @@ export default function LoginModal (props){
type: "USER_LOGGED_IN",
userLoggedIn: !state.userIsLoggedIn,
login: {
+ askTeacherQuestion : response.data.data.ask_teacher_question,
id : response.data.data.id,
username : response.data.data.name,
email : response.data.data.email,
@@ -79,7 +80,8 @@ export default function LoginModal (props){
uid : response.data.data.uid,
followCount : response.data.data.follows_count,
collectionsCount : response.data.data.collections_count,
- submitter_request : response.data.data.submitter_request
+ submitter_request : response.data.data.submitter_request,
+ roles : response.data.data.roles
}
}
)
diff --git a/src/Components/MenuBar.js b/src/Components/MenuBar.js
index 59c29c9e..88137922 100644
--- a/src/Components/MenuBar.js
+++ b/src/Components/MenuBar.js
@@ -37,7 +37,7 @@ const ContainerStyled = styled(Container)`
align-items: center;
border-top: 1px rgba(0,0,0,.1) solid;
padding: 5px;
-
+
*{
margin-left: 10px;
}
@@ -139,7 +139,7 @@ export default function MenuBar(props){
? (
<>
<div style={{boxSizing:"border-box"}}>
- <Link to="/termos-publicar-recurso">
+ <Link to="/termos-publicar-recurso" cameFromPublishButton={true}>
<ButtonPublicarRecurso>
<CloudUploadIcon style={{color:"white", marginLeft : "0"}}/>
<span style={{color : "#fff", textAlign: "center", alignSelf : "center", fontWeight:"500"}} >
diff --git a/src/Components/ModalAvaliarRecurso.js b/src/Components/ModalAvaliarRecurso.js
new file mode 100644
index 00000000..61ce4224
--- /dev/null
+++ b/src/Components/ModalAvaliarRecurso.js
@@ -0,0 +1,210 @@
+/*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, {useRef} 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} 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'
+
+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 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 algum tipo de propaganda ou marca? (Ex: o conteúdo tem cunho comercial)?", value : "", 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
+ }
+ ]
+
+ const handleRadios = (event, id) => {
+ console.log(event.target.value)
+ console.log(id)
+ }
+
+ 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>
+ <Header>
+ <h2>Você está avaliando o recurso
+ <span style={{fontWeight : "bolder"}}>{props.title}</span>
+ </h2>
+ <CloseModalButton handleClose={props.handleClose}/>
+ </Header>
+
+ <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>
+ </Grid>
+
+ <FormControl component="fieldset" style={{display:"BlockRuby"}} fullWidth={true}>
+ {
+ options.map( (option) =>
+ <Grid item xs={12} key={option.id}>
+ <Grid container>
+ <Grid item xs={10}>
+ <p>{option.text}</p>
+ </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"/>
+ </RadioGroup>
+ </Grid>
+ </Grid>
+ </Grid>
+ )
+ }
+ </FormControl>
+ </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;
+ max-width : 100%;
+ color : #666;
+ font-size : 16px;
+
+ .main-content-text {
+ font-size : 15px;
+ line-height : 22px;
+ text-align : justify;
+ }
+
+ p {
+ text-align : start;
+ margin : 0 0 10px;
+ }
+`
+
+const Header = styled.div`
+ display : flex;
+ flex-direction : row;
+ padding : 10px 75px 0 75px;
+ align-items : center;
+ justify-content : space-between;
+ height : 64px;
+
+ h2 {
+ font-size : 26px;
+ font-weight : lighter;
+ color : #666
+ }
+`
+
+const StyledCloseModalButton = styled(Button)`
+ display : inline-block;
+ position : relative;
+ float : right !important;
+ margin-right : -8px !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;
+ max-height : none;
+ position : relative;
+ border-radius : 4px;
+
+ @media screen and (min-width : 700px) {
+ max-width : 100%;
+ }
+
+ @media screen and (max-width : 699px) {
+ width : 100%;
+ height : 100%;
+ }
+
+ p {
+ margin : 0 0 10px;
+ }
+`
diff --git a/src/Components/ModalLearningObjectPublished.js b/src/Components/ModalLearningObjectPublished.js
new file mode 100644
index 00000000..8fe0d148
--- /dev/null
+++ b/src/Components/ModalLearningObjectPublished.js
@@ -0,0 +1,236 @@
+/*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, {useRef} 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 SignUpContainer from './SignUpContainerFunction.js'
+import {Store} from '../Store.js'
+import axios from 'axios'
+import {apiDomain} from '../env';
+import Grid from '@material-ui/core/Grid';
+import Facebook from '../img/facebook.svg'
+import Twitter from '../img/twitter.svg'
+import LinkIcon from '../img/link_icon.svg'
+import CloseModalButton from './CloseModalButton.js'
+
+export default function ModalLearningObjectPublished (props) {
+ const refContainer = useRef(props.link);
+
+ function copyToClipboard(e) {
+ let copyText = document.getElementById('p-text')
+ console.log(copyText)
+ };
+
+ 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>
+ <Header>
+ <span style={{width:"32px"}}/>
+ <h2>O seu recurso foi publicado!</h2>
+ <CloseModalButton handleClose={props.handleClose}/>
+ </Header>
+
+ <Content >
+ <Grid container>
+ <Grid item xs={4} style={{paddingRight : "15px", paddingLeft : "15px"}}>
+ <div className="backgroundImg"/>
+ </Grid>
+ <Grid item xs={8} style={{paddingRight : "15px", paddingLeft : "15px", paddingTop : "20px"}}>
+ <div className="main-content-text">
+ <p>Seu recurso já está disponÃvel na Plataforma. Você receberá notificações sempre que alguém favoritar, compartilhar e relatar experiência com o Recurso.</p>
+ </div>
+ </Grid>
+ </Grid>
+ </Content>
+ <ShareContainer>
+ <p>Gostaria de convidar o seus amigos para conhecer o recurso?</p>
+ <p>Compartilhe nas redes sociais:</p>
+ <div className="logos-shared">
+ <a
+ href={"https://www.facebook.com/sharer/sharer.php?u=https://plataformaintegrada.mec.gov.br/recurso/" + props.draftID}
+ target="_blank">
+ <ShareButton>
+ <img src={Facebook} alt="facebook-logo"/>
+ </ShareButton>
+ </a>
+
+ <a
+ href={"https://www.twitter.com/intent/tweet?url=https://plataformaintegrada.mec.gov.br/recurso/" + props.draftID}
+ target="_blank">
+ <ShareButton>
+ <img src={Twitter} alt="twitter-logo"/>
+ </ShareButton>
+ </a>
+
+ <ShareButton >
+ <img src={LinkIcon} alt="link-icon"/>
+ </ShareButton>
+ </div>
+ </ShareContainer>
+ </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;
+ }
+
+ img {
+ height : 50px;
+ width : 50px;
+ padding-top : 10px;
+ vertical-align : middle;
+ }
+
+ p {
+ margin : 0 0 10px;
+ }
+`
+
+const ShareContainer = styled.div`
+ padding-top : 20px;
+ background-color : #f1f1f1;
+ width : 100%;
+ height : 215px;
+ font-size : 18px;
+ line-height : 30px;
+ text-align : center;
+ max-width : 600px;
+ color : #666;
+ border-radius : 4px;
+
+ .logos-shared {
+ font-size : 18px;
+ line-height : 30px;
+ text-align : center;
+ display : flex;
+ flex-direction : row;
+ justify-content : center;
+ }
+`
+
+const Content = styled.div`
+ padding : 20px 30px;
+ overflow : visible;
+ max-width : 600px;
+ color : #666;
+
+ .backgroundImg {
+ background-image : url(https://plataformaintegrada.mec.gov.br/img/Publicar.png);
+ width : 145px;
+ height : 125px;
+ background-repeat : no-repeat;
+ background-size : contain;
+ margin : 0;
+ }
+
+ .main-content-text {
+ font-size : 15px;
+ line-height : 22px;
+ text-align : justify;
+ }
+`
+
+const Header = styled.div`
+ display : flex;
+ flex-direction : row;
+ padding : 10px 26px 0 26px;
+ align-items : center;
+ justify-content : space-between;
+ height : 64px;
+
+ h2 {
+ font-size : 26px;
+ font-weight : lighter;
+ color : #666
+ }
+`
+
+const StyledCloseModalButton = styled(Button)`
+ display : inline-block;
+ position : relative;
+ float : right !important;
+ margin-right : -8px !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;
+ max-height : none;
+ position : relative;
+ border-radius : 4px;
+
+ @media screen and (min-width : 700px) {
+ max-width : 600px;
+ }
+
+ @media screen and (max-width : 699px) {
+ width : 100%;
+ height : 100%;
+ }
+
+ p {
+ margin : 0 0 10px;
+ }
+`
diff --git a/src/Components/PublicationPermissionsContent.js b/src/Components/PublicationPermissionsContent.js
index 3b62deef..0eb4410c 100644
--- a/src/Components/PublicationPermissionsContent.js
+++ b/src/Components/PublicationPermissionsContent.js
@@ -6,11 +6,11 @@ import RadioGroup from '@material-ui/core/RadioGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Radio from '@material-ui/core/Radio';
import FormControl from '@material-ui/core/FormControl';
-
+import Grid from '@material-ui/core/Grid';
const StyledFormControl = styled(FormControl)`
display: "block ruby";
- margin-top : 0 !importantcd ;
+ margin-top : 0 !important ;
`
const StyledDivEvaluateQuestion = styled.div`
@@ -38,31 +38,41 @@ export default function PublicationPermissionsContent (props) {
inviabiliza a publicação do recurso em nossa rede.
</Typography>
<p><strong>No seu recurso está presente algum destes itens abaixo?</strong></p>
+
<StyledFormControl component="fieldset" style={{display:"BlockRuby"}} margin='dense' fullWidth={true}>
- <StyledDivEvaluateQuestion>
+ <Grid container>
+ <Grid item xs={10}>
<p>
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)?
</p>
+ </Grid>
+ <Grid item xs={2}>
<RadioGroup row name="radio1" onChange={props.handleRadios}>
<FormControlLabel value="Sim" control={<Radio color="primary"/>} label="Sim"/> <FormControlLabel value="Não" control={<Radio color="primary"/>} label="Não"/>
</RadioGroup>
- </StyledDivEvaluateQuestion>
- <StyledDivEvaluateQuestion>
+ </Grid>
+
+ <Grid item xs={10}>
<p>
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)?
</p>
+ </Grid>
+ <Grid item xs={2}>
<RadioGroup row name="radio2" onChange={props.handleRadios}>
<FormControlLabel value="Sim" control={<Radio color="primary"/>} label="Sim"/> <FormControlLabel value="Não" control={<Radio color="primary"/>} label="Não"/>
</RadioGroup>
- </StyledDivEvaluateQuestion>
- <StyledDivEvaluateQuestion>
+ </Grid>
+ <Grid item xs={10}>
<p>
O recurso apresenta algum tipo de propaganda ou marca? (Ex: o conteúdo tem cunho comercial)?
</p>
+ </Grid>
+ <Grid item xs={2}>
<RadioGroup row name="radio3" onChange={props.handleRadios}>
<FormControlLabel value="Sim" control={<Radio color="primary"/>} label="Sim"/> <FormControlLabel value="Não" control={<Radio color="primary"/>} label="Não"/>
</RadioGroup>
- </StyledDivEvaluateQuestion>
+ </Grid>
+ </Grid>
</StyledFormControl>
</div>
</CardContent>
diff --git a/src/Components/ResourceCardFunction.js b/src/Components/ResourceCardFunction.js
index f7128a69..7c3d54c8 100644
--- a/src/Components/ResourceCardFunction.js
+++ b/src/Components/ResourceCardFunction.js
@@ -48,13 +48,14 @@ 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'
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) {
const [thumbnail, setThumbnail] = useState(null)
- const [label, setLabel] = useState(props.type ? props.type : "Outros")
+ const [label, setLabel] = useState(props.type)
const [userAvatar, setUserAvatar] = useState(noAvatar)
const [slideIn, setSlide] = useState(false)
const controlSlide = () => {setSlide(!slideIn)}
@@ -65,9 +66,7 @@ export default function ResourceCardFunction (props) {
setThumbnail(`${apiDomain}` + props.thumbnail)
}
else {
- //props.type is either the object type or "Outros"
- const aux = types.find(function(element){return element.label === props.type})
- setThumbnail(aux.thumb)
+ setThumbnail(getDefaultThumbnail(label))
}
if (props.avatar) {
diff --git a/src/Components/ResourcePageComponents/TextoObjeto.js b/src/Components/ResourcePageComponents/TextoObjeto.js
index 68d6fec4..ca77e9b0 100644
--- a/src/Components/ResourcePageComponents/TextoObjeto.js
+++ b/src/Components/ResourcePageComponents/TextoObjeto.js
@@ -26,6 +26,12 @@ 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';
+import {Link} from 'react-router-dom'
+import Alert from '../Alert.js';
+import Snackbar from '@material-ui/core/Snackbar';
+import {getAxiosConfig} from '../HelperFunctions/getAxiosConfig'
+import axios from 'axios'
+import {apiUrl, apiDomain} from '../../env';
export default function TextoObjeto (props) {
const {state} = useContext(Store)
@@ -72,8 +78,32 @@ export default function TextoObjeto (props) {
{label : 'Etapas de Ensino: ', text : eduStages}
]
+ const [snackbarOpen, toggleSnackbar] = useState(false)
+ const handleDelete = () => {
+ let config = getAxiosConfig()
+ axios.delete((`${apiUrl}/learning_objects/` + props.recursoId), config).then(
+ (response) => {
+ toggleSnackbar(true)
+ console.log(response.data)
+ if ( response.headers['access-token'] ) {
+ sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token'])
+ }
+ },
+ (error) => {
+ console.log(error)
+ }
+ )
+ }
+
return (
<TextoObjetoDiv>
+ <Snackbar open={snackbarOpen} autoHideDuration={1000} onClose={() => {toggleSnackbar(false)}}
+ anchorOrigin = {{ vertical:'top', horizontal:'right' }}
+ >
+ <Alert severity="info" style={{backgroundColor:"#00acc1"}}>
+ Recurso excluido com sucesso!
+ </Alert>
+ </Snackbar>
<Grid container style={{paddingLeft : "15px"}}>
<Grid item xs={11}>
<h3>{props.name}</h3>
@@ -106,7 +136,7 @@ export default function TextoObjeto (props) {
</span>
{
- (props.attachments[0].mime_type==="/audio/mpeg" ||
+ props.attachments[0] && (props.attachments[0].mime_type==="/audio/mpeg" ||
props.attachments[0].format === "audio") &&
<div className="recurso-container-audio">
<audio controls className="audio audio-objeto">
@@ -133,10 +163,12 @@ export default function TextoObjeto (props) {
</Grid>
<Grid item xs={1}>
{/*|| checkUserRole('publisher')*/}
- {(props.id === state.currentUser.id && (props.stateRecurso === 'draft' )) &&
+ {props.id === state.currentUser.id &&
<React.Fragment>
- <Button style={{color : "#666"}}><EditIcon/></Button>
- <Button style={{color : "#666"}}><DeleteForeverIcon/></Button>
+ <Link to={"/editar-recurso/" + props.recursoId}>
+ <Button style={{color : "#666"}}><EditIcon/></Button>
+ </Link>
+ <Button style={{color : "#666"}} onClick={() => {handleDelete()}}><DeleteForeverIcon/></Button>
</React.Fragment>
}
diff --git a/src/Components/TabPanels/PanelComponents/TemplateCuradoria.js b/src/Components/TabPanels/PanelComponents/TemplateCuradoria.js
index 7ddb1248..51110b38 100644
--- a/src/Components/TabPanels/PanelComponents/TemplateCuradoria.js
+++ b/src/Components/TabPanels/PanelComponents/TemplateCuradoria.js
@@ -54,6 +54,7 @@ export default function Template (props) {
title={card.learning_object.name}
published={false}
tags={card.educational_stages}
+ href={"/recurso/" + card.learning_object.id}
/>
</Grid>
)
diff --git a/src/Components/TabPanels/PanelComponents/TemplateRecurso.js b/src/Components/TabPanels/PanelComponents/TemplateRecurso.js
index da632de2..4407bcf2 100644
--- a/src/Components/TabPanels/PanelComponents/TemplateRecurso.js
+++ b/src/Components/TabPanels/PanelComponents/TemplateRecurso.js
@@ -50,13 +50,14 @@ export default function Template (props) {
<ResourceCardFunction
avatar = {card.publisher.avatar}
thumbnail = {card.thumbnail}
- type = {card.object_type ? card.object_type : "Outros"}
+ 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.score}
tags={card.educational_stages}
+ href={"/recurso/" + card.id}
/>
</Grid>
)
diff --git a/src/Components/UploadPageComponents/DragAndDrop.js b/src/Components/UploadPageComponents/DragAndDrop.js
index c8f03aa7..6610fafb 100644
--- a/src/Components/UploadPageComponents/DragAndDrop.js
+++ b/src/Components/UploadPageComponents/DragAndDrop.js
@@ -52,8 +52,9 @@ export default function DragAndDrop (props) {
e.preventDefault();
e.stopPropagation();
let files = [...e.dataTransfer.files]
+
if (files && files.length > 0) {
- props.acceptFile(files)
+ props.acceptFile(files[0])
}
};
diff --git a/src/Components/UploadPageComponents/Forms/Autor.js b/src/Components/UploadPageComponents/Forms/Autor.js
index 0ab781aa..c2427708 100644
--- a/src/Components/UploadPageComponents/Forms/Autor.js
+++ b/src/Components/UploadPageComponents/Forms/Autor.js
@@ -26,7 +26,6 @@ import FormHelperText from '@material-ui/core/FormHelperText';
import RadioGroup from '@material-ui/core/RadioGroup';
import Radio from '@material-ui/core/Radio';
import FormControlLabel from '@material-ui/core/FormControlLabel';
-import {SendInfo} from '../SendInfo.js'
const BlueRadio = withStyles({
root: {
@@ -40,15 +39,15 @@ const BlueRadio = withStyles({
function Autor (props) {
const {state} = useContext(Store)
- const [authorValue, setAuthorValue] = useState(-1)
- const [outroAutor, setOutroAutor] = useState('')
+ const [authorValue, setAuthorValue] = useState(props.initialValue ? props.initialValue : -1)
+ const [outroAutor, setOutroAutor] = useState(props.initialOutroAutor ? props.initialOutroAutor : '')
const getAuthor = () => {
return authorValue === "0" ? state.currentUser.username : outroAutor
}
return (
- <FormControl required="true" style={{width : "100%"}} onBlur={() => {SendInfo(props.draftID, "author", getAuthor())}}>
+ <FormControl required={true} style={{width : "100%"}} onBlur={() => {props.onBlurCallback("author", getAuthor(), props.draftID)}}>
<StyledFormLabel component="legend" style={{fontSize : "14px", marginBottom : "10px"}}>
<b>Autor do recurso</b>
</StyledFormLabel>
diff --git a/src/Components/UploadPageComponents/Forms/Idioma.js b/src/Components/UploadPageComponents/Forms/Idioma.js
index 80583bad..ced59ebd 100644
--- a/src/Components/UploadPageComponents/Forms/Idioma.js
+++ b/src/Components/UploadPageComponents/Forms/Idioma.js
@@ -26,12 +26,17 @@ import MenuItem from '@material-ui/core/MenuItem';
import Select from '@material-ui/core/Select';
export default function Idioma (props) {
- const [chosenLanguage, setChosenLanguage] = useState([])
+ const [chosenLanguage, setChosenLanguage] = useState(props.initialValue ? props.initialValue : [])
+ const [ids, setIds] = useState(props.initialIDValues ? props.initialIDValues : [])
+
const handleChangeLanguage = (event) => {
console.log(event.target.value)
- setChosenLanguage(event.target.value);
+ let newLanguage = event.target.value.pop()
+ setChosenLanguage(chosenLanguage => [...chosenLanguage, newLanguage.name]);
+ setIds(ids => [...ids, newLanguage.id])
};
+
return (
<FormControl required style={{minWidth : "30%"}}>
<StyledFormLabel component="legend" style={{fontSize : "14px", marginBottom : "10px"}}>
@@ -43,10 +48,11 @@ export default function Idioma (props) {
renderValue={(selected) => selected.join(', ')}
name="Idioma"
onChange={handleChangeLanguage}
+ onBlur={() => {props.onBlurCallback("language_ids", ids, props.draftID)}}
>
{
props.languages.map( language =>
- <MenuItem key={language.name} value={language.name}>
+ <MenuItem key={language.name} value={language}>
<Checkbox checked={chosenLanguage.indexOf(language.name) > -1} />
<ListItemText primary={language.name} />
</MenuItem>
diff --git a/src/Components/UploadPageComponents/Forms/Keywords.js b/src/Components/UploadPageComponents/Forms/Keywords.js
index ab6874dc..238d0b7a 100644
--- a/src/Components/UploadPageComponents/Forms/Keywords.js
+++ b/src/Components/UploadPageComponents/Forms/Keywords.js
@@ -21,11 +21,10 @@ import FormControl from '@material-ui/core/FormControl';
import {StyledTextField, StyledFormLabel} from '../StyledComponents.js'
import FormHelperText from '@material-ui/core/FormHelperText';
import Chip from '@material-ui/core/Chip';
-import {SendInfo} from '../SendInfo.js'
function Keywords (props) {
- const [keywords, setKeywords] = useState([])
+ const [keywords, setKeywords] = useState(props.initialValue ? props.initialValue : [])
const handleSetKeywords = (newKeyword) => {setKeywords(newKeyword)}
const deleteKeyword = (keywordToDelete) => {
setKeywords(keywords.filter((keyword) => keyword !== keywordToDelete))
@@ -50,7 +49,7 @@ function Keywords (props) {
return (
<React.Fragment>
- <FormControl required="true" style={{width : "100%"}}>
+ <FormControl required={true} style={{width : "100%"}}>
<StyledFormLabel component="legend" style={{fontSize : "14px", marginBottom : "10px"}}>
<b>Palavras-chave para buscar o Recurso</b>
<span style={{color : "#a5a5a5", paddingLeft : "10px"}}>
@@ -68,7 +67,7 @@ function Keywords (props) {
setKeywordsBuffer('')}}
}
fullWidth
- onBlur={() => {SendInfo(props.draftID, "tags", keywords)}}
+ onBlur={() => {props.onBlurCallback("tags", keywords, props.draftID)}}
/>
</FormControl>
{
diff --git a/src/Components/UploadPageComponents/Forms/NewTitle.js b/src/Components/UploadPageComponents/Forms/NewTitle.js
index 87430379..0a763dc0 100644
--- a/src/Components/UploadPageComponents/Forms/NewTitle.js
+++ b/src/Components/UploadPageComponents/Forms/NewTitle.js
@@ -21,13 +21,12 @@ import FormControl from '@material-ui/core/FormControl';
import {StyledTextField, StyledFormLabel} from '../StyledComponents.js'
import FormHelperText from '@material-ui/core/FormHelperText';
-import {SendInfo} from '../SendInfo.js'
function NewTitle (props) {
const [objTitle, setFormValue] = useState({
error : false,
- value : ""
+ value : props.initialValue ? props.initialValue : ""
})
const handleChangeTitle = (e) => {
let userInput = e.target.value
@@ -39,7 +38,7 @@ function NewTitle (props) {
}
return (
- <FormControl required="true" style={{width : "100%", height : "100px"}}>
+ <FormControl required={true} style={{width : "100%", height : "100px"}}>
<StyledFormLabel component="legend" style={{fontSize : "14px", marginBottom : "10px"}}>
<b>TÃtulo do Recurso</b>
</StyledFormLabel>
@@ -52,7 +51,7 @@ function NewTitle (props) {
helperText = {objTitle.value.length + "/100"}
error = {objTitle.error}
fullWidth
- onBlur={() => {SendInfo(props.draftID, "name", objTitle.value)}}
+ onBlur={() => {props.onBlurCallback("name", objTitle.value, props.draftID)}}
/>
{objTitle.value.length === 0 && objTitle.error &&
<FormHelperText style={{fontSize : "14px", position : "relative", top : "-26px"}}>Faltou definir um tÃtulo.</FormHelperText>}
diff --git a/src/Components/UploadPageComponents/Forms/SobreORecurso.js b/src/Components/UploadPageComponents/Forms/SobreORecurso.js
index 2b3ed951..93ea7daa 100644
--- a/src/Components/UploadPageComponents/Forms/SobreORecurso.js
+++ b/src/Components/UploadPageComponents/Forms/SobreORecurso.js
@@ -19,17 +19,16 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
import React, {useState, memo, useEffect} from 'react'
import FormControl from '@material-ui/core/FormControl';
import {StyledTextField, StyledFormLabel} from '../StyledComponents.js'
-import {SendInfo} from '../SendInfo.js'
function SobreORecurso (props) {
- const [objDescription, setDescription] = useState('')
+ const [objDescription, setDescription] = useState(props.initialValue ? props.initialValue : '')
const handleSetDescription = (event) => {setDescription(event.target.value)}
return (
- <FormControl required style={{width : "100%"}}>
+ <FormControl style={{width : "100%"}}>
<StyledFormLabel component="legend" style={{fontSize : "14px", marginBottom : "10px"}}>
- <b>Descrição geral do Recurso</b>
+ <b>Descrição geral do Recurso</b> (Opcional)
</StyledFormLabel>
<StyledTextField
id = {"description-form"}
@@ -40,7 +39,7 @@ function SobreORecurso (props) {
fullWidth
multiline
rows={5}
- onBlur={() => {SendInfo(props.draftID, "description", objDescription)}}
+ onBlur={() => {props.onBlurCallback("description", objDescription, props.draftID)}}
/>
</FormControl>
)
diff --git a/src/Components/UploadPageComponents/Forms/TipoDeRecurso.js b/src/Components/UploadPageComponents/Forms/TipoDeRecurso.js
index 62c08cb6..55474c92 100644
--- a/src/Components/UploadPageComponents/Forms/TipoDeRecurso.js
+++ b/src/Components/UploadPageComponents/Forms/TipoDeRecurso.js
@@ -22,16 +22,15 @@ import {StyledRadio, ObjTypeBox, StyledFormLabel} from '../StyledComponents.js'
import RadioGroup from '@material-ui/core/RadioGroup';
import Radio from '@material-ui/core/Radio';
import FormControlLabel from '@material-ui/core/FormControlLabel';
-import {SendInfo} from '../SendInfo.js'
function TipoDeRecurso (props) {
- const [objTypeValue, chooseObjType] = useState(0)
+ const [objTypeValue, chooseObjType] = useState(props.initialValue ? props.initialValue : 0)
const handleChangeObjType = (event) => {chooseObjType(Number(event.target.value))}
return (
- <FormControl required="true" style={{width : "100%"}} onBlur={() => {SendInfo(props.draftID, "object_type_id", objTypeValue)}}>
+ <FormControl required={true} style={{width : "100%"}} onBlur={() => {props.onBlurCallback("object_type_id", objTypeValue, props.draftID)}}>
<StyledFormLabel component="legend" style={{fontSize : "14px", marginBottom : "10px"}}>
<b>Tipo de recurso</b>
</StyledFormLabel>
diff --git a/src/Components/UploadPageComponents/PartOne.js b/src/Components/UploadPageComponents/PartOne.js
index aad2b9bb..a85d309d 100644
--- a/src/Components/UploadPageComponents/PartOne.js
+++ b/src/Components/UploadPageComponents/PartOne.js
@@ -31,6 +31,7 @@ import Keywords from './Forms/Keywords.js'
import Autor from './Forms/Autor.js'
import TipoDeRecurso from './Forms/TipoDeRecurso.js'
import Idioma from './Forms/Idioma.js'
+import {SendInfo} from './SendInfo.js'
export default function PartOne (props) {
{/*const [subjects, setSubjects] = useState([])*/}
@@ -72,37 +73,37 @@ export default function PartOne (props) {
<form>
{/*------------------------------Titulo-----------------------------------------*/}
<Grid item xs={12} style={{paddingBottom : "40px"}}>
- <NewTitle draftID={props.draft.id}/>
+ <NewTitle draftID={props.draftID} onBlurCallback={SendInfo}/>
</Grid>
{/*------------------------------Sobre------------------------------------------*/}
<Grid item xs={12} style={{paddingBottom : "40px"}}>
- <SobreORecurso draftID={props.draft.id} />
+ <SobreORecurso draftID={props.draftID} onBlurCallback={SendInfo}/>
</Grid>
{/*------------------------------Palavras-chave------------------------------------------*/}
<Grid item xs={12} style={{paddingBottom : "40px"}}>
- <Keywords draftID={props.draft.id} />
+ <Keywords draftID={props.draftID} onBlurCallback={SendInfo}/>
</Grid>
{/*------------------------------Autor------------------------------------------*/}
<Grid item xs={12} style={{paddingBottom : "40px"}}>
- <Autor draftID={props.draft.id} />
+ <Autor draftID={props.draftID} onBlurCallback={SendInfo}/>
</Grid>
{/*------------------------------Tipo do Objeto------------------------------------------*/}
<Grid item xs={12} style={{paddingBottom : "40px"}}>
- <TipoDeRecurso objTypes={objTypes} draftID={props.draft.id} />
+ <TipoDeRecurso objTypes={objTypes} draftID={props.draftID} onBlurCallback={SendInfo}/>
</Grid>
{/*------------------------------Idioma------------------------------------------*/}
<Grid item xs={12} style={{paddingBottom : "40px"}}>
- <Idioma languages={languages} draftID={props.draft.id} />
+ <Idioma languages={languages} draftID={props.draftID} onBlurCallback={SendInfo}/>
</Grid>
{/*------------------------------Botoes------------------------------------------*/}
<Grid item xs={12}>
- <ButtonsDiv draftID={props.draft.id} stepperControl={props.stepperControl}/>
+ <ButtonsDiv draftID={props.draftID} stepperControl={props.stepperControl}/>
</Grid>
<Grid item xs={12} style={{marginTop : "20px"}}>
diff --git a/src/Components/UploadPageComponents/PartThree.js b/src/Components/UploadPageComponents/PartThree.js
index c080b74f..cce31c71 100644
--- a/src/Components/UploadPageComponents/PartThree.js
+++ b/src/Components/UploadPageComponents/PartThree.js
@@ -16,35 +16,438 @@ 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, useContext} from 'react'
+import {Store} from '../../Store.js'
import Grid from '@material-ui/core/Grid';
import styled from 'styled-components'
import axios from 'axios'
import {apiUrl, apiDomain} from '../../env';
import Stepper from './Stepper.js'
-
+import Rating from '@material-ui/lab/Rating';
+import StarBorderIcon from '@material-ui/icons/StarBorder';
+import LoadingSpinner from '../LoadingSpinner.js'
+import MoreIcon from '@material-ui/icons/More';
+import SdCardIcon from '@material-ui/icons/SdCard';
+import DateRangeIcon from '@material-ui/icons/DateRange';
+import UpdateIcon from '@material-ui/icons/Update';
+import TranslateIcon from '@material-ui/icons/Translate';
+import AssignmentIcon from '@material-ui/icons/Assignment';
+import { GrayButton, OrangeButton} from './StyledComponents';
+import ModalCancelar from './ModalCancelar.js'
+import {getAxiosConfig} from '../HelperFunctions/getAxiosConfig.js'
+import {getDefaultThumbnail} from '../HelperFunctions/getDefaultThumbnail'
export default function PartThree (props) {
+ var moment = require('moment')
+ const now = moment()
+ const {state} = useContext(Store)
+ const [loading, setLoading] = useState(true)
+
+ const [draft, setDraft] = useState({})
+ const [subjects, setSubjects] = useState('')
+ const [tags, setTags] = useState([])
+ const [description, setDescription] = useState('')
+ const [author, setAuthor] = useState('')
+
+ useEffect(() => {
+ if (state.currentUser.id !== "") {
+ const config = getAxiosConfig()
+ axios.get( (`${apiUrl}/learning_objects/` + props.draftID), config
+ ).then( (response) => {
+ console.log(response.data)
+ if ( response.headers['access-token'] ) {
+ sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token'])
+ }
+ setDraft(response.data)
+
+ /*extract subjects*/
+ setSubjects(response.data.subjects.map((subject)=>(subject.name)).join(', '))
+ setTags(response.data.tags.map(tag => tag.name))
+ setDescription(response.data.description)
+ setAuthor(response.data.author)
+ setLoading(false)
+ }, (error) => {console.log(error)})
+ }
+ }, [state.currentUser.id])
+
+ let windowWidth = window.innerWidth
+ const [modalCancelar, toggleModalCancelar] = useState(false)
+
+ const checkAccessLevel = (levelToCheck) => {
+ if (state.currentUser.id != '') {
+ return(checkUserRole(levelToCheck))
+ }
+ }
+
+ const checkUserRole = (userRole) => {
+ return(state.currentUser.roles.filter((role) => role.name === userRole).length > 0)
+ }
return (
- <StyledSessao1>
- <div className="cabecalho">
- <div className="feedback-upload">
- <Stepper activeStep={props.activeStep}/>}
- </div>
- </div>
- </StyledSessao1>
+ <React.Fragment>
+ {
+ !loading ?
+ (
+ <React.Fragment>
+ <ModalCancelar
+ open={modalCancelar}
+ handleClose={() => {toggleModalCancelar(false)}}
+ draftID={draft.id}
+ />
+ <Grid container style={{backgroundColor : "#f4f4f4"}}>
+ <Grid item xs={12}>
+ <StyledSessao1 className="page-content-preview">
+ <div className="cabecalho">
+ <div className="feedback-upload">
+ <Stepper activeStep={props.activeStep}/>
+ <h2>Quase lá, agora só falta publicar!</h2>
+ <span className="subtitle">Veja abaixo como o seu Recurso vai aparecer na Plataforma:</span>
+ </div>
+ </div>
+ </StyledSessao1>
+
+ <CaixaContainer>
+ <div>
+ <div className="cabecalho-objeto">
+ <img className="img-objeto"
+ src={draft.thumbnail === null ? getDefaultThumbnail(draft.object_type) : apiDomain + draft.thumbnail}/>
+ <div className="texto-objeto">
+ <h3>{draft.name}</h3>
+ <div className="rating-objeto">
+ <Rating
+ name="customized-empty"
+ value={draft.score}
+ precision={0.5}
+ style={{color:"#666"}}
+ emptyIcon={<StarBorderIcon fontSize="inherit" />}
+ />
+ </div>
+
+ <div className="relacionado">
+ Relacionado com: {subjects}
+ </div>
+
+ <div className="tags-objeto">
+ {tags.map((tag) => <div className="tag" key={tag}>{tag}</div>)}
+ </div>
+ </div>
+ </div>
+
+ <div className="sobre-objeto">
+ <Grid container>
+ <Grid item xs={windowWidth > 990 ? 7 : 12} className="left">
+ <div className="titulo">
+ Sobre o Recurso
+ </div>
+ <div className="sobre-conteudo">
+ <p className="descricao">{description}</p>
+ {
+ author !== '' &&
+ <p className="autor">
+ <b>Autoria:</b>
+ <br/>
+ {author}
+ </p>
+ }
+ </div>
+ </Grid>
+
+ <Grid item xs={windowWidth > 990 ? 4 : 12} className="right">
+ <span className="meta-objeto">
+ <MoreIcon/> <b>Tipo de mÃdia: </b>{draft.object_type}
+ </span>
+
+ <span className="meta-objeto">
+ <SdCardIcon/> <b>Tamanho: </b>
+ </span>
+
+ <span className="meta-objeto">
+ <DateRangeIcon/> <b>Enviado: </b>
+ {moment(draft.created_at).format("DD/MM/YYYY")}
+ </span>
+
+ <span className="meta-objeto">
+ <UpdateIcon/><b>Atualização: </b>
+ {moment(draft.updated_at).format("DD/MM/YYYY")}
+ </span>
+
+ {
+ draft.language.map( (language =>
+ <span className="meta-objeto" key={language.id}>
+ <TranslateIcon/><b>Idioma: </b>{language.name}
+ </span>
+ ))
+ }
+
+ <span className="meta-objeto">
+ <AssignmentIcon/><b>Licença: </b>{draft.license.name}
+ </span>
+ </Grid>
+ </Grid>
+ </div>
+ </div>
+ </CaixaContainer>
+ <Sessao3>
+ <form>
+ <Grid container>
+ <Grid item xs={windowWidth > 990 ? 6 : 12} style={{paddingRight : "15px", paddingLeft : "15px", textAlign: windowWidth > 990 ? 'right' : 'center'}}>
+ <span style={{fontSize : "14px"}}>
+ Para segurança da plataforma <br/> marque que você não é um robô
+ </span>
+ </Grid>
+
+ <Grid item xs={windowWidth > 990 ? 6 : 12} style={{paddingRight : "15px", paddingLeft : "15px", textAlign: windowWidth > 990 ? 'left' : 'center'}}>
+ <span>Recaptcha</span>
+ </Grid>
+ <Grid item xs={12} style={{paddingRight : "15px", paddingLeft : "15px", marginTop : "30px", textAlign : 'center'}}>
+ <GrayButton onClick={() => {props.stepperControl(-1)}}>VOLTAR</GrayButton>
+ <GrayButton onClick={() => {toggleModalCancelar(true)}}>CANCELAR</GrayButton>
+ {
+ checkAccessLevel("partner") ?
+ (
+ <OrangeButton onClick={props.handlePost}>PUBLICAR RECURSO</OrangeButton>
+ )
+ :
+ (
+ <OrangeButton onClick={props.handleSubmit}>SUBMETER RECURSO</OrangeButton>
+ )
+
+ }
+ </Grid>
+ </Grid>
+ </form>
+ </Sessao3>
+ </Grid>
+ </Grid>
+ </React.Fragment>
+ )
+ :
+ (
+ <LoadingSpinner text="CARREGANDO"/>
+ )
+ }
+ </React.Fragment>
)
}
-const StyledSessao1 = styled.div`
- .page-content-preview {
- color : #fff;
- background-color : #00bcd4;
- float : none;
- height : 400px;
- text-align : center;
+const Sessao3 = styled.div`
+ position : relative;
+ top : -120px;
+ padding-right :15px;
+ padding-left :15px;
+ margin-right : auto;
+ margin-left : auto;
+ @media screen and (min-width: 768px) {
+ width : 750px;
+ }
+ @media screen and (min-width: 992px) {
+ width : 970px;
+ }
+ @media screen and (min-width: 1200px) {
+ width : 970px;
}
+ color : #666;
+ background-color : #f4f4f4;
+
+`
+
+const CaixaContainer = styled.div`
+ background-color : rgba(238,238,238,.5);
+ border-radius : 5px;
+ position : relative;
+ top : -145px;
+ padding : 10px;
+
+ margin-right : auto;
+ margin-left : auto;
+ @media screen and (min-width: 768px) {
+ width : 750px;
+ }
+ @media screen and (min-width: 992px) {
+ width : 970px;
+ }
+ @media screen and (min-width: 1200px) {
+ width : 970px;
+ }
+
+
+ .cabecalho-objeto {
+ background-color:#fff;
+ box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+ padding: 0;
+ margin-top: 30px;
+ margin-bottom: 30px;
+ position: relative;
+ min-height: 100px;
+ margin-top: 0;
+ margin-bottom: 10px;
+ color : #666;
+
+ .img-objeto {
+ background-color:#e5e5e5;
+ height: 270px;
+ width: 400px;
+ float: left;
+ padding: 0;
+ }
+
+ .texto-objeto {
+ padding: 20px 20px 0 20px;
+ height: content;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -ms-flex-wrap: nowrap;
+ flex-wrap: nowrap;
+ -webkit-box-pack: start;
+ -ms-flex-pack: start;
+ justify-content: flex-start;
+ -ms-flex-line-pack: center;
+ align-content: center;
+ -webkit-box-align: start;
+ -ms-flex-align: start;
+ align-items: flex-start;
+
+ h3 {
+ font-size: 26px;
+ font-weight: 400;
+ margin: 0;
+ padding-bottom: 15px;
+ }
+
+ .rating-objeto {
+ margin : 0;
+ display : inline-flex;
+ padding-bottom : 10px;
+ }
+
+ .relacionado {
+ font-weight : 500;
+ font-size : 13px;
+ }
+
+ .tags-objeto {
+ max-height: 54px;
+ font-size: .8em;
+ overflow: hidden;
+ clear: both;
+ display: -webkit-inline-box;
+ display: -ms-inline-flexbox;
+ display: inline-flex;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+
+ .tag {
+ display: -webkit-inline-box;
+ display: -ms-inline-flexbox;
+ display: inline-flex;
+ margin-right: 3px;
+ background-color: #e5e5e5;
+ padding: 3px 7px;
+ border-radius: 15px;
+ line-height: 18px;
+ color: #666;
+ margin-bottom: 3px;
+ }
+ }
+ }
+ }
+
+ .sobre-objeto {
+ margin-top : 0;
+ margin-bottom : 0;
+ min-height : 275px;
+ display : flex;
+ background-color: #fff;
+ box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+ padding: 0;
+ position: relative;
+ min-height: 500px;
+
+ .left {
+ @media screen and (min-width : 990px) {
+ margin-left : 4% !important;
+ margin-top : 4% !important;
+ }
+
+ @media screen and (max-width : 989px) {
+ margin : 0;
+ padding : 20px;
+ padding-bottom : 0;
+ }
+
+ .titulo {
+ margin-top: 2% !important;
+ margin-bottom: 10px;
+ font-family: 'Roboto Light','Roboto Regular',Roboto;
+ font-weight: 300;
+ font-style: normal;
+ color:#666;
+ font-size: 1.857em;
+ }
+
+ .sobre-conteudo {
+ flex : 1;
+ color : #666;
+ font-size : 14px !important;
+
+ .descricao {
+ text-align: justify;
+ margin-bottom: 20px;
+ margin-top: 20px;
+ }
+
+ .autor {
+ margin : 0 0 10px !important;
+ }
+ }
+ }
+
+ .right {
+ margin-top : 4% !important;
+ border-left: 1px solid #e5e5e5;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-pack: start;
+ -ms-flex-pack: start;
+ justify-content: flex-start;
+ padding: 20px;
+ position : relative;
+ margin-bottom : 20px;
+
+ .meta-objeto {
+ position: relative;
+ width: 100%;
+ font-size: 14px;
+ color: #666;
+ margin-bottom: 20px;
+ display : inline-block;
+ }
+
+ .MuiSvgIcon-root {
+ vertical-align : middle !important;
+ margin-right : 15px !important;
+ }
+ }
+ }
+}
+`
+
+const StyledSessao1 = styled.div`
+ color : #fff;
+ background-color : #00bcd4;
+ float : none;
+ height : 300px;
+ text-align : center;
+ padding-top : 48px;
+ padding-bottom : 48px;
+ margin-bottom : 30px;
.cabecalho {
display : flex;
@@ -58,7 +461,19 @@ const StyledSessao1 = styled.div`
justify-content : center;
text-align : center
margin-top : 20px;
- width : 65%;
+ width : 55%;
+ }
+
+ h2 {
+ margint-top : 0;
+ font-size : 26px;
+ font-weight : lighter;
+ margin-bottom : 10px;
+ }
+
+ .subtitle {
+ font-size : 16px;
+
}
}
`
diff --git a/src/Components/UploadPageComponents/PartTwo.js b/src/Components/UploadPageComponents/PartTwo.js
index a1f446af..f11efe36 100644
--- a/src/Components/UploadPageComponents/PartTwo.js
+++ b/src/Components/UploadPageComponents/PartTwo.js
@@ -30,9 +30,21 @@ import FormControl from '@material-ui/core/FormControl';
import {StyledFormLabel} from './StyledComponents.js'
import ButtonsDiv from './ButtonsDiv.js'
import SubjectsAndThemes from './PartTwoComponents/SubjectsAndThemes.js'
+import {SendInfo} from './SendInfo.js'
+import EditThumbnail from './PartTwoComponents/EditThumbnail.js'
+import {getAxiosConfig} from '../HelperFunctions/getAxiosConfig'
+import DisplayThumbnail from './PartTwoComponents/DisplayThumbnail.js'
+import CustomCircularProgress from './PartTwoComponents/CustomCircularProgress';
+
+function LoadingDiv () {
+ return (
+ <div style={{width : "100%", display : "flex", alignItems : "center", justifyContent : "center", color : "#666"}}>
+ <CustomCircularProgress/> CARREGANDO IMAGEM
+ </div>
+ )
+}
export default function PartTwo (props) {
- const [thumbnail, setThumbnail] = useState('')
const [eduStages, setEduStages] = useState([])
const [subjects, setSubjects] = useState([])
const [themes, setThemes] = useState([])
@@ -62,20 +74,71 @@ export default function PartTwo (props) {
setChecked(event.target.checked)
}
+ const [thumbnail, setThumbnail] = useState('')
+ const [tempUrl, setTempUrl] = useState('')
+
+ const acceptFile = (file) => {
+ const objectURL = URL.createObjectURL(file)
+ console.log(file)
+ setTempUrl(objectURL)
+ setThumbnailStage('editing')
+ }
+ const updateThumb = (newThumbnail) => {
+ setThumbnail(newThumbnail)
+ console.log(thumbnail)
+
+ }
+ const finalizeThumb = () => {
+ setThumbnailStage('uploading')
+ let config = getAxiosConfig()
+ let fdThumb = new FormData()
+ fdThumb.set('learning_object[thumbnail]', thumbnail)
+ axios.put((`${apiUrl}/learning_objects/` + props.draftID), fdThumb, config).then(
+ (response) => {
+ setThumbnailStage('done')
+ console.log(response.data)
+ if ( response.headers['access-token'] ) {
+ sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token'])
+ }
+ },
+ (error) => {console.log(error)}
+ )
+ }
+
+ const [thumbnailStage, setThumbnailStage] = useState('default')
+
+ const chooseRenderStageThumbnail = () => {
+ switch(thumbnailStage) {
+ case 'uploading':
+ return (<LoadingDiv/>)
+ break;
+ case 'done':
+ return (<DisplayThumbnail acceptFile={acceptFile} thumbnail={thumbnail}/>)
+ break;
+ case 'editing':
+ return (<EditThumbnail finalizeThumb={finalizeThumb} tempImgURL={tempUrl} updateThumb={updateThumb}/>)
+ break;
+ default :
+ return (<DragAndDropThumbnail acceptFile={acceptFile}/>)
+ break;
+
+ }
+ }
+
return (
<form style={{width : "100%"}}>
<Grid item xs={12} style={{paddingBottom : "40px"}}>
- <DragAndDropThumbnail/>
+ {chooseRenderStageThumbnail()}
</Grid>
<Grid item xs={12} style={{paddingBottom : "40px"}}>
- <EducationalStage draftID={props.draftID} eduStages={eduStages}/>
+ <EducationalStage draftID={props.draftID} eduStages={eduStages} onBlurCallback={SendInfo}/>
</Grid>
- <SubjectsAndThemes subjects={subjects} themes={themes} />
+ <SubjectsAndThemes draftID={props.draftID} subjects={subjects} themes={themes} onUploadPage={true} onBlurCallback={SendInfo}/>
<Grid item xs={12} style={{paddingBottom : "40px"}}>
- <Licenca draftID={props.draftID}/>
+ <Licenca draftID={props.draftID} onBlurCallback={SendInfo}/>
</Grid>
<Grid item xs={12} style={{paddingBottom : "40px"}}>
@@ -89,7 +152,7 @@ export default function PartTwo (props) {
</Grid>
<Grid item xs={12}>
- <ButtonsDiv draftID={props.draft.id} stepperControl={props.stepperControl} onPartTwo={true}/>
+ <ButtonsDiv draftID={props.draftID} stepperControl={props.stepperControl} onPartTwo={true}/>
</Grid>
<Grid item xs={12} style={{marginTop : "20px"}}>
diff --git a/src/Components/UploadPageComponents/PartTwoComponents/CustomCircularProgress.js b/src/Components/UploadPageComponents/PartTwoComponents/CustomCircularProgress.js
new file mode 100644
index 00000000..617a8e70
--- /dev/null
+++ b/src/Components/UploadPageComponents/PartTwoComponents/CustomCircularProgress.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import CircularProgress from '@material-ui/core/CircularProgress';
+
+const useStyles = makeStyles((theme) => ({
+ root: {
+ color : "#666",
+ },
+}));
+
+export default function CustomCircularProgress () {
+ const classes = useStyles();
+
+ return (
+ <CircularProgress className={classes.root}/>
+ );
+}
diff --git a/src/Components/UploadPageComponents/PartTwoComponents/DisplayThumbnail.js b/src/Components/UploadPageComponents/PartTwoComponents/DisplayThumbnail.js
new file mode 100644
index 00000000..be2920f8
--- /dev/null
+++ b/src/Components/UploadPageComponents/PartTwoComponents/DisplayThumbnail.js
@@ -0,0 +1,100 @@
+import React from 'react'
+import {StyledFormLabel} from '../StyledComponents.js'
+import AddAPhotoIcon from '@material-ui/icons/AddAPhoto';
+import Grid from '@material-ui/core/Grid';
+import styled from 'styled-components'
+
+export default function DisplayThumbnail (props) {
+ let windowWidth = window.innerWidth
+
+ const handleUpload = (e, selectorFiles : FileList) => {
+ e.preventDefault();
+ props.acceptFile(selectorFiles[0])
+ }
+
+ return (
+ <React.Fragment>
+ <StyledFormLabel component="legend" style={{fontSize : "14px", marginBottom : "10px"}}>
+ <b>Editando Imagem</b> <span style={{color : "#a5a5a5"}}>(Deixe seu recurso completo, para que todos o entendam melhor.)</span>
+ </StyledFormLabel>
+ <ImagemCarregada container>
+ <Grid item xs={windowWidth > 990 ? 6 : 12}>
+ <div className="img-preview">
+ <img src={props.thumbnail}/>
+ <div className="alterar-imagem">
+ <input type="file" onChange = {(e) => handleUpload(e, e.target.files)} id="upload-file-thumbnail" style={{display : "none"}}
+ />
+ <label htmlFor="upload-file-thumbnail" style={{width : "inherit", cursor : "pointer"}}>
+ <div className="interacoes">
+ SUBSTITUIR <AddAPhotoIcon/>
+ </div>
+ </label>
+ </div>
+ </div>
+ </Grid>
+ <Grid item xs={windowWidth > 990 ? 6 : 12}>
+ <div className="aviso-imagem-carregada">
+ Sua imagem foi enviada, porém pode ser que demore alguns minutos até nosso servidor atualiza-la na página do recurso.
+ </div>
+ </Grid>
+ </ImagemCarregada>
+ </React.Fragment>
+ )
+}
+
+const ImagemCarregada = styled(Grid)`
+ .aviso-imagem-carregada {
+ color :#a5a5a5;
+ font-size : 12px;
+ font-weight : 500;
+ text-align : justify;
+ float : right;
+ margin-right : 20px;
+
+ @media screen and (min-width : 990px) {
+ padding-top : 20px;
+ padding-left : 10px;
+ }
+ }
+
+ .img-preview {
+ display : block;
+ max-height : 500px;
+ overflow : hidden;
+ border-radius : 10px;
+ position : relative;
+
+ .alterar-imagem{
+ position : absolute;
+ bottom : 0;
+ display : flex;
+ flex-direction : row;
+ width : 100%;
+ justify-content : flex-end;
+ background-color : rgba(0,0,0,.5);
+ height : 50px;
+
+ .interacoes {
+ cursor : pointer;
+ display : flex;
+ justify-content : flex-end;
+ align-items : flex-end;
+ height : 100%;
+ padding : 10px;
+ color : #fff;
+ font-size : 14px;
+ .MuiSvgIcon-root {
+ vertical-align : middle !important;
+ }
+ }
+ }
+
+ img {
+ height : 100%;
+ width : 100%;
+ object-fit : cover;
+ border-radius : 10px;
+ border : 0;
+ }
+ }
+`
diff --git a/src/Components/UploadPageComponents/PartTwoComponents/DragAndDropThumbnail.js b/src/Components/UploadPageComponents/PartTwoComponents/DragAndDropThumbnail.js
index d062d1ff..49546df0 100644
--- a/src/Components/UploadPageComponents/PartTwoComponents/DragAndDropThumbnail.js
+++ b/src/Components/UploadPageComponents/PartTwoComponents/DragAndDropThumbnail.js
@@ -53,6 +53,7 @@ export default function DragAndDropThumbnail (props) {
const handleDrop = e => {
e.preventDefault();
e.stopPropagation();
+ console.log(files)
let files = [...e.dataTransfer.files]
if (files && files.length > 0) {
props.acceptFile(files)
@@ -79,11 +80,11 @@ export default function DragAndDropThumbnail (props) {
<input
type="file"
onChange = {(e) => handleUpload(e, e.target.files)}
- id="upload-file"
+ id="upload-file-thumbnail"
style={{display : "none"}}
/>
<BlueButton>
- <label htmlFor="upload-file" style={{width : "inherit", cursor : "pointer"}}>
+ <label htmlFor="upload-file-thumbnail" style={{width : "inherit", cursor : "pointer"}}>
ESCOLHER IMAGEM
</label>
</BlueButton>
diff --git a/src/Components/UploadPageComponents/PartTwoComponents/EditThumbnail.js b/src/Components/UploadPageComponents/PartTwoComponents/EditThumbnail.js
new file mode 100644
index 00000000..35be2ce5
--- /dev/null
+++ b/src/Components/UploadPageComponents/PartTwoComponents/EditThumbnail.js
@@ -0,0 +1,37 @@
+import React, {useState} from 'react'
+import {StyledFormLabel} from '../StyledComponents.js'
+import Cropper from '../../Cropper'
+import { Button } from '@material-ui/core';
+import styled from 'styled-components'
+
+export default function EditThumbnail (props) {
+ const [crop] = useState({
+ unit: "%" ,
+ width : 100,
+ aspect: 9/3
+ });
+ return (
+ <>
+ <StyledFormLabel component="legend" style={{fontSize : "14px", marginBottom : "10px"}}>
+ <b>Editando Imagem</b> <span style={{color : "#a5a5a5"}}>(Deixe seu recurso completo, para que todos o entendam melhor.)</span>
+ </StyledFormLabel>
+ <div style={{display : "flex", alignItems : "center", flexDirection : "column"}}>
+ <div style={{maxWidth : "500px", maxHeight : "300px", padding : "20px"}}>
+ <Cropper src={props.tempImgURL} crop={crop} circularCrop={false} update={props.updateThumb}/>
+ </div>
+ <StyledButton onClick={() => {props.finalizeThumb()}}>SELECIONAR IMAGEM</StyledButton>
+ </div>
+ </>
+
+ )
+}
+
+const StyledButton = styled(Button)`
+ &:hover {
+ background-color : rgba(158,158,158,0.2) !important;
+ }
+ background-color : #fff !important;
+ border : solid 1px #00bcd4 !important;
+ font-weight : 600 !important;
+ color : #00bcd4 !important;
+`
diff --git a/src/Components/UploadPageComponents/PartTwoComponents/EducationalStage.js b/src/Components/UploadPageComponents/PartTwoComponents/EducationalStage.js
index 64f9873c..0935c3aa 100644
--- a/src/Components/UploadPageComponents/PartTwoComponents/EducationalStage.js
+++ b/src/Components/UploadPageComponents/PartTwoComponents/EducationalStage.js
@@ -23,11 +23,10 @@ import Checkbox from '@material-ui/core/Checkbox';
import FormGroup from '@material-ui/core/FormGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import styled from 'styled-components'
-import {SendInfo} from '../SendInfo.js'
export default function EducationalStage (props) {
- const [selected, setSelect] = useState([])
+ const [selected, setSelect] = useState(props.initialValue ? props.initialValue : [])
const handleSet = (event) => {
let newValue = event.target.value
@@ -44,7 +43,7 @@ export default function EducationalStage (props) {
<StyledFormLabel component="legend" style={{fontSize : "14px", marginBottom : "10px"}}>
<b>NÃvel de ensino</b> <span style={{color : "#a5a5a5"}}>(Selecione uma ou mais opções)</span>
</StyledFormLabel>
- <StyledFormGroup onBlur={() => {SendInfo(props.draftID, "educational_stages", selected)}}>
+ <StyledFormGroup onBlur={() => {props.onBlurCallback("educational_stages", selected, props.draftID)}}>
{
props.eduStages.map(stage =>
<FormControlLabel key={stage.id} label={stage.name}
diff --git a/src/Components/UploadPageComponents/PartTwoComponents/Licenca.js b/src/Components/UploadPageComponents/PartTwoComponents/Licenca.js
index ca513b45..56454430 100644
--- a/src/Components/UploadPageComponents/PartTwoComponents/Licenca.js
+++ b/src/Components/UploadPageComponents/PartTwoComponents/Licenca.js
@@ -26,7 +26,6 @@ import {GetSubjectIconByName} from '../GetIconByName.js'
import FormControlLabel from '@material-ui/core/FormControlLabel';
import axios from 'axios'
import {apiUrl, apiDomain} from '../../../env';
-import {SendInfo} from '../SendInfo.js'
function Licenca (props) {
@@ -42,7 +41,7 @@ function Licenca (props) {
{name : "CC BY-NC-ND 3.0 BR", description : "(Atribuição-NãoComercial-SemDerivações 3.0 Brasil. Esta licença permite compartilhar, copiar e redistribuir o material em qualquer suporte ou formato)", id : 12}
]
- const [value, setValue] = useState(-1)
+ const [value, setValue] = useState(props.initialValue ? props.initialValue : -1)
const handleChange = (event) => {setValue(Number(event.target.value))}
return (
@@ -50,7 +49,7 @@ function Licenca (props) {
<StyledFormLabel component="legend" style={{fontSize : "14px", marginBottom : "10px"}}>
<b>Licença do Uso do Conteúdo</b> <a href="https://br.creativecommons.org/licencas/" style={{color : "#ff7f00", textDecoration : "underline"}}>Saiba mais</a>
</StyledFormLabel>
- <StyledRadioGroup aria-label="Tipo de Recurso" name="Tipo de Recurso" row value={value} onChange={handleChange} style={{justifyContent : "center"}} onBlur={() => {SendInfo(props.draftID, "license_id", value)}}>
+ <StyledRadioGroup aria-label="Tipo de Recurso" name="Tipo de Recurso" row value={value} onChange={handleChange} style={{justifyContent : "center"}} onBlur={() => {props.onBlurCallback("license_id", value, props.draftID)}}>
{
options.map( (option) =>
<FormControlLabel key={option.id} value={option.id}
diff --git a/src/Components/UploadPageComponents/PartTwoComponents/SubjectsAndThemes.js b/src/Components/UploadPageComponents/PartTwoComponents/SubjectsAndThemes.js
index c8063b65..aa50529d 100644
--- a/src/Components/UploadPageComponents/PartTwoComponents/SubjectsAndThemes.js
+++ b/src/Components/UploadPageComponents/PartTwoComponents/SubjectsAndThemes.js
@@ -26,7 +26,6 @@ import FormControlLabel from '@material-ui/core/FormControlLabel';
import axios from 'axios'
import {apiUrl, apiDomain} from '../../../env';
import Checkbox from '@material-ui/core/Checkbox';
-import {SendInfo} from '../SendInfo.js'
import Grid from '@material-ui/core/Grid';
const useStyles = makeStyles({
@@ -65,7 +64,7 @@ function StyledCheckbox (props) {
function SubjectsAndThemes (props) {
- const [value, setValue] = useState([])
+ const [value, setValue] = useState(props.initialValue ? props.initialValue : [])
const handleChange = (event) => {
const newValue = event.target.value
@@ -81,11 +80,11 @@ function SubjectsAndThemes (props) {
return (
<React.Fragment>
<Grid item xs={12} style={{paddingBottom : "40px"}}>
- <FormControl required="true" style={{width : "100%"}}>
+ <FormControl required style={{width : "100%"}}>
<StyledFormLabel component="legend" style={{fontSize : "14px", marginBottom : "10px"}}>
<b>Componente curricular</b> <span>(Selecione uma ou mais opções)</span>
</StyledFormLabel>
- <FormGroup row style={{justifyContent : "center"}} onBlur={() => {SendInfo(props.draftID, "subjects", value)}}>
+ <FormGroup row style={{justifyContent : "center"}} onBlur={() => {props.onBlurCallback("subjects", value, props.draftID)}}>
{
props.subjects.map( (subject) =>
<>
@@ -105,12 +104,15 @@ function SubjectsAndThemes (props) {
</FormControl>
</Grid>
+ {
+
+ props.onUploadPage &&
<Grid item xs={12} style={{paddingBottom : "40px"}}>
<FormControl style={{width : "100%"}}>
<StyledFormLabel component="legend" style={{fontSize : "14px", marginBottom : "10px"}}>
<b>Outras Temáticas</b>
</StyledFormLabel>
- <FormGroup aria-label="Tipo de Recurso" name="Tipo de Recurso" row style={{justifyContent : "center"}} onBlur={() => {SendInfo(props.draftID, "subjects", value)}}>
+ <FormGroup aria-label="Tipo de Recurso" name="Tipo de Recurso" row style={{justifyContent : "center"}} onBlur={() => {props.onBlurCallback("subjects", value, props.draftID)}}>
{
props.themes.map( (theme) =>
<FormControlLabel key={theme.id} value={theme.id}
@@ -129,6 +131,7 @@ function SubjectsAndThemes (props) {
</FormGroup>
</FormControl>
</Grid>
+ }
</React.Fragment>
)
}
diff --git a/src/Components/UploadPageComponents/SendInfo.js b/src/Components/UploadPageComponents/SendInfo.js
index f22c785c..99d6a2ad 100644
--- a/src/Components/UploadPageComponents/SendInfo.js
+++ b/src/Components/UploadPageComponents/SendInfo.js
@@ -3,7 +3,9 @@ import {Store} from '../../Store.js'
import axios from 'axios'
import {apiUrl} from '../../env';
-export function SendInfo (draftID, fieldName, payload) {
+
+export function SendInfo (fieldName, payload, draftID) {
+ console.log('fieldName', fieldName, 'payload', payload, 'draftID', draftID)
const key = fieldName
let value = payload
if (key === "tags") {
@@ -12,7 +14,6 @@ export function SendInfo (draftID, fieldName, payload) {
)
}
-
const putObject = {
"learning_object" : {
"id" : draftID
@@ -21,17 +22,21 @@ export function SendInfo (draftID, fieldName, payload) {
putObject.learning_object[key] = value
console.log(putObject)
-
-}
-
-{/*let config = {
- headers : {
- 'Accept': 'application/json',
- 'Content-Type': 'application/json',
+ let config = {
+ headers : {
+ 'Accept': 'application/json',
+ 'Content-Type': 'application/json',
+ }
}
+ config.headers["Access-Token"] = sessionStorage.getItem('@portalmec/accessToken');
+ config.headers.Client = sessionStorage.getItem('@portalmec/clientToken')
+ config.headers.Uid = sessionStorage.getItem('@portalmec/uid')
+ axios.put((`${apiUrl}/learning_objects/` + draftID), putObject, config).
+ then( (response) => {
+ if ( response.headers['access-token'] ) {
+ sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token'])
+ }
+ console.log(response)
+ }, (error) => {console.log(error)})
+
}
-config.headers["Access-Token"] = sessionStorage.getItem('@portalmec/accessToken');
-config.headers.Client = sessionStorage.getItem('@portalmec/clientToken')
-config.headers.Uid = sessionStorage.getItem('@portalmec/uid')
-axios.put((`${apiUrl}/learning_objects/` + draftID), putObject, config).
-then( (response) => {console.log(response)}, (error) => {console.log(error)})*/}
diff --git a/src/Components/UploadPageComponents/StyledComponents.js b/src/Components/UploadPageComponents/StyledComponents.js
index 71294e88..3efb83bc 100644
--- a/src/Components/UploadPageComponents/StyledComponents.js
+++ b/src/Components/UploadPageComponents/StyledComponents.js
@@ -87,7 +87,8 @@ export const GrayButton = styled(Button)`
background-color: transparent;
min-width : 88px !important;
height : 36px !important;
-
+ margin-left : 8px !important;
+ margin-right : 8px !important;
.icon {
vertical-align : middle !important;
font-weight : normal !important;
@@ -445,6 +446,8 @@ export const StyledTextField = styled(TextField)`
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;
`
export const GreyButton = styled(Button)`
@@ -473,3 +476,25 @@ export const StyledTextField = styled(TextField)`
padding : 6px 16px !important;
}
`
+
+ export const Background = styled.div `
+ padding-top : 40px;
+ background-color : #f4f4f4;
+ color : #666;
+
+ .container {
+ padding : 0;
+ margin-right : auto;
+ margin-left : auto;
+
+ @media screen and (min-width: 768px) {
+ width : 750px;
+ }
+ @media screen and (min-width: 992px) {
+ width : 970px;
+ }
+ @media screen and (min-width: 1200px) {
+ width : 1170px;
+ }
+ }
+ `
diff --git a/src/Pages/EditLearningObjectPage.js b/src/Pages/EditLearningObjectPage.js
new file mode 100644
index 00000000..96fed1f7
--- /dev/null
+++ b/src/Pages/EditLearningObjectPage.js
@@ -0,0 +1,278 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
+
+import React, {useState, useEffect, useContext} from 'react'
+import {Store} from '../Store.js'
+import styled from 'styled-components'
+import axios from 'axios'
+import {apiUrl, apiDomain} from '../env';
+import Grid from '@material-ui/core/Grid';
+import UploadFileWrapper from '../Components/UploadPageComponents/UploadFileWrapper.js'
+import Alert from '../Components/Alert.js';
+import Snackbar from '@material-ui/core/Snackbar';
+import {GreyButton, OrangeButton, InfoBox} from '../Components/UploadPageComponents/StyledComponents.js'
+import {getAxiosConfig} from '../Components/HelperFunctions/getAxiosConfig.js'
+import {Background} from '../Components/UploadPageComponents/StyledComponents'
+import LoadingSpinner from '../Components/LoadingSpinner'
+import NewTitle from '../Components/UploadPageComponents/Forms/NewTitle.js'
+import SobreORecurso from '../Components/UploadPageComponents/Forms/SobreORecurso.js'
+import Keywords from '../Components/UploadPageComponents/Forms/Keywords.js'
+import Autor from '../Components/UploadPageComponents/Forms/Autor.js'
+import TipoDeRecurso from '../Components/UploadPageComponents/Forms/TipoDeRecurso.js'
+import Idioma from '../Components/UploadPageComponents/Forms/Idioma.js'
+import EducationalStage from '../Components/UploadPageComponents/PartTwoComponents/EducationalStage.js'
+import SubjectsAndThemes from '../Components/UploadPageComponents/PartTwoComponents/SubjectsAndThemes.js'
+import Licenca from '../Components/UploadPageComponents/PartTwoComponents/Licenca.js'
+import { Button } from '@material-ui/core';
+
+export default function EditLearningObjectPage (props) {
+ const recursoId = props.match.params.recursoId
+ const {state} = useContext(Store)
+ const [learningObject, setLearningObject] = useState({})
+ const [objTypes, setObjTypes] = useState([])
+ const [languages, setLanguages] = useState([])
+ const [eduStages, setEduStages] = useState([])
+ const [subjects, setSubjects] = useState([])
+
+ useEffect( () => {
+ const config = getAxiosConfig()
+ axios.get( (`${apiUrl}/learning_objects/` + recursoId), config
+ ).then( (response) => {
+ console.log(response.data)
+ if ( response.headers['access-token'] ) {
+ sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token'])
+ }
+ setLearningObject(response.data)
+ setUpdatedInfo({...updatedInfo, ['id'] : response.data.id})
+ toggleLoading(false)
+ }, (error) => {console.log(error)}
+ )
+
+ axios.get(`${apiUrl}/object_types/`).then(
+ (response) => {
+ setObjTypes(response.data.sort((a, b) => (a.name) > (b.name) ? 1 : -1))
+ }, (error) => {
+ console.log(error)
+ }
+ )
+
+ axios.get(`${apiUrl}/languages/`).then(
+ (response) => {
+ setLanguages(response.data)
+ }, (error) => {
+ console.log(error)
+ }
+ )
+
+ axios.get(`${apiUrl}/educational_stages/`).then(
+ (response) => {
+ setEduStages(response.data)
+ },
+ (error) => {console.log(error)}
+ )
+
+ axios.get(`${apiUrl}/subjects/`).then(
+ (response) => {
+ setSubjects(response.data.sort((a,b) => a.name > b.name ? 1 : -1))
+ },
+ (error) => {console.log(error)}
+ )
+ }, [])
+
+ const [object, setObject] = useState()
+ const handleChooseObject = (obj) => {
+ setObject(obj)
+ }
+ const [loading, toggleLoading] = useState(true)
+
+ const [updatedInfo, setUpdatedInfo] = useState({})
+
+ const onBlurCallback = (fieldName, payload) => {
+ setUpdatedInfo({...updatedInfo, [fieldName] : payload})
+ }
+
+ const [snackbarOpen, toggleSnackbar] = useState(false)
+
+ const handleDelete = () => {
+ let config = getAxiosConfig()
+ axios.delete((`${apiUrl}/learning_objects/` + learningObject.id), config).then(
+ (response) => {
+ toggleSnackbar(true)
+ console.log(response.data)
+ if ( response.headers['access-token'] ) {
+ sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token'])
+ }
+ props.history.goBack()
+ },
+ (error) => {
+ console.log(error)
+ }
+ )
+ }
+
+ const handleUpdateInfo = () => {
+ let config = getAxiosConfig()
+ console.log(updatedInfo)
+ let payload = {
+ "learning_object" : updatedInfo
+ }
+ console.log(payload)
+ axios.put((`${apiUrl}/learning_objects/` + learningObject.id), payload, config).then(
+ (response) => {console.log(response.data); props.history.goBack()},
+ (error) => {console.log(error)}
+ )
+ }
+
+ const handlePost = () => {
+ let config = getAxiosConfig()
+ console.log(updatedInfo)
+ let payload = {
+ "learning_object" : updatedInfo
+ }
+ console.log(payload)
+ axios.post((`${apiUrl}/learning_objects/` + learningObject.id + '/publish'), payload, config).then(
+ (response) => {console.log(response.data); props.history.push('/recurso/' + learningObject.id)},
+ (error) => {console.log(error)}
+ )
+ }
+
+ return (
+ <React.Fragment>
+ <Snackbar open={snackbarOpen} autoHideDuration={1000} onClose={() => {toggleSnackbar(false)}}
+ anchorOrigin = {{ vertical:'top', horizontal:'right' }}
+ >
+ <Alert severity="info" style={{backgroundColor:"#00acc1"}}>
+ Recurso excluido com sucesso!
+ </Alert>
+ </Snackbar>
+ {
+ !loading ?
+ (
+ <Background>
+ <div className="container">
+ <Grid container spacing={2}>
+ <Grid item md={4} xs={12}>
+ <UploadFileWrapper submit={handleChooseObject}/>
+ </Grid>
+ <Grid item md={8} xs={12}>
+ <InfoBox>
+ <form>
+ <div className="cabecalho">
+ <h2>Editar Recurso</h2>
+ </div>
+
+ <Grid container style={{paddingLeft : "15px", paddingRight : "15px"}}>
+ <Grid item xs={12} style={{paddingBottom : "40px"}}>
+ <NewTitle draftID={learningObject.id} initialValue={learningObject.name}
+ onBlurCallback={onBlurCallback}
+ />
+ </Grid>
+
+ <Grid item xs={12} style={{paddingBottom : "40px"}}>
+ <SobreORecurso draftID={learningObject.id} initialValue={learningObject.description} onBlurCallback={onBlurCallback}/>
+ </Grid>
+
+ <Grid item xs={12} style={{paddingBottom : "40px"}}>
+ <Keywords draftID={learningObject.id} initialValue={learningObject.tags.map((tag) => tag.name)}
+ onBlurCallback={onBlurCallback}/>
+ </Grid>
+
+ <Grid item xs={12} style={{paddingBottom : "40px"}}>
+ <Autor draftID={learningObject.id}
+ initialValue={
+ learningObject.author === state.currentUser.username ?
+ 0 : 1
+ }
+ initialOutroAutor={
+ learningObject.author !== state.currentUser.username ?
+ learningObject.author : ''
+ }
+ onBlurCallback={onBlurCallback}
+ />
+ </Grid>
+
+ <Grid item xs={12} style={{paddingBottom : "40px"}}>
+ <TipoDeRecurso objTypes={objTypes} draftID={learningObject.id}
+ initialValue={learningObject.object_type !== null ? objTypes.filter((type) => type.name === learningObject.object_type)[0].id : null} onBlurCallback={onBlurCallback} />
+ </Grid>
+
+ <Grid item xs={12} style={{paddingBottom : "40px"}}>
+ <Idioma languages={languages} draftID={learningObject.id} initialValue={learningObject.language.map((language) => language.name)} initialIDValues={learningObject.language.map((language) => language.id)}
+ onBlurCallback={onBlurCallback} />
+ </Grid>
+
+ <Grid item xs={12} style={{paddingBottom : "40px"}}>
+ <EducationalStage draftID={learningObject.id} eduStages={eduStages} initialValue={learningObject.educational_stages.map((stage) => String(stage.id))} onBlurCallback={onBlurCallback}
+ />
+ </Grid>
+
+ <SubjectsAndThemes draftId={learningObject.id} subjects={subjects} initialValue={learningObject.subjects.map(subject => String(subject.id))} onBlurCallback={onBlurCallback}/>
+
+ <Grid item xs={12} style={{paddingBottom : "40px"}}>
+ <Licenca draftID={learningObject.id} initialValue={learningObject.license ? learningObject.license.id : null} onBlurCallback={onBlurCallback}/>
+ </Grid>
+
+ <Grid item xs={12}>
+ <div style={{display : "flex", justifyContent : "center"}}>
+ <GreyButton onClick={handleDelete}>
+ <span className="button-text">
+ EXCLUIR
+ </span>
+ </GreyButton>
+
+ <GreyButton onClick={props.history.goBack}>
+ <span className="button-text">
+ CANCELAR
+ </span>
+ </GreyButton>
+
+ <OrangeButton onClick={() => {handleUpdateInfo()}}>
+ SALVAR ALTERAÇÕES
+ </OrangeButton>
+
+ {
+ learningObject.state === "draft" &&
+ <OrangeButton onClick={() => {handlePost()}}>
+ PUBLICAR RECURSO
+ </OrangeButton>
+ }
+ </div>
+ </Grid>
+
+ <Grid item xs={12} style={{marginTop : "20px"}}>
+ <span style={{marginTop : "20px", fontWeight : "200", color : "#a5a5a5", paddingLeft : "10px"}}>
+ * Campos obrigatórios
+ </span>
+ </Grid>
+ </Grid>
+
+ </form>
+ </InfoBox>
+ </Grid>
+ </Grid>
+ </div>
+ </Background>
+ )
+ :
+ (
+ <LoadingSpinner text={"CARREGANDO"}/>
+ )
+ }
+ </React.Fragment>
+ )
+}
diff --git a/src/Pages/PublicationPermissionsPage.js b/src/Pages/PublicationPermissionsPage.js
index af32a875..78e85b85 100644
--- a/src/Pages/PublicationPermissionsPage.js
+++ b/src/Pages/PublicationPermissionsPage.js
@@ -31,7 +31,6 @@ const CardStyled = styled(Card)`
background-color: white;
max-width: 1700px;
padding-top: 52px;
- margin-left: 7em;
@media ${device.mobileM} {
width: 100%;
height: 100%;
@@ -47,9 +46,28 @@ const Styledspan = styled.span`
letter-spacing: 0.01em;
`;
-const Styledhr = styled.hr`
- color: #dadada;
-`;
+const Background = styled.div`
+ padding-top : 40px;
+ background-color : #f4f4f4;
+ color : #666;
+ padding-bottom : 40px;
+
+ .container {
+ padding : 0;
+ margin-right : auto;
+ margin-left : auto;
+
+ @media screen and (min-width: 768px) {
+ width : 750px;
+ }
+ @media screen and (min-width: 992px) {
+ width : 970px;
+ }
+ @media screen and (min-width: 1200px) {
+ width : 1170px;
+ }
+ }
+`
export default function PermissionsContainer(props) {
const { state, dispatch } = useContext(Store);
@@ -112,19 +130,13 @@ export default function PermissionsContainer(props) {
handleClose={closeModal}
disableBackdropClick={true}
/>
- <div
- style={{
- paddingTop: "5vh",
- paddingBottom: "5vh",
- backgroundColor: "#f4f4f4"
- }}
+ <Background
>
- <div style={{}}>
+ <div className="container">
<CardStyled variant="outlined">
<PublicationPermissionsContent handleRadios={handleRadios} />
- <Styledhr />
<CardActions
- style={{ justifyContent: "center", padding: "25px" }}
+ style={{ justifyContent: "center", padding: "25px", borderTop : "2px solide #dadada" }}
>
<div>
<div style={{ fontSize: "14px" }}>
@@ -178,7 +190,7 @@ export default function PermissionsContainer(props) {
</CardActions>
</CardStyled>
</div>
- </div>
+ </Background>
</>
]
) : (
diff --git a/src/Pages/ResourcePage.js b/src/Pages/ResourcePage.js
index 08ea2935..1b11710d 100644
--- a/src/Pages/ResourcePage.js
+++ b/src/Pages/ResourcePage.js
@@ -31,6 +31,10 @@ import Snackbar from '@material-ui/core/Snackbar';
import Alert from '../Components/Alert.js';
import VideoPlayer from '../Components/ResourcePageComponents/VideoPlayer.js'
import LoadingSpinner from '../Components/LoadingSpinner.js'
+import { makeStyles } from '@material-ui/core/styles';
+import AppBar from '@material-ui/core/AppBar';
+import ButtonAvaliarRecurso from '../Components/ButtonAvaliarRecurso'
+import ModalAvaliarRecurso from '../Components/ModalAvaliarRecurso'
function urlVerify (url) {
return (url ? url.indexOf("youtu") !== -1 || url.indexOf("vimeo") !== -1 : false)
@@ -77,6 +81,23 @@ export default function LearningObjectPage (props){
"O Recurso foi guardado na coleção!"
]
const [snackbarIndex, setIndex] = useState(0)
+ const classes = useStyles()
+ const [modalCuradoriaOpen, toggleModalCuradoria] = useState(false)
+ const handleModalCuradoria = (value) => {toggleModalCuradoria(value)}
+
+ const checkAccessLevel = (levelToCheck) => {
+ console.log(state.currentUser)
+ if (state.currentUser.id != '') {
+ return(checkUserRole(levelToCheck))
+ }
+ else {
+ return(false)
+ }
+ }
+
+ const checkUserRole = (userRole) => {
+ return(state.currentUser.roles.filter((role) => role.name === userRole).length > 0)
+ }
return (
<React.Fragment>
@@ -88,6 +109,8 @@ export default function LearningObjectPage (props){
</Alert>
</Snackbar>
+ <ModalAvaliarRecurso open={modalCuradoriaOpen} handleClose={() => {handleModalCuradoria(false)}}
+ title={recurso.name}/>
<Background>
{
carregando ?
@@ -96,6 +119,7 @@ export default function LearningObjectPage (props){
)
:
(
+ <>
<Grid container spacing={2}>
{
recurso.object_type === "VÃdeo" &&
@@ -200,6 +224,20 @@ export default function LearningObjectPage (props){
</Card>
</Grid>
</Grid>
+
+ {
+ recurso.state === 'submitted' && checkAccessLevel('curator') &&
+ <AppBar position="fixed" color="primary" className={classes.appBar}>
+ <StyledAppBarContainer>
+ <div className="container">
+ <div className="botoes">
+ <ButtonAvaliarRecurso callback={() => {handleModalCuradoria(true)}}/>
+ </div>
+ </div>
+ </StyledAppBarContainer>
+ </AppBar>
+ }
+ </>
)
}
@@ -208,6 +246,41 @@ export default function LearningObjectPage (props){
)
}
+const useStyles = makeStyles((theme) => ({
+ appBar: {
+ top: 'auto',
+ bottom: 0,
+ height : '100px',
+ backgroundColor : '#fff',
+ boxShadow : '0 1px 3px rgba(0,0,0,.52),0 1px 2px rgba(0,0,0,.24)'
+ },
+}));
+
+const StyledAppBarContainer = styled.div`
+ .container {
+ display : flex;
+ flex-direction : row;
+ justify-content : flex-start
+ margin-right : auto;
+ margin-left : auto;
+ @media screen and (min-width: 1200px) {
+ width : 1170px;
+ }
+ @media screen and (min-width: 992px) and (max-width : 1199px){
+ width : 970px;
+ }
+ @media screen and (min-width: 768px) and (max-width : 991px) {
+ width : 750px;
+ }
+
+ .botoes {
+ margin-top : 2em;
+ display : flex;
+ align-items : center;
+ }
+ }
+`
+
const Background = styled.div`
background-color : #f4f4f4;
color : #666;
diff --git a/src/Pages/TermsPage.js b/src/Pages/TermsPage.js
index e0b6dde2..47d1b67c 100644
--- a/src/Pages/TermsPage.js
+++ b/src/Pages/TermsPage.js
@@ -30,7 +30,6 @@ const CardStyled = styled(Card)`
background-color : white;
max-width: 1700px;
padding-top: 52px;
- margin-left:7em;
@media ${device.mobileM} {
width : 100%;
height : 100%;
@@ -55,8 +54,27 @@ const StyledSpanContinuar = styled.span`
color: #fff;
`
-const Styledhr = styled.hr`
- color: #dadada;
+const Background = styled.div`
+ padding-top : 40px;
+ background-color : #f4f4f4;
+ color : #666;
+ padding-bottom : 40px;
+
+ .container {
+ padding : 0;
+ margin-right : auto;
+ margin-left : auto;
+
+ @media screen and (min-width: 768px) {
+ width : 750px;
+ }
+ @media screen and (min-width: 992px) {
+ width : 970px;
+ }
+ @media screen and (min-width: 1200px) {
+ width : 1170px;
+ }
+ }
`
export default function TermsContainer (props) {
@@ -76,7 +94,7 @@ export default function TermsContainer (props) {
userAgreement: true
})
- if (props.location.state.redirectedFromModal) {
+ if (props.cameFromPublishButton) {
props.history.push('/professor')
}else {
props.history.push('/permission')
@@ -85,12 +103,11 @@ export default function TermsContainer (props) {
}
return (
- <div style={{paddingTop:"5vh", paddingBottom:"5vh", backgroundColor :"#f4f4f4"}}>
- <div>
+ <Background>
+ <div className="container">
<CardStyled variant="outlined">
<TermsPageContent/>
- <Styledhr/>
- <CardActions style={{justifyContent:"center", padding:"25px"}}>
+ <CardActions style={{justifyContent:"center", padding:"25px", borderTop : "2px solid #dadada"}}>
<div>
<div style={{fontSize:"14px"}}>
<LabeledCheckbox label={<Styledspan>Li e concordo com os termos de uso da Plataforma Integrada de RED do MEC</Styledspan>} handleChange={handleChecked}/>
@@ -114,6 +131,6 @@ export default function TermsContainer (props) {
</CardActions>
</CardStyled>
</div>
- </div>
+ </Background>
)
}
diff --git a/src/Pages/UploadPage.js b/src/Pages/UploadPage.js
index a9793cee..bc12609c 100644
--- a/src/Pages/UploadPage.js
+++ b/src/Pages/UploadPage.js
@@ -17,7 +17,6 @@ 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, useContext} from 'react'
-import styled from 'styled-components'
import axios from 'axios'
import {apiUrl, apiDomain} from '../env';
import Grid from '@material-ui/core/Grid';
@@ -27,10 +26,12 @@ import Snackbar from '@material-ui/core/Snackbar';
import {Store} from '../Store.js'
import {InfoBox} from '../Components/UploadPageComponents/StyledComponents.js'
import Stepper from '../Components/UploadPageComponents/Stepper.js'
-
+import {getAxiosConfig} from '../Components/HelperFunctions/getAxiosConfig.js'
import PartOne from '../Components/UploadPageComponents/PartOne.js'
import PartTwo from '../Components/UploadPageComponents/PartTwo.js'
import PartThree from '../Components/UploadPageComponents/PartThree.js'
+import ModalLearningObjectPublished from '../Components/ModalLearningObjectPublished.js'
+import {Background} from '../Components/UploadPageComponents/StyledComponents'
export default function UploadPage (props) {
const {state} = useContext(Store)
@@ -49,17 +50,7 @@ export default function UploadPage (props) {
const [draft, setDraft] = useState({})
useEffect( () => {
if (state.currentUser.id !== "") {
- let config = {
- headers : {
- 'Accept': 'application/json',
- 'Content-Type': 'application/json',
- }
- }
- if (state.currentUser.id !== "") {
- config.headers["Access-Token"] = sessionStorage.getItem('@portalmec/accessToken');
- config.headers.Client = sessionStorage.getItem('@portalmec/clientToken')
- config.headers.Uid = sessionStorage.getItem('@portalmec/uid')
- }
+ const config = getAxiosConfig()
let payload = {}
axios.post( (`${apiUrl}/learning_objects/`), payload, config
).then( (response) => {
@@ -70,13 +61,57 @@ export default function UploadPage (props) {
console.log(response)
}, (error) => {console.log(error)})
}
- }, [state.currentUser.id])
+ }, [])
- const [activeStep, setActiveStep] = React.useState(1);
+ const [activeStep, setActiveStep] = React.useState(0);
const stepperControl=(increment)=>{setActiveStep(activeStep + increment)}
+ const [objectSubmitted, toggleModal] = useState(false)
+ const handleModal = (value) => {toggleModal(value)}
+
+ const handlePost = () => {
+ if (state.currentUser.id !== "") {
+ const config = getAxiosConfig()
+ let payload = {}
+ axios.post( (`${apiUrl}/learning_objects/` + draft.id + '/publish'), payload, config
+ ).then( (response) => {
+ if ( response.headers['access-token'] ) {
+ sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token'])
+ }
+ handleModal(true)
+ console.log(response)
+
+ }, (error) => {console.log(error)})
+ }
+ }
+
+ const handleSubmit = () => {
+ if (state.currentUser.id !== "") {
+ const config = getAxiosConfig()
+ let payload = {
+ "submission" : {
+ "learning_object_id" : draft.id
+ }
+ }
+
+ axios.post( (`${apiUrl}/submissions/`), payload, config
+ ).then( (response) => {
+ if ( response.headers['access-token'] ) {
+ sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token'])
+ }
+ handleModal(true)
+ console.log(response)
+
+ }, (error) => {console.log(error)})
+ }
+ }
+
return (
<React.Fragment>
+ {
+ state.currentUser.id !== '' ?
+ (
+ <React.Fragment>
<Snackbar open={snackbarOpen} autoHideDuration={1000} onClose={() => {toggleSnackbar(false)}}
anchorOrigin = {{ vertical:'top', horizontal:'right' }}
>
@@ -85,17 +120,21 @@ export default function UploadPage (props) {
</Alert>
</Snackbar>
+ <ModalLearningObjectPublished
+ open={objectSubmitted}
+ handleClose={() => {toggleModal(false); props.history.push('/')}}
+ draftID={draft.id}
+ />
+
+ {
+ activeStep === 2 ?
+ (
+ <PartThree draftID={draft.id} stepperControl={stepperControl} activeStep={activeStep} handlePost={handlePost} handleSubmit={handleSubmit}/>
+ )
+ :
+ (
<Background>
<div className="container">
- {
- activeStep === 2 ?
- (
- <Grid container style={{paddingLeft : "15px", paddingRight : "15px"}}>
- <PartThree draft={draft} stepperControl={stepperControl} activeStep={activeStep} />
- </Grid>
- )
- :
- (
<Grid container spacing={2}>
<Grid item md={4} xs={12}>
<UploadFileWrapper submit={handleChooseObject}/>
@@ -111,44 +150,31 @@ export default function UploadPage (props) {
{
activeStep === 0 &&
<Grid container style={{paddingLeft : "15px", paddingRight : "15px"}}>
- <PartOne draft={draft} stepperControl={stepperControl}/>
+ <PartOne draftID={draft.id} stepperControl={stepperControl}/>
</Grid>
}
{
activeStep === 1 &&
<Grid container style={{paddingLeft : "15px", paddingRight : "15px"}}>
- <PartTwo draft={draft} stepperControl={stepperControl}/>
+ <PartTwo draftID={draft.id} stepperControl={stepperControl}/>
</Grid>
}
</InfoBox>
</Grid>
</Grid>
- )
- }
</div>
</Background>
+ )
+ }
+ </React.Fragment>
+ )
+ :
+ (
+ <>
+ {props.history.push("/")}
+ </>
+ )
+ }
</React.Fragment>
)
}
-
-const Background = styled.div`
- padding-top : 40px;
- background-color : #f4f4f4;
- color : #666;
-
- .container {
- padding : 0;
- margin-right : auto;
- margin-left : auto;
-
- @media screen and (min-width: 768px) {
- width : 750px;
- }
- @media screen and (min-width: 992px) {
- width : 970px;
- }
- @media screen and (min-width: 1200px) {
- width : 1170px;
- }
- }
-`
diff --git a/src/Pages/UserPage.js b/src/Pages/UserPage.js
index b96e0abb..3f715f30 100644
--- a/src/Pages/UserPage.js
+++ b/src/Pages/UserPage.js
@@ -79,21 +79,7 @@ export default function UserPage (props){
})
.then( (response) => {
console.log(response)
- dispatch ({
- type : 'USER_ACCESSED_USER_PAGE',
- set: {
- id : response.data.id,
- email : response.data.email,
- username : response.data.name,
- accessToken : response.headers['access-token'],
- clientToken : state.currentUser.clientToken,
- userAvatar : response.data.avatar,
- userCover : response.data.cover,
- followCount : response.data.follow_count,
- collectionsCount: response.data.collections_count,
- submitter_request : response.data.submitter_request,
- }
- })
+
if((response.data.role_ids.includes(4))) {
setTabs([
'Atividades', 'Status e Conquistas', 'Meus Recursos', 'Favoritos', 'Coleções', 'Rede', 'Curadoria'
diff --git a/src/Pages/UserTerms.js b/src/Pages/UserTerms.js
index 4c9562b1..ad0dead2 100644
--- a/src/Pages/UserTerms.js
+++ b/src/Pages/UserTerms.js
@@ -212,7 +212,7 @@ class UserTerms extends Component {
return (
<div style={{color:"rgba(0,0,0,0.87"}} >
-
+
<BannerStyle>
<h2 style={{width: "100%",textAlign: "center",marginTop:"0px", paddingTop:"6rem",marginBottom:"16px",fontSize:"52px",fontFamily: "'Pompiere', cursive",color:"#fff",fontWeight:"500"}}>TERMOS DE USO</h2>
diff --git a/src/Store.js b/src/Store.js
index 49a05a21..2d5aaa81 100644
--- a/src/Store.js
+++ b/src/Store.js
@@ -35,6 +35,7 @@ const initialState = {
height: 0
},
currentUser: {
+ askTeacherQuestion : true,
id : '',
username : '',
email : '',
@@ -45,7 +46,8 @@ const initialState = {
uid : '',
followCount : 0,
collectionsCount : 0,
- submitter_request : 'default'
+ submitter_request : 'default',
+ roles : []
}
}
--
GitLab