1import React, {useState} from 'react';
  2import Dialog from '@material-ui/core/Dialog';
  3import DialogActions from '@material-ui/core/DialogActions';
  4import DialogContent from '@material-ui/core/DialogContent';
  5import DialogContentText from '@material-ui/core/DialogContentText';
  6import DialogTitle from '@material-ui/core/DialogTitle';
  7import Button from '@material-ui/core/Button';
  8import Slide from '@material-ui/core/Slide';
  9import TextField from '@material-ui/core/TextField';
 10import Slider from '@material-ui/core/Slider';
 11import Typography from '@material-ui/core/Typography';
 12import {DateTimePicker} from '@material-ui/pickers';
 13import {makeStyles} from '@material-ui/core/styles';
 14import moment from 'moment';
 15import {useTranslation} from 'react-i18next';
 16import {useStrapi} from 'strapi-react-context';
 17import {useToast} from '../../contexts/Toast';
 18import {useEvent} from '../../contexts/Event';
 19
 20const Transition = React.forwardRef(function Transition(props, ref) {
 21  return <Slide direction="up" ref={ref} {...props} />;
 22});
 23
 24const marks = [1, 2, 3, 4, 5, 6, 7, 8].map(value => ({
 25  value,
 26  label: value,
 27}));
 28
 29const NewCarDialog = ({open, toggle}) => {
 30  const strapi = useStrapi();
 31  const {t} = useTranslation();
 32  const classes = useStyles();
 33  const {addToast} = useToast();
 34  const {event} = useEvent();
 35
 36  // States
 37  const [name, setName] = useState('');
 38  const [seats, setSeats] = useState(4);
 39  const [meeting, setMeeting] = useState('');
 40  const [date, setDate] = useState(moment());
 41  const [phone, setPhone] = useState('');
 42  const [details, setDetails] = useState('');
 43
 44  const canCreate = !!name && !!seats;
 45
 46  const onCreate = async e => {
 47    if (e.preventDefault) e.preventDefault();
 48    try {
 49      await strapi.services.cars.create({
 50        name,
 51        seats,
 52        meeting,
 53        departure: date.toISOString(),
 54        phone_number: phone,
 55        details,
 56        event: event.id,
 57      });
 58      addToast(t('car.creation.created'));
 59      toggle();
 60
 61      // Clear states
 62      setName('');
 63      setSeats(4);
 64      setMeeting('');
 65      setDate(moment());
 66      setPhone('');
 67      setDetails('');
 68    } catch (error) {
 69      console.error(error);
 70      addToast(t('car.errors.cant_create'));
 71    }
 72    return false;
 73  };
 74
 75  return (
 76    <Dialog
 77      fullWidth
 78      maxWidth="sm"
 79      open={open}
 80      onClose={toggle}
 81      TransitionComponent={Transition}
 82    >
 83      <form onSubmit={onCreate}>
 84        <DialogTitle>{t('car.creation.title')}</DialogTitle>
 85        <DialogContent>
 86          <DialogContentText>
 87            <TextField
 88              className={classes.textField}
 89              label={t('car.creation.name')}
 90              fullWidth
 91              autoFocus
 92              margin="dense"
 93              value={name}
 94              onChange={e => setName(e.target.value)}
 95              id="NewCarName"
 96              name="name"
 97            />
 98            <DateTimePicker
 99              label={t('event.creation.date')}
100              value={date}
101              onChange={setDate}
102              className={classes.picker}
103              fullWidth
104              format="LLLL"
105              disablePast
106              id="NewCarDateTime"
107              name="date"
108            />
109            <Typography variant="caption">{t('car.creation.seats')}</Typography>
110            <Slider
111              value={seats}
112              onChange={(e, value) => setSeats(value)}
113              step={1}
114              min={1}
115              max={marks.length}
116              marks={marks}
117              valueLabelDisplay="auto"
118            />
119            <TextField
120              className={classes.textField}
121              label={t('car.creation.meeting')}
122              fullWidth
123              margin="dense"
124              value={meeting}
125              onChange={e => setMeeting(e.target.value)}
126              id="NewCarMeeting"
127              name="meeting"
128            />
129            <TextField
130              className={classes.textField}
131              label={t('car.creation.phone')}
132              fullWidth
133              margin="dense"
134              value={phone}
135              onChange={e => setPhone(e.target.value)}
136              id="NewCarPhone"
137              name="phone"
138            />
139            <TextField
140              className={classes.textField}
141              label={t('car.creation.notes')}
142              fullWidth
143              margin="dense"
144              inputProps={{maxLength: 250}}
145              helperText={`${details.length}/250`}
146              multiline
147              rows={4}
148              value={details}
149              onChange={e => setDetails(e.target.value)}
150              id="NewCarDetails"
151              name="details"
152            />
153          </DialogContentText>
154        </DialogContent>
155        <DialogActions>
156          <Button
157            color="primary"
158            id="NewCarCancel"
159            onClick={toggle}
160            tabIndex={-1}
161          >
162            {t('generic.cancel')}
163          </Button>
164          <Button
165            color="primary"
166            variant="contained"
167            type="submit"
168            disabled={!canCreate}
169            aria-disabled={!canCreate}
170            id="NewCarSubmit"
171          >
172            {t('generic.create')}
173          </Button>
174        </DialogActions>
175      </form>
176    </Dialog>
177  );
178};
179
180const useStyles = makeStyles(theme => ({
181  textField: {
182    marginBottom: theme.spacing(2),
183  },
184  picker: {
185    marginBottom: theme.spacing(3),
186  },
187}));
188
189export default NewCarDialog;