313 lines
12 KiB
JavaScript
313 lines
12 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
|
import { useLocation, useNavigate } from 'react-router-dom';
|
|
import { Container, makeStyles, Select, InputLabel, MenuItem, FormControl, Grid, Box, FormControlLabel, Checkbox, Button } from '@material-ui/core';
|
|
import DateFnsUtils from '@date-io/date-fns';
|
|
import { KeyboardDatePicker, MuiPickersUtilsProvider} from '@material-ui/pickers';
|
|
import axios from 'axios';
|
|
import Swal from 'sweetalert2';
|
|
import withReactContent from 'sweetalert2-react-content';
|
|
|
|
const MySwal = withReactContent(Swal);
|
|
|
|
const vigencia = require('../Vigencia');
|
|
|
|
const useStyles = makeStyles((theme) => ({
|
|
paper: {
|
|
marginTop: theme.spacing(8),
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
},
|
|
gridButton: {
|
|
textAlign: 'center'
|
|
},
|
|
button: {
|
|
[theme.breakpoints.down('sm')]: {
|
|
width: '100%'
|
|
}
|
|
}
|
|
}));
|
|
|
|
const hoy = new Date();
|
|
|
|
export default function HorarioComponent() {
|
|
const navigate = useNavigate();
|
|
|
|
const location = useLocation();
|
|
|
|
const apiUrl = "http://localhost:5000/api";
|
|
const apiUrlEspecialista = "/especialista";
|
|
const apiUrlDisponibilidad = "/disponibilidad";
|
|
|
|
const [date, setDate] = useState(new Date());
|
|
const [open, setOpen] = useState(false);
|
|
|
|
const [especialistas, setEspecialistas] = useState([]);
|
|
const [especialista, setEspecialista] = useState("");
|
|
|
|
const [checkBoxes, setCheckBoxes] = useState([]);
|
|
const [checkAll, setCheckAll] = useState(false);
|
|
const [formDisabled, setFormDisabled] = useState(true);
|
|
|
|
const classes = useStyles();
|
|
|
|
const handleClose = () => {
|
|
setOpen(false);
|
|
};
|
|
|
|
const handleOpen = () => {
|
|
setOpen(true);
|
|
};
|
|
|
|
const handleChange = (event) => {
|
|
setEspecialista(event.target.value);
|
|
};
|
|
|
|
const handleDateChange = (date) => {
|
|
setDate(date);
|
|
};
|
|
|
|
const handleCheckChange = index => event => {
|
|
let newCheckBoxes = [...checkBoxes];
|
|
newCheckBoxes[index] = {
|
|
id: checkBoxes[index].id,
|
|
horario: checkBoxes[index].horario,
|
|
checked: event.target.checked
|
|
};
|
|
setCheckBoxes(newCheckBoxes);
|
|
};
|
|
|
|
const handleCheckAllChange = event => {
|
|
let newCheckBoxes = [...checkBoxes];
|
|
for (let i = 0; i < newCheckBoxes.length; i++) {
|
|
newCheckBoxes[i].checked = !checkAll;
|
|
}
|
|
setCheckBoxes(newCheckBoxes);
|
|
setCheckAll(!checkAll);
|
|
};
|
|
|
|
useEffect(() => {
|
|
let checked = 0;
|
|
for (let i = 0; i < checkBoxes.length; i++) {
|
|
if (checkBoxes[i].checked) {
|
|
checked++;
|
|
}
|
|
}
|
|
if (checked === checkBoxes.length) {
|
|
setCheckAll(true);
|
|
}
|
|
else {
|
|
setCheckAll(false);
|
|
}
|
|
}, [checkBoxes]);
|
|
|
|
useEffect(() => {
|
|
if (especialista === "") {
|
|
let newCheckBoxes = [...checkBoxes];
|
|
for (let i = 0; i < newCheckBoxes.length; i++) {
|
|
newCheckBoxes[i].disabled = true;
|
|
}
|
|
setCheckBoxes(newCheckBoxes);
|
|
setFormDisabled(true);
|
|
}
|
|
else {
|
|
let newCheckBoxes = [...checkBoxes];
|
|
for (let i = 0; i < newCheckBoxes.length; i++) {
|
|
newCheckBoxes[i].disabled = false;
|
|
}
|
|
setCheckBoxes(newCheckBoxes);
|
|
setFormDisabled(false);
|
|
}
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [especialista]);
|
|
|
|
async function getEspecialistas() {
|
|
try {
|
|
const response = await axios.get(apiUrl + apiUrlEspecialista);
|
|
if (response.status === 200) {
|
|
setEspecialistas(response.data.especialistas);
|
|
}
|
|
}
|
|
catch (error) {
|
|
console.error(error);
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
let newChecked = [];
|
|
for (let i = 8; i <= 21; i++) {
|
|
for (let j = 0; j <= 45; j = j + 15) {
|
|
let hora = i.toString();
|
|
let minuto = j.toString();
|
|
if (hora.length === 1) {
|
|
hora = "0" + hora;
|
|
}
|
|
if (minuto.length === 1) {
|
|
minuto = minuto + "0";
|
|
}
|
|
newChecked.push({
|
|
id: hora + ":" + minuto,
|
|
horario: hora + ":" + minuto,
|
|
checked: false
|
|
});
|
|
}
|
|
}
|
|
setCheckBoxes(newChecked);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
getEspecialistas();
|
|
vigencia.check(axios, location, navigate);
|
|
}, [location, navigate]);
|
|
|
|
function guardar() {
|
|
const token = localStorage.getItem('TOKEN_PROYECTO');
|
|
|
|
const config = {
|
|
headers: { Authorization: `Bearer ${token}` }
|
|
};
|
|
|
|
let disponibilidades = [];
|
|
for (let i = 0; i < checkBoxes.length; i++) {
|
|
if (checkBoxes[i].checked) {
|
|
disponibilidades.push({
|
|
especialista: especialista,
|
|
fecha: new Date(date.toDateString()),
|
|
horario: checkBoxes[i].horario
|
|
});
|
|
}
|
|
}
|
|
axios.post(apiUrl + apiUrlDisponibilidad,
|
|
{
|
|
disponibilidades: disponibilidades
|
|
},
|
|
config
|
|
)
|
|
.then(function (response) {
|
|
if (response.status === 200) {
|
|
MySwal.fire({
|
|
title: <p>Guardados!</p>,
|
|
text: 'Los horarios fueron guardados!',
|
|
icon: 'success'
|
|
});
|
|
}
|
|
else {
|
|
MySwal.fire({
|
|
title: <p>Error!</p>,
|
|
text: response.data.mensaje,
|
|
icon: 'error'
|
|
});
|
|
}
|
|
})
|
|
.catch(function (error) {
|
|
MySwal.fire({
|
|
title: <p>Error!</p>,
|
|
text: error.response.data.mensaje,
|
|
icon: 'error'
|
|
});
|
|
});
|
|
}
|
|
|
|
return (
|
|
<Container component="main" maxWidth="md">
|
|
<div className={classes.paper}>
|
|
<Grid container spacing={2}>
|
|
<Grid item xs={12} md={3}>
|
|
<Grid container spacing={2}>
|
|
<Grid item xs={12} md={12}>
|
|
<Box mt={2}>
|
|
<FormControl fullWidth variant="outlined">
|
|
<InputLabel>Especialista</InputLabel>
|
|
<Select
|
|
open={open}
|
|
label="Especialista"
|
|
onClose={handleClose}
|
|
onOpen={handleOpen}
|
|
value={especialista}
|
|
onChange={handleChange}
|
|
>
|
|
<MenuItem value=""></MenuItem>
|
|
{especialistas.map((especialista) => (
|
|
<MenuItem key={especialista._id} value={especialista._id}>{especialista.nombre}</MenuItem>
|
|
))}
|
|
</Select>
|
|
</FormControl>
|
|
</Box>
|
|
</Grid>
|
|
<Grid item xs={12} md={12}>
|
|
<Box mt={2}>
|
|
<MuiPickersUtilsProvider utils={DateFnsUtils}>
|
|
<KeyboardDatePicker
|
|
fullWidth
|
|
key="datePicker"
|
|
disableToolbar
|
|
minDate={hoy}
|
|
disabled={formDisabled}
|
|
variant="inline"
|
|
format="dd/MM/yyyy"
|
|
margin="normal"
|
|
label="Fecha"
|
|
value={date}
|
|
onChange={handleDateChange}
|
|
KeyboardButtonProps={{
|
|
'aria-label': 'cambiar fecha',
|
|
}}
|
|
/>
|
|
</MuiPickersUtilsProvider>
|
|
</Box>
|
|
</Grid>
|
|
<Grid item xs={12} md={12}>
|
|
<FormControlLabel
|
|
control={
|
|
<Checkbox
|
|
key="checkAll"
|
|
checked={checkAll}
|
|
disabled={formDisabled}
|
|
onChange={handleCheckAllChange}
|
|
color="primary"
|
|
/>
|
|
}
|
|
label="Habilitar todos"
|
|
/>
|
|
</Grid>
|
|
</Grid>
|
|
</Grid>
|
|
<Grid item xs={12} md={9}>
|
|
<Box ml={10} mt={1}>
|
|
<Grid container spacing={1}>
|
|
{checkBoxes.map(function(checkBox, index) {
|
|
let newLine = (<br key={checkBox.id + "newLine"} />);
|
|
if (index % 4 || index === 0) {
|
|
newLine = "";
|
|
}
|
|
return [
|
|
newLine,
|
|
<Grid key={checkBox.id} item xs={12} md={3}>
|
|
<FormControlLabel
|
|
control={
|
|
<Checkbox
|
|
checked={checkBox.checked}
|
|
disabled={formDisabled}
|
|
onChange={handleCheckChange(index)}
|
|
color="primary"
|
|
/>
|
|
}
|
|
label={checkBox.horario}
|
|
/>
|
|
</Grid>
|
|
];
|
|
})}
|
|
</Grid>
|
|
</Box>
|
|
</Grid>
|
|
<Grid item xs={12} md={12} className={classes.gridButton}>
|
|
<Box mt={2}>
|
|
<Button className={classes.button} variant="contained" color="primary" disabled={formDisabled} onClick={guardar}>Guardar</Button>
|
|
</Box>
|
|
</Grid>
|
|
</Grid>
|
|
</div>
|
|
</Container>
|
|
);
|
|
}
|