Agenda refactor
This commit is contained in:
parent
3f20f11736
commit
0f6c48b0a8
@ -783,6 +783,8 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
|
|||||||
|
|
||||||
const [visibleCalendarIds, setVisibleCalendarIds] = useState<string[]>([]);
|
const [visibleCalendarIds, setVisibleCalendarIds] = useState<string[]>([]);
|
||||||
const [selectedDate, setSelectedDate] = useState<Date | null>(null);
|
const [selectedDate, setSelectedDate] = useState<Date | null>(null);
|
||||||
|
const clickTimerRef = useRef<NodeJS.Timeout | null>(null);
|
||||||
|
const lastClickDateRef = useRef<Date | null>(null);
|
||||||
|
|
||||||
// Update useEffect to initialize visible calendars and fetch events
|
// Update useEffect to initialize visible calendars and fetch events
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@ -793,6 +795,15 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
|
|||||||
}
|
}
|
||||||
}, [calendars]);
|
}, [calendars]);
|
||||||
|
|
||||||
|
// Cleanup timer on unmount
|
||||||
|
useEffect(() => {
|
||||||
|
return () => {
|
||||||
|
if (clickTimerRef.current) {
|
||||||
|
clearTimeout(clickTimerRef.current);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
const updateStatistics = () => {
|
const updateStatistics = () => {
|
||||||
const now = new Date();
|
const now = new Date();
|
||||||
const stats = {
|
const stats = {
|
||||||
@ -941,14 +952,70 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
|
|||||||
};
|
};
|
||||||
|
|
||||||
const handleDateClick = (clickInfo: any) => {
|
const handleDateClick = (clickInfo: any) => {
|
||||||
// Set the selected date to show events for that day
|
|
||||||
const clickedDate = new Date(clickInfo.date);
|
const clickedDate = new Date(clickInfo.date);
|
||||||
// Reset time to start of day for comparison
|
|
||||||
clickedDate.setHours(0, 0, 0, 0);
|
clickedDate.setHours(0, 0, 0, 0);
|
||||||
setSelectedDate(clickedDate);
|
|
||||||
|
// Check if this is a double click (same date clicked within 300ms)
|
||||||
|
const now = new Date();
|
||||||
|
const isDoubleClick = lastClickDateRef.current &&
|
||||||
|
lastClickDateRef.current.getTime() === clickedDate.getTime() &&
|
||||||
|
now.getTime() - (lastClickDateRef.current as any).clickTime < 300;
|
||||||
|
|
||||||
|
// Clear any pending single click timer
|
||||||
|
if (clickTimerRef.current) {
|
||||||
|
clearTimeout(clickTimerRef.current);
|
||||||
|
clickTimerRef.current = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isDoubleClick) {
|
||||||
|
// Double click: Open event form
|
||||||
|
const startDate = new Date(clickInfo.date);
|
||||||
|
startDate.setHours(new Date().getHours(), 0, 0, 0);
|
||||||
|
const endDate = new Date(startDate);
|
||||||
|
endDate.setHours(startDate.getHours() + 1);
|
||||||
|
|
||||||
|
// If no calendar is selected, use the first available calendar
|
||||||
|
if (!selectedCalendarId && calendars.length > 0) {
|
||||||
|
const firstCalendar = calendars[0];
|
||||||
|
setSelectedCalendarId(firstCalendar.id);
|
||||||
|
|
||||||
|
setEventForm({
|
||||||
|
title: "",
|
||||||
|
description: null,
|
||||||
|
start: startDate.toISOString(),
|
||||||
|
end: endDate.toISOString(),
|
||||||
|
allDay: false,
|
||||||
|
location: null,
|
||||||
|
calendarId: firstCalendar.id
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
setEventForm({
|
||||||
|
title: "",
|
||||||
|
description: null,
|
||||||
|
start: startDate.toISOString(),
|
||||||
|
end: endDate.toISOString(),
|
||||||
|
allDay: false,
|
||||||
|
location: null,
|
||||||
|
calendarId: selectedCalendarId
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
setIsEventModalOpen(true);
|
||||||
|
lastClickDateRef.current = null;
|
||||||
|
} else {
|
||||||
|
// Single click: Show events column (with a small delay to allow double click detection)
|
||||||
|
lastClickDateRef.current = clickedDate;
|
||||||
|
(lastClickDateRef.current as any).clickTime = now.getTime();
|
||||||
|
|
||||||
|
clickTimerRef.current = setTimeout(() => {
|
||||||
|
setSelectedDate(clickedDate);
|
||||||
|
clickTimerRef.current = null;
|
||||||
|
}, 300);
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleDateSelect = (selectInfo: any) => {
|
const handleDateSelect = (selectInfo: any) => {
|
||||||
|
// Double click or drag selection: Open event form
|
||||||
const startDate = new Date(selectInfo.start);
|
const startDate = new Date(selectInfo.start);
|
||||||
const endDate = new Date(selectInfo.end);
|
const endDate = new Date(selectInfo.end);
|
||||||
|
|
||||||
@ -958,7 +1025,7 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
|
|||||||
availableCalendars: calendars.length
|
availableCalendars: calendars.length
|
||||||
});
|
});
|
||||||
|
|
||||||
// Set selected date to show events for the selected day
|
// Also set selected date to show events for the selected day
|
||||||
const selectDate = new Date(startDate);
|
const selectDate = new Date(startDate);
|
||||||
selectDate.setHours(0, 0, 0, 0);
|
selectDate.setHours(0, 0, 0, 0);
|
||||||
setSelectedDate(selectDate);
|
setSelectedDate(selectDate);
|
||||||
@ -1320,115 +1387,7 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
|
|||||||
</Card>
|
</Card>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Middle column for day events */}
|
{/* Middle column for calendar view */}
|
||||||
{selectedDate && (
|
|
||||||
<div className="w-80 flex-shrink-0">
|
|
||||||
<Card className="p-4 h-full flex flex-col">
|
|
||||||
<div className="flex items-center justify-between mb-4">
|
|
||||||
<h3 className="text-lg font-semibold text-gray-900">
|
|
||||||
{selectedDate.toLocaleDateString('fr-FR', {
|
|
||||||
weekday: 'long',
|
|
||||||
day: 'numeric',
|
|
||||||
month: 'long',
|
|
||||||
year: 'numeric'
|
|
||||||
})}
|
|
||||||
</h3>
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="icon"
|
|
||||||
onClick={() => setSelectedDate(null)}
|
|
||||||
className="h-8 w-8"
|
|
||||||
>
|
|
||||||
<X className="h-4 w-4" />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
<ScrollArea className="flex-1">
|
|
||||||
{dayEvents.length === 0 ? (
|
|
||||||
<div className="text-center text-gray-500 py-8">
|
|
||||||
<CalendarIcon className="h-12 w-12 mx-auto mb-2 opacity-50" />
|
|
||||||
<p>Aucun événement ce jour</p>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="space-y-3">
|
|
||||||
{dayEvents.map((event) => {
|
|
||||||
const calendar = event.calendar as CalendarWithMission;
|
|
||||||
const startDate = new Date(event.start);
|
|
||||||
const endDate = new Date(event.end);
|
|
||||||
const isAllDay = event.isAllDay;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Card
|
|
||||||
key={event.id}
|
|
||||||
className="p-3 cursor-pointer hover:shadow-md transition-shadow"
|
|
||||||
onClick={() => handleEventClick({ event: {
|
|
||||||
title: event.title,
|
|
||||||
start: startDate,
|
|
||||||
end: endDate,
|
|
||||||
isAllDay: isAllDay,
|
|
||||||
extendedProps: {
|
|
||||||
description: event.description,
|
|
||||||
location: event.location,
|
|
||||||
calendarId: event.calendarId,
|
|
||||||
originalEvent: event,
|
|
||||||
color: calendar.color
|
|
||||||
}
|
|
||||||
}})}
|
|
||||||
>
|
|
||||||
<div className="flex items-start gap-3">
|
|
||||||
<div
|
|
||||||
className="w-1 h-full rounded-full flex-shrink-0 mt-1"
|
|
||||||
style={{ backgroundColor: calendar.color }}
|
|
||||||
/>
|
|
||||||
<div className="flex-1 min-w-0">
|
|
||||||
<div className="flex items-center gap-2 mb-1">
|
|
||||||
<h4 className="font-medium text-gray-900 truncate">
|
|
||||||
{event.title}
|
|
||||||
</h4>
|
|
||||||
<div
|
|
||||||
className="w-2 h-2 rounded-full flex-shrink-0"
|
|
||||||
style={{ backgroundColor: calendar.color }}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-2 text-sm text-gray-600">
|
|
||||||
<Clock className="h-3 w-3" />
|
|
||||||
<span>
|
|
||||||
{isAllDay
|
|
||||||
? "Toute la journée"
|
|
||||||
: `${startDate.toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' })} - ${endDate.toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' })}`
|
|
||||||
}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
{event.location && (
|
|
||||||
<div className="flex items-center gap-2 text-sm text-gray-600 mt-1">
|
|
||||||
<MapPin className="h-3 w-3" />
|
|
||||||
<span className="truncate">{event.location}</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<div className="mt-1">
|
|
||||||
<Badge
|
|
||||||
variant="outline"
|
|
||||||
className="text-xs"
|
|
||||||
style={{
|
|
||||||
borderColor: calendar.color,
|
|
||||||
color: calendar.color
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{getCalendarDisplayName(calendar)}
|
|
||||||
</Badge>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</ScrollArea>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Right column for calendar view */}
|
|
||||||
<div className="flex-1 flex flex-col">
|
<div className="flex-1 flex flex-col">
|
||||||
<Card className="p-4 flex-1 flex flex-col">
|
<Card className="p-4 flex-1 flex flex-col">
|
||||||
<div className="flex items-center justify-between mb-4">
|
<div className="flex items-center justify-between mb-4">
|
||||||
@ -1693,12 +1652,10 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
|
|||||||
);
|
);
|
||||||
}}
|
}}
|
||||||
locale={frLocale}
|
locale={frLocale}
|
||||||
selectable={true}
|
selectable={false}
|
||||||
selectMirror={true}
|
|
||||||
dayMaxEventRows={false}
|
dayMaxEventRows={false}
|
||||||
dayMaxEvents={false}
|
dayMaxEvents={false}
|
||||||
weekends={true}
|
weekends={true}
|
||||||
select={handleDateSelect}
|
|
||||||
eventClick={handleEventClick}
|
eventClick={handleEventClick}
|
||||||
height="auto"
|
height="auto"
|
||||||
aspectRatio={1.8}
|
aspectRatio={1.8}
|
||||||
@ -1727,6 +1684,114 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
|
|||||||
</Card>
|
</Card>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Right column for day events */}
|
||||||
|
{selectedDate && (
|
||||||
|
<div className="w-80 flex-shrink-0">
|
||||||
|
<Card className="p-4 h-full flex flex-col">
|
||||||
|
<div className="flex items-center justify-between mb-4">
|
||||||
|
<h3 className="text-lg font-semibold text-gray-900">
|
||||||
|
{selectedDate.toLocaleDateString('fr-FR', {
|
||||||
|
weekday: 'long',
|
||||||
|
day: 'numeric',
|
||||||
|
month: 'long',
|
||||||
|
year: 'numeric'
|
||||||
|
})}
|
||||||
|
</h3>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
onClick={() => setSelectedDate(null)}
|
||||||
|
className="h-8 w-8"
|
||||||
|
>
|
||||||
|
<X className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<ScrollArea className="flex-1">
|
||||||
|
{dayEvents.length === 0 ? (
|
||||||
|
<div className="text-center text-gray-500 py-8">
|
||||||
|
<CalendarIcon className="h-12 w-12 mx-auto mb-2 opacity-50" />
|
||||||
|
<p>Aucun événement ce jour</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="space-y-3">
|
||||||
|
{dayEvents.map((event) => {
|
||||||
|
const calendar = event.calendar as CalendarWithMission;
|
||||||
|
const startDate = new Date(event.start);
|
||||||
|
const endDate = new Date(event.end);
|
||||||
|
const isAllDay = event.isAllDay;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card
|
||||||
|
key={event.id}
|
||||||
|
className="p-3 cursor-pointer hover:shadow-md transition-shadow"
|
||||||
|
onClick={() => handleEventClick({ event: {
|
||||||
|
title: event.title,
|
||||||
|
start: startDate,
|
||||||
|
end: endDate,
|
||||||
|
isAllDay: isAllDay,
|
||||||
|
extendedProps: {
|
||||||
|
description: event.description,
|
||||||
|
location: event.location,
|
||||||
|
calendarId: event.calendarId,
|
||||||
|
originalEvent: event,
|
||||||
|
color: calendar.color
|
||||||
|
}
|
||||||
|
}})}
|
||||||
|
>
|
||||||
|
<div className="flex items-start gap-3">
|
||||||
|
<div
|
||||||
|
className="w-1 h-full rounded-full flex-shrink-0 mt-1"
|
||||||
|
style={{ backgroundColor: calendar.color }}
|
||||||
|
/>
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<div className="flex items-center gap-2 mb-1">
|
||||||
|
<h4 className="font-medium text-gray-900 truncate">
|
||||||
|
{event.title}
|
||||||
|
</h4>
|
||||||
|
<div
|
||||||
|
className="w-2 h-2 rounded-full flex-shrink-0"
|
||||||
|
style={{ backgroundColor: calendar.color }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2 text-sm text-gray-600">
|
||||||
|
<Clock className="h-3 w-3" />
|
||||||
|
<span>
|
||||||
|
{isAllDay
|
||||||
|
? "Toute la journée"
|
||||||
|
: `${startDate.toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' })} - ${endDate.toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' })}`
|
||||||
|
}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
{event.location && (
|
||||||
|
<div className="flex items-center gap-2 text-sm text-gray-600 mt-1">
|
||||||
|
<MapPin className="h-3 w-3" />
|
||||||
|
<span className="truncate">{event.location}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div className="mt-1">
|
||||||
|
<Badge
|
||||||
|
variant="outline"
|
||||||
|
className="text-xs"
|
||||||
|
style={{
|
||||||
|
borderColor: calendar.color,
|
||||||
|
color: calendar.color
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{getCalendarDisplayName(calendar)}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</ScrollArea>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
{/* Calendar dialog */}
|
{/* Calendar dialog */}
|
||||||
<CalendarDialog
|
<CalendarDialog
|
||||||
open={isCalendarModalOpen}
|
open={isCalendarModalOpen}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user