Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat/issue 170 - Add option to pick dates #175

Merged
merged 3 commits into from
Jan 24, 2025
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Added datepicker to pick dates
ishraqfatin7 committed Jan 24, 2025
commit 088747642d75279875ebcff5f666c581789083c5
125 changes: 84 additions & 41 deletions client/src/pages/Home/BookRoomView/index.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
import { Box, Checkbox, Typography } from '@mui/material';
import { useEffect, useRef, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import AttendeeInput from '@/components/AttendeeInput';
import StyledTextField from '@/components/StyledTextField';
import { useApi } from '@/context/ApiContext';
import { usePreferences } from '@/context/PreferencesContext';
import Dropdown, { DropdownOption } from '@components/Dropdown';
import LoadingButton from '@mui/lab/LoadingButton';
import RoomsDropdown, { RoomsDropdownOption } from '@components/RoomsDropdown';
import { FormData } from '@helpers/types';
import {
convertToRFC3339,
createDropdownOptions,
@@ -13,20 +15,21 @@ import {
populateTimeOptions,
renderError,
} from '@helpers/utility';
import toast from 'react-hot-toast';
import AccessTimeFilledRoundedIcon from '@mui/icons-material/AccessTimeFilledRounded';
import EventSeatRoundedIcon from '@mui/icons-material/EventSeatRounded';
import { FormData } from '@helpers/types';
import { BookRoomDto, EventResponse, IConferenceRoom } from '@quickmeet/shared';
import MeetingRoomRoundedIcon from '@mui/icons-material/MeetingRoomRounded';
import HourglassBottomRoundedIcon from '@mui/icons-material/HourglassBottomRounded';
import RoomsDropdown, { RoomsDropdownOption } from '@components/RoomsDropdown';
import { usePreferences } from '@/context/PreferencesContext';
import StyledTextField from '@/components/StyledTextField';
import MeetingRoomRoundedIcon from '@mui/icons-material/MeetingRoomRounded';
import TitleIcon from '@mui/icons-material/Title';
import { useApi } from '@/context/ApiContext';
import AttendeeInput from '@/components/AttendeeInput';

import LoadingButton from '@mui/lab/LoadingButton';
import { Box, Checkbox, Typography } from '@mui/material';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { BookRoomDto, EventResponse, IConferenceRoom } from '@quickmeet/shared';
import dayjs from 'dayjs';
import { useEffect, useRef, useState } from 'react';
import toast from 'react-hot-toast';
import { useNavigate } from 'react-router-dom';
const createRoomDropdownOptions = (rooms: IConferenceRoom[]) => {
return (rooms || []).map((room) => ({ value: room.email, text: room.name, seats: room.seats, floor: room.floor }) as RoomsDropdownOption);
};
@@ -58,6 +61,8 @@ export default function BookRoomView({ onRoomBooked }: BookRoomViewProps) {
seats: preferences.seats,
});

const [date, setDate] = useState(dayjs());
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

use the existing hook formData with a new field added there "date"

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

also, try replacing dayjs with existing method convertToRFC3339()`


// Utilities and hooks
const navigate = useNavigate();
const abortControllerRef = useRef<AbortController | null>(null);
@@ -119,10 +124,8 @@ export default function BookRoomView({ onRoomBooked }: BookRoomViewProps) {
async function setAvailableRooms() {
const { startTime, duration, seats } = formData;
const { floor } = preferences;

const date = new Date(Date.now()).toISOString().split('T')[0];
const formattedStartTime = convertToRFC3339(date, startTime);

const currentDate = date.toISOString().split('T')[0];
const formattedStartTime = convertToRFC3339(currentDate, startTime);
setRoomLoading(true);

if (abortControllerRef.current) {
@@ -167,8 +170,7 @@ export default function BookRoomView({ onRoomBooked }: BookRoomViewProps) {
return;
}

const date = new Date(Date.now()).toISOString().split('T')[0];
const formattedStartTime = convertToRFC3339(date, startTime);
const formattedStartTime = convertToRFC3339(date.toISOString().split('T')[0], startTime);
const { floor, title: preferredTitle } = preferences;

const payload: BookRoomDto = {
@@ -215,30 +217,71 @@ export default function BookRoomView({ onRoomBooked }: BookRoomViewProps) {
>
<Box
sx={{
px: 1,
pt: 1,
display: 'flex',
alignItems: 'center',
flexDirection: 'row',
backgroundColor: (theme) => theme.palette.common.white,
border: 'none',
width: '100%',
}}
>
<Dropdown
id="startTime"
options={timeOptions}
value={formData.startTime}
onChange={handleInputChange}
sx={{
borderTopLeftRadius: 10,
borderTopRightRadius: 10,
}}
icon={
<AccessTimeFilledRoundedIcon
sx={[
(theme) => ({
color: theme.palette.grey[50],
}),
]}
<Box sx={{ width: '50%' }}>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the same needs to be done in EditEventsView

<Dropdown
id="startTime"
options={timeOptions}
value={formData.startTime}
onChange={handleInputChange}
sx={{
borderTopLeftRadius: 10,
borderTopRightRadius: 10,
}}
icon={
<AccessTimeFilledRoundedIcon
sx={[
(theme) => ({
color: theme.palette.grey[50],
}),
]}
/>
}
/>
</Box>
<Box sx={{ flex: 1, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
<LocalizationProvider dateAdapter={AdapterDayjs}>
<DatePicker
defaultValue={date}
onChange={(newDate) => {
if (newDate) {
setDate(newDate);
}
}}
slotProps={{
inputAdornment: {
position: 'start',
},
}}
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],
},
ml: 0.2,
}}
/>
}
/>

</LocalizationProvider>
</Box>
</Box>
<Box>
<Box sx={{ display: 'flex' }}>
<Dropdown
id="duration"
96 changes: 96 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 4 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
@@ -27,5 +27,9 @@
],
"devDependencies": {
"npm-run-all2": "^7.0.1"
},
"dependencies": {
"@mui/x-date-pickers": "^7.24.0",
"dayjs": "^1.11.13"
}
}