frontend/containers/VehicleChoiceDialog/index.tsx (view raw)
1import {forwardRef, Fragment} from 'react';
2import {styled, useTheme} from '@mui/material/styles';
3import Dialog from '@mui/material/Dialog';
4import DialogActions from '@mui/material/DialogActions';
5import DialogContent from '@mui/material/DialogContent';
6import DialogTitle from '@mui/material/DialogTitle';
7import Button from '@mui/material/Button';
8import List from '@mui/material/List';
9import Container from '@mui/material/Container';
10import Divider from '@mui/material/Divider';
11import Slide from '@mui/material/Slide';
12import {useTranslation} from 'react-i18next';
13import VehicleItem from './VehicleItem';
14import Typography from '@mui/material/Typography';
15import {Vehicle, VehicleEntity} from '../../generated/graphql';
16import Icon from '@mui/material/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 theme = useTheme();
38 const {t} = useTranslation();
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
51 sx={{
52 position: 'absolute',
53 top: theme.spacing(2),
54 right: theme.spacing(2),
55 cursor: 'pointer',
56 padding: theme.spacing(0.5),
57 width: theme.spacing(4),
58 height: theme.spacing(4),
59 }}
60 onClick={toggle}
61 aria-label="close"
62 >
63 close
64 </Icon>
65 </DialogTitle>
66 <DialogContent dividers sx={{padding: 0}}>
67 {(vehicles && vehicles.length != 0 && (
68 <List>
69 {vehicles.map(({id, attributes}, index, {length}) => (
70 <Fragment key={index}>
71 <VehicleItem
72 vehicle={{id, ...attributes}}
73 select={() => {
74 toggleNewTravel({
75 vehicle: {id, ...attributes},
76 opened: true,
77 });
78 toggle();
79 }}
80 />
81 {index + 1 < length && <Divider />}
82 </Fragment>
83 ))}
84 </List>
85 )) || (
86 <Container sx={{padding: theme.spacing(2, 3)}}>
87 <Typography>{t('travel.vehicle.empty')}</Typography>
88 </Container>
89 )}
90 </DialogContent>
91 <DialogActions sx={{justifyContent: 'center'}}>
92 <Button
93 sx={{maxWidth: '300px'}}
94 color="primary"
95 fullWidth
96 variant="outlined"
97 onClick={() => {
98 toggleNewTravel({opened: true});
99 toggle();
100 }}
101 >
102 {t('travel.vehicle.add')}
103 </Button>
104 </DialogActions>
105 </Dialog>
106 );
107};
108
109const Transition = forwardRef(function Transition(props, ref) {
110 return <Slide direction="up" ref={ref} {...props} />;
111});
112
113export default VehicleChoiceDialog;