calendar 17

This commit is contained in:
Alma 2025-04-13 14:43:20 +02:00
parent f45b86c452
commit eb4d14379d
2 changed files with 57 additions and 43 deletions

View File

@ -40,7 +40,8 @@ import { Separator } from "@/components/ui/separator";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
import DatePicker, { registerLocale } from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import { fr } from 'date-fns/locale';
import { fr } from "date-fns/locale";
import { Checkbox } from "@/components/ui/checkbox";
// Register French locale
registerLocale('fr', fr);
@ -863,37 +864,23 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
/>
{/* Event dialog */}
<Dialog open={isEventModalOpen} onOpenChange={setIsEventModalOpen}>
<DialogContent className="sm:max-w-[500px]">
<Dialog open={isEventModalOpen} onOpenChange={(open) => !open && setIsEventModalOpen(false)}>
<DialogContent className="sm:max-w-lg">
<DialogHeader>
<DialogTitle className="text-xl font-semibold">
<DialogTitle>
{selectedEvent ? "Modifier l'événement" : "Nouvel événement"}
</DialogTitle>
</DialogHeader>
<div className="space-y-6 py-4">
<div className="space-y-4 py-4">
<div className="space-y-2">
<Label htmlFor="event-title">Titre</Label>
<Label>Titre</Label>
<Input
id="event-title"
value={eventForm.title}
onChange={(e) =>
setEventForm({ ...eventForm, title: e.target.value })
}
placeholder="Titre de l'événement"
className="w-full"
/>
</div>
<div className="space-y-2">
<Label htmlFor="event-description">Description</Label>
<Textarea
id="event-description"
value={eventForm.description || ""}
onChange={(e) =>
setEventForm({ ...eventForm, description: e.target.value || null })
}
placeholder="Description de l'événement"
className="w-full"
/>
</div>
@ -907,10 +894,12 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
showTimeSelect
timeFormat="HH:mm"
timeIntervals={15}
dateFormat="Pp"
timeCaption="Heure"
dateFormat="dd/MM/yyyy HH:mm"
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="Sélectionner la date et l'heure"
customInput={<Input />}
/>
</div>
</div>
@ -924,42 +913,70 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
showTimeSelect
timeFormat="HH:mm"
timeIntervals={15}
dateFormat="Pp"
timeCaption="Heure"
dateFormat="dd/MM/yyyy HH:mm"
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="Sélectionner la date et l'heure"
minDate={getDateFromString(eventForm.start)}
customInput={<Input />}
/>
</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 htmlFor="event-location">Lieu</Label>
<Label>Lieu</Label>
<Input
id="event-location"
value={eventForm.location || ""}
onChange={(e) =>
setEventForm({ ...eventForm, location: e.target.value || null })
setEventForm({ ...eventForm, location: e.target.value })
}
placeholder="Lieu de l'événement"
className="w-full"
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 className="flex justify-between">
<DialogFooter>
{selectedEvent && (
<Button
variant="destructive"
onClick={handleEventDelete}
disabled={loading}
>
<X className="w-4 h-4 mr-2" />
Supprimer
{loading ? (
<>
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
Suppression...
</>
) : (
"Supprimer"
)}
</Button>
)}
<div className="space-x-2">
<div className="flex space-x-2">
<Button
variant="outline"
onClick={() => setIsEventModalOpen(false)}
@ -967,21 +984,16 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
>
Annuler
</Button>
<Button
onClick={handleEventSubmit}
disabled={loading || !eventForm.title}
className="bg-primary hover:bg-primary/90"
>
<Button onClick={handleEventSubmit} disabled={loading}>
{loading ? (
<>
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
{selectedEvent ? "Modification..." : "Création..."}
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
Enregistrement...
</>
) : selectedEvent ? (
"Mettre à jour"
) : (
<>
<Check className="w-4 h-4 mr-2" />
{selectedEvent ? "Modifier" : "Créer"}
</>
"Créer"
)}
</Button>
</div>

View File

@ -20,6 +20,8 @@ model Calendar {
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
events Event[]
@@index([userId])
}
model Event {