issue-198: added custom date picker in date select views

ali-ahnaf · ali-ahnaf · commit ce39c3f14fcb · 2025-02-05T13:53:36.000+06:00
diff --git a/client/src/components/EventCard.tsx b/client/src/components/EventCard.tsx
@@ -6,7 +6,7 @@ import MeetingRoomRoundedIcon from '@mui/icons-material/MeetingRoomRounded';
 import StairsIcon from '@mui/icons-material/Stairs';
 import AccessTimeFilledRoundedIcon from '@mui/icons-material/AccessTimeFilledRounded';
 import EventSeatRoundedIcon from '@mui/icons-material/EventSeatRounded';
-import { convertToLocaleTime } from '@helpers/utility';
+import { convertToLocaleTime, isPastDate } from '@helpers/utility';
 import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
 import LocationOnRoundedIcon from '@mui/icons-material/LocationOnRounded';
 import EmailRoundedIcon from '@mui/icons-material/EmailRounded';
@@ -227,7 +227,7 @@ const EventCard = ({ sx, event, onDelete, handleEditClick, isEditable, handleEve
     const menuItems: JSX.Element[] = [];
     if (isEditable) {
       menuItems.push(
-        <MenuItem key="edit" onClick={onEditClick}>
+        <MenuItem key="edit" onClick={onEditClick} disabled={isPastDate(event.start) ? true : false}>
           Edit
         </MenuItem>,
       );
diff --git a/client/src/helpers/utility.ts b/client/src/helpers/utility.ts
@@ -2,6 +2,7 @@ import Api from '@/api/api';
 import { ROUTES } from '@config/routes';
 import { secrets } from '@config/secrets';
 import { ApiResponse } from '@quickmeet/shared';
+import dayjs, { Dayjs } from 'dayjs';
 import { toast } from 'react-hot-toast';
 import { NavigateFunction } from 'react-router-dom';
 
@@ -192,3 +193,14 @@ export const chromeBackground = {
 const params = new URLSearchParams(window.location.search);
 
 export const isChromeExt = Boolean(params.get('chrome')) || secrets.appEnvironment === 'chrome';
+
+export const isPastDate = (date: string | Dayjs | undefined): boolean => {
+  if (!date || !dayjs(date).isValid()) {
+    return false;
+  }
+
+  const selectedDate = dayjs(date).startOf('day');
+  const today = dayjs().startOf('day');
+
+  return selectedDate.isBefore(today);
+};
diff --git a/client/src/pages/Home/BookRoomView/index.tsx b/client/src/pages/Home/BookRoomView/index.tsx
@@ -22,13 +22,14 @@ import HourglassBottomRoundedIcon from '@mui/icons-material/HourglassBottomRound
 import MeetingRoomRoundedIcon from '@mui/icons-material/MeetingRoomRounded';
 import TitleIcon from '@mui/icons-material/Title';
 import LoadingButton from '@mui/lab/LoadingButton';
-import { Box, Checkbox, Typography } from '@mui/material';
-import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+import { Box, Checkbox, IconButton, Typography } from '@mui/material';
+import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
 import dayjs from 'dayjs';
 import 'dayjs/locale/en-gb';
 import { useEffect, useRef, useState } from 'react';
 import toast from 'react-hot-toast';
 import { useNavigate } from 'react-router-dom';
+import DatePickerPopper from '@/pages/Home/MyEventsView/DatePickerPopper';
 
 const createRoomDropdownOptions = (rooms: IConferenceRoom[]) => {
   return (rooms || []).map((room) => ({ value: room.email, text: room.name, seats: room.seats, floor: room.floor }) as RoomsDropdownOption);
@@ -64,6 +65,8 @@ export default function BookRoomView({ onRoomBooked }: BookRoomViewProps) {
   });
 
   const [date, setDate] = useState(dayjs());
+  const [datePickerOpen, setDatePickerOpen] = useState(false);
+  const [datePickerAnchorEl, setDatePickerAnchorEl] = useState<null | HTMLElement>(null);
 
   // Utilities and hooks
   const navigate = useNavigate();
@@ -199,6 +202,11 @@ export default function BookRoomView({ onRoomBooked }: BookRoomViewProps) {
     });
   }
 
+  const handleDatePopperClick = (event: React.MouseEvent<HTMLElement>) => {
+    setDatePickerAnchorEl(event.currentTarget);
+    setDatePickerOpen(true);
+  };
+
   async function onBookClick() {
     setBookClickLoading(true);
     const { startTime, duration, seats, conference, attendees, title, room } = formData;
@@ -283,42 +291,28 @@ export default function BookRoomView({ onRoomBooked }: BookRoomViewProps) {
             />
           </Box>
           <Box sx={{ flex: 1, display: 'flex' }}>
-            <DatePicker
-              disablePast
-              defaultValue={date}
-              onChange={(newDate) => {
-                if (newDate) {
-                  setDate(newDate);
-                }
-              }}
-              slotProps={{
-                inputAdornment: {
-                  position: 'start',
-                  sx: {
-                    input: {
-                      cursor: 'pointer',
-                    },
-                  },
-                },
-              }}
-              sx={{
-                '.MuiOutlinedInput-root': {
-                  '& fieldset': {
-                    border: 'none',
-                  },
-                },
-                '.MuiInputBase-input': {
-                  color: (theme) => theme.palette.common.black,
-                  fontFamily: 'inherit',
-                  fontSize: '1.125rem',
-                  fontWeight: 400,
-                },
-                '.MuiSvgIcon-root': {
-                  color: (theme) => theme.palette.grey[50],
-                },
-                '.MuiButtonBase-root': { cursor: 'pointer' },
-              }}
-            />
+            <Box sx={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
+              <IconButton aria-label="calender" size="small" onClick={handleDatePopperClick}>
+                <CalendarMonthIcon
+                  sx={[
+                    (theme) => ({
+                      color: theme.palette.grey[50],
+                    }),
+                  ]}
+                  fontSize="medium"
+                />
+              </IconButton>
+              <Typography
+                sx={{
+                  cursor: 'pointer',
+                  ml: 2,
+                }}
+                variant="subtitle1"
+                onClick={handleDatePopperClick}
+              >
+                {date.format('DD/MM/YYYY')}
+              </Typography>
+            </Box>
           </Box>
         </Box>
         <Box>
@@ -456,6 +450,14 @@ export default function BookRoomView({ onRoomBooked }: BookRoomViewProps) {
           </Typography>
         </LoadingButton>
       </Box>
+      <DatePickerPopper
+        disablePast={true}
+        currentDate={date}
+        setCurrentDate={setDate}
+        open={datePickerOpen}
+        setOpen={setDatePickerOpen}
+        anchorEl={datePickerAnchorEl}
+      />
     </Box>
   );
 }
diff --git a/client/src/pages/Home/MyEventsView/DatePickerPopper.tsx b/client/src/pages/Home/MyEventsView/DatePickerPopper.tsx
@@ -1,5 +1,5 @@
 import { Box, Chip, ClickAwayListener, Divider, Fade, GlobalStyles, List, ListItem, Popper } from '@mui/material';
-import { StaticDatePicker, PickersShortcutsItem, PickersShortcutsProps, type PickerChangeHandlerContext, type DateValidationError } from '@mui/x-date-pickers';
+import { StaticDatePicker, PickersShortcutsItem, PickersShortcutsProps, PickerChangeHandlerContext, DateValidationError } from '@mui/x-date-pickers';
 import dayjs from 'dayjs';
 import { useEffect, useRef } from 'react';
 
@@ -67,14 +67,15 @@ function DatePickerShortcuts(props: PickersShortcutsProps<dayjs.Dayjs | null>) {
 }
 
 interface DatePickerPopperProps {
+  disablePast?: boolean;
   currentDate: dayjs.Dayjs;
   setCurrentDate: React.Dispatch<React.SetStateAction<dayjs.Dayjs>>;
   open: boolean;
   setOpen: React.Dispatch<React.SetStateAction<boolean>>;
   anchorEl: HTMLElement | null;
 }
 
-const DatePickerPopper = ({ open, setOpen, currentDate, setCurrentDate, anchorEl }: DatePickerPopperProps) => {
+const DatePickerPopper = ({ open, setOpen, currentDate, setCurrentDate, anchorEl, disablePast }: DatePickerPopperProps) => {
   const hasMounted = useRef(false);
 
   useEffect(() => {
@@ -119,6 +120,7 @@ const DatePickerPopper = ({ open, setOpen, currentDate, setCurrentDate, anchorEl
               />
               {/* https://mui.com/x/react-date-pickers/date-picker/#customization */}
               <StaticDatePicker
+                disablePast={disablePast}
                 onChange={onDateChange}
                 value={currentDate}
                 slots={{
diff --git a/client/src/pages/Home/MyEventsView/EditEventsView.tsx b/client/src/pages/Home/MyEventsView/EditEventsView.tsx
@@ -26,12 +26,13 @@ import TitleIcon from '@mui/icons-material/Title';
 import { FormData, IAvailableRoomsDropdownOption } from '@helpers/types';
 import { LoadingButton } from '@mui/lab';
 import { AppBar, Box, Button, Checkbox, IconButton, Skeleton, Stack, Typography } from '@mui/material';
-import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
 import dayjs from 'dayjs';
 import 'dayjs/locale/en-gb';
 import { useEffect, useRef, useState } from 'react';
 import { EventResponse, IConferenceRoom, IAvailableRooms, IPeopleInformation } from '@quickmeet/shared';
 import { useNavigate } from 'react-router-dom';
+import DatePickerPopper from '@/pages/Home/MyEventsView/DatePickerPopper';
 
 const createRoomDropdownOptions = (rooms: IConferenceRoom[]) => {
   return (rooms || []).map((room) => ({ value: room.email, text: room.name, seats: room.seats, floor: room.floor }) as RoomsDropdownOption);
@@ -85,6 +86,8 @@ export default function EditEventsView({ open, event, handleClose, currentRoom,
   const [formData, setFormData] = useState<FormData>(initFormData(event));
 
   const [date, setDate] = useState(dayjs(event.start!));
+  const [datePickerOpen, setDatePickerOpen] = useState(false);
+  const [datePickerAnchorEl, setDatePickerAnchorEl] = useState<null | HTMLElement>(null);
 
   // Utilities and hooks
   const api = useApi();
@@ -186,6 +189,11 @@ export default function EditEventsView({ open, event, handleClose, currentRoom,
     setAvailableRoomOptions({ others: unPreferredRoomOptions, preferred: preferredRoomOptions });
   }
 
+  const handleDatePopperClick = (event: React.MouseEvent<HTMLElement>) => {
+    setDatePickerAnchorEl(event.currentTarget);
+    setDatePickerOpen(true);
+  };
+
   async function setPreferences() {
     const eventTime = new Date(event.start!);
     const currentTime = new Date(new Date().toUTCString());
@@ -315,42 +323,28 @@ export default function EditEventsView({ open, event, handleClose, currentRoom,
                 />
               </Box>
               <Box sx={{ flex: 1, display: 'flex' }}>
-                <DatePicker
-                  disablePast
-                  defaultValue={dayjs(event.start!)}
-                  onChange={(newDate) => {
-                    if (newDate) {
-                      setDate(newDate);
-                    }
-                  }}
-                  slotProps={{
-                    inputAdornment: {
-                      position: 'start',
-                      sx: {
-                        input: {
-                          cursor: 'pointer',
-                        },
-                      },
-                    },
-                  }}
-                  sx={{
-                    '.MuiOutlinedInput-root': {
-                      '& fieldset': {
-                        border: 'none',
-                      },
-                    },
-                    '.MuiInputBase-input': {
-                      color: (theme) => theme.palette.common.black,
-                      fontFamily: 'inherit',
-                      fontSize: '1.125rem',
-                      fontWeight: 400,
-                    },
-                    '.MuiSvgIcon-root': {
-                      color: (theme) => theme.palette.grey[50],
-                    },
-                    '.MuiButtonBase-root': { cursor: 'pointer' },
-                  }}
-                />
+                <Box sx={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
+                  <IconButton aria-label="calender" size="small" onClick={handleDatePopperClick}>
+                    <CalendarMonthIcon
+                      sx={[
+                        (theme) => ({
+                          color: theme.palette.grey[50],
+                        }),
+                      ]}
+                      fontSize="medium"
+                    />
+                  </IconButton>
+                  <Typography
+                    sx={{
+                      cursor: 'pointer',
+                      ml: 2,
+                    }}
+                    variant="subtitle1"
+                    onClick={handleDatePopperClick}
+                  >
+                    {date.format('DD/MM/YYYY')}
+                  </Typography>
+                </Box>
               </Box>
             </Box>
 
@@ -509,6 +503,14 @@ export default function EditEventsView({ open, event, handleClose, currentRoom,
           </Typography>
         </Button>
       </Box>
+      <DatePickerPopper
+        disablePast={true}
+        currentDate={date}
+        setCurrentDate={setDate}
+        open={datePickerOpen}
+        setOpen={setDatePickerOpen}
+        anchorEl={datePickerAnchorEl}
+      />
     </Box>
   );
 }
