Compare commits
No commits in common. "1daec977bab35fa4cef22d417909429312119c41" and "80418172db5f8ee48c3dde96ea71aa4c36a9ad37" have entirely different histories.
1daec977ba
...
80418172db
@ -187,13 +187,12 @@ export default function CalendarPage() {
|
||||
return () => cancelAnimationFrame(rafId);
|
||||
}, [panelOpen]);
|
||||
|
||||
// Scroll wheel navigation in month view (disabled when detail panel is open)
|
||||
// Scroll wheel navigation in month view
|
||||
useEffect(() => {
|
||||
const el = calendarContainerRef.current;
|
||||
if (!el) return;
|
||||
let debounceTimer: ReturnType<typeof setTimeout> | null = null;
|
||||
const handleWheel = (e: WheelEvent) => {
|
||||
if (panelOpen) return;
|
||||
// Skip wheel navigation on touch devices (let them scroll normally)
|
||||
if ('ontouchstart' in window) return;
|
||||
const api = calendarRef.current?.getApi();
|
||||
@ -208,7 +207,7 @@ export default function CalendarPage() {
|
||||
};
|
||||
el.addEventListener('wheel', handleWheel, { passive: false });
|
||||
return () => el.removeEventListener('wheel', handleWheel);
|
||||
}, [panelOpen]);
|
||||
}, []);
|
||||
|
||||
// AW-2: Track visible date range for scoped event fetching
|
||||
// W-02 fix: Initialize from current month to avoid unscoped first fetch
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { useState, useEffect, useCallback, useMemo, useRef } from 'react';
|
||||
import { useState, useEffect, useCallback, useMemo } from 'react';
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
||||
import { toast } from 'sonner';
|
||||
import { format, parseISO } from 'date-fns';
|
||||
@ -284,17 +284,6 @@ export default function EventDetailPanel({
|
||||
const [scopeStep, setScopeStep] = useState<'edit' | 'delete' | null>(null);
|
||||
const [editScope, setEditScope] = useState<'this' | 'this_and_future' | null>(null);
|
||||
const [locationSearch, setLocationSearch] = useState('');
|
||||
const descRef = useRef<HTMLTextAreaElement>(null);
|
||||
|
||||
// Auto-resize description textarea to fit content
|
||||
useEffect(() => {
|
||||
const el = descRef.current;
|
||||
if (!el) return;
|
||||
requestAnimationFrame(() => {
|
||||
el.style.height = 'auto';
|
||||
el.style.height = `${el.scrollHeight}px`;
|
||||
});
|
||||
}, [editState.description, isEditing]);
|
||||
|
||||
// Poll lock status in view mode for shared events (Stream A: real-time lock awareness)
|
||||
// lockInfo is only set from the 423 error path; poll data (viewLockQuery.data) is used directly.
|
||||
@ -378,11 +367,11 @@ export default function EventDetailPanel({
|
||||
end_datetime: endDt,
|
||||
all_day: data.all_day,
|
||||
location_id: data.location_id ? parseInt(data.location_id) : null,
|
||||
is_starred: data.is_starred,
|
||||
recurrence_rule: rule,
|
||||
};
|
||||
// Invited editors are restricted to the backend allowlist — omit fields they cannot modify
|
||||
// Invited editors cannot change calendars — omit calendar_id from payload
|
||||
if (!canModifyAsInvitee) {
|
||||
payload.is_starred = data.is_starred;
|
||||
payload.recurrence_rule = rule;
|
||||
payload.calendar_id = data.calendar_id ? parseInt(data.calendar_id) : null;
|
||||
}
|
||||
|
||||
@ -550,8 +539,7 @@ export default function EventDetailPanel({
|
||||
: event?.title || '';
|
||||
|
||||
return (
|
||||
// onWheel stopPropagation: defence-in-depth with CalendarPage's panelOpen guard to prevent month-scroll bleed
|
||||
<div className="flex flex-col h-full bg-card border-l border-border overflow-hidden" onWheel={(e) => e.stopPropagation()}>
|
||||
<div className="flex flex-col h-full bg-card border-l border-border overflow-hidden">
|
||||
{/* Header */}
|
||||
<div className="px-5 py-4 border-b border-border shrink-0">
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
@ -733,7 +721,7 @@ export default function EventDetailPanel({
|
||||
</div>
|
||||
) : (isEditing || isCreating) ? (
|
||||
/* Edit / Create mode */
|
||||
<div className="flex flex-col gap-3 h-full">
|
||||
<div className="space-y-4">
|
||||
{/* Title (only shown in body for create mode; edit mode has it in header) */}
|
||||
{isCreating && (
|
||||
<div className="space-y-1">
|
||||
@ -749,49 +737,58 @@ export default function EventDetailPanel({
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* All day + Date row */}
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Checkbox
|
||||
id="panel-allday"
|
||||
checked={editState.all_day}
|
||||
onChange={(e) => {
|
||||
const checked = (e.target as HTMLInputElement).checked;
|
||||
updateField('all_day', checked);
|
||||
updateField('start_datetime', formatForInput(editState.start_datetime, checked, '09:00'));
|
||||
updateField('end_datetime', formatForInput(editState.end_datetime, checked, '10:00'));
|
||||
}}
|
||||
<div className="space-y-1">
|
||||
<Label htmlFor="panel-desc">Description</Label>
|
||||
<Textarea
|
||||
id="panel-desc"
|
||||
value={editState.description}
|
||||
onChange={(e) => updateField('description', e.target.value)}
|
||||
placeholder="Add a description..."
|
||||
rows={3}
|
||||
className="text-sm resize-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<Checkbox
|
||||
id="panel-allday"
|
||||
checked={editState.all_day}
|
||||
onChange={(e) => {
|
||||
const checked = (e.target as HTMLInputElement).checked;
|
||||
updateField('all_day', checked);
|
||||
updateField('start_datetime', formatForInput(editState.start_datetime, checked, '09:00'));
|
||||
updateField('end_datetime', formatForInput(editState.end_datetime, checked, '10:00'));
|
||||
}}
|
||||
/>
|
||||
<Label htmlFor="panel-allday">All day event</Label>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="space-y-1">
|
||||
<Label htmlFor="panel-start" required>Start</Label>
|
||||
<DatePicker
|
||||
variant="input"
|
||||
id="panel-start"
|
||||
mode={editState.all_day ? 'date' : 'datetime'}
|
||||
value={editState.start_datetime}
|
||||
onChange={(v) => updateField('start_datetime', v)}
|
||||
className="text-xs"
|
||||
required
|
||||
/>
|
||||
<Label htmlFor="panel-allday" className="text-xs">All day</Label>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="space-y-1">
|
||||
<Label htmlFor="panel-start" required>Start</Label>
|
||||
<DatePicker
|
||||
variant="input"
|
||||
id="panel-start"
|
||||
mode={editState.all_day ? 'date' : 'datetime'}
|
||||
value={editState.start_datetime}
|
||||
onChange={(v) => updateField('start_datetime', v)}
|
||||
className="text-xs"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<Label htmlFor="panel-end">End</Label>
|
||||
<DatePicker
|
||||
variant="input"
|
||||
id="panel-end"
|
||||
mode={editState.all_day ? 'date' : 'datetime'}
|
||||
value={editState.end_datetime}
|
||||
onChange={(v) => updateField('end_datetime', v)}
|
||||
className="text-xs"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<Label htmlFor="panel-end">End</Label>
|
||||
<DatePicker
|
||||
variant="input"
|
||||
id="panel-end"
|
||||
mode={editState.all_day ? 'date' : 'datetime'}
|
||||
value={editState.end_datetime}
|
||||
onChange={(v) => updateField('end_datetime', v)}
|
||||
className="text-xs"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Calendar + Location row */}
|
||||
<div className={`grid ${canModifyAsInvitee ? 'grid-cols-1' : 'grid-cols-2'} gap-3`}>
|
||||
{!canModifyAsInvitee && (
|
||||
<div className="space-y-1">
|
||||
@ -840,32 +837,22 @@ export default function EventDetailPanel({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Recurrence + Star row */}
|
||||
{/* Recurrence — hidden for invited editors (they can only edit "this" occurrence) */}
|
||||
{!canModifyAsInvitee && (
|
||||
<div className="grid grid-cols-2 gap-3 items-end">
|
||||
<div className="space-y-1">
|
||||
<Label htmlFor="panel-recurrence">Recurrence</Label>
|
||||
<Select
|
||||
id="panel-recurrence"
|
||||
value={editState.recurrence_type}
|
||||
onChange={(e) => updateField('recurrence_type', e.target.value)}
|
||||
className="text-xs"
|
||||
>
|
||||
<option value="">None</option>
|
||||
<option value="every_n_days">Every X days</option>
|
||||
<option value="weekly">Weekly</option>
|
||||
<option value="monthly_nth_weekday">Monthly (nth weekday)</option>
|
||||
<option value="monthly_date">Monthly (date)</option>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 pb-2">
|
||||
<Checkbox
|
||||
id="panel-starred"
|
||||
checked={editState.is_starred}
|
||||
onChange={(e) => updateField('is_starred', (e.target as HTMLInputElement).checked)}
|
||||
/>
|
||||
<Label htmlFor="panel-starred" className="text-xs">Starred</Label>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<Label htmlFor="panel-recurrence">Recurrence</Label>
|
||||
<Select
|
||||
id="panel-recurrence"
|
||||
value={editState.recurrence_type}
|
||||
onChange={(e) => updateField('recurrence_type', e.target.value)}
|
||||
className="text-xs"
|
||||
>
|
||||
<option value="">None</option>
|
||||
<option value="every_n_days">Every X days</option>
|
||||
<option value="weekly">Weekly</option>
|
||||
<option value="monthly_nth_weekday">Monthly (nth weekday)</option>
|
||||
<option value="monthly_date">Monthly (date)</option>
|
||||
</Select>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@ -937,17 +924,23 @@ export default function EventDetailPanel({
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Description — fills remaining space */}
|
||||
<div className="flex flex-col flex-1 min-h-0 space-y-1">
|
||||
<Label htmlFor="panel-desc">Description</Label>
|
||||
<Textarea
|
||||
ref={descRef}
|
||||
id="panel-desc"
|
||||
value={editState.description}
|
||||
onChange={(e) => updateField('description', e.target.value)}
|
||||
placeholder="Add a description..."
|
||||
className="text-sm flex-1 min-h-[80px]"
|
||||
<div className="flex items-center gap-2">
|
||||
<Checkbox
|
||||
id="panel-starred"
|
||||
checked={editState.is_starred}
|
||||
onChange={(e) => updateField('is_starred', (e.target as HTMLInputElement).checked)}
|
||||
/>
|
||||
<Label htmlFor="panel-starred">Star this event</Label>
|
||||
</div>
|
||||
|
||||
{/* Save / Cancel buttons at bottom of form */}
|
||||
<div className="flex items-center justify-end gap-2 pt-2 border-t border-border">
|
||||
<Button variant="outline" size="sm" onClick={handleEditCancel}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button size="sm" onClick={handleEditSave} disabled={saveMutation.isPending}>
|
||||
{saveMutation.isPending ? 'Saving...' : isCreating ? 'Create' : 'Update'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
@ -1063,17 +1056,15 @@ export default function EventDetailPanel({
|
||||
</div>
|
||||
|
||||
{/* Description — full width */}
|
||||
<div className="space-y-1">
|
||||
<div className="flex items-center gap-1.5 text-[11px] text-muted-foreground uppercase tracking-wider">
|
||||
<AlignLeft className="h-3 w-3" />
|
||||
Description
|
||||
</div>
|
||||
{event?.description ? (
|
||||
{event?.description && (
|
||||
<div className="space-y-1">
|
||||
<div className="flex items-center gap-1.5 text-[11px] text-muted-foreground uppercase tracking-wider">
|
||||
<AlignLeft className="h-3 w-3" />
|
||||
Description
|
||||
</div>
|
||||
<p className="text-sm whitespace-pre-wrap">{event.description}</p>
|
||||
) : (
|
||||
<p className="text-sm text-muted-foreground">—</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Invitee section — view mode */}
|
||||
{event && !event.is_virtual && (
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { useState, useEffect, useRef, FormEvent } from 'react';
|
||||
import { useState, FormEvent } from 'react';
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
||||
import { toast } from 'sonner';
|
||||
import api, { getErrorMessage } from '@/lib/api';
|
||||
@ -141,17 +141,6 @@ export default function EventForm({ event, templateData, templateName, initialSt
|
||||
const existingLocation = locations.find((l) => l.id === source?.location_id);
|
||||
const [locationSearch, setLocationSearch] = useState(existingLocation?.name || '');
|
||||
|
||||
// Auto-resize description textarea
|
||||
const descRef = useRef<HTMLTextAreaElement>(null);
|
||||
useEffect(() => {
|
||||
const el = descRef.current;
|
||||
if (!el) return;
|
||||
requestAnimationFrame(() => {
|
||||
el.style.height = 'auto';
|
||||
el.style.height = `${el.scrollHeight}px`;
|
||||
});
|
||||
}, [formData.description]);
|
||||
|
||||
const selectableCalendars = calendars.filter((c) => !c.is_system);
|
||||
|
||||
const buildRecurrenceRule = (): RecurrenceRule | null => {
|
||||
@ -266,12 +255,10 @@ export default function EventForm({ event, templateData, templateName, initialSt
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="description">Description</Label>
|
||||
<Textarea
|
||||
ref={descRef}
|
||||
id="description"
|
||||
value={formData.description}
|
||||
onChange={(e) => setFormData({ ...formData, description: e.target.value })}
|
||||
placeholder="Add a description..."
|
||||
className="min-h-[80px] text-sm"
|
||||
className="min-h-[80px] flex-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user