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 [visibleCalendarIds, setVisibleCalendarIds] = useState<string[]>([]);
|
||||||
|
const [selectedDate, setSelectedDate] = useState<Date | null>(null);
|
||||||
|
|
||||||
// Update useEffect to initialize visible calendars and fetch events
|
// Update useEffect to initialize visible calendars and fetch events
|
||||||
useEffect(() => {
|
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 handleDateSelect = (selectInfo: any) => {
|
||||||
const startDate = new Date(selectInfo.start);
|
const startDate = new Date(selectInfo.start);
|
||||||
const endDate = new Date(selectInfo.end);
|
const endDate = new Date(selectInfo.end);
|
||||||
@ -949,6 +958,11 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
|
|||||||
availableCalendars: calendars.length
|
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 no calendar is selected, use the first available calendar
|
||||||
if (!selectedCalendarId && calendars.length > 0) {
|
if (!selectedCalendarId && calendars.length > 0) {
|
||||||
const firstCalendar = calendars[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 (
|
return (
|
||||||
<div className="flex gap-4 h-full w-full">
|
<div className="flex gap-4 h-full w-full">
|
||||||
{/* Left column for calendars */}
|
{/* Left column for calendars */}
|
||||||
@ -1273,6 +1320,114 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
|
|||||||
</Card>
|
</Card>
|
||||||
</div>
|
</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 */}
|
{/* 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">
|
||||||
@ -1442,6 +1597,7 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
|
|||||||
center: "title",
|
center: "title",
|
||||||
right: "",
|
right: "",
|
||||||
}}
|
}}
|
||||||
|
dateClick={handleDateClick}
|
||||||
events={(() => {
|
events={(() => {
|
||||||
const visibleCalendars = calendars.filter(cal => visibleCalendarIds.includes(cal.id));
|
const visibleCalendars = calendars.filter(cal => visibleCalendarIds.includes(cal.id));
|
||||||
const allEvents = visibleCalendars.flatMap(cal => {
|
const allEvents = visibleCalendars.flatMap(cal => {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user