Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixes/registo clases alumno #170

Open
wants to merge 19 commits into
base: main
Choose a base branch
from
Open

Fixes/registo clases alumno #170

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
9f43e4a
Separated editar form from the modal.
JamirLeal Mar 30, 2023
08454ae
Ran eslint over Clase.jsx
JamirLeal Mar 30, 2023
7f73a27
typo
JamirLeal Mar 30, 2023
7e43ca7
Ran eslint over claseModal
JamirLeal Mar 30, 2023
3243b03
Added ParseCSV function to utils.
JamirLeal Mar 31, 2023
3ecae85
Ran eslint on HeaderInscripcion.
JamirLeal Mar 31, 2023
d71da8b
Moved function to utils.
JamirLeal Mar 31, 2023
e1e666f
Finished separating showClass.
JamirLeal Mar 31, 2023
77fad9f
Finished separating showClass.
JamirLeal Mar 31, 2023
b4ea564
Ran eslint
JamirLeal Mar 31, 2023
08b396a
Moved functions to utils.
JamirLeal Apr 17, 2023
16a5854
Simplified some functions in RegistroClasesAlumno
JamirLeal May 2, 2023
6446e3e
Ran eslint.
JamirLeal May 3, 2023
2c3dc3d
Moved part of Registro to a Header component.
JamirLeal May 3, 2023
1fbc5d8
Moved body of RegistroClases to a new component.
JamirLeal May 4, 2023
ca210c7
Added RegistroClasesError
JamirLeal May 4, 2023
959b97b
Separated components.
JamirLeal May 5, 2023
15c90c3
Finished spliting RegistroClases.
JamirLeal May 6, 2023
468d35c
Restored package lock json.
JamirLeal May 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
136 changes: 73 additions & 63 deletions FrontEnd/src/Components/Clase/Clase.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,66 +1,76 @@
import { Typography, Button, CardContent} from '@mui/material'
import React from 'react'
import Box from '@mui/material/Box'
import Card from '@mui/material/Card'
import CardActions from '@mui/material/CardActions'
import Divider from '@mui/material/Divider';
import { Typography, Button, CardContent } from '@mui/material';
import React from 'react';
import Box from '@mui/material/Box';
import Card from '@mui/material/Card';
import CardActions from '@mui/material/CardActions';
import { nivelDict } from '../../utils/constants';


