122 lines
3.6 KiB
TypeScript
122 lines
3.6 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/components/ui/card";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/components/ui/select";
|
|
import { UserProfile, Team } from "@/lib/types";
|
|
|
|
interface ProfileFormProps {
|
|
teams: Team[];
|
|
initialProfile?: UserProfile;
|
|
onSubmit: (profile: UserProfile) => void;
|
|
}
|
|
|
|
export function ProfileForm({
|
|
teams,
|
|
initialProfile,
|
|
onSubmit,
|
|
}: ProfileFormProps) {
|
|
const [firstName, setFirstName] = useState(initialProfile?.firstName || "");
|
|
const [lastName, setLastName] = useState(initialProfile?.lastName || "");
|
|
const [teamId, setTeamId] = useState(initialProfile?.teamId || "");
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
if (firstName && lastName && teamId) {
|
|
onSubmit({ firstName, lastName, teamId });
|
|
}
|
|
};
|
|
|
|
const isValid =
|
|
firstName.length > 0 && lastName.length > 0 && teamId.length > 0;
|
|
|
|
// Group teams by direction
|
|
const teamsByDirection = teams.reduce((acc, team) => {
|
|
if (!acc[team.direction]) {
|
|
acc[team.direction] = [];
|
|
}
|
|
acc[team.direction].push(team);
|
|
return acc;
|
|
}, {} as Record<string, Team[]>);
|
|
|
|
return (
|
|
<Card className="w-full max-w-md mx-auto">
|
|
<CardHeader>
|
|
<CardTitle>Informations personnelles</CardTitle>
|
|
<CardDescription>
|
|
Renseignez vos informations pour commencer votre auto-évaluation
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="firstName">Prénom</Label>
|
|
<Input
|
|
id="firstName"
|
|
value={firstName}
|
|
onChange={(e) => setFirstName(e.target.value)}
|
|
placeholder="Votre prénom"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="lastName">Nom</Label>
|
|
<Input
|
|
id="lastName"
|
|
value={lastName}
|
|
onChange={(e) => setLastName(e.target.value)}
|
|
placeholder="Votre nom"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="team">Équipe</Label>
|
|
<Select value={teamId} onValueChange={setTeamId} required>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="Sélectionnez votre équipe" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{Object.entries(teamsByDirection).map(
|
|
([direction, directionTeams]) => (
|
|
<div key={direction}>
|
|
<div className="px-2 py-1.5 text-sm font-semibold text-muted-foreground">
|
|
{direction}
|
|
</div>
|
|
{directionTeams.map((team) => (
|
|
<SelectItem key={team.id} value={team.id}>
|
|
{team.name}
|
|
</SelectItem>
|
|
))}
|
|
</div>
|
|
)
|
|
)}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
<Button type="submit" className="w-full" disabled={!isValid}>
|
|
{initialProfile ? "Mettre à jour" : "Commencer l'évaluation"}
|
|
</Button>
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|