Skip to content

Commit 7eea3b1

Browse files
adescoteaux1adescoteaux1
committed
calendar pages updates/fixes
1 parent c531008 commit 7eea3b1

3 files changed

Lines changed: 108 additions & 63 deletions

File tree

‎frontend/src/app/calendar/page.tsx‎

Lines changed: 65 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -35,21 +35,23 @@ function CalendarPage() {
3535
setNewSessionOpen,
3636
} = useCalendarState()
3737

38+
// Initialize date from URL on mount AND when searchParams change
39+
useEffect(() => {
40+
const dateParam = searchParams.get('date')
41+
if (dateParam) {
42+
setDate(new Date(dateParam))
43+
}
44+
}, [searchParams, setDate])
3845

39-
// Initialize date from URL on mount AND when searchParams change
40-
useEffect(() => {
41-
const dateParam = searchParams.get('date')
42-
if (dateParam) {
43-
setDate(new Date(dateParam))
44-
}
45-
}, [searchParams, setDate])
4646
// Set view mode from URL query parameter
4747
useEffect(() => {
4848
const viewParam = searchParams.get('view')
4949
if (viewParam === 'card') {
5050
setViewMode('card')
51+
// Auto-set to work_week when entering card mode
52+
setView('work_week')
5153
}
52-
}, [searchParams, setViewMode])
54+
}, [searchParams, setViewMode, setView])
5355

