calendar 10
This commit is contained in:
Alma
parent
b2240cb880
commit
f998e0948c
@ -592,161 +592,97 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="space-y-4">
|
<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">
|
<Tabs value={view} className="w-auto">
|
||||||
<div className="col-span-8">
|
<TabsList>
|
||||||
<Card className="p-4">
|
<TabsTrigger
|
||||||
<div className="flex items-center justify-between mb-4">
|
value="dayGridMonth"
|
||||||
<div className="flex items-center gap-4">
|
onClick={() => handleViewChange("dayGridMonth")}
|
||||||
<Button
|
>
|
||||||
variant="outline"
|
Mois
|
||||||
onClick={() => {
|
</TabsTrigger>
|
||||||
setSelectedCalendar(null);
|
<TabsTrigger
|
||||||
setIsCalendarModalOpen(true);
|
value="timeGridWeek"
|
||||||
}}
|
onClick={() => handleViewChange("timeGridWeek")}
|
||||||
>
|
>
|
||||||
<Plus className="mr-2 h-4 w-4" />
|
Semaine
|
||||||
Nouveau calendrier
|
</TabsTrigger>
|
||||||
</Button>
|
<TabsTrigger
|
||||||
<Button
|
value="timeGridDay"
|
||||||
onClick={() => {
|
onClick={() => handleViewChange("timeGridDay")}
|
||||||
setSelectedEvent(null);
|
>
|
||||||
setIsEventModalOpen(true);
|
Jour
|
||||||
}}
|
</TabsTrigger>
|
||||||
>
|
</TabsList>
|
||||||
<Plus className="mr-2 h-4 w-4" />
|
</Tabs>
|
||||||
Nouvel événement
|
</div>
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Tabs value={view} className="w-auto">
|
{loading ? (
|
||||||
<TabsList>
|
<div className="h-96 flex items-center justify-center">
|
||||||
<TabsTrigger
|
<Loader2 className="h-8 w-8 animate-spin text-primary" />
|
||||||
value="dayGridMonth"
|
<span className="ml-2">Chargement des événements...</span>
|
||||||
onClick={() => handleViewChange("dayGridMonth")}
|
</div>
|
||||||
>
|
) : (
|
||||||
Mois
|
<FullCalendar
|
||||||
</TabsTrigger>
|
ref={calendarRef}
|
||||||
<TabsTrigger
|
plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
|
||||||
value="timeGridWeek"
|
initialView={view}
|
||||||
onClick={() => handleViewChange("timeGridWeek")}
|
headerToolbar={{
|
||||||
>
|
left: "prev,next today",
|
||||||
Semaine
|
center: "title",
|
||||||
</TabsTrigger>
|
right: "",
|
||||||
<TabsTrigger
|
}}
|
||||||
value="timeGridDay"
|
events={calendars.flatMap(cal =>
|
||||||
onClick={() => handleViewChange("timeGridDay")}
|
cal.events.map(event => ({
|
||||||
>
|
id: event.id,
|
||||||
Jour
|
title: event.title,
|
||||||
</TabsTrigger>
|
start: event.start,
|
||||||
</TabsList>
|
end: event.end,
|
||||||
</Tabs>
|
allDay: event.isAllDay,
|
||||||
</div>
|
description: event.description,
|
||||||
|
location: event.location,
|
||||||
{loading ? (
|
calendarId: event.calendarId,
|
||||||
<div className="h-96 flex items-center justify-center">
|
originalEvent: event,
|
||||||
<Loader2 className="h-8 w-8 animate-spin text-primary" />
|
backgroundColor: cal.color,
|
||||||
<span className="ml-2">Chargement des événements...</span>
|
textColor: '#ffffff',
|
||||||
</div>
|
borderColor: cal.color,
|
||||||
) : (
|
}))
|
||||||
<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}
|
|
||||||
/>
|
|
||||||
)}
|
)}
|
||||||
</Card>
|
locale={frLocale}
|
||||||
</div>
|
selectable={true}
|
||||||
|
selectMirror={true}
|
||||||
<div className="col-span-4 space-y-4">
|
dayMaxEvents={true}
|
||||||
{selectedEventPreview ? (
|
weekends={true}
|
||||||
<EventPreview
|
select={handleDateSelect}
|
||||||
event={selectedEventPreview}
|
eventClick={handleEventClick}
|
||||||
calendar={calendars.find(c => c.id === selectedEventPreview.calendarId)!}
|
height="auto"
|
||||||
/>
|
aspectRatio={1.8}
|
||||||
) : (
|
/>
|
||||||
<Card className="p-4">
|
)}
|
||||||
<div className="space-y-4">
|
</Card>
|
||||||
<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>
|
|
||||||
|
|
||||||
{/* Calendar dialog */}
|
{/* Calendar dialog */}
|
||||||
<CalendarDialog
|
<CalendarDialog
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user