frontend/containers/VehicleChoiceDialog/index.tsx (view raw)
1import {forwardRef, Fragment} from 'react';
2import {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 {VehicleEntity} from '../../generated/graphql';
16import Icon from '@mui/material/Icon';
17
18interface Props {
19 open: boolean;
20 setSelectedVehicle: (vehicle: VehicleEntity) => void;
21 setNewTravelDialog: (open: boolean) => void;
22 toggle: () => void;
23 vehicles: Array<VehicleEntity>;
24}
25
26const VehicleChoiceDialog = ({
27 open,
28 setSelectedVehicle,
29 setNewTravelDialog,
30 toggle,
31 vehicles,
32}: Props) => {
33 const theme = useTheme();
34 const {t} = useTranslation();
35
36 return (
37 <Dialog
38 fullWidth
39 maxWidth="xs"
40 open={open}
41 onClose={toggle}
42 TransitionComponent={Transition}
43 >
44 <DialogTitle>
45 {t('travel.vehicle.title')}
46 <Icon
47 sx={{
48 position: 'absolute',
49 top: theme.spacing(2),
50 right: theme.spacing(2),
51 cursor: 'pointer',
52 padding: theme.spacing(0.5),
53 width: theme.spacing(4),
54 height: theme.spacing(4),
55 }}
56 onClick={toggle}
57 aria-label="close"
58 >
59 close
60 </Icon>
61 </DialogTitle>
62 <DialogContent dividers sx={{padding: 0}}>
63 {(vehicles && vehicles.length != 0 && (
64 <List>
65 {vehicles.map((vehicle, index, {length}) => (
66 <Fragment key={index}>
67 <VehicleItem
68 vehicle={vehicle}
69 select={() => {
70 setNewTravelDialog(true);
71 setSelectedVehicle(vehicle);
72 toggle();
73 }}
74 />
75 {index + 1 < length && <Divider />}
76 </Fragment>
77 ))}
78 </List>
79 )) || (
80 <Container sx={{padding: theme.spacing(2, 3)}}>
81 <Typography>{t('travel.vehicle.empty')}</Typography>
82 </Container>
83 )}
84 </DialogContent>
85 <DialogActions sx={{justifyContent: 'center'}}>
86 <Button
87 sx={{maxWidth: '300px'}}
88 color="primary"
89 fullWidth
90 variant="outlined"
91 onClick={() => {
92 setNewTravelDialog(true);
93 toggle();
94 }}
95 >
96 {t('travel.vehicle.add')}
97 </Button>
98 </DialogActions>
99 </Dialog>
100 );
101};
102
103const Transition = forwardRef(function Transition(props, ref) {
104 return <Slide direction="up" ref={ref} {...props} />;
105});
106
107export default VehicleChoiceDialog;