From 67fa48c5eb45156f198fa0828bd8b501e80cf0da Mon Sep 17 00:00:00 2001
From: Lucas Schoenfelder <les17@inf.ufpr.br>
Date: Wed, 12 Feb 2020 21:41:30 -0300
Subject: [PATCH] layout das 3 paginas de /professor prontos
---
src/Components/FormInput.js | 4 +
.../PageProfessorComponents/PartOne.js | 2 +-
.../PageProfessorComponents/PartThree.js | 73 ++++++++++++++++++-
.../PageProfessorComponents/PartTwo.js | 4 +-
src/Components/Table.js | 4 +-
src/Pages/PageProfessor.js | 10 ++-
6 files changed, 88 insertions(+), 9 deletions(-)
diff --git a/src/Components/FormInput.js b/src/Components/FormInput.js
index bcbc40fb..f9075068 100644
--- a/src/Components/FormInput.js
+++ b/src/Components/FormInput.js
@@ -64,6 +64,10 @@ export default function FormInput(props) {
error = {props.error}
helperText ={props.help}
style={{width:"100%"}}
+ mask={props.mask}
+ multiline={props.multi}
+ rows={props.row}
+ rowsMax={props.rowMax}
/>
);
}
diff --git a/src/Components/PageProfessorComponents/PartOne.js b/src/Components/PageProfessorComponents/PartOne.js
index 497ee823..a82555a5 100644
--- a/src/Components/PageProfessorComponents/PartOne.js
+++ b/src/Components/PageProfessorComponents/PartOne.js
@@ -129,7 +129,7 @@ export const Content = styled.div`
font-size : 15px;
}
`
-const ButtonConfirmar = styled(Button)`
+export const ButtonConfirmar = styled(Button)`
background-color : #00bcd4 !important;
color : #fff !important;
font-family : 'Roboto',sans-serif !important;
diff --git a/src/Components/PageProfessorComponents/PartThree.js b/src/Components/PageProfessorComponents/PartThree.js
index 50b355ca..75a9faf5 100644
--- a/src/Components/PageProfessorComponents/PartThree.js
+++ b/src/Components/PageProfessorComponents/PartThree.js
@@ -1,7 +1,76 @@
-import React from 'react'
+import React, {useState} from 'react'
+import {Content, ButtonsArea} from './PartOne.js'
+import {ButtonCancelar, ButtonGrey} from './PartTwo.js'
+import FormControl from '@material-ui/core/FormControl';
+import InputLabel from '@material-ui/core/InputLabel';
+import Stepper from '../Stepper.js'
+import FormInput from '../FormInput.js'
+import styled from 'styled-components'
+import {Button} from '@material-ui/core'
export default function PartThree (props) {
+ const [phoneNumber, setPhoneNumber] = useState('')
+ const handleChangePhoneNumber = (event) => {setPhoneNumber(event.target.value)}
+
+ const [cpf, setCpf] = useState('')
+ const handleChangeCpf = (event) => {setCpf(event.target.value)}
return (
- <span>Part Three</span>
+ <>
+ <Content>
+ <h4>Vamos localizar o seu cadastro:</h4>
+ <Stepper items={props.stepper}/>
+ <form style={{textAlign:"start"}}>
+ <span>CENTRO EDUC INF MEU PEDACINHO DE CHAO</span>
+ <FormControl required style={{width:"100%"}}>
+ <p>Inserir o telefone da escola:</p>
+ <FormInput
+ inputType={'text'}
+ name={'DDD e Número'}
+ placeholder={'DDD e Número'}
+ value={phoneNumber}
+ handleChange={handleChangePhoneNumber}
+ >
+ </FormInput>
+ </FormControl>
+ <FormControl required style={{width:"100%"}}>
+ <p>Inserir o seu CPF</p>
+ <FormInput
+ inputType={'text'}
+ name={'11 dÃgitos'}
+ placeholder={'11 dÃgitos'}
+ value={cpf}
+ handleChange={handleChangeCpf}
+ mask={'999.999.999-99'}
+ >
+ </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>
+ </div>
+ <div style={{display:"flex", justifyContent:"center"}}>
+ <ButtonGrey>VOLTAR</ButtonGrey><ButtonCancelar>CANCELAR</ButtonCancelar>
+ </div>
+ </div>
+ </form>
+ </Content>
+ </>
)
}
+
+const ButtonConfirmar = styled(Button)`
+ background-color : #00bcd4 !important;
+ color : #fff !important;
+ box-shadow : none !important;
+ font-family : 'Roboto',sans-serif !important;
+ font-size : 14px !important;
+ font-weight : bold !important;
+ height : 36px !important;
+ border-radius : 3px !important;
+ padding-left : 16px !important;
+ padding-right : 16px !important;
+ vertical-align : middle !important;
+ text-align : center !important;
+ align-items : center !important;
+
+`
diff --git a/src/Components/PageProfessorComponents/PartTwo.js b/src/Components/PageProfessorComponents/PartTwo.js
index 33941abd..d4af14b2 100644
--- a/src/Components/PageProfessorComponents/PartTwo.js
+++ b/src/Components/PageProfessorComponents/PartTwo.js
@@ -16,7 +16,7 @@ export default function PartTwo (props) {
<Content>
<InputContainer>
<p>Selecione a sua escola:</p>
- <CustomizedTables/>
+ <CustomizedTables onClick={props.onClickTable}/>
</InputContainer>
</Content>
<Divider/>
@@ -38,7 +38,7 @@ export const ButtonCancelar = styled(Button)`
padding-right: 16px !important;
`
-const ButtonGrey = styled(Button)`
+export const ButtonGrey = styled(Button)`
background-color : #fff !important;
border : 1.5px #666 solid !important;
color : #666 !important;
diff --git a/src/Components/Table.js b/src/Components/Table.js
index 8fe88f90..9bad6231 100644
--- a/src/Components/Table.js
+++ b/src/Components/Table.js
@@ -49,7 +49,7 @@ const useStyles = makeStyles({
},
});
-export default function CustomizedTables() {
+export default function CustomizedTables(props) {
const classes = useStyles();
return (
@@ -69,7 +69,7 @@ export default function CustomizedTables() {
<StyledTableCell component="th" scope="row">
{row.name}
</StyledTableCell>
- <StyledTableCell align="right">{row.calories}</StyledTableCell>
+ <StyledTableCell align="right" onClick={props.onClick}>{row.calories}</StyledTableCell>
<StyledTableCell align="right">{row.fat}</StyledTableCell>
<StyledTableCell align="right">{row.carbs}</StyledTableCell>
</StyledTableRow>
diff --git a/src/Pages/PageProfessor.js b/src/Pages/PageProfessor.js
index e26be44d..1f0eb796 100644
--- a/src/Pages/PageProfessor.js
+++ b/src/Pages/PageProfessor.js
@@ -27,6 +27,12 @@ export default function PageProfessor (props) {
props.history.push('/perfil/atualizacoes')
}
+ const onClickTable = () => {
+ handleStepper(
+ [ {value : '1', selected : false}, {value : '2', selected : false}, {value : '3', selected : true} ]
+ )
+ }
+
return (
<>
{
@@ -38,8 +44,8 @@ export default function PageProfessor (props) {
<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={stepper}/>}
- {stepper[2].selected && <PartThree/>}
+ {stepper[1].selected && <PartTwo stepper={stepper} onClickTable={onClickTable}/>}
+ {stepper[2].selected && <PartThree stepper={stepper}/>}
</div>
</Paper>
</div>
--
GitLab