function Clase({handleClick, handleMoreInfo, clase}) {

const nivelDict = {
'1' : 'Desde cero',
'2' : 'Con bases',
'3' : 'Intermedio',
'4' : 'Avanzado'
}

return (
<Card sx={{ my: 2, '& .MuiTypography-root': { mb: 1 }}}>
<CardContent>
<Typography variant="h6">{clase.clave}. {clase.nombre_curso}</Typography>
<br />
{
clase.status === "Inscrito" ?
<Typography variant='body2'><i>Ya estas inscrito</i></Typography>
:
null
}
{
clase.status === "ListaEspera" ?
<Typography variant='body2'><i>Estas en lista de espera</i></Typography>
:
null
}
<Box sx={{ display: 'flex', justifyContent: 'space-between', flexDirection: 'column'}}>
<Typography variant='body1'><strong>Periodo:</strong> {clase.clavePeriodo}</Typography>
<Typography variant='body1'><strong>Modalidad:</strong> {clase.modalidad}</Typography>
<Typography variant='body1'><strong>Nivel:</strong> {nivelDict[clase.nivel]}</Typography>
<Typography sx={{ color: clase.cupo_actual / clase.cupo_maximo >= 1 ? "red" : "black" }} variant='body1'>
{ Number(clase.cupo_actual) / Number(clase.cupo_maximo) >=1 ? <strong>Lleno</strong>
: <strong>¡Curso {(Number(clase.cupo_actual) / Number(clase.cupo_maximo) * 100).toFixed()}% lleno!</strong>
}
</Typography>
</Box>
</CardContent>
<CardActions sx={{backgroundColor: 'e8f0fe'}}>
<Button size='small' onClick={() => handleMoreInfo(clase)}
sx={{ width: '50%'}}
>
Detalle
</Button>
{ Number(clase.cupo_actual) < Number(clase.cupo_maximo) ?
<Button size='small' onClick={() => handleClick(clase)}>
{clase.status === "Inscrito" && clase.status !== 'ListaEspera'
? 'Cancelar Registro' : 'Inscribir'}
</Button> :
<Button size='small' onClick={() => handleClick(clase)}>
{clase.status === "ListaEspera" && clase.status !== 'Inscrito'
? 'Salir de Lista' : 'Lista Espera'}
</Button> }
</CardActions>
</Card>
)
function Clase({ handleClick, handleMoreInfo, clase }) {
return (
<Card sx={{ my: 2, '& .MuiTypography-root': { mb: 1 } }}>
<CardContent>
<Typography variant="h6">
{`${clase.clave}.${clase.nombre_curso}`}
</Typography>
<br />
{
clase.status === 'Inscrito'
? <Typography variant="body2"><i>Ya estas inscrito</i></Typography>
: null
}
{
clase.status === 'ListaEspera'
? <Typography variant="body2"><i>Estas en lista de espera</i></Typography>
: null
}
<Box sx={{ display: 'flex', justifyContent: 'space-between', flexDirection: 'column' }}>
<Typography variant="body1">
<strong>Periodo:</strong>
{` ${clase.clavePeriodo}`}
</Typography>
<Typography variant="body1">
<strong>Modalidad:</strong>
{` ${clase.modalidad}`}
</Typography>
<Typography variant="body1">
<strong>Nivel:</strong>
{` ${nivelDict[clase.nivel]}`}
</Typography>
<Typography sx={{ color: clase.cupo_actual / clase.cupo_maximo >= 1 ? 'red' : 'black' }} variant="body1">
{ Number(clase.cupo_actual) / Number(clase.cupo_maximo) >= 1 ? <strong>Lleno</strong>
: (
<strong>
¡Curso
{(Number(clase.cupo_actual) / Number(clase.cupo_maximo) * 100).toFixed()}
% lleno!
</strong>
)}
</Typography>
</Box>
</CardContent>
<CardActions sx={{ backgroundColor: 'e8f0fe' }}>
<Button
size="small"
onClick={() => handleMoreInfo(clase)}
sx={{ width: '50%' }}
>
Detalle
</Button>
{ Number(clase.cupo_actual) < Number(clase.cupo_maximo)
? (
<Button size="small" onClick={() => handleClick(clase)}>
{clase.status === 'Inscrito' && clase.status !== 'ListaEspera'
? 'Cancelar Registro' : 'Inscribir'}
</Button>
) : (
<Button size="small" onClick={() => handleClick(clase)}>
{clase.status === 'ListaEspera' && clase.status !== 'Inscrito'
? 'Salir de Lista' : 'Lista Espera'}
</Button>
)}
</CardActions>
</Card>
);
}

export default Clase
export default Clase;
131 changes: 69 additions & 62 deletions FrontEnd/src/Components/Clase/ClaseModal.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,72 +1,79 @@
import React from 'react'
import Box from '@mui/material/Box'
import Typography from '@mui/material/Typography'
import React from 'react';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import Paper from '@mui/material/Paper';
import { nivelDict } from '../../utils/constants';

function ClaseModal({ clase }) {
const horario = [
{ dia: 'Lunes', hora: clase.lunes },
{ dia: 'Martes', hora: clase.martes },
{ dia: 'Miércoles', hora: clase.miercoles },
{ dia: 'Jueves', hora: clase.jueves },
{ dia: 'Viernes', hora: clase.viernes },
{ dia: 'Sábado', hora: clase.sabado },
];

const ClaseModal = ({clase}) => {

const nivelDict = {
'1' : 'Desde cero',
'2' : 'Con bases',
'3' : 'Intermedio',
'4' : 'Avanzado'
}

return (
<>
<Box
sx={{'& .MuiTypography-root': { width: '35ch' },
display: 'flex', alignItems: 'center', flexWrap: 'wrap',
backgroundColor: 'white', borderRadius: 3, m: 2, p: 2}}
>
<Typography variant='h5'>{clase.clave}. {clase.nombre_curso}</Typography>
<Typography sx={{ fontSize: 14 }} color='text.secondary' gutterBottom>Sobre el curso</Typography>
<Typography><strong>Periodo:</strong> {clase.clavePeriodo}</Typography>
<Typography><strong>Area:</strong> {clase.area}</Typography>
<Typography><strong>Nivel:</strong> {nivelDict[clase.nivel]}</Typography>
<Typography><strong>Modalidad:</strong> {clase.modalidad}</Typography>
<Typography><strong>Horario:</strong> </Typography>
<TableContainer component={Paper} sx={{my: 1}}>
<Table size="small">
<TableBody>
<TableRow sx={{ '&:last-child td': { border: 0 } }}>
<TableCell align="center"><strong>Lunes</strong></TableCell>
<TableCell align="center">{clase.lunes ? clase.lunes : '-'}</TableCell>
</TableRow>
<TableRow sx={{ '&:last-child td': { border: 0 } }}>
<TableCell align="center"><strong>Martes</strong> </TableCell>
<TableCell align="center">{clase.martes ? clase.martes : '-'}</TableCell>
</TableRow>
<TableRow sx={{ '&:last-child td': { border: 0 } }}>
<TableCell align="center"><strong>Miércoles</strong></TableCell>
<TableCell align="center">{clase.miercoles ? clase.miercoles : '-'}</TableCell>
</TableRow>
<TableRow sx={{ '&:last-child td': { border: 0 } }}>
<TableCell align="center"><strong>Jueves</strong></TableCell>
<TableCell align="center">{clase.jueves ? clase.jueves : '-'}</TableCell>
</TableRow>
<TableRow sx={{ '&:last-child td': { border: 0 } }}>
<TableCell align="center"><strong>Viernes</strong></TableCell>
<TableCell align="center">{clase.viernes ? clase.viernes : '-'}</TableCell>
</TableRow>
<TableRow sx={{ '&:last-child td': { border: 0 } }}>
<TableCell align="center"><strong>Sábado</strong></TableCell>
<TableCell align="center">{clase.sabado ? clase.sabado : '-'}</TableCell>
</TableRow>
</TableBody>
</Table>
</TableContainer>
<Typography><strong>Cupos:</strong> ¡Curso {(Number(clase.cupo_actual) / Number(clase.cupo_maximo) * 100).toFixed()}% lleno!</Typography>
</Box>
</>
)
return (
<Box
sx={{
'& .MuiTypography-root': { width: '35ch' },
display: 'flex',
alignItems: 'center',
flexWrap: 'wrap',
backgroundColor: 'white',
borderRadius: 3,
m: 2,
p: 2,
}}
>
<Typography variant="h5">
{`${clase.clave}.${clase.nombre_curso}`}
</Typography>
<Typography sx={{ fontSize: 14 }} color="text.secondary" gutterBottom>Sobre el curso</Typography>
<Typography>
<strong>Periodo:</strong>
{` ${clase.clavePeriodo}`}
</Typography>
<Typography>
<strong>Area:</strong>
{` ${clase.area}`}
</Typography>
<Typography>
<strong>Nivel:</strong>
{` ${nivelDict[clase.nivel]}`}
</Typography>
<Typography>
<strong>Modalidad:</strong>
{` ${clase.modalidad}`}
</Typography>
<Typography>
<strong>Horario:</strong>
{` `}
</Typography>
<TableContainer component={Paper} sx={{ my: 1 }}>
<Table size="small">
<TableBody>
{horario.map((h, i) => (
<TableRow key={i} sx={{ '&:last-child td': { border: 0 } }}>
<TableCell align="center"><strong>{h.dia}</strong></TableCell>
<TableCell align="center">{h.hora ? h.hora : '-'}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
<Typography>
<strong>Cupos:</strong>
{` ¡Curso ${(Number(clase.cupo_actual) / Number(clase.cupo_maximo) * 100).toFixed()} % lleno!`}
</Typography>
</Box>
);
}

export default ClaseModal
export default ClaseModal;
Loading