frontend/containers/VehicleChoiceDialog/VehicleItem.tsx (view raw)
1import Typography from '@mui/material/Typography';
2import {styled} from '@mui/material/styles';
3import ListItem from '@mui/material/ListItem';
4import Box from '@mui/material/Box';
5import Button from '@mui/material/Button';
6import {useTranslation} from 'react-i18next';
7import {
8 Vehicle,
9 FindUserVehiclesDocument,
10 useDeleteVehicleMutation,
11} from '../../generated/graphql';
12import useProfile from '../../hooks/useProfile';
13import useTheme from '@mui/styles/useTheme';
14
15const PREFIX = 'VehicleItem';
16
17const classes = {
18 item: `${PREFIX}-item`,
19 section: `${PREFIX}-section`,
20 label: `${PREFIX}-label`,
21 select: `${PREFIX}-select`,
22};
23
24const StyledListItem = styled(ListItem)(({theme}) => ({
25 [`&.${classes.item}`]: {
26 display: 'block',
27 padding: theme.spacing(2, 3),
28 },
29
30 [`& .${classes.section}`]: {
31 maxWidth: '75%',
32 marginBottom: theme.spacing(1),
33 },
34
35 [`& .${classes.label}`]: {
36 fontWeight: 'bold',
37 opacity: 0.6,
38 marginRight: theme.spacing(2),
39 },
40
41 [`& .${classes.select}`]: {
42 display: 'block',
43 maxWidth: '300px',
44 margin: `0 auto ${theme.spacing(1.5)} auto`,
45 },
46}));
47
48interface Props {
49 vehicle: Vehicle & {id: string};
50 select: () => void;
51}
52
53const VehicleItem = ({vehicle, select}: Props) => {
54 const {t} = useTranslation();
55 const theme = useTheme();
56
57 const {userId} = useProfile();
58 const [deleteVehicleMutation] = useDeleteVehicleMutation({
59 variables: {id: vehicle.id},
60 refetchQueries: [{query: FindUserVehiclesDocument, variables: {userId}}],
61 });
62
63 return (
64 <StyledListItem sx={{display: 'block', padding: theme.spacing(2, 3)}}>
65 <Box>
66 <Typography
67 variant="overline"
68 sx={{fontWeight: 'bold', opacity: 0.6, marginRight: theme.spacing(2)}}
69 >
70 {t('travel.vehicle.name')}
71 </Typography>
72 <Button
73 color="primary"
74 variant="text"
75 size="small"
76 onClick={() => deleteVehicleMutation()}
77 >
78 {t('generic.delete')}
79 </Button>
80 </Box>
81 <Typography
82 variant="body1"
83 sx={{maxWidth: '75%', marginBottom: theme.spacing(1)}}
84 >
85 {vehicle.name}
86 </Typography>
87 <Typography
88 variant="overline"
89 sx={{fontWeight: 'bold', opacity: 0.6, marginRight: theme.spacing(2)}}
90 >
91 {t('travel.vehicle.seats_number')}
92 </Typography>
93 <Typography
94 variant="body1"
95 sx={{maxWidth: '75%', marginBottom: theme.spacing(1)}}
96 >
97 {vehicle.seats}
98 </Typography>
99 <Button
100 sx={{
101 display: 'block',
102 maxWidth: '300px',
103 margin: `0 auto ${theme.spacing(1.5)} auto`,
104 }}
105 fullWidth
106 color="primary"
107 variant="contained"
108 onClick={select}
109 >
110 {t('generic.select')}
111 </Button>
112 </StyledListItem>
113 );
114};
115
116export default VehicleItem;