From 6e60299975f1276c51166c52f1e809919b133ed6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ville=20Pyntt=C3=A4ri?= Date: Fri, 6 Sep 2024 10:34:41 +0300 Subject: [PATCH] Replaced custom filter minute field with duration picker Fixing duration picker --- .../BookingDrawer/BookingDrawer.tsx | 9 ++-- .../BookingDrawer/DurationPicker.tsx | 10 ++--- .../components/BookingView/BookingView.tsx | 17 +++++--- .../BookingView/FilteringDrawer.tsx | 41 +++++++++++++------ .../DurationTimePickerDrawer.tsx | 4 +- .../components/GetARoomForm/GetARoomForm.tsx | 1 - .../src/components/util/AvailableTime.tsx | 9 ++-- 7 files changed, 56 insertions(+), 35 deletions(-) diff --git a/frontend/src/components/BookingDrawer/BookingDrawer.tsx b/frontend/src/components/BookingDrawer/BookingDrawer.tsx index 89dc095..7d94a21 100644 --- a/frontend/src/components/BookingDrawer/BookingDrawer.tsx +++ b/frontend/src/components/BookingDrawer/BookingDrawer.tsx @@ -66,7 +66,6 @@ const getUnavailableTimeInMinutes = (room: Room) => { const nextEvent = room.busy!.find((b) => b.start === nextStartDate); const end = DateTime.fromISO(nextEvent!.end!); - console.log(end, 'end'); console.log(getNextCalendarEvent(room), 'etNextCalendarEvent(room)'); const now = DateTime.now(); @@ -261,6 +260,7 @@ interface Props { bookRoom: () => void; duration: number; additionalDuration: number; + setAdditionalDuration: (minutes: number) => void; onAddTime: (minutes: number) => void; onAddTimeUntilHalf: () => void; onAddTimeUntilFull: () => void; @@ -269,7 +269,6 @@ interface Props { room?: Room; startingTime: string; setBookingDuration: (minutes: number) => void; - setAdditionalDuration: (minutes: number) => void; setDuration: React.Dispatch>; setExpandDurationTimePickerDrawer: (show: boolean) => void; setStartingTime: (s: string) => void; @@ -334,6 +333,7 @@ const BookingDrawer = (props: Props) => { room, duration, additionalDuration, + setAdditionalDuration, onAddTime, onAddTimeUntilHalf, onAddTimeUntilFull, @@ -341,7 +341,6 @@ const BookingDrawer = (props: Props) => { availableMinutes, startingTime, setBookingDuration, - setAdditionalDuration, setDuration, setExpandDurationTimePickerDrawer, setStartingTime @@ -526,7 +525,9 @@ const BookingDrawer = (props: Props) => { - quick duration selection + + quick duration selection (Minutes) + { value={quickDuration} aria-label={toHourMinuteFormat(quickDuration)} > - {toHourMinuteFormat(quickDuration)} + {quickDuration} ); } @@ -98,28 +98,28 @@ const DurationPicker = (props: DurationPickerProps) => { value={'15'} aria-label="15 minutes" > - 15 min + 15 - 30 min + 30 - 1 h + 60 - 2 h + 120 {CustomDurationValueButton()} { - console.log('Setting rooms at update'); setRooms(allRooms); }) .catch((error) => console.log(error)); @@ -488,11 +487,11 @@ function BookingView(props: BookingViewProps) { useState(false); function maxDuration(room: Room | undefined, startingTime: String) { - const mm = availableForMinutes(room, startingTime); + const minutesAvailable = availableForMinutes(room, startingTime); return dayjs() - .minute(mm % 60) - .hour(Math.floor(mm / 60)); + .minute(minutesAvailable % 60) + .hour(Math.floor(minutesAvailable / 60)); } const handleUntilHalf = () => { @@ -622,6 +621,7 @@ function BookingView(props: BookingViewProps) { room={selectedRoom} duration={getBookingDuration()} additionalDuration={additionalDuration} + setAdditionalDuration={setAdditionalDuration} availableMinutes={availableMinutes} onAddTime={handleAdditionalDurationChange} onAddTimeUntilHalf={handleUntilHalf} @@ -629,7 +629,6 @@ function BookingView(props: BookingViewProps) { onAddTimeUntilNext={handleUntilNextDurationChange} startingTime={startingTime} setBookingDuration={setBookingDuration} - setAdditionalDuration={setAdditionalDuration} setDuration={setDuration} setExpandDurationTimePickerDrawer={ setExpandDurationTimePickerDrawer @@ -805,9 +804,15 @@ function BookingView(props: BookingViewProps) { setOnlyFavourites={setOnlyFavourites} filterCount={filterCount} allFeatures={allFeatures} - duration={duration} + duration={getBookingDuration()} setDuration={setDuration} onChange={handleDurationChange} + additionalDuration={additionalDuration} + setBookingDuration={setBookingDuration} + setAdditionalDuration={setAdditionalDuration} + setExpandDurationTimePickerDrawer={ + setExpandDurationTimePickerDrawer + } /> diff --git a/frontend/src/components/BookingView/FilteringDrawer.tsx b/frontend/src/components/BookingView/FilteringDrawer.tsx index a01716e..dbadfc6 100644 --- a/frontend/src/components/BookingView/FilteringDrawer.tsx +++ b/frontend/src/components/BookingView/FilteringDrawer.tsx @@ -5,13 +5,13 @@ import TextField from '@mui/material/TextField'; import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; import ToggleButton from '@mui/material/ToggleButton'; import SearchIcon from '@mui/icons-material/Search'; -import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder'; import InputAdornment from '@mui/material/InputAdornment'; import styled from '@mui/styled-engine'; import { useUserSettings } from '../../contexts/UserSettingsContext'; import { COLORS } from '../../theme_2024'; import BottomDrawer, { DrawerContent } from '../BottomDrawer/BottomDrawer'; import { Bookmark, BookmarkBorder } from '@mui/icons-material'; +import DurationPicker from '../BookingDrawer/DurationPicker'; export const Row = styled(Box)(({ theme }) => ({ display: 'flex', @@ -46,6 +46,10 @@ interface Props { onChange: (duration: number) => void; duration: number; setDuration: React.Dispatch>; + setExpandDurationTimePickerDrawer: (show: boolean) => void; + additionalDuration: number; + setAdditionalDuration: (minutes: number) => void; + setBookingDuration: (minutes: number) => void; } // Note: Actual filtering of the rooms is done one level up in booking view @@ -66,7 +70,10 @@ const FilteringDrawer = (props: Props) => { allFeatures, onChange, duration, - setDuration + setDuration, + additionalDuration, + setAdditionalDuration, + setBookingDuration } = props; const StyledToggleButtonGroup = styled(ToggleButtonGroup)(({ theme }) => ({ @@ -116,11 +123,22 @@ const FilteringDrawer = (props: Props) => { const handleCustomFilter = (event: React.ChangeEvent) => { setCustomFilter(event.target.value); }; + const handleDurationChange = (newDuration: number) => { + if (newDuration !== -1) { + setBookingDuration(newDuration); + } else { + setDuration(duration); + } + setAdditionalDuration(0); + }; const handleCustomDuration = ( - event: React.ChangeEvent + event: React.MouseEvent, + customDuration: string ) => { - let value = parseInt(event.target.value); + if (customDuration === 'Custom') { + } + let value = parseInt(customDuration); if (!isNaN(value)) { value = Math.max(0, value); setDuration(value); @@ -166,14 +184,13 @@ const FilteringDrawer = (props: Props) => { Custom Duration (Minutes) - - diff --git a/frontend/src/components/DurationTimePickerDrawer/DurationTimePickerDrawer.tsx b/frontend/src/components/DurationTimePickerDrawer/DurationTimePickerDrawer.tsx index 4f3c931..87fee53 100644 --- a/frontend/src/components/DurationTimePickerDrawer/DurationTimePickerDrawer.tsx +++ b/frontend/src/components/DurationTimePickerDrawer/DurationTimePickerDrawer.tsx @@ -72,6 +72,8 @@ const DurationTimePickerDrawer = (props: DurationTimePickerDrawerProps) => { setExpandDurationTimePickerDrawer(false); }; + const nowValue = dayjs(nowDate() + ' ' + time); + return ( { setTime(val ? getHourMinute(val) : '03:00'); }} ampm={false} - value={dayjs(nowDate() + ' ' + time)} + value={nowValue} maxTime={maxDuration} data-testid="CustomDurationClock" /> diff --git a/frontend/src/components/GetARoomForm/GetARoomForm.tsx b/frontend/src/components/GetARoomForm/GetARoomForm.tsx index e9c18b5..4617eba 100644 --- a/frontend/src/components/GetARoomForm/GetARoomForm.tsx +++ b/frontend/src/components/GetARoomForm/GetARoomForm.tsx @@ -9,7 +9,6 @@ var GetARoomForm = ({ children }: Props) => { return ( {children} - after ); }; diff --git a/frontend/src/components/util/AvailableTime.tsx b/frontend/src/components/util/AvailableTime.tsx index f3999c5..59685c9 100644 --- a/frontend/src/components/util/AvailableTime.tsx +++ b/frontend/src/components/util/AvailableTime.tsx @@ -4,15 +4,12 @@ import { Room } from '../../types'; export function availableForMinutes( room: Room | undefined, startingTime: String -) { - if (room === undefined) { - return 0; - } - +): number { let availableUntil: DateTime | DateTime = DateTime.now() .set({ hour: 23, minute: 59 }) .toUTC(); - if (room.nextCalendarEvent) { + + if (room && room.nextCalendarEvent) { availableUntil = DateTime.fromISO(room.nextCalendarEvent).toUTC(); }