From 406c07320cbda4a2c605b3ef4e8678bd72ea51c3 Mon Sep 17 00:00:00 2001
From: Lucas Schoenfelder <les17@inf.ufpr.br>
Date: Fri, 3 Jul 2020 11:37:02 -0300
Subject: [PATCH] finishing up part upload
---
.../UploadPageComponents/ButtonsDiv.js | 93 +++++-------
.../UploadPageComponents/Forms/Autor.js | 13 +-
.../UploadPageComponents/Forms/Idioma.js | 5 +-
.../UploadPageComponents/Forms/Keywords.js | 5 +-
.../UploadPageComponents/Forms/NewTitle.js | 10 +-
.../Forms/SobreORecurso.js | 6 +-
.../Forms/TipoDeRecurso.js | 3 +-
.../UploadPageComponents/LearnObjInfo.js | 60 --------
.../UploadPageComponents/PartOne.js | 27 +---
.../UploadPageComponents/PartThree.js | 64 +++++++++
.../UploadPageComponents/PartTwo.js | 69 +++++++--
.../PartTwoComponents/ComponenteCurricular.js | 90 ------------
.../PartTwoComponents/EducationalStage.js | 36 +++--
.../PartTwoComponents/Licenca.js | 7 +-
.../PartTwoComponents/OutrasTematicas.js | 88 ------------
.../PartTwoComponents/SubjectsAndThemes.js | 136 ++++++++++++++++++
.../UploadPageComponents/SendInfo.js | 37 +++++
.../UploadPageComponents/StyledComponents.js | 41 ++++++
src/Pages/UploadPage.js | 52 ++++++-
19 files changed, 469 insertions(+), 373 deletions(-)
delete mode 100644 src/Components/UploadPageComponents/LearnObjInfo.js
create mode 100644 src/Components/UploadPageComponents/PartThree.js
delete mode 100644 src/Components/UploadPageComponents/PartTwoComponents/ComponenteCurricular.js
delete mode 100644 src/Components/UploadPageComponents/PartTwoComponents/OutrasTematicas.js
create mode 100644 src/Components/UploadPageComponents/PartTwoComponents/SubjectsAndThemes.js
create mode 100644 src/Components/UploadPageComponents/SendInfo.js
diff --git a/src/Components/UploadPageComponents/ButtonsDiv.js b/src/Components/UploadPageComponents/ButtonsDiv.js
index 4e1577b7..e94fe357 100644
--- a/src/Components/UploadPageComponents/ButtonsDiv.js
+++ b/src/Components/UploadPageComponents/ButtonsDiv.js
@@ -17,9 +17,9 @@ You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
import React, {useState} from 'react'
-import styled from 'styled-components'
-import { Button } from '@material-ui/core';
import ModalCancelar from './ModalCancelar.js'
+import { GreyButton, OrangeButton, StyledDiv } from './StyledComponents';
+import Grid from '@material-ui/core/Grid';
export default function ButtonsDiv (props) {
const [modalCancelar, toggleModalCancelar] = useState(false)
@@ -31,65 +31,42 @@ export default function ButtonsDiv (props) {
handleClose={() => {toggleModalCancelar(false)}}
draftID={props.draftID}
/>
- <StyledDiv>
- <ButtonGrey onClick={() => {toggleModalCancelar(true)}}>
- <span className="button-text">
- CANCELAR
- </span>
- </ButtonGrey>
+ <Grid container justify="center">
- <ButtonGrey>
- <span className="button-text" onClick={props.aux}>
- CONTINUAR MAIS TARDE
- </span>
- </ButtonGrey>
+ <Grid item md={2} xs={6}>
+ <GreyButton onClick={() => {toggleModalCancelar(true)}}>
+ <span className="button-text">
+ CANCELAR
+ </span>
+ </GreyButton>
+ </Grid>
- <OrangeButton onClick={() => {props.stepperControl(1)}}>
- SALVAR E AVANÇAR
- </OrangeButton>
- </StyledDiv>
+ {
+ props.onPartTwo &&
+ <Grid item md={2} xs={6}>
+ <GreyButton onClick={() => {props.stepperControl(-1)}}>
+ <span className="button-text">
+ VOLTAR
+ </span>
+ </GreyButton>
+ </Grid>
+ }
+
+ <Grid item md={4} xs={12}>
+ <GreyButton>
+ <span className="button-text">
+ CONTINUAR MAIS TARDE
+ </span>
+ </GreyButton>
+ </Grid>
+
+ <Grid item md={4} xs={12}>
+ <OrangeButton onClick={() => {props.stepperControl(1)}}>
+ SALVAR E AVANÇAR
+ </OrangeButton>
+ </Grid>
+ </Grid>
</>
)
}
-
-const StyledDiv = styled.div`
- display : flex;
- margin-top : 30px;
- justify-content : space-evenly;
-`
-
-const OrangeButton = styled(Button)`
- max-height : 36px !important;
- color : rgba(255,255,255,0.87) !important;
- box-shadow : 0 2px 5px 0 rgba(0,0,0,.26) !important;
- font-weight : 600 !important;
- background-color : #ff7f00 !important;
-`
-
-const ButtonGrey = styled(Button)`
- &:hover {
- background-color : rgba(158,158,158,0.2) !important;
- }
- max-height : 36px !important;
-
- background-color : transparent !important;
- color : #666 !important;
- text-decoration : none !important;
- outline : none !important;
- text-align : center !important;
-
- .button-text {
- cursor : pointer;
- line-height : 36px;
- text-align : center;
- color : currentColor;
- white-space : nowrap;
- text-transform : uppercase;
- font-weight : 600 !important;
- font-size : 14px;
- font-style : inherit;
- font-variant : inherit;
- padding : 6px 16px !important;
- }
-`
diff --git a/src/Components/UploadPageComponents/Forms/Autor.js b/src/Components/UploadPageComponents/Forms/Autor.js
index b9dd9e89..0ab781aa 100644
--- a/src/Components/UploadPageComponents/Forms/Autor.js
+++ b/src/Components/UploadPageComponents/Forms/Autor.js
@@ -16,7 +16,8 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, {useState, memo, useEffect} from 'react'
+import React, {useState, memo, useContext} from 'react'
+import {Store} from '../../../Store.js'
import { withStyles } from '@material-ui/core/styles';
import FormControl from '@material-ui/core/FormControl';
@@ -25,6 +26,7 @@ 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: {
@@ -37,15 +39,16 @@ const BlueRadio = withStyles({
})((props) => <Radio color="default" {...props} />);
function Autor (props) {
+ const {state} = useContext(Store)
const [authorValue, setAuthorValue] = useState(-1)
const [outroAutor, setOutroAutor] = useState('')
- useEffect(() => {
- props.callback('author', authorValue)
- }, [props.watch])
+ const getAuthor = () => {
+ return authorValue === "0" ? state.currentUser.username : outroAutor
+ }
return (
- <FormControl required="true" style={{width : "100%"}}>
+ <FormControl required="true" style={{width : "100%"}} onBlur={() => {SendInfo(props.draftID, "author", getAuthor())}}>
<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 e603b4a0..80583bad 100644
--- a/src/Components/UploadPageComponents/Forms/Idioma.js
+++ b/src/Components/UploadPageComponents/Forms/Idioma.js
@@ -28,13 +28,10 @@ import Select from '@material-ui/core/Select';
export default function Idioma (props) {
const [chosenLanguage, setChosenLanguage] = useState([])
const handleChangeLanguage = (event) => {
+ console.log(event.target.value)
setChosenLanguage(event.target.value);
};
- useEffect(() => {
- props.callback('language_ids', chosenLanguage)
- }, [props.watch])
-
return (
<FormControl required style={{minWidth : "30%"}}>
<StyledFormLabel component="legend" style={{fontSize : "14px", marginBottom : "10px"}}>
diff --git a/src/Components/UploadPageComponents/Forms/Keywords.js b/src/Components/UploadPageComponents/Forms/Keywords.js
index ed7fdaca..ab6874dc 100644
--- a/src/Components/UploadPageComponents/Forms/Keywords.js
+++ b/src/Components/UploadPageComponents/Forms/Keywords.js
@@ -21,6 +21,7 @@ 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) {
@@ -46,9 +47,6 @@ function Keywords (props) {
}
}
- useEffect(() => {
- props.callback('tags', keywords)
- }, [props.watch])
return (
<React.Fragment>
@@ -70,6 +68,7 @@ function Keywords (props) {
setKeywordsBuffer('')}}
}
fullWidth
+ onBlur={() => {SendInfo(props.draftID, "tags", keywords)}}
/>
</FormControl>
{
diff --git a/src/Components/UploadPageComponents/Forms/NewTitle.js b/src/Components/UploadPageComponents/Forms/NewTitle.js
index 6f087897..87430379 100644
--- a/src/Components/UploadPageComponents/Forms/NewTitle.js
+++ b/src/Components/UploadPageComponents/Forms/NewTitle.js
@@ -16,12 +16,15 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, {useState, memo, useEffect} from 'react'
+import React, {useState, memo} from 'react'
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 : ""
@@ -35,10 +38,6 @@ function NewTitle (props) {
})
}
- useEffect(() => {
- props.callback('name', objTitle.value)
- }, [props.watch])
-
return (
<FormControl required="true" style={{width : "100%", height : "100px"}}>
<StyledFormLabel component="legend" style={{fontSize : "14px", marginBottom : "10px"}}>
@@ -53,6 +52,7 @@ function NewTitle (props) {
helperText = {objTitle.value.length + "/100"}
error = {objTitle.error}
fullWidth
+ onBlur={() => {SendInfo(props.draftID, "name", objTitle.value)}}
/>
{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 6d01613b..2b3ed951 100644
--- a/src/Components/UploadPageComponents/Forms/SobreORecurso.js
+++ b/src/Components/UploadPageComponents/Forms/SobreORecurso.js
@@ -19,15 +19,12 @@ 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 handleSetDescription = (event) => {setDescription(event.target.value)}
- {/*TODO: CALLBACK*/}
- useEffect(() => {
- props.callback('description', objDescription)
- }, [props.watch])
return (
<FormControl required style={{width : "100%"}}>
@@ -43,6 +40,7 @@ function SobreORecurso (props) {
fullWidth
multiline
rows={5}
+ onBlur={() => {SendInfo(props.draftID, "description", objDescription)}}
/>
</FormControl>
)
diff --git a/src/Components/UploadPageComponents/Forms/TipoDeRecurso.js b/src/Components/UploadPageComponents/Forms/TipoDeRecurso.js
index cb54f863..62c08cb6 100644
--- a/src/Components/UploadPageComponents/Forms/TipoDeRecurso.js
+++ b/src/Components/UploadPageComponents/Forms/TipoDeRecurso.js
@@ -22,6 +22,7 @@ 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) {
@@ -30,7 +31,7 @@ function TipoDeRecurso (props) {
const handleChangeObjType = (event) => {chooseObjType(Number(event.target.value))}
return (
- <FormControl required="true" style={{width : "100%"}}>
+ <FormControl required="true" style={{width : "100%"}} onBlur={() => {SendInfo(props.draftID, "object_type_id", objTypeValue)}}>
<StyledFormLabel component="legend" style={{fontSize : "14px", marginBottom : "10px"}}>
<b>Tipo de recurso</b>
</StyledFormLabel>
diff --git a/src/Components/UploadPageComponents/LearnObjInfo.js b/src/Components/UploadPageComponents/LearnObjInfo.js
deleted file mode 100644
index 0d337bc0..00000000
--- a/src/Components/UploadPageComponents/LearnObjInfo.js
+++ /dev/null
@@ -1,60 +0,0 @@
-/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
-Departamento de Informatica - Universidade Federal do Parana
-
-This file is part of Plataforma Integrada MEC.
-
-Plataforma Integrada MEC is free software: you can redistribute it and/or modify
-it under the terms of the GNU Affero General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-Plataforma Integrada MEC is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-GNU Affero General Public License for more details.
-
-You should have received a copy of the GNU Affero General Public License
-along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-
-import React, {useState} from 'react'
-import {InfoBox} from './StyledComponents.js'
-import Radio from '@material-ui/core/Radio';
-import RadioGroup from '@material-ui/core/RadioGroup';
-import FormControl from '@material-ui/core/FormControl';
-import Stepper from './Stepper.js'
-import styled from 'styled-components'
-import TextField from '@material-ui/core/TextField';
-import FormLabel from '@material-ui/core/FormLabel';
-import {StyledFormHelperText} from './StyledComponents.js'
-import FormHelperText from '@material-ui/core/FormHelperText';
-import PartOne from './PartOne.js'
-import Grid from '@material-ui/core/Grid';
-import PartTwo from './PartTwo.js'
-
-export default function LearnObjInfo (props) {
- const [activeStep, setActiveStep] = React.useState(1);
- const stepperControl=(increment)=>{setActiveStep(activeStep + increment)}
-
- return (
- <InfoBox>
- <div className="cabecalho">
- <h2>Informações sobre o Recurso</h2>
- <div className="feedback-upload">
- <Stepper activeStep={activeStep}/>
- </div>
- </div>
- {
- activeStep === 0 &&
- <Grid container style={{paddingLeft : "15px", paddingRight : "15px"}}>
- <PartOne draft={props.draft} stepperControl={stepperControl}/>
- </Grid>
- }
- {
- activeStep === 1 &&
- <Grid container style={{paddingLeft : "15px", paddingRight : "15px"}}>
- <PartTwo draft={props.draft} stepperControl={stepperControl}/>
- </Grid>
- }
- </InfoBox>
- )
-}
diff --git a/src/Components/UploadPageComponents/PartOne.js b/src/Components/UploadPageComponents/PartOne.js
index ec72124d..aad2b9bb 100644
--- a/src/Components/UploadPageComponents/PartOne.js
+++ b/src/Components/UploadPageComponents/PartOne.js
@@ -51,7 +51,6 @@ export default function PartOne (props) {
{/*get the list of object_types*/}
axios.get(`${apiUrl}/object_types/`).then(
(response) => {
- console.log(response.data)
setObjTypes(response.data.sort((a, b) => (a.name) > (b.name) ? 1 : -1))
}, (error) => {
console.log(error)
@@ -61,7 +60,6 @@ export default function PartOne (props) {
{/*get the list of languages*/}
axios.get(`${apiUrl}/languages/`).then(
(response) => {
- console.log(response.data)
setLanguages(response.data)
}, (error) => {
console.log(error)
@@ -69,53 +67,42 @@ export default function PartOne (props) {
)
}, [])
- const [info, setInfo] = useState({
- name : '',
- description : '',
- tags : [],
- author : '',
- object_type_id : null,
- language_ids : []
- })
- const handleSetInfo = (field, value) => {setInfo({...info, [field] : value}); console.log(info)}
-
- const [triggerCallback, toggleTrigger] = useState(false)
return (
<form>
{/*------------------------------Titulo-----------------------------------------*/}
<Grid item xs={12} style={{paddingBottom : "40px"}}>
- <NewTitle callback={handleSetInfo} watch={triggerCallback}/>
+ <NewTitle draftID={props.draft.id}/>
</Grid>
{/*------------------------------Sobre------------------------------------------*/}
<Grid item xs={12} style={{paddingBottom : "40px"}}>
- <SobreORecurso callback={handleSetInfo} watch={triggerCallback}/>
+ <SobreORecurso draftID={props.draft.id} />
</Grid>
{/*------------------------------Palavras-chave------------------------------------------*/}
<Grid item xs={12} style={{paddingBottom : "40px"}}>
- <Keywords callback={handleSetInfo} watch={triggerCallback}/>
+ <Keywords draftID={props.draft.id} />
</Grid>
{/*------------------------------Autor------------------------------------------*/}
<Grid item xs={12} style={{paddingBottom : "40px"}}>
- <Autor callback={handleSetInfo} watch={triggerCallback}/>
+ <Autor draftID={props.draft.id} />
</Grid>
{/*------------------------------Tipo do Objeto------------------------------------------*/}
<Grid item xs={12} style={{paddingBottom : "40px"}}>
- <TipoDeRecurso objTypes={objTypes} callback={handleSetInfo} watch={triggerCallback}/>
+ <TipoDeRecurso objTypes={objTypes} draftID={props.draft.id} />
</Grid>
{/*------------------------------Idioma------------------------------------------*/}
<Grid item xs={12} style={{paddingBottom : "40px"}}>
- <Idioma languages={languages} callback={handleSetInfo} watch={triggerCallback}/>
+ <Idioma languages={languages} draftID={props.draft.id} />
</Grid>
{/*------------------------------Botoes------------------------------------------*/}
<Grid item xs={12}>
- <ButtonsDiv draftID={props.draft.id} triggerCallback={() => {console.log('chamei'); toggleTrigger(!triggerCallback)}} stepperControl={props.stepperControl} aux={() => {console.log(info)}}/>
+ <ButtonsDiv draftID={props.draft.id} 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
new file mode 100644
index 00000000..c080b74f
--- /dev/null
+++ b/src/Components/UploadPageComponents/PartThree.js
@@ -0,0 +1,64 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
+
+import React, {useState, useEffect} from 'react'
+import 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'
+
+
+export default function PartThree (props) {
+
+ return (
+ <StyledSessao1>
+ <div className="cabecalho">
+ <div className="feedback-upload">
+ <Stepper activeStep={props.activeStep}/>}
+ </div>
+ </div>
+ </StyledSessao1>
+ )
+}
+
+const StyledSessao1 = styled.div`
+ .page-content-preview {
+ color : #fff;
+ background-color : #00bcd4;
+ float : none;
+ height : 400px;
+ text-align : center;
+ }
+
+ .cabecalho {
+ display : flex;
+ flex-direction : column;
+ align-items : center;
+ margin-bottom : 30px;
+
+ .feedback-upload {
+ display : flex;
+ flex-direction : column;
+ justify-content : center;
+ text-align : center
+ margin-top : 20px;
+ width : 65%;
+ }
+ }
+`
diff --git a/src/Components/UploadPageComponents/PartTwo.js b/src/Components/UploadPageComponents/PartTwo.js
index 255315f8..a1f446af 100644
--- a/src/Components/UploadPageComponents/PartTwo.js
+++ b/src/Components/UploadPageComponents/PartTwo.js
@@ -23,47 +23,92 @@ import axios from 'axios'
import {apiUrl, apiDomain} from '../../env';
import DragAndDropThumbnail from './PartTwoComponents/DragAndDropThumbnail'
import EducationalStage from './PartTwoComponents/EducationalStage'
-import ComponenteCurricular from './PartTwoComponents/ComponenteCurricular'
-import OutrasTematicas from './PartTwoComponents/OutrasTematicas'
import Licenca from './PartTwoComponents/Licenca'
+import Checkbox from '@material-ui/core/Checkbox';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import FormControl from '@material-ui/core/FormControl';
+import {StyledFormLabel} from './StyledComponents.js'
+import ButtonsDiv from './ButtonsDiv.js'
+import SubjectsAndThemes from './PartTwoComponents/SubjectsAndThemes.js'
export default function PartTwo (props) {
const [thumbnail, setThumbnail] = useState('')
+ const [eduStages, setEduStages] = useState([])
+ const [subjects, setSubjects] = useState([])
+ const [themes, setThemes] = useState([])
useEffect(() => {
+ axios.get(`${apiUrl}/educational_stages/`).then(
+ (response) => {console.log(response);
+ setEduStages(response.data)
+ },
+ (error) => {console.log(error)}
+ )
+
axios.get(`${apiUrl}/subjects/`).then(
(response) => {console.log(response);
- setSubjects(response.data.filter(subject => subject.theme === false))
- setThemes(response.data.filter(subject => subject.theme === true))
+ setSubjects(response.data.filter(subject => subject.theme === false).sort((a,b) => a.name > b.name ? 1 : -1))
+ setThemes(response.data.filter(subject => subject.theme === true).sort((a,b) => a.name > b.name ? 1 : -1))
},
(error) => {console.log(error)}
)
}, [])
- const [subjects, setSubjects] = useState([])
- const [themes, setThemes] = useState([])
- return (
+ /*------------------------Licenca------------------------*/
+
+ const [termsCheckbox, setChecked] = useState(false)
+ const toggleCheckbox = (event) => {
+ setChecked(event.target.checked)
+ }
+
+ return (
<form style={{width : "100%"}}>
<Grid item xs={12} style={{paddingBottom : "40px"}}>
<DragAndDropThumbnail/>
</Grid>
<Grid item xs={12} style={{paddingBottom : "40px"}}>
- <EducationalStage />
+ <EducationalStage draftID={props.draftID} eduStages={eduStages}/>
</Grid>
+ <SubjectsAndThemes subjects={subjects} themes={themes} />
+
<Grid item xs={12} style={{paddingBottom : "40px"}}>
- <ComponenteCurricular subjects={subjects}/>
+ <Licenca draftID={props.draftID}/>
</Grid>
<Grid item xs={12} style={{paddingBottom : "40px"}}>
- <OutrasTematicas subjects={themes}/>
+ <StyledFormControl required >
+ <StyledFormLabel component="legend" style={{fontSize : "14px", marginBottom : "10px"}}>
+ <b>Confirme se você concorda com os <a href="/termos" style={{color : "#ff7f00"}}>termos de uso e de propriedade intelectual</a></b>
+ </StyledFormLabel>
+ <FormControlLabel label={<span className="label">Li e concordo com os termos de uso e de propriedade intelectual.</span>} control={<Checkbox checked={termsCheckbox} onChange={toggleCheckbox}/>}
+ />
+ </StyledFormControl>
</Grid>
- <Grid item xs={12} style={{paddingBottom : "40px"}}>
- <Licenca/>
+ <Grid item xs={12}>
+ <ButtonsDiv draftID={props.draft.id} stepperControl={props.stepperControl} onPartTwo={true}/>
+ </Grid>
+
+ <Grid item xs={12} style={{marginTop : "20px"}}>
+ <span style={{marginTop : "20px", fontWeight : "200", color : "#a5a5a5", paddingLeft : "10px"}}>
+ * Campos obrigatórios
+ </span>
</Grid>
</form>
)
}
+
+const StyledFormControl = styled(FormControl)`
+ .MuiCheckbox-colorSecondary.Mui-checked {
+ color : #00bcd4 !important;
+ }
+
+ .label {
+ font-size : 14px !important;
+ color : #666 !important;
+ font-weight : 200 !important;
+ }
+`
diff --git a/src/Components/UploadPageComponents/PartTwoComponents/ComponenteCurricular.js b/src/Components/UploadPageComponents/PartTwoComponents/ComponenteCurricular.js
deleted file mode 100644
index cc13cdc3..00000000
--- a/src/Components/UploadPageComponents/PartTwoComponents/ComponenteCurricular.js
+++ /dev/null
@@ -1,90 +0,0 @@
-/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
-Departamento de Informatica - Universidade Federal do Parana
-
-This file is part of Plataforma Integrada MEC.
-
-Plataforma Integrada MEC is free software: you can redistribute it and/or modify
-it under the terms of the GNU Affero General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-Plataforma Integrada MEC is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-GNU Affero General Public License for more details.
-
-You should have received a copy of the GNU Affero General Public License
-along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-
-import React, {useState, useEffect, memo} from 'react'
-import { makeStyles } from '@material-ui/core/styles';
-import FormControl from '@material-ui/core/FormControl';
-import {ObjTypeBox, StyledFormLabel} from '../StyledComponents.js'
-import RadioGroup from '@material-ui/core/RadioGroup';
-import Radio from '@material-ui/core/Radio';
-import {GetSubjectIconByName} from '../GetIconByName.js'
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import axios from 'axios'
-import {apiUrl, apiDomain} from '../../../env';
-
-const useStyles = makeStyles({
- root: {
- '&:hover': {
- backgroundColor: 'transparent',
- },
-}})
-
-function StyledRadio (props) {
- const classes = useStyles();
- return (
- <Radio
- className={classes.root}
- disableRipple
- checkedIcon = {
- <ObjTypeBox checked>
- <span>
- {GetSubjectIconByName(props.label)}
- <p>{props.label}</p>
- </span>
- </ObjTypeBox>
- }
- icon = {
- <ObjTypeBox>
- <span>
- {GetSubjectIconByName(props.label)}
- <p>{props.label}</p>
- </span>
- </ObjTypeBox>
- }
- {...props}
- />
- )
-}
-
-function ComponenteCurricular (props) {
-
-
-
- const [value, setValue] = useState(-1)
- const handleChange = (event) => {setValue(Number(event.target.value))}
-
- return (
- <FormControl required="true" style={{width : "100%"}}>
- <StyledFormLabel component="legend" style={{fontSize : "14px", marginBottom : "10px"}}>
- <b>Componente curricular</b> <span>(Selecione uma ou mais opções)</span>
- </StyledFormLabel>
- <RadioGroup aria-label="Tipo de Recurso" name="Tipo de Recurso" row value={value} onChange={handleChange} style={{justifyContent : "center"}}>
- {
- props.subjects.map( (subject) =>
- <FormControlLabel key={subject.id} value={subject.id}
- control={<StyledRadio label={subject.name} checked={value === subject.id}/>}
- />
- )
-
- }
- </RadioGroup>
- </FormControl>
- )
-}
-
-export default memo(ComponenteCurricular)
diff --git a/src/Components/UploadPageComponents/PartTwoComponents/EducationalStage.js b/src/Components/UploadPageComponents/PartTwoComponents/EducationalStage.js
index 6d5c34c8..64f9873c 100644
--- a/src/Components/UploadPageComponents/PartTwoComponents/EducationalStage.js
+++ b/src/Components/UploadPageComponents/PartTwoComponents/EducationalStage.js
@@ -22,33 +22,43 @@ import {StyledFormLabel} from '../StyledComponents.js'
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 stages = [
- {name : 'Educação Infantil', id : 0},
- {name : 'Ensino Fundamental I (1º até o 5º ano)', id : 1},
- {name : 'Ensino Fundamental II (do 6º até o 9º ano)', id : 2},
- {name : 'Ensino Médio', id : 3},
- {name : 'Ensino Superior', id : 4},
- {name : 'Outros', id : 5}
- ]
- let selected = [false, false, false, false, false, false]
+ const [selected, setSelect] = useState([])
+ const handleSet = (event) => {
+ let newValue = event.target.value
+
+ if(selected.indexOf(newValue) > - 1) {
+ setSelect(selected.filter(item => item !== newValue))
+ }
+ else {
+ setSelect(selected => [...selected, event.target.value])
+ }
+ }
return (
<FormControl required style={{minWidth : "30%"}}>
<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>
- <FormGroup>
+ <StyledFormGroup onBlur={() => {SendInfo(props.draftID, "educational_stages", selected)}}>
{
- stages.map(stage =>
+ props.eduStages.map(stage =>
<FormControlLabel key={stage.id} label={stage.name}
- control={<Checkbox checked={stage.selected} value={stage.id} onChange={() => {selected[stage.id] = !selected[stage.id]}}/>}/>
+ control={<Checkbox checked={selected.indexOf(String(stage.id)) > - 1} value={stage.id} onChange={handleSet}/>}/>
)
}
- </FormGroup>
+ </StyledFormGroup>
</FormControl>
)
}
+
+const StyledFormGroup = styled(FormGroup)`
+ .MuiCheckbox-colorSecondary.Mui-checked {
+ color : #00bcd4 !important;
+ }
+`
diff --git a/src/Components/UploadPageComponents/PartTwoComponents/Licenca.js b/src/Components/UploadPageComponents/PartTwoComponents/Licenca.js
index 9c2c77dc..ca513b45 100644
--- a/src/Components/UploadPageComponents/PartTwoComponents/Licenca.js
+++ b/src/Components/UploadPageComponents/PartTwoComponents/Licenca.js
@@ -26,6 +26,7 @@ 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) {
@@ -49,7 +50,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>
- <StyledFormControlLabel aria-label="Tipo de Recurso" name="Tipo de Recurso" row value={value} onChange={handleChange} style={{justifyContent : "center"}}>
+ <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)}}>
{
options.map( (option) =>
<FormControlLabel key={option.id} value={option.id}
@@ -63,14 +64,14 @@ function Licenca (props) {
)
}
- </StyledFormControlLabel>
+ </StyledRadioGroup>
</FormControl>
)
}
export default memo(Licenca)
-const StyledFormControlLabel = styled(RadioGroup)`
+const StyledRadioGroup = styled(RadioGroup)`
.MuiFormControlLabel-root {
display : block !important;
margin-bottom : 16px !important;
diff --git a/src/Components/UploadPageComponents/PartTwoComponents/OutrasTematicas.js b/src/Components/UploadPageComponents/PartTwoComponents/OutrasTematicas.js
deleted file mode 100644
index 77815249..00000000
--- a/src/Components/UploadPageComponents/PartTwoComponents/OutrasTematicas.js
+++ /dev/null
@@ -1,88 +0,0 @@
-/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
-Departamento de Informatica - Universidade Federal do Parana
-
-This file is part of Plataforma Integrada MEC.
-
-Plataforma Integrada MEC is free software: you can redistribute it and/or modify
-it under the terms of the GNU Affero General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-Plataforma Integrada MEC is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-GNU Affero General Public License for more details.
-
-You should have received a copy of the GNU Affero General Public License
-along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-
-import React, {useState, useEffect, memo} from 'react'
-import { makeStyles } from '@material-ui/core/styles';
-import FormControl from '@material-ui/core/FormControl';
-import {ObjTypeBox, StyledFormLabel} from '../StyledComponents.js'
-import RadioGroup from '@material-ui/core/RadioGroup';
-import Radio from '@material-ui/core/Radio';
-import {GetSubjectIconByName} from '../GetIconByName.js'
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import axios from 'axios'
-import {apiUrl, apiDomain} from '../../../env';
-
-const useStyles = makeStyles({
- root: {
- '&:hover': {
- backgroundColor: 'transparent',
- },
-}})
-
-function StyledRadio (props) {
- const classes = useStyles();
- return (
- <Radio
- className={classes.root}
- disableRipple
- checkedIcon = {
- <ObjTypeBox checked>
- <span>
- {GetSubjectIconByName(props.label)}
- <p>{props.label}</p>
- </span>
- </ObjTypeBox>
- }
- icon = {
- <ObjTypeBox>
- <span>
- {GetSubjectIconByName(props.label)}
- <p>{props.label}</p>
- </span>
- </ObjTypeBox>
- }
- {...props}
- />
- )
-}
-
-function OutrasTematicas (props) {
-
- const [value, setValue] = useState(-1)
- const handleChange = (event) => {setValue(Number(event.target.value))}
-
- return (
- <FormControl style={{width : "100%"}}>
- <StyledFormLabel component="legend" style={{fontSize : "14px", marginBottom : "10px"}}>
- <b>Outras Temáticas</b>
- </StyledFormLabel>
- <RadioGroup aria-label="Tipo de Recurso" name="Tipo de Recurso" row value={value} onChange={handleChange} style={{justifyContent : "center"}}>
- {
- props.subjects.map( (subject) =>
- <FormControlLabel key={subject.id} value={subject.id}
- control={<StyledRadio label={subject.name} checked={value === subject.id}/>}
- />
- )
-
- }
- </RadioGroup>
- </FormControl>
- )
-}
-
-export default memo(OutrasTematicas)
diff --git a/src/Components/UploadPageComponents/PartTwoComponents/SubjectsAndThemes.js b/src/Components/UploadPageComponents/PartTwoComponents/SubjectsAndThemes.js
new file mode 100644
index 00000000..c8063b65
--- /dev/null
+++ b/src/Components/UploadPageComponents/PartTwoComponents/SubjectsAndThemes.js
@@ -0,0 +1,136 @@
+/*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, memo} from 'react'
+import { makeStyles } from '@material-ui/core/styles';
+import FormControl from '@material-ui/core/FormControl';
+import {ObjTypeBox, StyledFormLabel} from '../StyledComponents.js'
+import FormGroup from '@material-ui/core/FormGroup';
+import {GetSubjectIconByName} from '../GetIconByName.js'
+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({
+ root: {
+ '&:hover': {
+ backgroundColor: 'transparent',
+ },
+}})
+
+function StyledCheckbox (props) {
+ const classes = useStyles();
+ return (
+ <Checkbox
+ className={classes.root}
+ disableRipple
+ checkedIcon = {
+ <ObjTypeBox checked>
+ <span>
+ {GetSubjectIconByName(props.label)}
+ <p>{props.label}</p>
+ </span>
+ </ObjTypeBox>
+ }
+ icon = {
+ <ObjTypeBox>
+ <span>
+ {GetSubjectIconByName(props.label)}
+ <p>{props.label}</p>
+ </span>
+ </ObjTypeBox>
+ }
+ {...props}
+ />
+ )
+}
+
+
+function SubjectsAndThemes (props) {
+ const [value, setValue] = useState([])
+
+ const handleChange = (event) => {
+ const newValue = event.target.value
+
+ if((value.indexOf(newValue) > -1)) {
+ setValue(value.filter(item => item !== newValue))
+ }
+ else {
+ setValue(value => [...value, newValue])
+ }
+ }
+
+ return (
+ <React.Fragment>
+ <Grid item xs={12} style={{paddingBottom : "40px"}}>
+ <FormControl required="true" 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)}}>
+ {
+ props.subjects.map( (subject) =>
+ <>
+ <FormControlLabel key={subject.id} value={subject.id}
+ control={
+ <StyledCheckbox
+ label={subject.name}
+ checked={value.indexOf(String(subject.id)) > -1}
+ onChange={handleChange}
+ />}
+ />
+ </>
+ )
+
+ }
+ </FormGroup>
+ </FormControl>
+ </Grid>
+
+ <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)}}>
+ {
+ props.themes.map( (theme) =>
+ <FormControlLabel key={theme.id} value={theme.id}
+ control={
+ <StyledCheckbox
+ label={theme.name}
+ checked={value.indexOf(String(theme.id)) > -1}
+ onChange={handleChange}
+
+ />
+ }
+ />
+ )
+
+ }
+ </FormGroup>
+ </FormControl>
+ </Grid>
+ </React.Fragment>
+ )
+}
+
+export default memo(SubjectsAndThemes)
diff --git a/src/Components/UploadPageComponents/SendInfo.js b/src/Components/UploadPageComponents/SendInfo.js
new file mode 100644
index 00000000..f22c785c
--- /dev/null
+++ b/src/Components/UploadPageComponents/SendInfo.js
@@ -0,0 +1,37 @@
+import React, {useContext} from 'react'
+import {Store} from '../../Store.js'
+import axios from 'axios'
+import {apiUrl} from '../../env';
+
+export function SendInfo (draftID, fieldName, payload) {
+ const key = fieldName
+ let value = payload
+ if (key === "tags") {
+ value = payload.map( (tag, index) =>
+ index = { "name" : tag}
+ )
+ }
+
+
+ const putObject = {
+ "learning_object" : {
+ "id" : draftID
+ }
+ }
+ putObject.learning_object[key] = value
+ console.log(putObject)
+
+
+}
+
+{/*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) => {console.log(response)}, (error) => {console.log(error)})*/}
diff --git a/src/Components/UploadPageComponents/StyledComponents.js b/src/Components/UploadPageComponents/StyledComponents.js
index ab16aeb3..71294e88 100644
--- a/src/Components/UploadPageComponents/StyledComponents.js
+++ b/src/Components/UploadPageComponents/StyledComponents.js
@@ -432,3 +432,44 @@ export const StyledTextField = styled(TextField)`
/>
)
}
+
+ export const StyledDiv = styled.div`
+ display : flex;
+ margin-top : 30px;
+ justify-content : space-evenly;
+ `
+
+ export const OrangeButton = styled(Button)`
+ max-height : 36px !important;
+ color : rgba(255,255,255,0.87) !important;
+ box-shadow : 0 2px 5px 0 rgba(0,0,0,.26) !important;
+ font-weight : 600 !important;
+ background-color : #ff7f00 !important;
+ `
+
+ export const GreyButton = styled(Button)`
+ &:hover {
+ background-color : rgba(158,158,158,0.2) !important;
+ }
+ max-height : 36px !important;
+
+ background-color : transparent !important;
+ color : #666 !important;
+ text-decoration : none !important;
+ outline : none !important;
+ text-align : center !important;
+
+ .button-text {
+ cursor : pointer;
+ line-height : 36px;
+ text-align : center;
+ color : currentColor;
+ white-space : nowrap;
+ text-transform : uppercase;
+ font-weight : 600 !important;
+ font-size : 14px;
+ font-style : inherit;
+ font-variant : inherit;
+ padding : 6px 16px !important;
+ }
+ `
diff --git a/src/Pages/UploadPage.js b/src/Pages/UploadPage.js
index caf1cc4c..a9793cee 100644
--- a/src/Pages/UploadPage.js
+++ b/src/Pages/UploadPage.js
@@ -22,10 +22,15 @@ import axios from 'axios'
import {apiUrl, apiDomain} from '../env';
import Grid from '@material-ui/core/Grid';
import UploadFileWrapper from '../Components/UploadPageComponents/UploadFileWrapper.js'
-import LearnObjInfo from '../Components/UploadPageComponents/LearnObjInfo.js'
import Alert from '../Components/Alert.js';
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 PartOne from '../Components/UploadPageComponents/PartOne.js'
+import PartTwo from '../Components/UploadPageComponents/PartTwo.js'
+import PartThree from '../Components/UploadPageComponents/PartThree.js'
export default function UploadPage (props) {
const {state} = useContext(Store)
@@ -67,6 +72,9 @@ export default function UploadPage (props) {
}
}, [state.currentUser.id])
+ const [activeStep, setActiveStep] = React.useState(1);
+ const stepperControl=(increment)=>{setActiveStep(activeStep + increment)}
+
return (
<React.Fragment>
<Snackbar open={snackbarOpen} autoHideDuration={1000} onClose={() => {toggleSnackbar(false)}}
@@ -79,14 +87,44 @@ export default function UploadPage (props) {
<Background>
<div className="container">
- <Grid container spacing={2}>
- <Grid item md={4} xs={12}>
- <UploadFileWrapper submit={handleChooseObject}/>
+ {
+ activeStep === 2 ?
+ (
+ <Grid container style={{paddingLeft : "15px", paddingRight : "15px"}}>
+ <PartThree draft={draft} stepperControl={stepperControl} activeStep={activeStep} />
</Grid>
- <Grid item md={8} xs={12}>
- <LearnObjInfo draft={draft}/>
+ )
+ :
+ (
+ <Grid container spacing={2}>
+ <Grid item md={4} xs={12}>
+ <UploadFileWrapper submit={handleChooseObject}/>
+ </Grid>
+ <Grid item md={8} xs={12}>
+ <InfoBox>
+ <div className="cabecalho">
+ <h2>Informações sobre o Recurso</h2>
+ <div className="feedback-upload">
+ <Stepper activeStep={activeStep}/>
+ </div>
+ </div>
+ {
+ activeStep === 0 &&
+ <Grid container style={{paddingLeft : "15px", paddingRight : "15px"}}>
+ <PartOne draft={draft} stepperControl={stepperControl}/>
+ </Grid>
+ }
+ {
+ activeStep === 1 &&
+ <Grid container style={{paddingLeft : "15px", paddingRight : "15px"}}>
+ <PartTwo draft={draft} stepperControl={stepperControl}/>
+ </Grid>
+ }
+ </InfoBox>
+ </Grid>
</Grid>
- </Grid>
+ )
+ }
</div>
</Background>
</React.Fragment>
--
GitLab