diff --git a/src/Components/FormInput.js b/src/Components/FormInput.js index bcbc40fb3a988231b82e75ed86a88510efacddb8..f90750684c7ff2f80bdab817e881ae9dd80d4d7f 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 497ee82307905dc25c61dfa69f820a3718dd4636..a82555a5197dea42c2f666d45ec5f12de3e9385f 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 50b355caf7a07aa2b2d9a5d5a394628e9a020c7f..75a9faf55704bed484b7025a4ce76536f702968e 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 33941abdc3fee8a86ea592825e614c053b461deb..d4af14b2b8c94e3404df89457da079ea2713264c 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 8fe88f90fdb6142bb88761031d318600df482387..9bad62312c90aa34c654eaaf2640a381f92c09dd 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 e26be44d3f4102ddc2d307153233c956d20c76bd..1f0eb796b318af4d8710130acc21b04f352ff887 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>