alma/NeahFront7
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

calendar 10

Browse Source
This commit is contained in:
Alma 2025-04-13 13:59:46 +02:00
parent b2240cb880
commit f998e0948c
1 changed files with 88 additions and 152 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

240
components/calendar/calendar-client.tsx
View File

@ -592,161 +592,97 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
return (
<div className="space-y-4">
<StatisticsPanel statistics={statistics} />
<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);
}}
>
<Plus className="mr-2 h-4 w-4" />
Nouveau calendrier
</Button>
<Button
onClick={() => {
setSelectedEvent(null);
setIsEventModalOpen(true);
}}
>
<Plus className="mr-2 h-4 w-4" />
Nouvel événement
</Button>
</div>
<div className="grid grid-cols-12 gap-4">
<div className="col-span-8">
<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);
}}
>
<Plus className="mr-2 h-4 w-4" />
Nouveau calendrier
</Button>
<Button
onClick={() => {
setSelectedEvent(null);
setIsEventModalOpen(true);
}}
>
<Plus className="mr-2 h-4 w-4" />
Nouvel événement
</Button>
</div>
<Tabs value={view} className="w-auto">
<TabsList>
<TabsTrigger
value="dayGridMonth"
onClick={() => handleViewChange("dayGridMonth")}
>
Mois
</TabsTrigger>
<TabsTrigger
value="timeGridWeek"
onClick={() => handleViewChange("timeGridWeek")}
>
Semaine
</TabsTrigger>
<TabsTrigger
value="timeGridDay"
onClick={() => handleViewChange("timeGridDay")}
>
Jour
</TabsTrigger>
</TabsList>
</Tabs>
</div>
<Tabs value={view} className="w-auto">
<TabsList>
<TabsTrigger
value="dayGridMonth"
onClick={() => handleViewChange("dayGridMonth")}
>
Mois
</TabsTrigger>
<TabsTrigger
value="timeGridWeek"
onClick={() => handleViewChange("timeGridWeek")}
>
Semaine
</TabsTrigger>
<TabsTrigger
value="timeGridDay"
onClick={() => handleViewChange("timeGridDay")}
>
Jour
</TabsTrigger>
</TabsList>
</Tabs>
</div>
{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>
) : (
<FullCalendar
ref={calendarRef}
plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
initialView={view}
headerToolbar={{
left: "prev,next today",
center: "title",
right: "",
}}
events={calendars.flatMap(cal =>
cal.events.map(event => ({
id: event.id,
title: event.title,
start: event.start,
end: event.end,
allDay: event.isAllDay,
description: event.description,
location: event.location,
calendarId: event.calendarId,
originalEvent: event,
backgroundColor: cal.color,
textColor: '#ffffff',
borderColor: cal.color,
}))
)}
locale={frLocale}
selectable={true}
selectMirror={true}
dayMaxEvents={true}
weekends={true}
select={handleDateSelect}
eventClick={(clickInfo) => {
handleEventClick(clickInfo);
setSelectedEventPreview(clickInfo.event.extendedProps.originalEvent);
}}
height="auto"
aspectRatio={1.8}
/>
{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>
) : (
<FullCalendar
ref={calendarRef}
plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
initialView={view}
headerToolbar={{
left: "prev,next today",
center: "title",
right: "",
}}
events={calendars.flatMap(cal =>
cal.events.map(event => ({
id: event.id,
title: event.title,
start: event.start,
end: event.end,
allDay: event.isAllDay,
description: event.description,
location: event.location,
calendarId: event.calendarId,
originalEvent: event,
backgroundColor: cal.color,
textColor: '#ffffff',
borderColor: cal.color,
}))
)}
</Card>
</div>
<div className="col-span-4 space-y-4">
{selectedEventPreview ? (
<EventPreview
event={selectedEventPreview}
calendar={calendars.find(c => c.id === selectedEventPreview.calendarId)!}
/>
) : (
<Card className="p-4">
<div className="space-y-4">
<h3 className="font-medium">Mini-calendrier</h3>
<FullCalendar
plugins={[dayGridPlugin]}
initialView="dayGridMonth"
headerToolbar={false}
height="auto"
aspectRatio={1}
events={calendars.flatMap(cal =>
cal.events.map(event => ({
id: event.id,
title: event.title,
start: event.start,
end: event.end,
backgroundColor: cal.color,
}))
)}
locale={frLocale}
/>
</div>
</Card>
)}
<Card className="p-4">
<h3 className="font-medium mb-4">Calendriers</h3>
<div className="space-y-2">
{calendars.map((calendar) => (
<Button
key={calendar.id}
variant={calendar.id === selectedCalendarId ? "secondary" : "ghost"}
className="w-full justify-start"
onClick={() => setSelectedCalendarId(calendar.id)}
>
<div
className="w-3 h-3 rounded-full mr-2"
style={{ backgroundColor: calendar.color }}
/>
{calendar.name}
<Badge variant="outline" className="ml-auto">
{calendar.events.length}
</Badge>
</Button>
))}
</div>
</Card>
</div>
</div>
locale={frLocale}
selectable={true}
selectMirror={true}
dayMaxEvents={true}
weekends={true}
select={handleDateSelect}
eventClick={handleEventClick}
height="auto"
aspectRatio={1.8}
/>
)}
</Card>
{/* Calendar dialog */}
<CalendarDialog