From 2fe641609616900bfe1d52d88dc65394f130fc6e Mon Sep 17 00:00:00 2001
From: Lucas Schoenfelder <les17@inf.ufpr.br>
Date: Tue, 18 Feb 2020 20:36:59 -0300
Subject: [PATCH] tela requisicao para ser professor pronta
---
package-lock.json | 23 ++-
package.json | 1 +
src/Components/ModalConfirmarProfessor.js | 157 ++++++++++++++++++
.../PageProfessorComponents/PartOne.js | 3 +-
.../PageProfessorComponents/PartThree.js | 16 +-
.../PageProfessorComponents/PartTwo.js | 12 +-
src/Components/Table.js | 1 -
src/Pages/PageProfessor.js | 89 ++++++----
8 files changed, 254 insertions(+), 48 deletions(-)
create mode 100644 src/Components/ModalConfirmarProfessor.js
diff --git a/package-lock.json b/package-lock.json
index 99817446..4bb79c10 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2338,9 +2338,9 @@
"integrity": "sha512-1dVNHT76Uu5N3eJNTYcvxee+jzX4Z9lfciqRRHCU27ihbUcYi+iSc2iml5Ke1LXe1SyJCLA0+14Jh4tXJgOppA=="
},
"@hapi/hoek": {
- "version": "8.5.0",
- "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-8.5.0.tgz",
- "integrity": "sha512-7XYT10CZfPsH7j9F1Jmg1+d0ezOux2oM2GfArAzLwWe4mE2Dr3hVjsAL6+TFY49RRJlCdJDMw3nJsLFroTc8Kw=="
+ "version": "8.5.1",
+ "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-8.5.1.tgz",
+ "integrity": "sha512-yN7kbciD87WzLGc5539Tn0sApjyiGHAJgKvG9W8C7O+6c7qmoQMfVs0W4bX17eqz6C78QJqqFrtgdK5EWf6Qow=="
},
"@hapi/joi": {
"version": "15.1.1",
@@ -12977,6 +12977,15 @@
"camelcase": "^5.0.0"
}
},
+ "react-input-mask": {
+ "version": "2.0.4",
+ "resolved": "https://registry.npmjs.org/react-input-mask/-/react-input-mask-2.0.4.tgz",
+ "integrity": "sha512-1hwzMr/aO9tXfiroiVCx5EtKohKwLk/NT8QlJXHQ4N+yJJFyUuMT+zfTpLBwX/lK3PkuMlievIffncpMZ3HGRQ==",
+ "requires": {
+ "invariant": "^2.2.4",
+ "warning": "^4.0.2"
+ }
+ },
"react-is": {
"version": "16.8.6",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.6.tgz",
@@ -15273,6 +15282,14 @@
"makeerror": "1.0.x"
}
},
+ "warning": {
+ "version": "4.0.3",
+ "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+ "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+ "requires": {
+ "loose-envify": "^1.0.0"
+ }
+ },
"watchpack": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz",
diff --git a/package.json b/package.json
index 6786c289..b3585858 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
"react-google-login": "^5.0.7",
"react-grid-system": "^4.4.11",
"react-icons": "^3.8.0",
+ "react-input-mask": "^2.0.4",
"react-recaptcha": "^2.3.10",
"react-responsive-carousel": "^3.1.51",
"react-router-dom": "^5.1.2",
diff --git a/src/Components/ModalConfirmarProfessor.js b/src/Components/ModalConfirmarProfessor.js
new file mode 100644
index 00000000..1a07d031
--- /dev/null
+++ b/src/Components/ModalConfirmarProfessor.js
@@ -0,0 +1,157 @@
+/*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, {useContext, useState} from 'react';
+import { Button } from '@material-ui/core';
+import Modal from '@material-ui/core/Modal';
+import Backdrop from '@material-ui/core/Backdrop';
+import Fade from '@material-ui/core/Fade';
+import styled from 'styled-components'
+import {Store} from '../Store.js'
+import axios from 'axios'
+import {apiUrl} from '../env';
+import CloseIcon from '@material-ui/icons/Close';
+
+const StyledModal = styled(Modal)`
+ display : flex;
+ align-items: center;
+ justify-content : center;
+ text-align : center;
+ padding : 10px !important;
+`
+
+export default function ModalConfirmarProfessor (props){
+ const {state, dispatch} = useContext(Store)
+ return (
+
+ <StyledModal
+ aria-labelledby="transition-modal-title"
+ aria-describedby="transition-modal-description"
+ open={props.open}
+ animation={true}
+ centered={true}
+ onClose={props.handleClose}
+ closeAfterTransition
+ BackdropComponent={Backdrop}
+ BackdropProps={{
+ timeout: 500,
+ }}
+ >
+ <Fade in={props.open} style={{ transitionDelay :"0.4ms"}}>
+ <>
+ <ConfirmarProfessorComponent>
+ <HeaderDiv>
+ <span style={{width:"32px"}}/>
+ <h2>Confirme os Dados</h2>
+ <Button style={{marginRight:"-8px", color:"000"}} onClick={props.handleClose}>
+ <CloseIcon style={{color:"#666", cursor:"pointer", verticalAlign:"middle"}}/>
+ </Button>
+ </HeaderDiv>
+
+ <DialogContentDiv>
+ <ContainerCentralized>
+ <p><strong>MunicÃpio - UF:</strong> {props.info.school_uf.abbreviation} - {props.info.school_City.name} </p>
+ <p><strong>Escola:</strong> {props.info.school_name}</p>
+ <p><strong>Telefone da Escola:</strong> {props.info.school_phone}</p>
+ <p><strong>Seu CPF:</strong> {props.info.teacher_cpf}</p>
+ <ButtonsDiv>
+ <ConfirmButton onClick ={props.confirmar}>CONFIRMAR</ConfirmButton>
+ <CancelButton onClick = {props.cancelar}>CANCELAR</CancelButton>
+ </ButtonsDiv>
+ </ContainerCentralized>
+ </DialogContentDiv>
+ </ConfirmarProfessorComponent>
+ </>
+ </Fade>
+ </StyledModal>
+
+ )
+}
+
+const CancelButton = styled(Button)`
+ width : 140px !important;
+ color :#666 !important;
+ font-family : Roboto,sans-serif !important;
+ font-size : 14px !important;
+ font-weight : 500 !important;
+ height : 36px !important;
+ border-radius : 3px !important;
+ padding-left : 16px !important;
+ padding-right : 16px !important;
+ outline : none !important;
+ margin : 6px 8px !important;
+ display : inline-block !important;
+`
+
+const ConfirmButton = styled(Button)`
+ width : 140px !important;
+ background-color : #00bcd4 !important;
+ color : #fff !important;
+ font-family : Roboto,sans-serif !important;
+ font-size : 14px !important;
+ font-weight : 500 !important;
+ height : 36px !important;
+ border-radius : 3px !important;
+ padding-left : 32px !important;
+ padding-right : 32px !important;
+ outline : none !important;
+ margin : 6px 8px !important;
+ display : inline-block !important;
+`
+
+const ButtonsDiv = styled.div`
+ margin-top : 10px;
+ display : flex;
+ justify-content : center;
+`
+
+
+const ContainerCentralized = styled.div`
+ margin-top : 0;
+ padding-left : 20px;
+ padding-right : 30px;
+
+ p {
+ font-size : 15px;
+ margin : 0 0 10px;
+ }
+`
+
+const DialogContentDiv = styled.div`
+ padding : 20px 30px;
+ overflow : visible !important;
+`
+
+const HeaderDiv = styled.div`
+ text-align : center;
+ display : flex;
+ justify-content : space-between;
+ padding : 10px 26px 0 26px;
+
+ h2 {
+ font-size : 26px;
+ font-weight : lighter;
+ }
+`
+
+const ConfirmarProfessorComponent = styled.div`
+ min-width : 600px;
+ border-radius : 4px;
+ background-color : #fff;
+ color : #666;
+`
diff --git a/src/Components/PageProfessorComponents/PartOne.js b/src/Components/PageProfessorComponents/PartOne.js
index 2628b227..1602ed72 100644
--- a/src/Components/PageProfessorComponents/PartOne.js
+++ b/src/Components/PageProfessorComponents/PartOne.js
@@ -80,7 +80,7 @@ export default function PartOne (props) {
const handleSubmit = () => {
//console.log('handle submit : ', uf.abbreviation, uf.selected, municipio.name, municipio.selected, codigoINEP.selected)
- props.handleBuscar(uf.abbreviation, uf.selected, municipio.name, municipio.selected, codigoINEP.selected)
+ props.handleBuscar(uf.name, uf.selected, municipio.name, municipio.selected, codigoINEP.selected)
}
//on render component, call simcaq api and update ufList
@@ -88,6 +88,7 @@ export default function PartOne (props) {
axios.get(('https://simcaq.c3sl.ufpr.br/api/v1/state')
).then( (response) => {
handleSetStates(sortDict(response.data.result))
+ console.log(response.data.result)
},
(error) => console.log('erro acessando api do simcaq (estados)'))
}, [])
diff --git a/src/Components/PageProfessorComponents/PartThree.js b/src/Components/PageProfessorComponents/PartThree.js
index 28a88612..d5dcdbfc 100644
--- a/src/Components/PageProfessorComponents/PartThree.js
+++ b/src/Components/PageProfessorComponents/PartThree.js
@@ -18,7 +18,7 @@ export default function PartThree (props) {
const handleChangePhoneNumber = (event) => {
const input = event.target.value.replace(/\D/,'')
setPhoneNumber({...phoneNumber,
- flagInvalid : (input.length > 9 ? true : false),
+ flagInvalid : (input.length < 9 ? true : false),
number : (input.length > 9 ? phoneNumber.number : input),
})
}
@@ -30,20 +30,25 @@ export default function PartThree (props) {
const handleChangeCpf = (event) => {
const input = event.target.value.replace(/\D/,'')
setCpf({...cpf,
- flagInvalid : (input.length > 11 ? true : false),
+ flagInvalid : (input.length < 11 ? true : false),
number : (input.length > 11 ? cpf.number : input),
})
}
+ const handleSubmit = () => {
+ const submit_phone = phoneNumber.number
+ const submit_cpf = cpf.number
+
+ props.handleSubmit(submit_phone, submit_cpf)
+ }
return (
<>
- {console.log(props)}
<Content>
<h4>Vamos localizar o seu cadastro:</h4>
<Stepper items={props.stepper}/>
<form style={{textAlign:"start"}}>
- <span>{props.info.school_name}</span>
+ <span>CENTRO EDUC INF MEU PEDACINHO DE CHAO</span>
<FormControl required style={{width:"100%"}}>
<p>Inserir o telefone da escola:</p>
<FormInput
@@ -66,12 +71,13 @@ export default function PartThree (props) {
value={cpf.number}
handleChange={handleChangeCpf}
mask={'999.999.999-99'}
+ error={cpf.flagInvalid}
>
</FormInput>
</FormControl>
<div style={{display:"flex", justifyContent:"space-evenly",paddingTop:"10px", paddingBottom:"10px"}}>
<div style={{display:"flex", justifyContent:"center"}}>
- <ButtonConfirmar onClick={props.handleBuscar}>BUSCAR</ButtonConfirmar>
+ <ButtonConfirmar onClick={( (cpf.flagInvalid || phoneNumber.flagInvalid) ? () => {console.log('cpf.flagInvalid: ', cpf.flagInvalid, 'phoneNumber.flagInvalid: ', phoneNumber.flagInvalid)} : handleSubmit)}>BUSCAR</ButtonConfirmar>
</div>
<div style={{display:"flex", justifyContent:"center"}}>
<ButtonGrey onClick={() => props.goBack(false, true, false)}>VOLTAR</ButtonGrey>
diff --git a/src/Components/PageProfessorComponents/PartTwo.js b/src/Components/PageProfessorComponents/PartTwo.js
index 185341d6..8dd0d5b3 100644
--- a/src/Components/PageProfessorComponents/PartTwo.js
+++ b/src/Components/PageProfessorComponents/PartTwo.js
@@ -10,7 +10,6 @@ import {simcaqAPIurl} from '../../env'
import {sortDict} from './PartOne.js'
export default function PartTwo (props) {
- const [htttpRequestDone, setDone] = useState(false)
const [schoolList, setSchoolList] = useState([])
useEffect ( () => {
@@ -20,22 +19,17 @@ export default function PartTwo (props) {
//console.log(code, uf, municipio)
//if user searched by inep code
- if (code != '') {
+ if (code !== '') {
axios.get((`${simcaqAPIurl}/portal_mec_inep?filter=school_cod:` + code)
).then ((response) => {
- //console.log(response.data.result)
-
setSchoolList(sortDict(response.data.result))
- setDone(true)
-
}, (error) => console.log('erro ao dar get na escola por inep code')
)}
- else if (uf != '' && municipio != '') {
+ else if (uf !== '' && municipio !== '') {
axios.get((`${simcaqAPIurl}/school?filter=state:"` + uf + '",city:"' + municipio + '",year:2017')
- ). then((response)=> {
+ ).then((response)=> {
//console.log(response.data.result)
setSchoolList(sortDict(response.data.result))
- setDone(true)
}, (error) => console.log('erro ao dar get na escola por uf e municipio', code, uf, municipio)
)}
}, [])
diff --git a/src/Components/Table.js b/src/Components/Table.js
index 1230013c..295b1bb1 100644
--- a/src/Components/Table.js
+++ b/src/Components/Table.js
@@ -62,7 +62,6 @@ export default function CustomizedTables(props) {
<TableBody>
{props.rows.map(row => (
<>
- {console.log('console.log(row": ', row)}
<StyledTableRow onClick={() => onClick(row)} key={row.id}>
<StyledTableCell component="th" scope="row">
{row.id}
diff --git a/src/Pages/PageProfessor.js b/src/Pages/PageProfessor.js
index b8068873..6dc177da 100644
--- a/src/Pages/PageProfessor.js
+++ b/src/Pages/PageProfessor.js
@@ -5,9 +5,17 @@ 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'
+import ModalConfirmarProfessor from '../Components/ModalConfirmarProfessor.js'
+import axios from 'axios'
+import {apiUrl} from '../env';
export default function PageProfessor (props) {
const {state, dispatch} = useContext(Store)
+ const [modalOpen, toggleModal] = useState(false)
+
+ const handleModal = () => {
+ toggleModal(!modalOpen) ;
+ }
const redirect = () => {
props.history.push('/termos-publicar-recurso')
@@ -60,9 +68,6 @@ export default function PageProfessor (props) {
}
const handleBuscarParteDois = (city_name, inep, school_name, state_name) => {
- console.log(city_name, inep, school_name, state_name)
- console.log((state_name ? state_name : ''))
-
const uf_id = registerInformation.school_uf.id
const school_city_id = registerInformation.school_City.id
const prev_state_name = registerInformation.school_uf.abbreviation
@@ -83,13 +88,32 @@ export default function PageProfessor (props) {
toggleStepper(false, false, true)
}
+ const handleSubmit = (phone, cpf) => {
+ setRegisterInformation({...registerInformation,
+ teacher_cpf: (phone ? phone : ''),
+ school_phone: (cpf ? cpf : ''),
+ })
+ handleModal();
+ }
+
const handleCancelar = () => {
props.history.push('/perfil/atualizacoes')
}
- const onClickTable = () => {
- toggleStepper(false, false, true)
- }
+ const handleFinalSubmit = () => {
+ //adicionar headers de accessToken
+ axios.post( (`${apiUrl}/users/teacher_request`), {
+ 'city' : registerInformation.school_City.name,
+ 'cpf' : registerInformation.teacher_cpf,
+ 'inep_id' : registerInformation.inep_code,
+ 'phone' : registerInformation.school_phone,
+ 'school' : registerInformation.school_name,
+ 'uf' : registerInformation.school_uf.abbreviation
+ })
+ .then( (response) => {
+ console.log(response.data)
+ }, (error) => console.log('deu erro')
+ )}
return (
<>
@@ -97,30 +121,37 @@ export default function PageProfessor (props) {
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={handleBuscarParteUM}
- handleCancelar={handleCancelar}
- />
- }
- {stepper[1].selected &&
- <PartTwo stepper={stepper} onClickTable={onClickTable}
- info={registerInformation} goBack={toggleStepper}
- handleCancelar={handleCancelar} handleBuscar={handleBuscarParteDois}
- />
- }
- {stepper[2].selected &&
- <PartThree stepper={stepper} goBack={toggleStepper}
- handleCancelar={handleCancelar} info={registerInformation}
- />
- }
- </div>
- </Paper>
+ <>
+ <ModalConfirmarProfessor open={modalOpen} handleClose={handleModal}
+ info={registerInformation} confirmar = {() => {handleFinalSubmit()}}
+ cancelar = {() => {toggleModal()}}
+ />
+ <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={handleBuscarParteUM}
+ handleCancelar={handleCancelar}
+ />
+ }
+ {stepper[1].selected &&
+ <PartTwo stepper={stepper}
+ info={registerInformation} goBack={toggleStepper}
+ handleCancelar={handleCancelar} handleBuscar={handleBuscarParteDois}
+ />
+ }
+ {stepper[2].selected &&
+ <PartThree stepper={stepper} goBack={toggleStepper}
+ handleCancelar={handleCancelar} info={registerInformation}
+ handleSubmit={handleSubmit}
+ />
+ }
+ </div>
+ </Paper>
+ </div>
</div>
- </div>
+ </>
]
)
:
--
GitLab