Agenda refactor
This commit is contained in:
parent
6e3e6966d4
commit
3f20f11736
@ -782,6 +782,7 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
|
||||
});
|
||||
|
||||
const [visibleCalendarIds, setVisibleCalendarIds] = useState<string[]>([]);
|
||||
const [selectedDate, setSelectedDate] = useState<Date | null>(null);
|
||||
|
||||
// Update useEffect to initialize visible calendars and fetch events
|
||||
useEffect(() => {
|
||||
@ -939,6 +940,14 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
|
||||
}
|
||||
};
|
||||
|
||||
const handleDateClick = (clickInfo: any) => {
|
||||
// Set the selected date to show events for that day
|
||||
const clickedDate = new Date(clickInfo.date);
|
||||
// Reset time to start of day for comparison
|
||||
clickedDate.setHours(0, 0, 0, 0);
|
||||
setSelectedDate(clickedDate);
|
||||
};
|
||||
|
||||
const handleDateSelect = (selectInfo: any) => {
|
||||
const startDate = new Date(selectInfo.start);
|
||||
const endDate = new Date(selectInfo.end);
|
||||
@ -949,6 +958,11 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
|
||||
availableCalendars: calendars.length
|
||||
});
|
||||
|
||||
// Set selected date to show events for the selected day
|
||||
const selectDate = new Date(startDate);
|
||||
selectDate.setHours(0, 0, 0, 0);
|
||||
setSelectedDate(selectDate);
|
||||
|
||||
// If no calendar is selected, use the first available calendar
|
||||
if (!selectedCalendarId && calendars.length > 0) {
|
||||
const firstCalendar = calendars[0];
|
||||
@ -1261,6 +1275,39 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
|
||||
});
|
||||
};
|
||||
|
||||
// Get events for the selected date
|
||||
const getDayEvents = () => {
|
||||
if (!selectedDate) return [];
|
||||
|
||||
const dayStart = new Date(selectedDate);
|
||||
dayStart.setHours(0, 0, 0, 0);
|
||||
const dayEnd = new Date(selectedDate);
|
||||
dayEnd.setHours(23, 59, 59, 999);
|
||||
|
||||
const visibleCalendars = calendars.filter(cal => visibleCalendarIds.includes(cal.id));
|
||||
const dayEvents = visibleCalendars.flatMap(cal => {
|
||||
return (cal.events || []).filter(event => {
|
||||
const eventStart = new Date(event.start);
|
||||
const eventEnd = new Date(event.end);
|
||||
|
||||
// Check if event overlaps with the selected day
|
||||
return (eventStart <= dayEnd && eventEnd >= dayStart);
|
||||
}).map(event => ({
|
||||
...event,
|
||||
calendar: cal
|
||||
}));
|
||||
});
|
||||
|
||||
// Sort by start time
|
||||
return dayEvents.sort((a, b) => {
|
||||
const aStart = new Date(a.start).getTime();
|
||||
const bStart = new Date(b.start).getTime();
|
||||
return aStart - bStart;
|
||||
});
|
||||
};
|
||||
|
||||
const dayEvents = getDayEvents();
|
||||
|
||||
return (
|
||||
<div className="flex gap-4 h-full w-full">
|
||||
{/* Left column for calendars */}
|
||||
@ -1273,6 +1320,114 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Middle 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>
|
||||
)}
|
||||
|
||||
{/* Right column for calendar view */}
|
||||
<div className="flex-1 flex flex-col">
|
||||
<Card className="p-4 flex-1 flex flex-col">
|
||||
@ -1442,6 +1597,7 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
|
||||
center: "title",
|
||||
right: "",
|
||||
}}
|
||||
dateClick={handleDateClick}
|
||||
events={(() => {
|
||||
const visibleCalendars = calendars.filter(cal => visibleCalendarIds.includes(cal.id));
|
||||
const allEvents = visibleCalendars.flatMap(cal => {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user