From f9aac1191357933030b1040e2af1be1fb6a1dafe Mon Sep 17 00:00:00 2001
From: Lucas Schoenfelder <les17@inf.ufpr.br>
Date: Wed, 12 Feb 2020 19:47:09 -0300
Subject: [PATCH] layout pagina inicial de /professor pronto
---
src/App.js | 3 +-
src/Components/Header.js | 2 +-
src/Components/LoginContainerFunction.js | 4 +-
.../PageProfessorComponents/PartOne.js | 163 ++++++++++++++++++
.../PageProfessorComponents/PartThree.js | 7 +
.../PageProfessorComponents/PartTwo.js | 7 +
src/Components/Stepper.js | 53 ++++++
.../TabPanelSolicitarContaProfessor.js | 4 +-
src/Pages/PageProfessor.js | 93 ++++++++++
src/Pages/TermsPage.js | 9 +-
src/Pages/UserPage.js | 2 +-
src/Store.js | 2 +-
12 files changed, 338 insertions(+), 11 deletions(-)
create mode 100644 src/Components/PageProfessorComponents/PartOne.js
create mode 100644 src/Components/PageProfessorComponents/PartThree.js
create mode 100644 src/Components/PageProfessorComponents/PartTwo.js
create mode 100644 src/Components/Stepper.js
create mode 100644 src/Pages/PageProfessor.js
diff --git a/src/App.js b/src/App.js
index d2251d22..7b1049e2 100644
--- a/src/App.js
+++ b/src/App.js
@@ -26,7 +26,7 @@ import UserPage from './Pages/UserPage';
import UserTerms from './Pages/UserTerms';
import PasswordRecoveryPage from './Pages/PasswordRecoveryPage.js'
import Teste from './Pages/Teste';
-
+import PageProfessor from './Pages/PageProfessor.js'
import ResourcePage from './Pages/ResourcePage';
import {BrowserRouter, Switch, Route} from 'react-router-dom';
import { Store } from './Store'
@@ -82,6 +82,7 @@ export default function App(){
<Route path="/teste" component={Teste}/>
<Route path="/contato" component = {Contact}/>
<Route path="/recuperar-senha" component={PasswordRecoveryPage}/>
+ <Route path='/professor' component={PageProfessor}/>
</Switch>
<EcFooter/>
<GNUAGPLfooter/>
diff --git a/src/Components/Header.js b/src/Components/Header.js
index 475572e1..c7821b5a 100644
--- a/src/Components/Header.js
+++ b/src/Components/Header.js
@@ -42,7 +42,7 @@ export default function Header(props){
const [signUpOpen, setSignUp] = useState(false)
const [loginOpen, setLogin] = useState(false)
const [successfulLoginOpen, handleSuccessfulLogin] = useState(false)
- const [modalColaborar, setModalColaborar] = useState(true)
+ const [modalColaborar, setModalColaborar] = useState(false)
const toggleSnackbar = (event, reason) => {
if (reason === 'clickaway') {
diff --git a/src/Components/LoginContainerFunction.js b/src/Components/LoginContainerFunction.js
index b02c7fcd..15b7c858 100644
--- a/src/Components/LoginContainerFunction.js
+++ b/src/Components/LoginContainerFunction.js
@@ -259,7 +259,7 @@ export default function LoginContainer (props) {
`
- const RightSideStrikedH3 = styled.div`
+export const RightSideStrikedH3 = styled.div`
display : inline-block;
border-bottom: 1px dotted #666;
vertical-align : middle;
@@ -268,7 +268,7 @@ export default function LoginContainer (props) {
width : 45%;
`
- const LeftSideStrikedH3 = styled.div`
+ export const LeftSideStrikedH3 = styled.div`
display : inline-block;
border-bottom: 1px dotted #666;
vertical-align : middle;
diff --git a/src/Components/PageProfessorComponents/PartOne.js b/src/Components/PageProfessorComponents/PartOne.js
new file mode 100644
index 00000000..d3e604a1
--- /dev/null
+++ b/src/Components/PageProfessorComponents/PartOne.js
@@ -0,0 +1,163 @@
+import React, {useState} from 'react'
+import styled from 'styled-components'
+import Stepper from '../Stepper.js'
+import FormControl from '@material-ui/core/FormControl';
+import MenuItem from '@material-ui/core/MenuItem';
+import Select from '@material-ui/core/Select';
+import InputLabel from '@material-ui/core/InputLabel';
+import {Button} from '@material-ui/core'
+import {RightSideStrikedH3, LeftSideStrikedH3} from '../LoginContainerFunction.js'
+import Divider from '@material-ui/core/Divider';
+import {ButtonCancelar} from '../TabPanels/TabPanelEditarPerfil.js'
+
+export default function PartOne (props) {
+ const [uf, setUF] = useState('')
+ const handleChangeUF = (event) => {setUF(event.target.value)}
+
+ const [municipio, setMunicipio] = useState('')
+ const handleChangeMunicipio = (event) => {setMunicipio(event.target.value)}
+
+ return (
+ <>
+ <Content>
+ <h4>Vamos localizar o seu cadastro:</h4>
+ <Stepper items={props.stepper}/>
+ <form style={{textAlign:"start"}}>
+ <p>Localize pelo menos uma escola que você tenha atuado até maio de 2017:</p>
+ <FormControl required style={{width:"100%"}}>
+ <InputLabel>Procure sua UF</InputLabel>
+ <Select
+ labelId="demo-simple-select-label"
+ id="demo-simple-select"
+ value={uf}
+ onChange={handleChangeUF}
+ >
+ <MenuItem value={10}>Ten</MenuItem>
+ <MenuItem value={20}>Twenty</MenuItem>
+ <MenuItem value={30}>Thirty</MenuItem>
+ </Select>
+ </FormControl>
+ <FormControl required style={{width:"100%"}}>
+ <InputLabel>Busque o seu municÃpio</InputLabel>
+ <Select
+ labelId="demo-simple-select-label"
+ id="demo-simple-select"
+ value={municipio}
+ onChange={handleChangeMunicipio}
+ >
+ <MenuItem value={10}>Ten</MenuItem>
+ <MenuItem value={20}>Twenty</MenuItem>
+ <MenuItem value={30}>Thirty</MenuItem>
+ </Select>
+ </FormControl>
+ <div style={{display:"flex", justifyContent:"center",paddingTop:"10px", paddingBottom:"10px"}}>
+ <ButtonConfirmar onClick={props.handleBuscar}>BUSCAR</ButtonConfirmar>
+ </div>
+ </form>
+ </Content>
+ <div style={{display:"flex", justifyContent:"center", alignItems:"center"}}>
+ <LeftSideStrikedH3/><StrikeSpan>ou</StrikeSpan><RightSideStrikedH3/>
+ </div>
+ <Content>
+ <form>
+ <p>Localize pelo código INEP da escola:</p>
+ <FormControl required style={{width:"100%"}}>
+ <InputLabel>Código INEP</InputLabel>
+ <Select
+ labelId="demo-simple-select-label"
+ id="demo-simple-select"
+ value={municipio}
+ onChange={handleChangeMunicipio}
+ >
+ <MenuItem value={10}>Ten</MenuItem>
+ <MenuItem value={20}>Twenty</MenuItem>
+ <MenuItem value={30}>Thirty</MenuItem>
+ </Select>
+ </FormControl>
+ <div style={{display:"flex", justifyContent:"center",paddingTop:"10px", paddingBottom:"10px"}}>
+ <ButtonConfirmar onClick={props.handleBuscar}>BUSCAR</ButtonConfirmar>
+ </div>
+ </form>
+ </Content>
+ <Divider/>
+ <ButtonsArea>
+ <ButtonCancelar>CANCELAR VERIFICAÇÃO</ButtonCancelar>
+ </ButtonsArea>
+ </>
+ )
+}
+
+const ButtonsArea = styled.div`
+ display : flex;
+ justify-content : center;
+ padding-top : 10px;
+ padding-bottom : 10px;
+`
+
+const StrikeSpan = styled.span`
+ vertical-align : middle;
+ font-family : Roboto;
+ font-style : normal;
+ font-weight : 500;
+ line-height : 22px;
+ font-size : 15px;
+ letter-spacing : .01em;
+`
+
+export const Content = styled.div`
+ margin-top : 16px;
+ margin-bottom : 16px;
+ margin-right : 10%;
+ margin-left : 10%;
+
+ h4 {
+ text-align : center;
+ magin-bottom : 20px;
+ font-family: Roboto;
+ font-style : normal;
+ font-weight : 300;
+ line-height : 36px;
+ font-size : 26px;
+ margin-top : 20px;
+ }
+
+ p {
+ font-family : Roboto;
+ font-style : normal;
+ font-weight : 400;
+ line-height : 21px;
+ font-size : 15px;
+ }
+`
+const ButtonConfirmar = styled(Button)`
+ background-color : #00bcd4 !important;
+ color : #fff !important;
+ font-family : 'Roboto',sans-serif !important;
+ font-size : 14px !important;
+ font-weight : bolder !important;
+ padding-left : 16px !important;
+ padding-right : 16px !important;
+ outline : none !important;
+ margin : 6px 8px !important;
+ white-space : nowrap !important;
+ text-transform : uppercase !important;
+ font-weight : bold !important;
+ font-size : 14px !important;
+ font-style : inherit !important;
+ font-variant : inherit !important;
+ font-family : inherit !important;
+ text-decoration : none !important;
+ overflow : hidden !important;
+ display : inline-block !important;
+ position : relative !important;
+ cursor : pointer !important;
+ min-height : 36px !important;
+ min-width : 88px !important;
+ line-height : 36px !important;
+ vertical-align : middle !important;
+ align-items : center !important;
+ text-align : center !important;
+ border-radius : 3px !important;
+ box-sizing : border-box !important;
+ border : 0 !important;
+`
diff --git a/src/Components/PageProfessorComponents/PartThree.js b/src/Components/PageProfessorComponents/PartThree.js
new file mode 100644
index 00000000..50b355ca
--- /dev/null
+++ b/src/Components/PageProfessorComponents/PartThree.js
@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default function PartThree (props) {
+ return (
+ <span>Part Three</span>
+ )
+}
diff --git a/src/Components/PageProfessorComponents/PartTwo.js b/src/Components/PageProfessorComponents/PartTwo.js
new file mode 100644
index 00000000..8ad76c9f
--- /dev/null
+++ b/src/Components/PageProfessorComponents/PartTwo.js
@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default function PartTwo (props) {
+ return (
+ <span>Part Two</span>
+ )
+}
diff --git a/src/Components/Stepper.js b/src/Components/Stepper.js
new file mode 100644
index 00000000..c550c2d9
--- /dev/null
+++ b/src/Components/Stepper.js
@@ -0,0 +1,53 @@
+import React, {useState} from 'react'
+import styled from 'styled-components'
+
+export default function Stepper (props) {
+
+ return (
+ <div style={{display:"flex",justifyContent:"center", marginBottom:"50px"}}>
+ <FeedbackUpload>
+ {
+ props.items.map((item)=>
+ <div className={"page-selector " + (item.selected ? 'selected' : '')} >
+ {item.value}
+ </div>
+ )
+ }
+ </FeedbackUpload>
+ </div>
+ )
+}
+
+const FeedbackUpload = styled.div`
+ width : 280px;
+ display : flex;
+ background :#e5e5e5;
+ flex-direction : row;
+ justify-content : space-between;
+ height : 50px;
+ align-items : center;
+ padding : 7px;
+ border-radius : 50px;
+ margin-top : 20px;
+
+ .page-selector {
+ height : 36px;
+ width : 36px;
+ background : #fff;
+ border-radius : 50%;
+ color : #00bcd4;
+ line-height : 32px;
+ font-size : 20px;
+ font-weight : 500;
+ border: solid 3px #00bcd4;
+ text-align: center;
+ align-items : center;
+ vertical-align:middle;
+ }
+
+ .selected {
+ background : #00bcd4;
+ color : #fff;
+ border-color : #00bcd4;
+ }
+`
diff --git a/src/Components/TabPanels/TabPanelSolicitarContaProfessor.js b/src/Components/TabPanels/TabPanelSolicitarContaProfessor.js
index cd461887..648a3321 100644
--- a/src/Components/TabPanels/TabPanelSolicitarContaProfessor.js
+++ b/src/Components/TabPanels/TabPanelSolicitarContaProfessor.js
@@ -14,7 +14,7 @@ export default function TabPanelSolicitarContaProfessor (props) {
<div className='card-config'>
<div className='content-div'>
{
- state.currentUser.submitter_request == 'default' || state.currentUser.submitter_request == 'rejected' ?
+ state.currentUser.submitter_request === 'default' || state.currentUser.submitter_request === 'rejected' ?
(
[
<div style={{paddingLeft:"100px", paddingRight:"101px"}}>
@@ -36,7 +36,7 @@ export default function TabPanelSolicitarContaProfessor (props) {
[
<>
{
- state.currentUser.submitter_request == 'requested' ?
+ state.currentUser.submitter_request === 'requested' ?
(
[
<span>Requested</span>
diff --git a/src/Pages/PageProfessor.js b/src/Pages/PageProfessor.js
new file mode 100644
index 00000000..4905f415
--- /dev/null
+++ b/src/Pages/PageProfessor.js
@@ -0,0 +1,93 @@
+import React, {useState,useContext} from 'react'
+import {Store} from '../Store.js'
+import styled from 'styled-components'
+import Paper from '@material-ui/core/Paper';
+import PartOne from '../Components/PageProfessorComponents/PartOne.js'
+import PartTwo from '../Components/PageProfessorComponents/PartTwo.js'
+import PartThree from '../Components/PageProfessorComponents/PartThree.js'
+
+export default function PageProfessor (props) {
+ const {state, dispatch} = useContext(Store)
+
+ const redirect = () => {
+ props.history.push('/termos-publicar-recurso')
+ }
+
+ const [stepper, handleStepper] = useState(
+ [ {value : '1', selected : true}, {value : '2', selected : false}, {value : '3', selected : false} ]
+ )
+
+ const handleBuscar = () => {
+ handleStepper(
+ [ {value : '1', selected : false}, {value : '2', selected : true}, {value : '3', selected : false} ]
+ )
+ }
+
+ const handleCancelar = () => {
+ props.history.push('/perfil/atualizacoes')
+ }
+
+ return (
+ <>
+ {
+ state.userAgreedToPublicationTerms?
+ (
+ [
+ <div style={{backgroundColor:"#f4f4f4", color:"#666"}}>
+ <div style={{display: "flex", justifyContent:"center", paddingTop:"5vh", paddingBottom:"5vh"}}>
+ <Paper elevation={3} style= {{width:"max-content"}}>
+ <div style={{paddingRight:"15px", paddingLeft:"15px"}}>
+ {stepper[0].selected && <PartOne stepper={stepper} handleBuscar={handleBuscar} handleCancelar={handleCancelar}/>}
+ {stepper[1].selected && <PartTwo/>}
+ {stepper[2].selected && <PartThree/>}
+ </div>
+ </Paper>
+ </div>
+ </div>
+ ]
+ )
+ :
+ (
+ <>
+ {redirect()}
+ </>
+ )
+ }
+ </>
+ )
+}
+
+const ContainerDiv = styled.div`
+ .card {
+ box-shadow : 0 0 5px 0 rgba(0,0,0,.25);
+ background-color :#fff;
+ text-align : start;
+ margin-left : auto;
+ margin-right : auto;
+ }
+
+ .part-one {
+ max-width : 570px;
+ }
+
+ .container {
+ padding-right : 15px;
+ padding-left : 15px;
+ }
+
+ .content {
+ margin-top : 16px;
+ margin-bottom : 16px;
+ margin-right : 10%;
+ margin-left : 10%;
+ }
+
+ h4 {
+ font-family : Roboto;
+ font-style : normal;
+ font-weight : 300;
+ line-height : 36px;
+ font-size : 26px;
+ margin-top : 20px;
+ }
+`
diff --git a/src/Pages/TermsPage.js b/src/Pages/TermsPage.js
index 65081cf7..e0b6dde2 100644
--- a/src/Pages/TermsPage.js
+++ b/src/Pages/TermsPage.js
@@ -76,9 +76,12 @@ export default function TermsContainer (props) {
userAgreement: true
})
- props.history.push('/permission')
-
- window.scrollTo(0, 0)
+ if (props.location.state.redirectedFromModal) {
+ props.history.push('/professor')
+ }else {
+ props.history.push('/permission')
+ window.scrollTo(0, 0)
+ }
}
return (
diff --git a/src/Pages/UserPage.js b/src/Pages/UserPage.js
index 28b81c21..76b15fe3 100644
--- a/src/Pages/UserPage.js
+++ b/src/Pages/UserPage.js
@@ -112,7 +112,7 @@ export default function UserPage (props){
const updateCover = (selectorFiles : FileList) => {
console.log(selectorFiles)
- console.log(selectorFiles[0].name)
+ console.log(selectorFiles[0])
}
return (
diff --git a/src/Store.js b/src/Store.js
index 3225fef5..d57a0cde 100644
--- a/src/Store.js
+++ b/src/Store.js
@@ -23,7 +23,7 @@ export const Store = React.createContext()
const initialState = {
searchOpen: false,
userIsLoggedIn : false,
- userAgreedToPublicationTerms: false,
+ userAgreedToPublicationTerms: true,
userAgreedToPublicationPermissions: false,
modalColaborarPlataformaOpen : false,
search: {
--
GitLab