Files
peakskills/components/admin/teams/team-form-dialog.tsx
2025-08-23 08:16:09 +02:00

97 lines
2.6 KiB
TypeScript

"use client";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog";
interface TeamFormData {
name: string;
direction: string;
}
interface TeamFormDialogProps {
isOpen: boolean;
onClose: () => void;
onSubmit: () => void;
title: string;
formData: TeamFormData;
onFormDataChange: (data: TeamFormData) => void;
directions: string[];
isSubmitting?: boolean;
}
export function TeamFormDialog({
isOpen,
onClose,
onSubmit,
title,
formData,
onFormDataChange,
directions,
isSubmitting = false,
}: TeamFormDialogProps) {
const handleInputChange = (field: keyof TeamFormData, value: string) => {
onFormDataChange({ ...formData, [field]: value });
};
return (
<Dialog open={isOpen} onOpenChange={onClose}>
<DialogContent className="sm:max-w-[500px]">
<DialogHeader>
<DialogTitle>{title}</DialogTitle>
</DialogHeader>
<div className="space-y-4">
<div>
<Label htmlFor="team-name">Nom de l'équipe *</Label>
<Input
id="team-name"
value={formData.name}
onChange={(e) => handleInputChange("name", e.target.value)}
placeholder="Ex: Équipe Frontend, Équipe Backend"
/>
</div>
<div>
<Label htmlFor="team-direction">Direction *</Label>
<Select
value={formData.direction}
onValueChange={(value) => handleInputChange("direction", value)}
>
<SelectTrigger>
<SelectValue placeholder="Sélectionner une direction" />
</SelectTrigger>
<SelectContent>
{directions.map((direction) => (
<SelectItem key={direction} value={direction}>
{direction}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
<div className="flex justify-end gap-2 pt-4">
<Button variant="outline" onClick={onClose} disabled={isSubmitting}>
Annuler
</Button>
<Button onClick={onSubmit} disabled={isSubmitting}>
{isSubmitting ? "En cours..." : title.includes("Créer") ? "Créer" : "Mettre à jour"}
</Button>
</div>
</div>
</DialogContent>
</Dialog>
);
}