diff --git a/src/Components/ResourcePageComponents/TextoObjeto.js b/src/Components/ResourcePageComponents/TextoObjeto.js
index ff88dff912cbc6b6358312fdc7b1362eed643d57..5c7c400f5a279838b28a7c11b4a3aa34b72caa1e 100644
--- a/src/Components/ResourcePageComponents/TextoObjeto.js
+++ b/src/Components/ResourcePageComponents/TextoObjeto.js
@@ -26,7 +26,7 @@ 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 {Link, Redirect} from 'react-router-dom'
import Alert from '../Alert.js';
import Snackbar from '@material-ui/core/Snackbar';
import {getAxiosConfig} from '../HelperFunctions/getAxiosConfig'
@@ -79,6 +79,7 @@ export default function TextoObjeto (props) {
]
const [snackbarOpen, toggleSnackbar] = useState(false)
+ const [publisherDeletedObject, toggleDeleted] = useState(false)
const handleDelete = () => {
let config = getAxiosConfig()
axios.delete((`${apiUrl}/learning_objects/` + props.recursoId), config).then(
@@ -88,6 +89,7 @@ export default function TextoObjeto (props) {
if ( response.headers['access-token'] ) {
sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token'])
}
+ toggleDeleted(true)
},
(error) => {
console.log(error)
@@ -110,6 +112,9 @@ export default function TextoObjeto (props) {
return (
<TextoObjetoDiv>
+ { publisherDeletedObject &&
+ <Redirect to="/"/>
+ }
<Snackbar open={snackbarOpen} autoHideDuration={1000} onClose={() => {toggleSnackbar(false)}}
anchorOrigin = {{ vertical:'top', horizontal:'right' }}
>
diff --git a/src/Components/UploadPageComponents/ButtonsDiv.js b/src/Components/UploadPageComponents/ButtonsDiv.js
index a7e5e3a1368485d675094bf16edcd9780f3738ef..8add164e3a46bcef35c155d223f788a682af6c5f 100644
--- a/src/Components/UploadPageComponents/ButtonsDiv.js
+++ b/src/Components/UploadPageComponents/ButtonsDiv.js
@@ -20,10 +20,10 @@ import React, {useState} from 'react'
import ModalCancelar from './ModalCancelar.js'
import { GreyButton, OrangeButton, StyledDiv } from './StyledComponents';
import Grid from '@material-ui/core/Grid';
-
+import {Redirect} from 'react-router-dom'
export default function ButtonsDiv (props) {
const [modalCancelar, toggleModalCancelar] = useState(false)
-
+ const [redirectTrue, toggleRedirect] = useState(false)
return (
<>
<ModalCancelar
@@ -32,6 +32,10 @@ export default function ButtonsDiv (props) {
draftID={props.draftID}
/>
+ {
+ redirectTrue &&
+ <Redirect to="/"/>
+ }
<Grid container justify="center">
{/*botao excluir na pagina de editar*/}
@@ -55,7 +59,7 @@ export default function ButtonsDiv (props) {
}
<Grid item md={4} xs={12}>
- <GreyButton>
+ <GreyButton onClick={() => {if(window.confirm('O seu recurso em edição foi salvo.')) toggleRedirect(true)}}>
<span className="button-text">
CONTINUAR MAIS TARDE
</span>
@@ -63,7 +67,7 @@ export default function ButtonsDiv (props) {
</Grid>
<Grid item md={4} xs={12}>
- <OrangeButton onClick={() => {props.stepperControl(1)}}>
+ <OrangeButton type="submit">
SALVAR E AVANÇAR
</OrangeButton>
</Grid>
diff --git a/src/Components/UploadPageComponents/DragAndDrop.tsx b/src/Components/UploadPageComponents/DragAndDrop.tsx
index 68dd134bec73ed9c5ce0e01be024f0cef58b77e0..d416b22257648c2c500ef0cb85150e7acfacae20 100644
--- a/src/Components/UploadPageComponents/DragAndDrop.tsx
+++ b/src/Components/UploadPageComponents/DragAndDrop.tsx
@@ -38,12 +38,11 @@ const UploadMediaComponent: React.FC<Props> = ({draftID, children}) => {
setFilesToUpload(fileToUpload);
if (fileToUpload != undefined){
- fileToUpload.uploadFile();
+ console.log(fileToUpload.uploadFile())
+
}
};
-
-
return (
<div className="upload-container">
<h2 className="upload-title">File Uploader</h2>
diff --git a/src/Components/UploadPageComponents/FileToUpload.ts b/src/Components/UploadPageComponents/FileToUpload.ts
index 24f3613b9b0c1415e0e882c29b301b611299ac3c..0fba0fc8204700a5e47bdd98516b8aa474e98133 100644
--- a/src/Components/UploadPageComponents/FileToUpload.ts
+++ b/src/Components/UploadPageComponents/FileToUpload.ts
@@ -9,7 +9,6 @@ export default class FileToUpload {
private _chunkNumber: number;
currentChunkStartByte: number;
currentChunkFinalByte: number;
- uploadFinished: boolean = false;
constructor(file: File, name: string, draftID : string) {
this.request = new XMLHttpRequest();
@@ -56,8 +55,7 @@ export default class FileToUpload {
if(this.currentChunkFinalByte === this.file.size) {
alert('Yay, upload completed! Chao!');
- this.uploadFinished = true;
- return;
+ return('done');
} else if (remainingBytes < FileToUpload.chunkSize) {
// if the remaining chunk is smaller than the chunk size we defined
this.currentChunkStartByte = this.currentChunkFinalByte;
diff --git a/src/Components/UploadPageComponents/FileUploadStage.js b/src/Components/UploadPageComponents/FileUploadStage.js
index 7b10d066dd3bf4e9eb4b0d6507d06780b826989e..5419bb3f7ce1dfc0574a3965c32ede36a7fcd425 100644
--- a/src/Components/UploadPageComponents/FileUploadStage.js
+++ b/src/Components/UploadPageComponents/FileUploadStage.js
@@ -16,19 +16,31 @@ 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} from 'react'
import styled from 'styled-components'
import {WrapperBox} from './StyledComponents.js'
import DoneIcon from '@material-ui/icons/Done';
import DeleteIcon from '@material-ui/icons/Delete';
+import {getAxiosConfig} from '../HelperFunctions/getAxiosConfig.js'
+import axios from 'axios'
+import {apiUrl} from '../../env';
export default function FileUploadStage (props) {
const [uploading, toggleUploading] = useState(true)
- useEffect( () => {
- console.log(props.files)
- console.log('chamada pro backend enviando o arquivo')
- }, [])
+ const handleDelete = () => {
+ let config = getAxiosConfig
+
+ axios.delete( (`${apiUrl}/learning_objects/` + props.draftID), config).then(
+ (response) => {
+ console.log(response)
+ if ( response.headers['access-token'] ) {
+ sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token'])
+ }
+ props.handleNextStage("default")
+ },
+ (error) => {console.log(error)})
+ }
return (
<WrapperBox>
@@ -41,11 +53,11 @@ export default function FileUploadStage (props) {
<div className="upload-item">
<div className="item-info">
<div className="file-status">
- <DoneIcon className="icon icon-margin"/> file name
+ <DoneIcon className="icon icon-margin"/> {props.file.name}
</div>
- <div className="remove-file">
+ <div className="remove-file" onClick={handleDelete}>
Excluir <DeleteIcon className="icon icon-remove"/>
- </div>
+ </div>
</div>
</div>
<div className="warning">
diff --git a/src/Components/UploadPageComponents/PartOne.js b/src/Components/UploadPageComponents/PartOne.js
index a85d309def9e5f813b015c89dfa0c1d378e82464..bd02f792230d6f69971c805b054fc3c137544f29 100644
--- a/src/Components/UploadPageComponents/PartOne.js
+++ b/src/Components/UploadPageComponents/PartOne.js
@@ -68,9 +68,12 @@ export default function PartOne (props) {
)
}, [])
+ const handleSubmit = () => {
+ props.stepperControl(1)
+ }
return (
- <form>
+ <form onSubmit={handleSubmit}>
{/*------------------------------Titulo-----------------------------------------*/}
<Grid item xs={12} style={{paddingBottom : "40px"}}>
<NewTitle draftID={props.draftID} onBlurCallback={SendInfo}/>
diff --git a/src/Components/UploadPageComponents/PartTwo.js b/src/Components/UploadPageComponents/PartTwo.js
index 49b5b49f89f710161a9fb35746fb6779d28cb9e4..29374bd7c875625165f5f0a14c02d3284f463539 100644
--- a/src/Components/UploadPageComponents/PartTwo.js
+++ b/src/Components/UploadPageComponents/PartTwo.js
@@ -125,8 +125,12 @@ export default function PartTwo (props) {
}
}
+ const handleSubmit = () => {
+ props.stepperControl(1)
+ }
+
return (
- <form style={{width : "100%"}}>
+ <form style={{width : "100%"}} onSubmit={handleSubmit}>
<Grid item xs={12} style={{paddingBottom : "40px"}}>
{chooseRenderStageThumbnail()}
</Grid>
diff --git a/src/Components/UploadPageComponents/ReactFileToUpload.js b/src/Components/UploadPageComponents/ReactFileToUpload.js
new file mode 100644
index 0000000000000000000000000000000000000000..d7342d9c1c0b9484c719e1085f2bc43973a81f6c
--- /dev/null
+++ b/src/Components/UploadPageComponents/ReactFileToUpload.js
@@ -0,0 +1,113 @@
+/*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 CloudUploadIcon from '@material-ui/icons/CloudUpload';
+import {DottedBox, BlueButton} from './StyledComponents.js';
+import {getAxiosConfig} from '../HelperFunctions/getAxiosConfig.js'
+import AddAPhotoIcon from '@material-ui/icons/AddAPhoto';
+import axios from 'axios'
+import {apiUrl} from '../../env';
+
+export default function ReactFileToUpload (props) {
+ const [fileToUpload, setFileToUpload] = useState(null);
+ const chunkSize = 262144
+ const uploadUrl = `${apiUrl}/learning_objects/` + props.draftID + '/chunk'
+ const [fileName, setFileName] = useState(null)
+ const [fileSize, setFileSize] = useState(null)
+ const [fileDoneUploading, setFileDoneUploading] = useState(false)
+
+ async function onFileChange (e) {
+ const files = e.target.files;
+ if(!files) return;
+
+ let newFile = e.target.files[0]
+ console.log(newFile)
+ setFileToUpload(newFile);
+ setFileName(newFile.name)
+ setFileSize(newFile.size)
+
+ let total = Math.ceil(newFile.size/chunkSize)
+ let currentChunkStartByte = 0;
+ let currentChunkFinalByte = chunkSize > newFile.size ? newFile.size : chunkSize;
+ let chunkIdentifier = props.draftID + '-' + newFile.name;
+ let remainingBytes = 0
+
+ for (var i = 0; i < total; i++) {
+ let chunk = newFile.slice(currentChunkStartByte, currentChunkFinalByte)
+ let config = getAxiosConfig()
+ let formData = new FormData()
+ formData.append('_chunkFilename', newFile.name);
+ formData.append('_chunkIdentifier', chunkIdentifier);
+ formData.append('_totalChunks', total);
+ formData.append('_chunkSize', chunkSize);
+ formData.append('_currentChunkSize', chunk.size);
+ formData.append('_chunkNumber', i);
+ formData.append('_totalSize', newFile.size);
+ formData.append('file', chunk);
+
+ try {
+ const response = await axios.post(uploadUrl, formData, config);
+ console.log(response)
+ if (response.headers['access-token']) {
+ sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token'])
+ }
+ remainingBytes = newFile.size - currentChunkFinalByte;
+ if (currentChunkFinalByte === newFile.size) {
+ setFileDoneUploading(true)
+ }
+ else if (remainingBytes < chunkSize) {
+ currentChunkStartByte = currentChunkFinalByte;
+ currentChunkFinalByte = currentChunkStartByte + remainingBytes;
+ }
+ else {
+ currentChunkStartByte = currentChunkFinalByte;
+ currentChunkFinalByte = currentChunkStartByte + chunkSize;
+ }
+ } catch (error) {
+ console.log(error)
+ }
+ }
+ };
+
+ return (
+ <div className="upload-container">
+ <h2 className="upload-title">File Uploader</h2>
+ <div className="upload-form">
+ <form id="file_upload">
+ <DottedBox
+ >
+ <AddAPhotoIcon className="icon"/>
+ <input
+ type="file"
+ onChange = {onFileChange}
+ id="upload-file-thumbnail"
+ style={{display : "none"}}
+ />
+ <BlueButton>
+ <label htmlFor="upload-file-thumbnail" style={{width : "inherit", cursor : "pointer"}}>
+ ESCOLHER IMAGEM
+ </label>
+ </BlueButton>
+ <span style={{marginTop : "6px"}}>Ou arrastar e soltar o arquivo aqui</span>
+ </DottedBox>
+ </form>
+ </div>
+ </div>
+ )
+}
diff --git a/src/Components/UploadPageComponents/StyledComponents.js b/src/Components/UploadPageComponents/StyledComponents.js
index 3efb83bc8fab21f6715ced8d9aff53d4f513bb5d..2bac9300c9e0085b20b308ad48c4714c1796faec 100644
--- a/src/Components/UploadPageComponents/StyledComponents.js
+++ b/src/Components/UploadPageComponents/StyledComponents.js
@@ -235,13 +235,14 @@ export const WrapperBox = styled.div`
color : #00bcd4;
margin-right : 5px;
}
+ .MuiLinearProgress-root {
+ width : 100% !important;
+ }
}
- remove-file {
- .icon-remove {
- color : #666;
- font-size : 20px;
- }
+ .icon-remove {
+ color : #666;
+ font-size : 20px;
}
}
}
diff --git a/src/Components/UploadPageComponents/UploadFileWrapper.js b/src/Components/UploadPageComponents/UploadFileWrapper.js
index 61a95c3ed6256e60f043a011e3caba27059aa46a..1a733d5deed6525bf3c6cbf28b835102803200f5 100644
--- a/src/Components/UploadPageComponents/UploadFileWrapper.js
+++ b/src/Components/UploadPageComponents/UploadFileWrapper.js
@@ -20,16 +20,28 @@ import React, {useState} from 'react'
import LinkIcon from '../../img/link_icon.svg'
import ChooseLink from './ChooseLinkSection.js'
import {WrapperBox, StyledTextField, BlueButton, GrayButton} from './StyledComponents.js';
-import UploadMediaComponent from './DragAndDrop.tsx'
+import UploadMediaComponent from './ReactFileToUpload.js'
import FileUploadStage from './FileUploadStage.js'
+import CloudUploadIcon from '@material-ui/icons/CloudUpload';
+import {DottedBox} from './StyledComponents.js';
+import {getAxiosConfig} from '../HelperFunctions/getAxiosConfig.js'
+import AddAPhotoIcon from '@material-ui/icons/AddAPhoto';
+import axios from 'axios'
+import {apiUrl} from '../../env';
+import DoneIcon from '@material-ui/icons/Done';
+import DeleteIcon from '@material-ui/icons/Delete';
+import LinearProgress from '@material-ui/core/LinearProgress';
+import Alert from '../Alert.js';
+import Snackbar from '@material-ui/core/Snackbar';
export default function UploadFileWrapper (props) {
/*-----------------------------------------------------------------
- Wrapper for file upload box
- has three different stages:
- - Default, contained within this function's default return
+ - Default: prompts user to select a file or a link
- Choosing Link: displayed when the user selects "ENVIAR LINK"; renders "ChooseLinkSection.js"
- - Uploading File: displayed when the user chooses a file to upload. The file upload box is in "DragAndDrop.js", and the actual upload view is in "FileUploadStage.js"
+ - file selected: displayed when the user has chosen a file to upload. this section shows the upload progress and lets the user delete the current object and return to default stage
+ - error: displayed when an error occurs during the file upload.
- Props used:
- submit : called when the user clicks "ENVIAR" inside ChooseLinkSection; renders the alert snackbar to let them know the link was submitted
@@ -38,22 +50,208 @@ export default function UploadFileWrapper (props) {
const [stage, setStage] = useState("default")
const handleNextStage = (newStage) => {setStage(newStage)}
- const [files, setFile] = useState([])
+ const [fileToUpload, setFileToUpload] = useState(null);
+ const chunkSize = 262144
+ const uploadUrl = `${apiUrl}/learning_objects/` + props.draftID + '/chunk'
+ const [fileName, setFileName] = useState(null)
+ const [fileDoneUploading, setFileDoneUploading] = useState(false)
+ const [uploadProgress, setProgress] = useState(0)
+ const [attachmentID, setAttachmentID] = useState(null)
+
+ async function onFileChange (file) {
+ if(!file) return;
+
+ let newFile = file
+ console.log(newFile)
+ setFileToUpload(newFile);
+ setFileName(newFile.name)
+
+ let total = Math.ceil(newFile.size/chunkSize)
+ let currentChunkStartByte = 0;
+ let currentChunkFinalByte = chunkSize > newFile.size ? newFile.size : chunkSize;
+ let chunkIdentifier = props.draftID + '-' + newFile.name;
+ let remainingBytes = 0
+ handleNextStage("fileSelected")
+ for (var i = 0; i < total; i++) {
+ let chunk = newFile.slice(currentChunkStartByte, currentChunkFinalByte)
+ let config = getAxiosConfig()
+ let formData = new FormData()
+ formData.append('_chunkFilename', newFile.name);
+ formData.append('_chunkIdentifier', chunkIdentifier);
+ formData.append('_totalChunks', total);
+ formData.append('_chunkSize', chunkSize);
+ formData.append('_currentChunkSize', chunk.size);
+ formData.append('_chunkNumber', i);
+ formData.append('_totalSize', newFile.size);
+ formData.append('file', chunk);
+
+ try {
+ const response = await axios.post(uploadUrl, formData, config);
+ console.log(response)
+ if (response.headers['access-token']) {
+ sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token'])
+ }
+ setProgress(Math.round((currentChunkFinalByte/newFile.size) * 100))
+ remainingBytes = newFile.size - currentChunkFinalByte;
+ if (currentChunkFinalByte === newFile.size) {
+ setFileDoneUploading(true)
+ setAttachmentID(response.data.id)
+ }
+ else if (remainingBytes < chunkSize) {
+ currentChunkStartByte = currentChunkFinalByte;
+ currentChunkFinalByte = currentChunkStartByte + remainingBytes;
+ }
+ else {
+ currentChunkStartByte = currentChunkFinalByte;
+ currentChunkFinalByte = currentChunkStartByte + chunkSize;
+ }
+ } catch (error) {
+ console.log(error)
+ handleNextStage("error")
+ return;
+ }
+ }
+ };
+
+ const handleDelete = () => {
+ if (attachmentID != null) {
+
+ let config = getAxiosConfig()
+ axios.delete( (`${apiUrl}/learning_objects/` + props.draftID + '/attachment/' + attachmentID), config).then(
+ (response) => {
+ console.log(response)
+ if ( response.headers['access-token'] ) {
+ sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token'])
+ }
+ handleNextStage("default")
+ },
+ (error) => {console.log(error)})
+ }
+ }
+
+ const handleCancel = () => {
+ console.log('cancelar request')
+ }
+
+ const handleDragOver = e => {
+ e.preventDefault();
+ e.stopPropagation();
+ e.dataTransfer.dropEffect = 'copy';
+ };
+
+ const handleDrop = e => {
+ e.preventDefault();
+ e.stopPropagation();
+ let files = [...e.dataTransfer.files]
+
+ console.log('files: ', files)
+ if (files && files.length > 0) {
+ onFileChange(files[0])
+ }
+ };
+
+ const [snackbarOpen, toggleSnackbar] = useState(false)
+ const handleChooseLink = (link) => {
+ let config = getAxiosConfig()
+ let payload = {
+ "learning_object" : {
+ "id" : props.draftID,
+ "link" : link
+ }
+ }
+ axios.put((`${apiUrl}/learning_objects/` + props.draftID), payload, config).then(
+ (response) => {
+ console.log(response)
+ if ( response.headers['access-token'] ) {
+ sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token'])
+ }
+ toggleSnackbar(true)
+ }, (error) => {
+ console.log(error)
+ }
+ )
- const acceptFile = (files) => {
- console.log(files)
- setFile(files)
- setStage("fileSelected")
}
switch (stage) {
+ case "error":
+ return(
+ <WrapperBox>
+ <div className="inner">
+ <div className="upload-title"> Enviar Link</div>
+ <span>Ocorreu um erro, clique no botão para tentar novamente.</span>
+ <div className="flex-column">
+ <div className="buttons-div">
+ <GrayButton onClick={() => {handleNextStage("default")}}>
+ <span className="button-text">
+ Voltar
+ </span>
+ </GrayButton>
+ </div>
+ </div>
+ </div>
+ </WrapperBox>
+ )
+ break;
case "fileSelected":
return(
- <FileUploadStage files={files}/>
+ <WrapperBox>
+ <div className="inner">
+ <div className="upload-title">
+ {fileDoneUploading ? 'O arquivo foi carregado' : 'Carregando arquivo'}
+ </div>
+
+ <div className="uploading">
+ <div className="upload-item">
+ <div className="item-info">
+ {
+ fileDoneUploading ?
+ (
+ <React.Fragment>
+ <div className="file-status">
+ <DoneIcon className="icon icon-margin"/> {fileName}
+ </div>
+ <GrayButton onClick={() => {handleDelete()}}>
+ Excluir <DeleteIcon className="icon icon-remove"/>
+ </GrayButton>
+ </React.Fragment>
+ )
+ :
+ (
+ <React.Fragment>
+ <div className="file-status">
+ {uploadProgress}% {fileName}
+ </div>
+ <GrayButton onClick={() => {handleCancel()}}>
+ Cancelar <DeleteIcon className="icon icon-remove"/>
+ </GrayButton>
+ </React.Fragment>
+ )
+ }
+ </div>
+ </div>
+ <div className="warning">
+ <span>Não se esqueça de preencher as</span>
+ <br/>
+ <span>informações sobre o recurso ao lado.</span>
+ </div>
+ </div>
+ </div>
+ </WrapperBox>
)
+ break;
case "choosingLink":
return (
- <ChooseLink handleNextStage={handleNextStage} submit={props.submit}/>
+ <React.Fragment>
+ <Snackbar open={snackbarOpen} autoHideDuration={1000} onClose={() => {toggleSnackbar(false)}}
+ anchorOrigin = {{ vertical:'top', horizontal:'right' }}
+ >
+ <Alert severity="info" style={{backgroundColor:"#00acc1"}}>
+ Link salvo com sucesso!
+ </Alert>
+ </Snackbar>
+ <ChooseLink handleNextStage={handleNextStage} submit={handleChooseLink}/>
+ </React.Fragment>
)
break;
default:
@@ -62,8 +260,32 @@ export default function UploadFileWrapper (props) {
<div className="inner">
<div className="upload-title"> Enviar Recurso</div>
<div className="flex-column">
- {/*props.draftID*/}
- <UploadMediaComponent draftID={props.draftID}/>
+
+ <div className="upload-container">
+ <div className="upload-form">
+ <form id="file_upload">
+ <DottedBox
+ onDrop={e => handleDrop(e)}
+ onDragOver={e => handleDragOver(e)}
+ >
+ <AddAPhotoIcon className="icon"/>
+ <input
+ type="file"
+ onChange = {(e) => {onFileChange(e.target.files[0])}}
+ id="upload-file"
+ style={{display : "none"}}
+ />
+ <BlueButton>
+ <label htmlFor="upload-file" style={{width : "inherit", cursor : "pointer"}}>
+ ESCOLHER IMAGEM
+ </label>
+ </BlueButton>
+ <span style={{marginTop : "6px"}}>Ou arrastar e soltar o arquivo aqui</span>
+ </DottedBox>
+ </form>
+ </div>
+ </div>
+
<div className="strike-box">
<div className="strike"/><h3>ou</h3><div className="strike"/>
</div>
diff --git a/src/Pages/TermsPage.js b/src/Pages/TermsPage.js
index 47d1b67c4b2eba7fd75e849a09b5873b62dffa48..7a168814b56a521e46b8a86e5dd2155b25e168f4 100644
--- a/src/Pages/TermsPage.js
+++ b/src/Pages/TermsPage.js
@@ -24,7 +24,9 @@ import Card from '@material-ui/core/Card';
import CardActions from '@material-ui/core/CardActions';
import LabeledCheckbox from "../Components/Checkbox.js"
import TermsPageContent from '../Components/TermsPageContent.js'
-
+import AppBar from '@material-ui/core/AppBar';
+import { makeStyles } from '@material-ui/core/styles';
+import {Link} from 'react-router-dom'
const CardStyled = styled(Card)`
box-sizing : border-box;
background-color : white;
@@ -81,6 +83,7 @@ export default function TermsContainer (props) {
const {state, dispatch} = useContext(Store)
const [checked, setChecked] = useState(false);
const [unavailableButton, setButtonAvailability] = useState(true);
+ const classes = useStyles()
const handleChecked = e => {
setChecked(e.target.checked);
@@ -105,32 +108,124 @@ export default function TermsContainer (props) {
return (
<Background>
<div className="container">
- <CardStyled variant="outlined">
- <TermsPageContent/>
- <CardActions style={{justifyContent:"center", padding:"25px", borderTop : "2px solid #dadada"}}>
- <div>
+ <CardStyled variant="outlined">
+ <TermsPageContent/>
+ </CardStyled>
+ </div>
+ <AppBar position="fixed" color="primary" className={classes.appBar}>
+ <StyledAppBarContainer>
+ <div className="container">
<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}/>
- <div style={{marginLeft:"1em", paddingLeft:"16px", color:"#a0a0a0", justifyContent:"center",display:"flex"}}>
- <Button disabled = {unavailableButton}
- style={ unavailableButton ? {backgroundColor:"#e9e9e9"} : {backgroundColor:"#00bcd4"}}
- onClick={handleAgreement}
- >
- <StyledSpanContinuar style={unavailableButton ? {color:"#666666"} : {}}>
+ <LabeledCheckbox label={<Styledspan style={{color : "#666", fontWeight : "600"}}>Li e concordo com os termos de uso da Plataforma Integrada de RED do MEC</Styledspan>} handleChange={handleChecked}/>
+ </div>
+ <div className="botoes">
+ <Button disabled = {unavailableButton}
+ style={ unavailableButton ? {backgroundColor:"#e9e9e9"} : {backgroundColor:"#00bcd4"}}
+ onClick={handleAgreement}
+ >
+ <StyledSpanContinuar style={unavailableButton ? {color:"#666666"} : {}}>
Continuar
- </StyledSpanContinuar>
- </Button>
- <Button style={{marginLeft:"45px", backgroundColor:"#e9e9e9"}}>
- <Styledspan style={{color:"rgb(102, 102, 102)"}}>
- Cancelar
- </Styledspan>
- </Button>
- </div>
+ </StyledSpanContinuar>
+ </Button>
+ <Link to="/">
+ <GrayButton>
+ Cancelar
+ </GrayButton>
+ </Link>
</div>
</div>
- </CardActions>
- </CardStyled>
- </div>
+ </StyledAppBarContainer>
+ </AppBar>
</Background>
)
}
+
+const GrayButton = styled(Button)`
+ &:hover {
+ background-color : rgba(158,158,158,0.2) !important;
+ }
+ height : 36px !important;
+ font-weight : 600 !important;
+ color : #666 !important;
+ background-color: transparent;
+ min-width : 88px !important;
+ height : 36px !important;
+ margin-left : 8px !important;
+ margin-right : 8px !important;
+
+ .button-text {
+ cursor : pointer;
+ line-height : 22px;
+ text-align : center;
+ color : currentColor;
+ white-space : nowrap;
+ text-transform : uppercase;
+ font-weight : 600;
+ font-size : 15px;
+ font-style : inherit;
+ font-variant : inherit;
+ font-family: 'Roboto', sans serif;
+ letter-spacing: .01em;
+ }
+`
+
+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 : column;
+ justify-content : flex-start
+ margin-right : auto;
+ margin-left : auto;
+ padding-top : 5px;
+
+ @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;
+ padding : 0 1em 1em 1em;
+ }
+
+ .botoes {
+ display : flex;
+ align-items : center;
+ }
+ }
+`
+
+{/*<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}/>
+<div style={{marginLeft:"1em", paddingLeft:"16px", color:"#a0a0a0", justifyContent:"center",display:"flex"}}>
+<Button disabled = {unavailableButton}
+style={ unavailableButton ? {backgroundColor:"#e9e9e9"} : {backgroundColor:"#00bcd4"}}
+onClick={handleAgreement}
+>
+<StyledSpanContinuar style={unavailableButton ? {color:"#666666"} : {}}>
+Continuar
+</StyledSpanContinuar>
+</Button>
+<Button style={{marginLeft:"45px", backgroundColor:"#e9e9e9"}}>
+<Styledspan style={{color:"rgb(102, 102, 102)"}}>
+Cancelar
+</Styledspan>
+</Button>
+</div>
+</div>
+</div>
+</CardActions>*/}
diff --git a/src/Pages/UploadPage.js b/src/Pages/UploadPage.js
index 08992d894710d1aea35e801a59ad364dd83ac540..b37b9238f2b948b90ab935b77c1f24efb6afb38c 100644
--- a/src/Pages/UploadPage.js
+++ b/src/Pages/UploadPage.js
@@ -21,8 +21,6 @@ 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 {Store} from '../Store.js'
import {InfoBox} from '../Components/UploadPageComponents/StyledComponents.js'
import Stepper from '../Components/UploadPageComponents/Stepper.js'
@@ -32,21 +30,16 @@ 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'
+import LoadingSpinner from '../Components/LoadingSpinner.js'
+import {Redirect} from 'react-router-dom'
export default function UploadPage (props) {
const {state} = useContext(Store)
{/*Object : link or file uploaded*/}
const [object, setObject] = useState()
- const [userPickedObject, togglePickedObject] = useState(false)
- const handleChooseObject = (obj) => {
- setObject(obj)
- togglePickedObject(true)
- toggleSnackbar(true)
- }
-
- const [snackbarOpen, toggleSnackbar] = useState(false)
+ const [loading, toggleLoading] = useState(true)
const [draft, setDraft] = useState({})
useEffect( () => {
if (state.currentUser.id !== "") {
@@ -58,6 +51,7 @@ export default function UploadPage (props) {
sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token'])
}
setDraft(response.data)
+ toggleLoading(false)
console.log(response)
}, (error) => {console.log(error)})
}
@@ -109,72 +103,65 @@ export default function UploadPage (props) {
return (
<React.Fragment>
{
- state.currentUser.id !== '' ?
- (
- <React.Fragment>
- <Snackbar open={snackbarOpen} autoHideDuration={1000} onClose={() => {toggleSnackbar(false)}}
- anchorOrigin = {{ vertical:'top', horizontal:'right' }}
- >
- <Alert severity="info" style={{backgroundColor:"#00acc1"}}>
- Link salvo com sucesso!
- </Alert>
- </Snackbar>
-
- <ModalLearningObjectPublished
- open={objectSubmitted}
- handleClose={() => {toggleModal(false); props.history.push('/')}}
- draftID={draft.id}
- />
-
+ state.currentUser.id === '' &&
+ <Redirect to="/"/>
+ }
{
- activeStep === 2 ?
+ loading === true ?
(
- <PartThree draftID={draft.id} stepperControl={stepperControl} activeStep={activeStep} handlePost={handlePost} handleSubmit={handleSubmit}/>
+ <LoadingSpinner text={"CARREGANDO..."}/>
)
:
(
- <Background>
- <div className="container">
- <Grid container spacing={2}>
- <Grid item md={4} xs={12}>
- <UploadFileWrapper submit={handleChooseObject} draftID={draft.id}/>
- </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 draftID={draft.id} stepperControl={stepperControl}/>
- </Grid>
- }
- {
- activeStep === 1 &&
- <Grid container style={{paddingLeft : "15px", paddingRight : "15px"}}>
- <PartTwo draftID={draft.id} stepperControl={stepperControl}/>
+ <>
+ <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">
+ <Grid container spacing={2}>
+ <Grid item md={4} xs={12}>
+ <UploadFileWrapper draftID={draft.id}/>
+ </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 draftID={draft.id} stepperControl={stepperControl}/>
+ </Grid>
+ }
+ {
+ activeStep === 1 &&
+ <Grid container style={{paddingLeft : "15px", paddingRight : "15px"}}>
+ <PartTwo draftID={draft.id} stepperControl={stepperControl}/>
+ </Grid>
+ }
+ </InfoBox>
+ </Grid>
</Grid>
- }
- </InfoBox>
- </Grid>
- </Grid>
- </div>
- </Background>
- )
+ </div>
+ </Background>
+ )
+ }
+ </>
+ )
}
</React.Fragment>
- )
- :
- (
- <>
- {props.history.push("/")}
- </>
- )
- }
- </React.Fragment>
- )
+)
}