115 lines
3.4 KiB
TypeScript
115 lines
3.4 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogFooter,
|
|
} from "@/components/ui/dialog";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Textarea } from "@/components/ui/textarea";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Calendar } from "@prisma/client";
|
|
|
|
interface CalendarDialogProps {
|
|
open: boolean;
|
|
onClose: () => void;
|
|
onSave: (calendarData: Partial<Calendar>) => Promise<void>;
|
|
}
|
|
|
|
export function CalendarDialog({ open, onClose, onSave }: CalendarDialogProps) {
|
|
const [name, setName] = useState("");
|
|
const [color, setColor] = useState("#0082c9");
|
|
const [description, setDescription] = useState("");
|
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
|
|
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
|
|
e.preventDefault();
|
|
setIsSubmitting(true);
|
|
|
|
try {
|
|
await onSave({ name, color, description });
|
|
resetForm();
|
|
} catch (error) {
|
|
console.error("Erreur lors de la création du calendrier:", error);
|
|
} finally {
|
|
setIsSubmitting(false);
|
|
}
|
|
};
|
|
|
|
const resetForm = () => {
|
|
setName("");
|
|
setColor("#0082c9");
|
|
setDescription("");
|
|
onClose();
|
|
};
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={(open) => !open && onClose()}>
|
|
<DialogContent className='sm:max-w-md'>
|
|
<DialogHeader>
|
|
<DialogTitle>Créer un nouveau calendrier</DialogTitle>
|
|
</DialogHeader>
|
|
<form onSubmit={handleSubmit}>
|
|
<div className='space-y-4 py-2'>
|
|
<div className='space-y-2'>
|
|
<Label htmlFor='calendar-name'>Nom</Label>
|
|
<Input
|
|
id='calendar-name'
|
|
value={name}
|
|
onChange={(e) => setName(e.target.value)}
|
|
placeholder='Nom du calendrier'
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div className='space-y-2'>
|
|
<Label htmlFor='calendar-color'>Couleur</Label>
|
|
<div className='flex items-center gap-4'>
|
|
<Input
|
|
id='calendar-color'
|
|
type='color'
|
|
value={color}
|
|
onChange={(e) => setColor(e.target.value)}
|
|
className='w-12 h-12 p-1 cursor-pointer'
|
|
/>
|
|
<span className='text-sm font-medium'>{color}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className='space-y-2'>
|
|
<Label htmlFor='calendar-description'>
|
|
Description (optionnelle)
|
|
</Label>
|
|
<Textarea
|
|
id='calendar-description'
|
|
value={description}
|
|
onChange={(e) => setDescription(e.target.value)}
|
|
placeholder='Description du calendrier'
|
|
rows={3}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<DialogFooter className='mt-4'>
|
|
<Button
|
|
type='button'
|
|
variant='outline'
|
|
onClick={onClose}
|
|
disabled={isSubmitting}
|
|
>
|
|
Annuler
|
|
</Button>
|
|
<Button type='submit' disabled={!name || isSubmitting}>
|
|
{isSubmitting ? "Création..." : "Créer"}
|
|
</Button>
|
|
</DialogFooter>
|
|
</form>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|