From 4e310f414887504c832902d3e6d717758c29f18f Mon Sep 17 00:00:00 2001
From: Lucas Schoenfelder <les17@inf.ufpr.br>
Date: Wed, 12 Feb 2020 21:41:24 -0300
Subject: [PATCH] layout das 3 paginas de /professor prontos
---
.../PageProfessorComponents/PartOne.js | 4 +-
.../PageProfessorComponents/PartTwo.js | 58 ++++++++++++-
src/Components/Table.js | 81 +++++++++++++++++++
src/Pages/PageProfessor.js | 2 +-
4 files changed, 141 insertions(+), 4 deletions(-)
create mode 100644 src/Components/Table.js
diff --git a/src/Components/PageProfessorComponents/PartOne.js b/src/Components/PageProfessorComponents/PartOne.js
index d3e604a1..497ee823 100644
--- a/src/Components/PageProfessorComponents/PartOne.js
+++ b/src/Components/PageProfessorComponents/PartOne.js
@@ -8,7 +8,7 @@ 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'
+import {ButtonCancelar} from './PartTwo.js'
export default function PartOne (props) {
const [uf, setUF] = useState('')
@@ -87,7 +87,7 @@ export default function PartOne (props) {
)
}
-const ButtonsArea = styled.div`
+export const ButtonsArea = styled.div`
display : flex;
justify-content : center;
padding-top : 10px;
diff --git a/src/Components/PageProfessorComponents/PartTwo.js b/src/Components/PageProfessorComponents/PartTwo.js
index 8ad76c9f..33941abd 100644
--- a/src/Components/PageProfessorComponents/PartTwo.js
+++ b/src/Components/PageProfessorComponents/PartTwo.js
@@ -1,7 +1,63 @@
import React from 'react'
+import {Content, ButtonsArea} from './PartOne.js'
+import Divider from '@material-ui/core/Divider';
+import Stepper from '../Stepper.js'
+import CustomizedTables from '../Table.js'
+import styled from 'styled-components'
+import {Button} from '@material-ui/core'
export default function PartTwo (props) {
return (
- <span>Part Two</span>
+ <>
+ <Content>
+ <h4>Vamos localizar o seu cadastro:</h4>
+ <Stepper items={props.stepper}/>
+ </Content>
+ <Content>
+ <InputContainer>
+ <p>Selecione a sua escola:</p>
+ <CustomizedTables/>
+ </InputContainer>
+ </Content>
+ <Divider/>
+ <ButtonsArea>
+ <ButtonGrey>VOLTAR</ButtonGrey><ButtonCancelar>CANCELAR VERIFICAÇÃO</ButtonCancelar>
+ </ButtonsArea>
+ </>
)
}
+
+export const ButtonCancelar = styled(Button)`
+ color: #666 !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;
+`
+
+const ButtonGrey = styled(Button)`
+ background-color : #fff !important;
+ border : 1.5px #666 solid !important;
+ color : #666 !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;
+
+`
+
+const InputContainer = styled.div`
+ max-width : 970px;
+ display : block;
+ flex : auto;
+`
diff --git a/src/Components/Table.js b/src/Components/Table.js
new file mode 100644
index 00000000..8fe88f90
--- /dev/null
+++ b/src/Components/Table.js
@@ -0,0 +1,81 @@
+import React from 'react';
+import { withStyles, makeStyles } from '@material-ui/core/styles';
+import Table from '@material-ui/core/Table';
+import TableBody from '@material-ui/core/TableBody';
+import TableCell from '@material-ui/core/TableCell';
+import TableContainer from '@material-ui/core/TableContainer';
+import TableHead from '@material-ui/core/TableHead';
+import TableRow from '@material-ui/core/TableRow';
+import Paper from '@material-ui/core/Paper';
+
+const StyledTableCell = withStyles(theme => ({
+ head: {
+ backgroundColor: '#00bcd4',
+ color: '#ffffff',
+ fontFamily: 'Roboto',
+ fontStyle: 'normal',
+ fontWeight: 500,
+ fontSize: 15,
+ letterSpacing: .01
+ },
+ body: {
+ fontSize: 14,
+ },
+}))(TableCell);
+
+const StyledTableRow = withStyles(theme => ({
+ root: {
+ '&:nth-of-type(odd)': {
+ backgroundColor: theme.palette.background.default,
+ },
+ },
+}))(TableRow);
+
+function createData(name, calories, fat, carbs) {
+ return { name, calories, fat, carbs};
+}
+
+const rows = [
+ createData('Frozen yoghurt', 159, 6.0, 24),
+ createData('Ice cream sandwich', 237, 9.0, 37),
+ createData('Eclair', 262, 16.0, 24),
+ createData('Cupcake', 305, 3.7, 67),
+ createData('Gingerbread', 356, 16.0, 49),
+];
+
+const useStyles = makeStyles({
+ table: {
+ minWidth: 970,
+ },
+});
+
+export default function CustomizedTables() {
+ const classes = useStyles();
+
+ return (
+ <TableContainer component={Paper}>
+ <Table className={classes.table} aria-label="customized table">
+ <TableHead>
+ <TableRow>
+ <StyledTableCell>Codigo INEP</StyledTableCell>
+ <StyledTableCell align="right">Escola</StyledTableCell>
+ <StyledTableCell align="right">UF</StyledTableCell>
+ <StyledTableCell align="right">Cidade</StyledTableCell>
+ </TableRow>
+ </TableHead>
+ <TableBody>
+ {rows.map(row => (
+ <StyledTableRow key={row.name}>
+ <StyledTableCell component="th" scope="row">
+ {row.name}
+ </StyledTableCell>
+ <StyledTableCell align="right">{row.calories}</StyledTableCell>
+ <StyledTableCell align="right">{row.fat}</StyledTableCell>
+ <StyledTableCell align="right">{row.carbs}</StyledTableCell>
+ </StyledTableRow>
+ ))}
+ </TableBody>
+ </Table>
+ </TableContainer>
+ );
+}
diff --git a/src/Pages/PageProfessor.js b/src/Pages/PageProfessor.js
index 4905f415..e26be44d 100644
--- a/src/Pages/PageProfessor.js
+++ b/src/Pages/PageProfessor.js
@@ -38,7 +38,7 @@ 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[1].selected && <PartTwo stepper={stepper}/>}
{stepper[2].selected && <PartThree/>}
</div>
</Paper>
--
GitLab