calendar 36
This commit is contained in:
Alma
parent
f53b6556a1
commit
51ab2c2150
@ -1003,9 +1003,9 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
<span className="font-medium">Nouveau calendrier</span>
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => {
|
||||
setSelectedEvent(null);
|
||||
<Button
|
||||
onClick={() => {
|
||||
setSelectedEvent(null);
|
||||
setEventForm({
|
||||
title: "",
|
||||
description: null,
|
||||
@ -1021,50 +1021,91 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
|
||||
>
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
<span className="font-medium">Nouvel événement</span>
|
||||
</Button>
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Tabs value={view} className="w-auto">
|
||||
<TabsList>
|
||||
<TabsTrigger
|
||||
<TabsTrigger
|
||||
value="dayGridMonth"
|
||||
onClick={() => handleViewChange("dayGridMonth")}
|
||||
>
|
||||
Mois
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
onClick={() => handleViewChange("dayGridMonth")}
|
||||
>
|
||||
Mois
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="timeGridWeek"
|
||||
onClick={() => handleViewChange("timeGridWeek")}
|
||||
>
|
||||
Semaine
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
onClick={() => handleViewChange("timeGridWeek")}
|
||||
>
|
||||
Semaine
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="timeGridDay"
|
||||
onClick={() => handleViewChange("timeGridDay")}
|
||||
>
|
||||
Jour
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
onClick={() => handleViewChange("timeGridDay")}
|
||||
>
|
||||
Jour
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
</Tabs>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<CalendarSelector />
|
||||
|
||||
<style jsx global>{`
|
||||
/* Fixed height and scrolling for day cells only */
|
||||
.fc .fc-daygrid-day-frame {
|
||||
min-height: 100px !important;
|
||||
max-height: 100px !important;
|
||||
overflow-y: auto !important;
|
||||
}
|
||||
|
||||
/* Keep events container relative positioning */
|
||||
.fc .fc-daygrid-day-events {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
/* Custom scrollbar styles */
|
||||
.fc .fc-daygrid-day-frame::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.fc .fc-daygrid-day-frame::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.fc .fc-daygrid-day-frame::-webkit-scrollbar-thumb {
|
||||
background: #888;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.fc .fc-daygrid-day-frame::-webkit-scrollbar-thumb:hover {
|
||||
background: #555;
|
||||
}
|
||||
|
||||
/* Hide scrollbar when not needed */
|
||||
.fc .fc-daygrid-day-frame::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.fc .fc-daygrid-day-frame:hover::-webkit-scrollbar {
|
||||
display: block;
|
||||
}
|
||||
`}</style>
|
||||
|
||||
{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: "",
|
||||
}}
|
||||
</div>
|
||||
) : (
|
||||
<FullCalendar
|
||||
ref={calendarRef}
|
||||
plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
|
||||
initialView={view}
|
||||
headerToolbar={{
|
||||
left: "prev,next today",
|
||||
center: "title",
|
||||
right: "",
|
||||
}}
|
||||
events={calendars
|
||||
.filter(cal => visibleCalendarIds.includes(cal.id))
|
||||
.flatMap(cal =>
|
||||
@ -1117,7 +1158,8 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
|
||||
locale={frLocale}
|
||||
selectable={true}
|
||||
selectMirror={true}
|
||||
dayMaxEvents={true}
|
||||
dayMaxEventRows={false}
|
||||
dayMaxEvents={false}
|
||||
weekends={true}
|
||||
select={handleDateSelect}
|
||||
eventClick={handleEventClick}
|
||||
@ -1132,219 +1174,219 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
|
||||
minute: '2-digit',
|
||||
hour12: false
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</Card>
|
||||
/>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{/* Calendar dialog */}
|
||||
<CalendarDialog
|
||||
open={isCalendarModalOpen}
|
||||
onClose={() => setIsCalendarModalOpen(false)}
|
||||
onSave={handleCalendarSave}
|
||||
onDelete={handleCalendarDelete}
|
||||
initialData={selectedCalendar || undefined}
|
||||
/>
|
||||
<CalendarDialog
|
||||
open={isCalendarModalOpen}
|
||||
onClose={() => setIsCalendarModalOpen(false)}
|
||||
onSave={handleCalendarSave}
|
||||
onDelete={handleCalendarDelete}
|
||||
initialData={selectedCalendar || undefined}
|
||||
/>
|
||||
|
||||
{/* Event dialog */}
|
||||
<Dialog open={isEventModalOpen} onOpenChange={(open) => {
|
||||
if (!open) {
|
||||
setIsEventModalOpen(false);
|
||||
setEventForm({
|
||||
title: "",
|
||||
description: null,
|
||||
start: "",
|
||||
end: "",
|
||||
allDay: false,
|
||||
location: null,
|
||||
calendarId: selectedCalendarId
|
||||
});
|
||||
setSelectedEvent(null);
|
||||
setError(null);
|
||||
}
|
||||
}}>
|
||||
<DialogContent className="sm:max-w-lg">
|
||||
<DialogHeader>
|
||||
<DialogTitle>
|
||||
{selectedEvent ? "Modifier l'événement" : "Nouvel événement"}
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
{/* Event dialog */}
|
||||
<Dialog open={isEventModalOpen} onOpenChange={(open) => {
|
||||
if (!open) {
|
||||
setIsEventModalOpen(false);
|
||||
setEventForm({
|
||||
title: "",
|
||||
description: null,
|
||||
start: "",
|
||||
end: "",
|
||||
allDay: false,
|
||||
location: null,
|
||||
calendarId: selectedCalendarId
|
||||
});
|
||||
setSelectedEvent(null);
|
||||
setError(null);
|
||||
}
|
||||
}}>
|
||||
<DialogContent className="sm:max-w-lg">
|
||||
<DialogHeader>
|
||||
<DialogTitle>
|
||||
{selectedEvent ? "Modifier l'événement" : "Nouvel événement"}
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
{error && (
|
||||
<div className="bg-red-50 border border-red-200 text-red-600 px-4 py-2 rounded-md text-sm">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
{error && (
|
||||
<div className="bg-red-50 border border-red-200 text-red-600 px-4 py-2 rounded-md text-sm">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-4 py-4">
|
||||
<div className="space-y-2">
|
||||
<Label>Titre</Label>
|
||||
<Input
|
||||
value={eventForm.title}
|
||||
onChange={(e) =>
|
||||
setEventForm({ ...eventForm, title: e.target.value })
|
||||
}
|
||||
placeholder="Titre de l'événement"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-4 py-4">
|
||||
<div className="space-y-2">
|
||||
<Label>Titre</Label>
|
||||
<Input
|
||||
value={eventForm.title}
|
||||
onChange={(e) =>
|
||||
setEventForm({ ...eventForm, title: e.target.value })
|
||||
}
|
||||
placeholder="Titre de l'événement"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>Calendrier</Label>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{calendars.map((cal) => (
|
||||
<button
|
||||
key={cal.id}
|
||||
type="button"
|
||||
onClick={() => setSelectedCalendarId(cal.id)}
|
||||
className={`flex items-center gap-2 px-3 py-2 rounded-md border transition-all ${
|
||||
cal.id === selectedCalendarId
|
||||
? 'border-primary bg-primary/5'
|
||||
: 'border-gray-200 hover:border-gray-300'
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
className="w-3 h-3 rounded-full"
|
||||
style={{ backgroundColor: cal.color }}
|
||||
/>
|
||||
<span className="text-sm font-medium">{cal.name}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label>Début</Label>
|
||||
<div className="flex gap-2">
|
||||
<div className="flex-1">
|
||||
<DatePicker
|
||||
selected={getDateFromString(eventForm.start)}
|
||||
onChange={handleStartDateChange}
|
||||
dateFormat="dd/MM/yyyy"
|
||||
locale="fr"
|
||||
className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary"
|
||||
placeholderText="Date"
|
||||
customInput={<Input />}
|
||||
/>
|
||||
</div>
|
||||
<Input
|
||||
type="time"
|
||||
value={eventForm.start ? new Date(eventForm.start).toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' }) : ''}
|
||||
onChange={(e) => {
|
||||
const [hours, minutes] = e.target.value.split(':');
|
||||
const date = getDateFromString(eventForm.start);
|
||||
date.setHours(parseInt(hours), parseInt(minutes));
|
||||
handleStartDateChange(date);
|
||||
}}
|
||||
className="w-32"
|
||||
<div className="space-y-2">
|
||||
<Label>Calendrier</Label>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{calendars.map((cal) => (
|
||||
<button
|
||||
key={cal.id}
|
||||
type="button"
|
||||
onClick={() => setSelectedCalendarId(cal.id)}
|
||||
className={`flex items-center gap-2 px-3 py-2 rounded-md border transition-all ${
|
||||
cal.id === selectedCalendarId
|
||||
? 'border-primary bg-primary/5'
|
||||
: 'border-gray-200 hover:border-gray-300'
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
className="w-3 h-3 rounded-full"
|
||||
style={{ backgroundColor: cal.color }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>Fin</Label>
|
||||
<div className="flex gap-2">
|
||||
<div className="flex-1">
|
||||
<DatePicker
|
||||
selected={getDateFromString(eventForm.end)}
|
||||
onChange={handleEndDateChange}
|
||||
dateFormat="dd/MM/yyyy"
|
||||
locale="fr"
|
||||
className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary"
|
||||
placeholderText="Date"
|
||||
customInput={<Input />}
|
||||
minDate={getDateFromString(eventForm.start)}
|
||||
/>
|
||||
</div>
|
||||
<Input
|
||||
type="time"
|
||||
value={eventForm.end ? new Date(eventForm.end).toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' }) : ''}
|
||||
onChange={(e) => {
|
||||
const [hours, minutes] = e.target.value.split(':');
|
||||
const date = getDateFromString(eventForm.end);
|
||||
date.setHours(parseInt(hours), parseInt(minutes));
|
||||
handleEndDateChange(date);
|
||||
}}
|
||||
className="w-32"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id="allDay"
|
||||
checked={eventForm.allDay}
|
||||
onCheckedChange={(checked) =>
|
||||
setEventForm({ ...eventForm, allDay: checked as boolean })
|
||||
}
|
||||
/>
|
||||
<Label htmlFor="allDay">Toute la journée</Label>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>Lieu</Label>
|
||||
<Input
|
||||
value={eventForm.location || ""}
|
||||
onChange={(e) =>
|
||||
setEventForm({ ...eventForm, location: e.target.value })
|
||||
}
|
||||
placeholder="Ajouter un lieu"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>Description</Label>
|
||||
<Textarea
|
||||
value={eventForm.description || ""}
|
||||
onChange={(e) =>
|
||||
setEventForm({ ...eventForm, description: e.target.value })
|
||||
}
|
||||
placeholder="Ajouter une description"
|
||||
/>
|
||||
<span className="text-sm font-medium">{cal.name}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
{selectedEvent && (
|
||||
<Button
|
||||
variant="destructive"
|
||||
onClick={handleEventDelete}
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? (
|
||||
<>
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
Suppression...
|
||||
</>
|
||||
) : (
|
||||
"Supprimer"
|
||||
)}
|
||||
</Button>
|
||||
)}
|
||||
<div className="flex space-x-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setIsEventModalOpen(false)}
|
||||
disabled={loading}
|
||||
>
|
||||
Annuler
|
||||
</Button>
|
||||
<Button onClick={handleEventSubmit} disabled={loading}>
|
||||
{loading ? (
|
||||
<>
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
Enregistrement...
|
||||
</>
|
||||
) : selectedEvent ? (
|
||||
"Mettre à jour"
|
||||
) : (
|
||||
"Créer"
|
||||
)}
|
||||
</Button>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label>Début</Label>
|
||||
<div className="flex gap-2">
|
||||
<div className="flex-1">
|
||||
<DatePicker
|
||||
selected={getDateFromString(eventForm.start)}
|
||||
onChange={handleStartDateChange}
|
||||
dateFormat="dd/MM/yyyy"
|
||||
locale="fr"
|
||||
className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary"
|
||||
placeholderText="Date"
|
||||
customInput={<Input />}
|
||||
/>
|
||||
</div>
|
||||
<Input
|
||||
type="time"
|
||||
value={eventForm.start ? new Date(eventForm.start).toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' }) : ''}
|
||||
onChange={(e) => {
|
||||
const [hours, minutes] = e.target.value.split(':');
|
||||
const date = getDateFromString(eventForm.start);
|
||||
date.setHours(parseInt(hours), parseInt(minutes));
|
||||
handleStartDateChange(date);
|
||||
}}
|
||||
className="w-32"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>Fin</Label>
|
||||
<div className="flex gap-2">
|
||||
<div className="flex-1">
|
||||
<DatePicker
|
||||
selected={getDateFromString(eventForm.end)}
|
||||
onChange={handleEndDateChange}
|
||||
dateFormat="dd/MM/yyyy"
|
||||
locale="fr"
|
||||
className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary"
|
||||
placeholderText="Date"
|
||||
customInput={<Input />}
|
||||
minDate={getDateFromString(eventForm.start)}
|
||||
/>
|
||||
</div>
|
||||
<Input
|
||||
type="time"
|
||||
value={eventForm.end ? new Date(eventForm.end).toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' }) : ''}
|
||||
onChange={(e) => {
|
||||
const [hours, minutes] = e.target.value.split(':');
|
||||
const date = getDateFromString(eventForm.end);
|
||||
date.setHours(parseInt(hours), parseInt(minutes));
|
||||
handleEndDateChange(date);
|
||||
}}
|
||||
className="w-32"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id="allDay"
|
||||
checked={eventForm.allDay}
|
||||
onCheckedChange={(checked) =>
|
||||
setEventForm({ ...eventForm, allDay: checked as boolean })
|
||||
}
|
||||
/>
|
||||
<Label htmlFor="allDay">Toute la journée</Label>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>Lieu</Label>
|
||||
<Input
|
||||
value={eventForm.location || ""}
|
||||
onChange={(e) =>
|
||||
setEventForm({ ...eventForm, location: e.target.value })
|
||||
}
|
||||
placeholder="Ajouter un lieu"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>Description</Label>
|
||||
<Textarea
|
||||
value={eventForm.description || ""}
|
||||
onChange={(e) =>
|
||||
setEventForm({ ...eventForm, description: e.target.value })
|
||||
}
|
||||
placeholder="Ajouter une description"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
{selectedEvent && (
|
||||
<Button
|
||||
variant="destructive"
|
||||
onClick={handleEventDelete}
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? (
|
||||
<>
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
Suppression...
|
||||
</>
|
||||
) : (
|
||||
"Supprimer"
|
||||
)}
|
||||
</Button>
|
||||
)}
|
||||
<div className="flex space-x-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setIsEventModalOpen(false)}
|
||||
disabled={loading}
|
||||
>
|
||||
Annuler
|
||||
</Button>
|
||||
<Button onClick={handleEventSubmit} disabled={loading}>
|
||||
{loading ? (
|
||||
<>
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
Enregistrement...
|
||||
</>
|
||||
) : selectedEvent ? (
|
||||
"Mettre à jour"
|
||||
) : (
|
||||
"Créer"
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user