calendar 35
This commit is contained in:
Alma
parent
9736b05ad4
commit
f53b6556a1
@ -771,7 +771,7 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
|
||||
end: new Date(eventForm.end).toISOString(),
|
||||
allDay: eventForm.allDay,
|
||||
location: eventForm.location,
|
||||
calendarId: selectedCalendarId,
|
||||
calendarId: selectedCalendarId,
|
||||
userId
|
||||
};
|
||||
|
||||
@ -787,7 +787,7 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
|
||||
|
||||
const responseData = await response.json();
|
||||
console.log("Response from server:", responseData);
|
||||
|
||||
|
||||
if (!response.ok) {
|
||||
console.error("Error response:", responseData);
|
||||
throw new Error(responseData.error || "Failed to save event");
|
||||
@ -897,9 +897,9 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
|
||||
// Update CalendarSelector to handle visibility
|
||||
const CalendarSelector = () => (
|
||||
<div className="flex flex-wrap items-center gap-2 mb-4">
|
||||
{calendars.map((calendar) => (
|
||||
{calendars.map((calendar) => (
|
||||
<div key={calendar.id} className="relative group">
|
||||
<Button
|
||||
<Button
|
||||
variant={visibleCalendarIds.includes(calendar.id) ? "secondary" : "ghost"}
|
||||
className="flex items-center gap-2 pr-8"
|
||||
onClick={() => {
|
||||
@ -920,9 +920,9 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
|
||||
<Check className="h-4 w-4" />
|
||||
) : null}
|
||||
</div>
|
||||
</Button>
|
||||
</Button>
|
||||
{calendar.name !== "Calendrier principal" && (
|
||||
<Button
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="absolute right-0 top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100 transition-opacity"
|
||||
@ -933,7 +933,7 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
|
||||
}}
|
||||
>
|
||||
<Settings className="h-4 w-4" />
|
||||
</Button>
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
@ -988,110 +988,74 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col md:flex-row h-full gap-4 p-4">
|
||||
{/* Sidebar */}
|
||||
<div className="w-full md:w-64 space-y-4">
|
||||
<Card className="p-4">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex items-center gap-4">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => {
|
||||
setSelectedCalendar(null);
|
||||
setIsCalendarModalOpen(true);
|
||||
}}
|
||||
className="bg-white hover:bg-gray-50 text-gray-900 border-gray-200"
|
||||
>
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
<span className="font-medium">Nouveau calendrier</span>
|
||||
</Button>
|
||||
<div className="space-y-4">
|
||||
<Card className="p-4">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex items-center gap-4">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => {
|
||||
setSelectedCalendar(null);
|
||||
setIsCalendarModalOpen(true);
|
||||
}}
|
||||
className="bg-white hover:bg-gray-50 text-gray-900 border-gray-200"
|
||||
>
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
<span className="font-medium">Nouveau calendrier</span>
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => {
|
||||
setSelectedEvent(null);
|
||||
setEventForm({
|
||||
title: "",
|
||||
description: null,
|
||||
start: "",
|
||||
end: "",
|
||||
allDay: false,
|
||||
location: null,
|
||||
calendarId: selectedCalendarId
|
||||
});
|
||||
setIsEventModalOpen(true);
|
||||
}}
|
||||
className="bg-primary hover:bg-primary/90 text-white"
|
||||
>
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
<span className="font-medium">Nouvel événement</span>
|
||||
setEventForm({
|
||||
title: "",
|
||||
description: null,
|
||||
start: "",
|
||||
end: "",
|
||||
allDay: false,
|
||||
location: null,
|
||||
calendarId: selectedCalendarId
|
||||
});
|
||||
setIsEventModalOpen(true);
|
||||
}}
|
||||
className="bg-primary hover:bg-primary/90 text-white"
|
||||
>
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
<span className="font-medium">Nouvel événement</span>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Tabs value={view} className="w-auto">
|
||||
<TabsList>
|
||||
<Tabs value={view} className="w-auto">
|
||||
<TabsList>
|
||||
<TabsTrigger
|
||||
value="dayGridMonth"
|
||||
value="dayGridMonth"
|
||||
onClick={() => handleViewChange("dayGridMonth")}
|
||||
>
|
||||
Mois
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="timeGridWeek"
|
||||
value="timeGridWeek"
|
||||
onClick={() => handleViewChange("timeGridWeek")}
|
||||
>
|
||||
Semaine
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="timeGridDay"
|
||||
value="timeGridDay"
|
||||
onClick={() => handleViewChange("timeGridDay")}
|
||||
>
|
||||
Jour
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
</Tabs>
|
||||
</Tabs>
|
||||
</div>
|
||||
|
||||
<CalendarSelector />
|
||||
</Card>
|
||||
<CalendarSelector />
|
||||
|
||||
<StatisticsPanel statistics={statistics} />
|
||||
{loading ? (
|
||||
<div className="h-96 flex items-center justify-center">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-primary" />
|
||||
<span className="ml-2">Chargement des événements...</span>
|
||||
</div>
|
||||
|
||||
{/* Calendar */}
|
||||
<div className="flex-1 bg-white rounded-lg shadow">
|
||||
<style jsx global>{`
|
||||
.fc-daygrid-day-events {
|
||||
max-height: 80px;
|
||||
overflow-y: auto;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
.fc-daygrid-day-events::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.fc-daygrid-day-events::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.fc-daygrid-day-events::-webkit-scrollbar-thumb {
|
||||
background: #888;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.fc-daygrid-day-events::-webkit-scrollbar-thumb:hover {
|
||||
background: #555;
|
||||
}
|
||||
|
||||
.fc .fc-daygrid-event-harness {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.fc-daygrid-day-frame {
|
||||
min-height: 100px !important;
|
||||
height: 100px !important;
|
||||
}
|
||||
`}</style>
|
||||
) : (
|
||||
<FullCalendar
|
||||
ref={calendarRef}
|
||||
plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
|
||||
@ -1101,75 +1065,76 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
|
||||
center: "title",
|
||||
right: "",
|
||||
}}
|
||||
events={calendars
|
||||
.filter(cal => visibleCalendarIds.includes(cal.id))
|
||||
.flatMap(cal =>
|
||||
(cal.events || []).map(event => ({
|
||||
events={calendars
|
||||
.filter(cal => visibleCalendarIds.includes(cal.id))
|
||||
.flatMap(cal =>
|
||||
(cal.events || []).map(event => ({
|
||||
id: event.id,
|
||||
title: event.title,
|
||||
start: new Date(event.start),
|
||||
end: new Date(event.end),
|
||||
start: new Date(event.start),
|
||||
end: new Date(event.end),
|
||||
allDay: event.isAllDay,
|
||||
description: event.description,
|
||||
location: event.location,
|
||||
calendarId: event.calendarId,
|
||||
backgroundColor: cal.color,
|
||||
borderColor: cal.color,
|
||||
textColor: '#ffffff',
|
||||
extendedProps: {
|
||||
location: event.location,
|
||||
description: event.description,
|
||||
calendarId: event.calendarId,
|
||||
originalEvent: event
|
||||
}
|
||||
}))
|
||||
)}
|
||||
eventContent={(arg) => (
|
||||
<div className="p-1 overflow-hidden">
|
||||
<div className="font-semibold truncate">{arg.event.title}</div>
|
||||
{!arg.event.allDay && (
|
||||
<div className="text-xs opacity-90">
|
||||
{new Date(arg.event.start).toLocaleTimeString('fr-FR', {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
})}
|
||||
{arg.event.end && (
|
||||
<> - {new Date(arg.event.end).toLocaleTimeString('fr-FR', {
|
||||
backgroundColor: cal.color,
|
||||
borderColor: cal.color,
|
||||
textColor: '#ffffff',
|
||||
extendedProps: {
|
||||
location: event.location,
|
||||
description: event.description,
|
||||
calendarId: event.calendarId,
|
||||
originalEvent: event
|
||||
}
|
||||
}))
|
||||
)}
|
||||
eventContent={(arg) => (
|
||||
<div className="p-1 overflow-hidden">
|
||||
<div className="font-semibold truncate">{arg.event.title}</div>
|
||||
{!arg.event.allDay && (
|
||||
<div className="text-xs opacity-90">
|
||||
{new Date(arg.event.start).toLocaleTimeString('fr-FR', {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
})}</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{arg.event.extendedProps.location && (
|
||||
<div className="text-xs opacity-75 truncate">
|
||||
<MapPin className="inline-block w-3 h-3 mr-1" />
|
||||
{arg.event.extendedProps.location}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
eventClassNames="rounded-md shadow-sm hover:shadow-md transition-shadow cursor-pointer"
|
||||
locale={frLocale}
|
||||
})}
|
||||
{arg.event.end && (
|
||||
<> - {new Date(arg.event.end).toLocaleTimeString('fr-FR', {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
})}</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{arg.event.extendedProps.location && (
|
||||
<div className="text-xs opacity-75 truncate">
|
||||
<MapPin className="inline-block w-3 h-3 mr-1" />
|
||||
{arg.event.extendedProps.location}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
eventClassNames="rounded-md shadow-sm hover:shadow-md transition-shadow cursor-pointer"
|
||||
locale={frLocale}
|
||||
selectable={true}
|
||||
selectMirror={true}
|
||||
dayMaxEvents={false}
|
||||
dayMaxEvents={true}
|
||||
weekends={true}
|
||||
select={handleDateSelect}
|
||||
eventClick={handleEventClick}
|
||||
height="auto"
|
||||
height="auto"
|
||||
aspectRatio={1.8}
|
||||
slotMinTime="06:00:00"
|
||||
slotMaxTime="22:00:00"
|
||||
allDaySlot={true}
|
||||
allDayText="Toute la journée"
|
||||
slotLabelFormat={{
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
hour12: false
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
slotMinTime="06:00:00"
|
||||
slotMaxTime="22:00:00"
|
||||
allDaySlot={true}
|
||||
allDayText="Toute la journée"
|
||||
slotLabelFormat={{
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
hour12: false
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{/* Calendar dialog */}
|
||||
<CalendarDialog
|
||||
|
||||
Loading…
Reference in New Issue
Block a user