diff --git a/src/Components/PageProfessorComponents/PartOne.js b/src/Components/PageProfessorComponents/PartOne.js
index 986a5eda0b3d82f3908e4aaaddac04c03dfa119c..e33c0719080791141275454fc12fff9edc7bb9c7 100644
--- a/src/Components/PageProfessorComponents/PartOne.js
+++ b/src/Components/PageProfessorComponents/PartOne.js
@@ -157,7 +157,7 @@ export default function PartOne(props) {
{/*/////////////////////////////PRIMEIRA PARTE/////////////////////////////*/}
<Content>
<h4>Vamos localizar o seu cadastro:</h4>
- <Stepper items={props.stepper} />
+ <Stepper contrast={props.contrast} activeStep={props.activeStep}/>
<form style={{ textAlign: "start" }}>
<p>Localize pelo menos uma escola em que você tenha atuado até maio de 2017:</p>
<FormControl required style={{ width: "100%", marginTop: '1em' }}>
diff --git a/src/Components/PageProfessorComponents/PartThree.js b/src/Components/PageProfessorComponents/PartThree.js
index 3aed0439350f6e47c559ab6c7043427ec5ea4505..a65b424b9b304c7d0a208dc01b2010030c082e2d 100644
--- a/src/Components/PageProfessorComponents/PartThree.js
+++ b/src/Components/PageProfessorComponents/PartThree.js
@@ -45,10 +45,9 @@ export default function PartThree(props) {
return (
<>
- {console.log(props)}
<Content>
<h4>Vamos localizar o seu cadastro:</h4>
- <Stepper items={props.stepper} />
+ <Stepper contrast={props.contrast} activeStep={props.activeStep}/>
<form style={{ textAlign: "start" }}>
<FormControl required style={{ width: "100%" }}>
<p>Inserir o telefone da escola:</p>
diff --git a/src/Components/PageProfessorComponents/PartTwo.js b/src/Components/PageProfessorComponents/PartTwo.js
index e71841a06063810cb80d8d328e80e9652d066ef9..c2f634ed38c73d03f3959cfca9ce2ca8bfb29d18 100644
--- a/src/Components/PageProfessorComponents/PartTwo.js
+++ b/src/Components/PageProfessorComponents/PartTwo.js
@@ -24,7 +24,7 @@ export default function PartTwo(props) {
if (code !== '') {
axios.get((`${simcaqAPIurl}/portal_mec_inep?filter=school_cod:` + code)
).then((response) => {
- console.log(response)
+ console.log(response.data.result)
setSchoolList(sortDict(response.data.result))
}, (error) => console.log('erro ao dar get na escola por inep code')
)
@@ -32,7 +32,7 @@ export default function PartTwo(props) {
else if (uf !== '' && municipio !== '') {
axios.get((`${simcaqAPIurl}/school?search=state_name:"` + uf + '",city_name:"' + municipio + '"&filter=year:2017')
).then((response) => {
- //console.log(response.data.result)
+ console.log(response.data.result)
setSchoolList(sortDict(response.data.result))
}, (error) => console.log('erro ao dar get na escola por uf e municipio', code, uf, municipio)
)
@@ -40,6 +40,7 @@ export default function PartTwo(props) {
}, [])
const onClickTable = (city_name, id, name, state_name) => {
+ console.log(id);
props.handleBuscar(city_name, id, name, state_name)
}
@@ -47,7 +48,7 @@ export default function PartTwo(props) {
<>
<Content>
<h4>Vamos localizar o seu cadastro:</h4>
- <Stepper items={props.stepper} />
+ <Stepper contrast={props.contrast} activeStep={props.activeStep}/>
</Content>
<Content>
<InputContainer>
diff --git a/src/Components/Stepper.js b/src/Components/Stepper.js
index b1315b9844bdd5726e5b7589c1adf6be80d87417..a50f700cc1ea897a999f52ff1d2ca7fe4fae0783 100644
--- a/src/Components/Stepper.js
+++ b/src/Components/Stepper.js
@@ -1,53 +1,107 @@
-import React from 'react'
+/*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 from 'react';
import styled from 'styled-components'
+import Check from '@material-ui/icons/Check';
+import Grid from '@material-ui/core/Grid';
+
+export default function CustomizedSteppers(props) {
-export default function Stepper (props) {
+ function isInFinalSTep(step) {
+ return step === 3;
+ }
return (
- <div style={{display:"flex",justifyContent:"center", marginBottom:"50px"}}>
- <FeedbackUpload>
+ <MainGrid contrast={props.contrast} container direction='row' justify='space-between' alignItems='center'>
{
- props.items.map((item)=>
- <div className={"page-selector " + (item.selected ? 'selected' : '')} >
- {item.value}
- </div>
- )
+ !isInFinalSTep(props.activeStep) ?
+
+ [0, 1, 2, 3].map((index) => {
+ return (
+ <Grid item key={new Date().toISOString() + index}>
+ <div className={props.activeStep === index ? "currStep" : "step"}>
+ {
+ index < props.activeStep ?
+ <Check style={props.contrast === "" ? { color: "#00bcd4" } : { color: "white" }} /> : index
+ }
+ </div>
+ </Grid>
+ )
+ })
+ :
+ [0, 1, 2, 3].map((index) => {
+ return (
+ <Grid item key={new Date().toISOString() + index}>
+ <div className={props.activeStep === index ? "currStep" : "finalStep"}>
+ {
+ index < props.activeStep ?
+ <Check style={{ color: 'white' }} /> :
+ <span style={{ color: 'white' }}>
+ {index}
+ </span>
+ }
+ </div>
+ </Grid>
+ )
+ })
}
- </FeedbackUpload>
- </div>
- )
+ </MainGrid >
+ );
}
-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;
- }
+const MainGrid = styled(Grid)`
+ padding: 1em;
+ border-radius: 50px;
+ width: 90%;
+ margin: 0 auto;
+ border: ${props => props.contrast === "" ? "2px solid #d4d4d4" : "2px solid white"};
+ color: ${props => props.contrast === "" ? "#666" : "white"};
- .selected {
- background : #00bcd4;
- color : #fff;
- border-color : #00bcd4;
+ .currStep{
+ height: 30px;
+ width: 30px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border: 2px solid rgba(255, 255, 255, 0.6);
+ border-radius: 50%;
}
+
+ .step{
+ height: 30px;
+ width: 30px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border: ${props => props.contrast === "" ? "2px solid #00bcd4" : "2px solid white"};
+ border-radius: 50%;
+ }
+
+ .finalStep{
+ height: 30px;
+ width: 30px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border: 2px solid white;
+ border-radius: 50%;
+ color: white;
+ }
`
+
diff --git a/src/Pages/PageProfessor.js b/src/Pages/PageProfessor.js
index 9164b27058cdeba336271b06f02d77aae3ddf1e3..9c9a2554bf9c0ea8b5a7e8901be3cd8d906c8efd 100644
--- a/src/Pages/PageProfessor.js
+++ b/src/Pages/PageProfessor.js
@@ -33,18 +33,14 @@ export default function PageProfessor(props) {
}
)
- const [stepper, handleStepper] = useState(
- [{ value: '1', selected: true }, { value: '2', selected: false }, { value: '3', selected: false }, { value: '4', selected: false }]
- )
- const toggleStepper = (selected1, selected2, selected3, selected4) => {
- handleStepper(
- [
- { value: '1', selected: selected1 },
- { value: '2', selected: selected2 },
- { value: '3', selected: selected3 },
- { value: '4', selected: selected4 }
- ]
- )
+ const [activeStep, setActiveStep] = useState(0);
+
+ const incrementStep = () => {
+ setActiveStep((previous) => previous + 1);
+ }
+
+ const decrementStep = () => {
+ setActiveStep((previous) => previous - 1);
}
const handleBuscarParteUm = (ufAbbreviation, ufName, nomeMunicipio, inep) => {
@@ -57,7 +53,7 @@ export default function PageProfessor(props) {
school_city: (nomeMunicipio ? nomeMunicipio : ''),
inep_code: (inep ? inep : '')
})
- toggleStepper(false, true, false, false)
+ incrementStep()
}
const handleBuscarParteDois = (city_name, inep, school_name, state_name) => {
@@ -75,7 +71,7 @@ export default function PageProfessor(props) {
school_name: (school_name ? school_name : ''),
inep_code: (inep ? inep : '')
})
- toggleStepper(false, false, true, false)
+ incrementStep();
}
const handleParteTres = (phone, cpf) => {
@@ -93,7 +89,7 @@ export default function PageProfessor(props) {
function handleSuccessfulSubmit(data) {
toggleModal()
- toggleStepper(false, false, false, true)
+ incrementStep();
}
const handleFinalSubmit = () => {
@@ -101,12 +97,12 @@ export default function PageProfessor(props) {
console.log(registerInformation)
const payload = {
- city: registerInformation.school_city.name,
- cpf: registerInformation.teacher_cpf,
- inep_id: registerInformation.inep_code,
- phone: registerInformation.school_phone,
+ city: registerInformation.school_city,
+ cpf: registerInformation.teacher_cpf.toString(),
+ inep_id: registerInformation.inep_code.toString(),
+ phone: registerInformation.school_phone.toString(),
school: registerInformation.school_name,
- uf: registerInformation.school_uf.name
+ uf: registerInformation.school_uf.name,
}
postRequest(url, payload, handleSuccessfulSubmit, (error) => { console.log(error) })
@@ -126,25 +122,25 @@ export default function PageProfessor(props) {
<div style={{ display: "flex", justifyContent: "center", paddingTop: "5vh", paddingBottom: "5vh" }}>
<Paper elevation={3} style={state.contrast === "" ? { width: "max-content" } : { width: "max-content", backgroundColor: "black", color: "white", border: '1px solid white' }}>
<div style={{ paddingRight: "15px", paddingLeft: "15px" }}>
- {stepper[0].selected &&
- <PartOne contrast={state.contrast} stepper={stepper} handleBuscar={handleBuscarParteUm}
+ {activeStep === 0 &&
+ <PartOne contrast={state.contrast} activeStep={activeStep} handleBuscar={handleBuscarParteUm}
handleCancelar={handleCancelar}
/>
}
- {stepper[1].selected &&
- <PartTwo stepper={stepper} contrast={state.contrast}
- info={registerInformation} goBack={toggleStepper}
+ {activeStep === 1 &&
+ <PartTwo activeStep={activeStep} contrast={state.contrast}
+ info={registerInformation} goBack={decrementStep}
handleCancelar={handleCancelar} handleBuscar={handleBuscarParteDois}
/>
}
- {stepper[2].selected &&
- <PartThree stepper={stepper} goBack={toggleStepper} contrast={state.contrast}
+ {activeStep === 2 &&
+ <PartThree activeStep={activeStep} goBack={decrementStep} contrast={state.contrast}
handleCancelar={handleCancelar} info={registerInformation}
handleSubmit={handleParteTres}
/>
}
{
- stepper[3].selected &&
+ activeStep === 3 &&
<SuccessfulRequest email={state.currentUser.email} history={props.history} contrast={state.contrast} />
}
</div>