frontend/containers/VehicleChoiceDialog/index.tsx (view raw)
1import {forwardRef, Fragment} from 'react';
2import {makeStyles} from '@material-ui/core/styles';
3import Dialog from '@material-ui/core/Dialog';
4import DialogActions from '@material-ui/core/DialogActions';
5import DialogContent from '@material-ui/core/DialogContent';
6import DialogTitle from '@material-ui/core/DialogTitle';
7import Button from '@material-ui/core/Button';
8import List from '@material-ui/core/List';
9import Container from '@material-ui/core/Container';
10import Divider from '@material-ui/core/Divider';
11import Slide from '@material-ui/core/Slide';
12import {useTranslation} from 'react-i18next';
13import VehicleItem from './VehicleItem';
14import Typography from '@material-ui/core/Typography';
15import {Vehicle, VehicleEntity} from '../../generated/graphql';
16import Icon from '@material-ui/core/Icon';
17
18interface Props {
19 open: boolean;
20 toggle: () => void;
21 toggleNewTravel: ({
22 opened,
23 vehicle,
24 }: {
25 opened: boolean;
26 vehicle?: Vehicle & {id: string};
27 }) => void;
28 vehicles: Array<VehicleEntity>;
29}
30
31const VehicleChoiceDialog = ({
32 open,
33 toggle,
34 toggleNewTravel,
35 vehicles,
36}: Props) => {
37 const {t} = useTranslation();
38 const classes = useStyles();
39
40 return (
41 <Dialog
42 fullWidth
43 maxWidth="xs"
44 open={open}
45 onClose={toggle}
46 TransitionComponent={Transition}
47 >
48 <DialogTitle>
49 {t('travel.vehicle.title')}
50 <Icon className={classes.closeIcon} onClick={toggle} aria-label="close">
51 close
52 </Icon>
53 </DialogTitle>
54 <DialogContent dividers className={classes.content}>
55 {(vehicles && vehicles.length != 0 && (
56 <List>
57 {vehicles.map(({id, attributes}, index, {length}) => (
58 <Fragment key={index}>
59 <VehicleItem
60 vehicle={{id, ...attributes}}
61 select={() => {
62 toggleNewTravel({
63 vehicle: {id, ...attributes},
64 opened: true,
65 });
66 toggle();
67 }}
68 />
69 {index + 1 < length && <Divider />}
70 </Fragment>
71 ))}
72 </List>
73 )) || (
74 <Container className={classes.empty}>
75 <Typography>{t('travel.vehicle.empty')}</Typography>
76 </Container>
77 )}
78 </DialogContent>
79 <DialogActions className={classes.actions}>
80 <Button
81 className={classes.new}
82 color="primary"
83 fullWidth
84 variant="outlined"
85 onClick={() => {
86 toggleNewTravel({opened: true});
87 toggle();
88 }}
89 >
90 {t('travel.vehicle.add')}
91 </Button>
92 </DialogActions>
93 </Dialog>
94 );
95};
96
97const Transition = forwardRef(function Transition(props, ref) {
98 return <Slide direction="up" ref={ref} {...props} />;
99});
100
101const useStyles = makeStyles(theme => ({
102 actions: {
103 justifyContent: 'center',
104 },
105 content: {
106 padding: 0,
107 },
108 new: {
109 maxWidth: '300px',
110 },
111 empty: {
112 padding: theme.spacing(2, 3),
113 },
114 closeIcon: {
115 position: 'absolute',
116 top: theme.spacing(2),
117 right: theme.spacing(2),
118 cursor: 'pointer',
119 padding: theme.spacing(0.5),
120 width: theme.spacing(4),
121 height: theme.spacing(4),
122 },
123}));
124
125export default VehicleChoiceDialog;