add check if there are no specialists with time blocks

This commit is contained in:
Chris Cromer 2022-01-04 17:45:20 -03:00
parent 6c3555e974
commit 90c3733d33
Signed by: cromer
GPG Key ID: FA91071797BEEEC2

View File

@ -1,6 +1,6 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { useNavigate, useLocation } from 'react-router-dom'; import { useNavigate, useLocation } from 'react-router-dom';
import { Container, makeStyles, Grid, Button, Card, CardContent, Box } from '@material-ui/core'; import { Container, makeStyles, Grid, Button, Card, CardContent, Box, Typography } from '@material-ui/core';
import axios from 'axios'; import axios from 'axios';
const useStyles = makeStyles((theme) => ({ const useStyles = makeStyles((theme) => ({
@ -22,6 +22,12 @@ const useStyles = makeStyles((theme) => ({
}, },
gridButton: { gridButton: {
textAlign: 'right' textAlign: 'right'
},
gridTitle: {
textAlign: 'center'
},
boldFont: {
fontWeight: 'bold'
} }
})); }));
@ -90,41 +96,62 @@ export default function AgendarHorarioComponent() {
const classes = useStyles(); const classes = useStyles();
return ( if (disponibilidades.length > 0) {
<Container component="main" maxWidth="sm"> return (
<div className={classes.paper}> <Container component="main" maxWidth="sm">
<Grid className={classes.cardGrid} container spacing={2}> <div className={classes.paper}>
{disponibilidades.map((disponibilidad) => ( <Grid className={classes.cardGrid} container spacing={2}>
<Box key={disponibilidad._id} mt={2}> {disponibilidades.map((disponibilidad) => (
<Card className={classes.card} variant="outlined"> <Box key={disponibilidad._id} mt={2}>
<CardContent> <Card className={classes.card} variant="outlined">
<Grid container spacing={2}> <CardContent>
<Grid item xs={8}> <Grid container spacing={2}>
{new Date(disponibilidad.fecha).toLocaleDateString("es-CL", <Grid item xs={8}>
{ {new Date(disponibilidad.fecha).toLocaleDateString("es-CL",
weekday: 'long', {
year: 'numeric', weekday: 'long',
month: 'long', year: 'numeric',
day: 'numeric' month: 'long',
})} {disponibilidad.horario} horas day: 'numeric'
})} {disponibilidad.horario} horas
</Grid>
<Grid className={classes.gridButton} item xs={4}>
<Button
fullWidth
variant="contained"
color="primary"
onClick={() => confirmar(disponibilidad._id)}
>
Confirmar
</Button>
</Grid>
</Grid> </Grid>
<Grid className={classes.gridButton} item xs={4}> </CardContent>
<Button </Card>
fullWidth </Box>
variant="contained" ))}
color="primary" </Grid>
onClick={() => confirmar(disponibilidad._id)} </div>
> </Container>
Confirmar );
</Button> }
</Grid> else {
</Grid> return (
</CardContent> <Container component="main" maxWidth="md">
</Card> <div className={classes.paper}>
<Grid className={classes.cardGrid} container spacing={2}>
<Box mt={2}>
<Grid container spacing={2}>
<Grid item xs={12}>
<Typography variant="h4" className={classes.boldFont} gutterBottom>
La especialista elegida no tiene horarios disponibles.
</Typography>
</Grid>
</Grid>
</Box> </Box>
))} </Grid>
</Grid> </div>
</div> </Container>
</Container> );
); }
} }