frontend/components/FilterByDate/index.tsx (view raw)
1import {useState} from 'react';
2import {
3 Box,
4 Button,
5 Checkbox,
6 FormControlLabel,
7 Icon,
8 List,
9 Menu,
10 MenuItem,
11} from '@mui/material';
12import theme from '../../theme';
13import {type Moment} from 'moment';
14
15interface FilterByDateProps {
16 dates: Moment[];
17 setSelectedDates: React.Dispatch<React.SetStateAction<Moment[]>>;
18 buttonFilterContent: string | string[];
19}
20
21const FilterByDate = ({
22 dates,
23 setSelectedDates,
24 buttonFilterContent,
25}: FilterByDateProps) => {
26 const [anchorElement, setAnchorElement] = useState<null | HTMLElement>(null);
27 const [checkedItems, setCheckedItems] = useState<boolean[]>(
28 new Array(dates.length).fill(false)
29 );
30 const menuOpen = Boolean(anchorElement);
31
32 const handleClickListItem = (event: React.MouseEvent<HTMLElement>) =>
33 setAnchorElement(event.currentTarget);
34
35 const handleCheckboxChange = (index: number) => {
36 const newCheckedItems = [...checkedItems];
37 newCheckedItems[index] = !checkedItems[index];
38 setCheckedItems(newCheckedItems);
39 const selectedDate = dates[index];
40 setSelectedDates(prevSelectedDates => {
41 if (checkedItems[index])
42 return prevSelectedDates.filter(date => !date.isSame(selectedDate));
43 else return [...prevSelectedDates, selectedDate];
44 });
45 };
46
47 return (
48 <Box
49 sx={{
50 outline: 'none',
51 '& > *': {
52 cursor: 'default',
53 },
54 position: 'absolute',
55 top: 60,
56 zIndex: 666,
57 [theme.breakpoints.down('sm')]: {
58 left: 15,
59 },
60 [theme.breakpoints.up('sm')]: {
61 left: 25,
62 },
63 }}
64 >
65 <List sx={{bgcolor: 'background.paper', borderRadius: 1, p: 0}}>
66 <Button
67 onClick={handleClickListItem}
68 endIcon={<Icon>calendar_today_outlined</Icon>}
69 >
70 {buttonFilterContent}
71 </Button>
72 </List>
73 <Menu
74 anchorEl={anchorElement}
75 open={menuOpen}
76 onClose={() => setAnchorElement(null)}
77 MenuListProps={{
78 'aria-labelledby': 'lock-button',
79 role: 'listbox',
80 }}
81 >
82 {Array.isArray(dates) &&
83 dates.map((date, index) => (
84 <MenuItem key={index}>
85 <FormControlLabel
86 control={
87 <Checkbox
88 checked={checkedItems[index]}
89 onChange={() => handleCheckboxChange(index)}
90 />
91 }
92 label={date.format('dddd Do MMMM')}
93 />
94 </MenuItem>
95 ))}
96 </Menu>
97 </Box>
98 );
99};
100
101export default FilterByDate;