5456
const { students, events, isLoading, error, addSession } = useCalendarData(
5557
date,
@@ -63,6 +65,15 @@ useEffect(() => {
6365
params.set('date', newDate.toISOString())
6466
router.replace(`?${params.toString()}`, { scroll: false })
6567
}
68+
69+
// Handle view mode change - auto-set to work_week for card view
70+
const handleViewModeChange = (mode: 'calendar' | 'card') => {
71+
setViewMode(mode)
72+
if (mode === 'card') {
73+
setView('work_week')
74+
}
75+
}
76+
6677
const handleSelectSlot = (slotInfo: SlotInfo) => {
6778
setSelectedSlot({
6879
start: slotInfo.start as Date,
@@ -94,8 +105,8 @@ useEffect(() => {
94105
}
95106

96107
return (
97-
<div className="w-full h-screen bg-background">
98-
<div className="w-full p-10 pb-16 flex flex-col gap-6 overflow-hidden" style={{ maxHeight: 'calc(100vh)' }}>
108+
<div className="w-full bg-background">
109+
<div className="w-full p-10 pb-10 flex flex-col gap-6" style={{ display: 'flex', flexDirection: 'column' }}>
99110
<CreateSessionDialog
100111
open={newSessionOpen}
101112
therapistId={userId}
@@ -109,54 +120,56 @@ useEffect(() => {
109120

110121
<CalendarHeader
111122
viewMode={viewMode}
112-
onViewModeChange={setViewMode}
123+
onViewModeChange={handleViewModeChange}
113124
onAddSession={() => setNewSessionOpen(true)}
114125
date={date}
115126
view={view}
116127
onNavigate={handleNavigate}
117128
onViewChange={setView}
118129
/>
119130

120-
{viewMode === 'card'
121-
? (
122-
<motion.div
123-
key="card-view"
124-
initial={{ opacity: 0, y: 60 }}
125-
animate={{ opacity: 1, y: 0 }}
126-
exit={{ opacity: 0, y: 60 }}
127-
transition={{ type: 'spring', damping: 30 }}
128-
>
129-
<CardView
130-
date={date}
131-
events={events}
132-
onSelectSession={(session, position) => {
133-
setSelectedSession(session)
134-
setModalPosition(position)
135-
}}
136-
/>
137-
</motion.div>
138-
)
139-
: (
140-
<motion.div
141-
key="calendar-view"
142-
initial={{ opacity: 0, y: 60 }}
143-
animate={{ opacity: 1, y: 0 }}
144-
exit={{ opacity: 0, y: 60 }}
145-
transition={{ type: 'spring', damping: 30 }}
146-
>
147-
<CalendarView
148-
date={date}
149-
view={view}
150-
events={events}
151-
isLoading={isLoading}
152-
error={error}
153-
onNavigate={handleNavigate}
154-
onViewChange={setView}
155-
onSelectEvent={handleSelectEvent}
156-
onSelectSlot={handleSelectSlot}
157-
/>
158-
</motion.div>
159-
)}
131+
<div className="w-full">
132+
{viewMode === 'card'
133+
? (
134+
<motion.div
135+
key="card-view"
136+
initial={{ opacity: 0, y: 60 }}
137+
animate={{ opacity: 1, y: 0 }}
138+
exit={{ opacity: 0, y: 60 }}
139+
transition={{ type: 'spring', damping: 30 }}
140+
>
141+
<CardView
142+
date={date}
143+
events={events}
144+
onSelectSession={(session, position) => {
145+
setSelectedSession(session)
146+
setModalPosition(position)
147+
}}
148+
/>
149+
</motion.div>
150+
)
151+
: (
152+
<motion.div
153+
key="calendar-view"
154+
initial={{ opacity: 0, y: 60 }}
155+
animate={{ opacity: 1, y: 0 }}
156+
exit={{ opacity: 0, y: 60 }}
157+
transition={{ type: 'spring', damping: 30 }}
158+
>
159+
<CalendarView
160+
date={date}
161+
view={view}
162+
events={events}
163+
isLoading={isLoading}
164+
error={error}
165+
onNavigate={handleNavigate}
166+
onViewChange={setView}
167+
onSelectEvent={handleSelectEvent}
168+
onSelectSlot={handleSelectSlot}
169+
/>
170+
</motion.div>
171+
)}
172+
</div>
160173

161174
{selectedSession && modalPosition && (
162175
<SessionPreviewModal
@@ -209,4 +222,4 @@ export default function MyCalendar() {
209222
</Suspense>
210223
</AppLayout>
211224
)
212-
}
225+
}

‎frontend/src/components/calendar/NewSessionModal.tsx‎

Lines changed: 39 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,14 @@ export function CreateSessionDialog({
8787
);
8888
const { refetch } = useSessions();
8989

90+
// Helper function to clear error for a specific field when user changes it
91+
const handleFieldChange =
92+
(fieldName: "session_name" | "sessionDate" | "startTime" | "endTime" | "location" | "notes", onChange: (value: any) => void) =>
93+
(e: any) => {
94+
form.clearErrors(fieldName);
95+
onChange(e);
96+
};
97+
9098
// Reset form when dialog opens/closes
9199
useEffect(() => {
92100
if (open && initialDateTime) {
@@ -112,6 +120,7 @@ export function CreateSessionDialog({
112120
setRepetitionConfig(undefined);
113121
setCreatedSessions(null);
114122
setSubmitError(null);
123+
form.clearErrors();
115124
} else if (open && !initialDateTime) {
116125
form.reset({
117126
session_name: "",
@@ -125,6 +134,7 @@ export function CreateSessionDialog({
125134
setRepetitionConfig(undefined);
126135
setCreatedSessions(null);
127136
setSubmitError(null);
137+
form.clearErrors();
128138
}
129139
}, [open, initialDateTime, form]);
130140

@@ -201,6 +211,7 @@ export function CreateSessionDialog({
201211

202212
const handleClose = () => {
203213
form.reset();
214+
form.clearErrors();
204215
setRepetitionConfig(undefined);
205216
setCreatedSessions(null);
206217
setSubmitError(null);
@@ -307,6 +318,7 @@ export function CreateSessionDialog({
307318
form.reset();
308319
setRepetitionConfig(undefined);
309320
setSubmitError(null);
321+
form.clearErrors();
310322
}}
311323
>
312324
Create Another
@@ -353,6 +365,7 @@ export function CreateSessionDialog({
353365
<Input
354366
placeholder="e.g., Speech Therapy"
355367
{...field}
368+
onChange={handleFieldChange("session_name", field.onChange)}
356369
/>
357370
</FormControl>
358371
<FormMessage />
@@ -371,7 +384,11 @@ export function CreateSessionDialog({
371384
Date *
372385
</FormLabel>
373386
<FormControl>
374-
<Input type="date" {...field} />
387+
<Input
388+
type="date"
389+
{...field}
390+
onChange={handleFieldChange("sessionDate", field.onChange)}
391+
/>
375392
</FormControl>
376393
<FormMessage />
377394
</FormItem>
@@ -389,7 +406,11 @@ export function CreateSessionDialog({
389406
Start Time *
390407
</FormLabel>
391408
<FormControl>
392-
<Input type="time" {...field} />
409+
<Input
410+
type="time"
411+
{...field}
412+
onChange={handleFieldChange("startTime", field.onChange)}
413+
/>
393414
</FormControl>
394415
<FormMessage />
395416
</FormItem>
@@ -407,7 +428,11 @@ export function CreateSessionDialog({
407428
End Time *
408429
</FormLabel>
409430
<FormControl>
410-
<Input type="time" {...field} />
431+
<Input
432+
type="time"
433+
{...field}
434+
onChange={handleFieldChange("endTime", field.onChange)}
435+
/>
411436
</FormControl>
412437
<FormMessage />
413438
</FormItem>
@@ -425,7 +450,11 @@ export function CreateSessionDialog({
425450
Location
426451
</FormLabel>
427452
<FormControl>
428-
<Input placeholder="e.g., Room 234" {...field} />
453+
<Input
454+
placeholder="e.g., Room 234"
455+
{...field}
456+
onChange={handleFieldChange("location", field.onChange)}
457+
/>
429458
</FormControl>
430459
<FormMessage />
431460
</FormItem>
@@ -450,7 +479,10 @@ export function CreateSessionDialog({
450479
value: student.id,
451480
}))}
452481
value={field.value}
453-
onValueChange={field.onChange}
482+
onValueChange={(value) => {
483+
form.clearErrors("student_ids");
484+
field.onChange(value);
485+
}}
454486
placeholder="Select students for this session"
455487
showTags={true}
456488
tagClassName="bg-pink-light text-pink"
@@ -476,6 +508,7 @@ export function CreateSessionDialog({
476508
placeholder="Goals, activities, or special considerations..."
477509
rows={3}
478510
{...field}
511+
onChange={handleFieldChange("notes", field.onChange)}
479512
/>
480513
</FormControl>
481514
<FormMessage />
@@ -508,4 +541,4 @@ export function CreateSessionDialog({
508541
</DialogContent>
509542
</Dialog>
510543
);
511-
}
544+
}

‎frontend/src/components/calendar/cardView.tsx‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -40,12 +40,10 @@ function getRecurringDays(repetition: any): string {
4040
export default function CardView({ date, events, onSelectSession }: CardViewProps) {
4141
return (
4242
<div
43-
className="grid grid-cols-5 p-6 rounded-2xl overflow-y-auto"
43+
className="grid grid-cols-5 p-6 rounded-2xl"
4444
style={{
4545
backgroundColor: '',
4646
width: '90vw',
47-
minHeight: '600px',
48-
maxHeight: '80vh',
4947
}}
5048
>
5149
{Array.from({ length: 5 }).map((_, dayIndex) => {
@@ -56,7 +54,8 @@ export default function CardView({ date, events, onSelectSession }: CardViewProp
5654
return (
5755
<div
5856
key={dayIndex}
59-
className={`flex flex-col min-h-[400px] px-6 ${dayIndex < 4 ? 'border-r border-black' : ''}`}
57+
className={`flex flex-col px-6 ${dayIndex < 4 ? 'border-r border-black' : ''}`}
58+
style={{ minHeight: 'fit-content' }}
6059
>
6160
<div className="flex flex-col items-center mb-3 pt-3">
6261
<div className="text-base font-semibold" style={{ color: 'var(--text-primary)' }}>
@@ -73,7 +72,7 @@ export default function CardView({ date, events, onSelectSession }: CardViewProp
7372
</div>
7473
</div>
7574

76-
<div className="flex flex-col gap-2">
75+
<div className="flex flex-col gap-2 pb-6">
7776
{daySessions.length === 0
7877
? (
7978
<div className="text-sm text-center mt-5" style={{ color: 'var(--text-muted)' }}>

0 commit comments

Comments
 (0)