diff --git a/media_commons_booking_app/src/client/booking/components/Calendars.tsx b/media_commons_booking_app/src/client/booking/components/Calendars.tsx index 91028bfc..ac4719f7 100644 --- a/media_commons_booking_app/src/client/booking/components/Calendars.tsx +++ b/media_commons_booking_app/src/client/booking/components/Calendars.tsx @@ -1,7 +1,7 @@ import React, { useState, useEffect, useRef } from 'react'; import { CalendarDatePicker } from './CalendarDatePicker'; import { DateSelectArg } from '@fullcalendar/core'; -import { RoomSetting } from './SheetEditor'; +import { Role, RoomSetting } from './SheetEditor'; import { formatDate } from '../../utils/date'; import { RoomCalendar } from './RoomCalendar'; @@ -10,6 +10,7 @@ type CalendarProps = { selectedRooms: RoomSetting[]; handleSetDate: any; refs?: any[]; + canBookFullTime: Boolean; }; const TITLE_TAG = '[Click to Delete]'; @@ -18,10 +19,9 @@ export const Calendars = ({ allRooms, selectedRooms, handleSetDate, + canBookFullTime, }: CalendarProps) => { console.log('allrooms', allRooms); - const [enrolledThisis, setEnrolledThesis] = useState(false); - const [faculty, setFaculty] = useState(false); const [bookingTimeEvent, setBookingTimeEvent] = useState(); const isOverlap = (info) => { return selectedRooms.some((room, i) => { @@ -86,23 +86,6 @@ export const Calendars = ({
Select date
-
-
- setEnrolledThesis(!enrolledThisis)} - /> - -
-
-
- - {errors.department && ( - - )} - - {showTextbox && ( - - )} -
-
- - {errors.role && } - -
+ {watch('role') === 'Student' && (
@@ -369,6 +312,9 @@ const FormInput = ({ hasEmail, handleParentSubmit, selectedRoom }) => { > Sponsor Last Name + {errors.sponsorFirstName && ( + + )} { className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-[600px] p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="" {...register('sponsorEmail', { - required: watch('role') === 'Student', pattern: { value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i, message: 'Invalid email address', }, + required: watch('role') === 'Student', })} />
diff --git a/media_commons_booking_app/src/client/booking/components/MultipleCalendars.tsx b/media_commons_booking_app/src/client/booking/components/MultipleCalendars.tsx index a7e81acd..606b09c0 100644 --- a/media_commons_booking_app/src/client/booking/components/MultipleCalendars.tsx +++ b/media_commons_booking_app/src/client/booking/components/MultipleCalendars.tsx @@ -3,7 +3,11 @@ import { Calendars } from './Calendars'; import { SelectRooms } from './SelectRooms'; import { SelectMotionCapture } from './SelectMotionCapture'; -export const MultipleCalendars = ({ allRooms, handleSetDate }) => { +export const MultipleCalendars = ({ + allRooms, + handleSetDate, + canBookFullTime, +}) => { const [calendarRefs, setCalendarRefs] = useState([]); const [loading, setLoading] = useState(true); const [checkedRoomIds, setCheckedRoomIds] = useState([]); @@ -112,6 +116,7 @@ export const MultipleCalendars = ({ allRooms, handleSetDate }) => { allRooms={allRooms} selectedRooms={checkedRooms} handleSetDate={handleSubmit} + canBookFullTime={canBookFullTime} />
)} diff --git a/media_commons_booking_app/src/client/booking/components/RoleModal.tsx b/media_commons_booking_app/src/client/booking/components/RoleModal.tsx new file mode 100644 index 00000000..78d8c6ca --- /dev/null +++ b/media_commons_booking_app/src/client/booking/components/RoleModal.tsx @@ -0,0 +1,89 @@ +import React, { useState } from 'react'; + +export const RoleModal = ({ handleClick }) => { + const [role, setRole] = useState(''); + const [department, setDepartment] = useState(''); + const [enrolledThesis, setEnrolledThesis] = useState(false); + + // Nextボタンのクリックイベントハンドラ + const handleNextClick = () => { + if (!role || !department) { + // 適切なエラーメッセージを設定 + alert('Please make sure all fields are selected.'); + return; // ここで処理を中断 + } + handleClick(role, department, enrolledThesis); + }; + + return ( + + ); +}; diff --git a/media_commons_booking_app/src/client/booking/components/RoomCalendar.tsx b/media_commons_booking_app/src/client/booking/components/RoomCalendar.tsx index 3b72fb36..7a375c54 100644 --- a/media_commons_booking_app/src/client/booking/components/RoomCalendar.tsx +++ b/media_commons_booking_app/src/client/booking/components/RoomCalendar.tsx @@ -14,7 +14,7 @@ export const RoomCalendar = ({ allRooms, bookingTimeEvent, setBookingTimeEvent, - enrolledThisis, + canBookFullTime, isOverlap, }) => { const [events, setEvents] = useState([]); @@ -74,7 +74,7 @@ export const RoomCalendar = ({ console.log('selectInfo', selectInfo); // only enrolledThesis user can book over 4 hours if ( - !enrolledThisis && + !canBookFullTime && selectInfo.end.getTime() / 1000 - selectInfo.start.getTime() / 1000 > 60 * 60 * 4 ) { diff --git a/media_commons_booking_app/src/client/booking/components/SheetEditor.tsx b/media_commons_booking_app/src/client/booking/components/SheetEditor.tsx index 69020ba0..81501c59 100644 --- a/media_commons_booking_app/src/client/booking/components/SheetEditor.tsx +++ b/media_commons_booking_app/src/client/booking/components/SheetEditor.tsx @@ -21,6 +21,8 @@ export type RoomSetting = { calendarRef?: any; }; +export type Role = 'Student' | 'Resident/Fellow' | 'Faculty' | 'Admin/Staff'; + export type Purpose = 'multipleRoom' | 'motionCapture'; const SAFETY_TRAINING_REQUIRED_ROOM = [ @@ -73,6 +75,12 @@ const SheetEditor = () => { const [mappingRoomSettings, setMappingRoomSettings] = useState([]); const [section, setSection] = useState('selectRoom'); const [loading, setLoading] = useState(true); + const [role, setRole] = useState(''); + const [department, setDepartment] = useState(''); + const [enrolledThesis, setEnrolledThesis] = useState(false); + const canBookFullTime = enrolledThesis || role !== 'Student'; + console.log('enrolledThesis', enrolledThesis, 'role', role); + const order: (keyof Inputs)[] = [ 'firstName', 'lastName', @@ -186,7 +194,7 @@ const SheetEditor = () => { // Add the event to the calendar. const calendarEventId = await serverFunctions.addEventToCalendar( roomCalendarId(room), - `[REQUESTED] ${room.roomId} ${data.department} - ${data.firstName} ${data.lastName} (${data.netId})`, + `[REQUESTED] ${room.roomId} ${department} - ${data.firstName} ${data.lastName} (${data.netId})`, 'Your reservation is not yet confirmed. The coordinator will review and finalize your reservation within a few days.', bookInfo.startStr, bookInfo.endStr, @@ -293,6 +301,8 @@ const SheetEditor = () => { hasEmail={userEmail ? true : false} handleParentSubmit={handleSubmit} selectedRoom={selectedRoom} + role={role} + department={department} /> ); @@ -304,6 +314,7 @@ const SheetEditor = () => { key="calendars" allRooms={mappingRoomSettings} handleSetDate={handleSetDate} + canBookFullTime={canBookFullTime} /> ); @@ -314,7 +325,10 @@ const SheetEditor = () => { setShowModal(false); setRoleModal(true); }; - const handleRoleModalClick = () => { + const handleRoleModalClick = (role, department, enrolledThesis) => { + setRole(role); + setDepartment(department); + setEnrolledThesis(enrolledThesis); setRoleModal(false); }; return (