153 lines
3.2 KiB
TypeScript
153 lines
3.2 KiB
TypeScript
import { useEffect } from "react";
|
|
import { useForm } from "react-hook-form";
|
|
import { zodResolver } from "@hookform/resolvers/zod";
|
|
import * as z from "zod";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogFooter,
|
|
} from "@/components/ui/dialog";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import {
|
|
Form,
|
|
FormControl,
|
|
FormField,
|
|
FormItem,
|
|
FormLabel,
|
|
FormMessage,
|
|
} from "@/components/ui/form";
|
|
|
|
const memberSchema = z.object({
|
|
userId: z.string().optional(),
|
|
firstname: z.string().min(1, "Prénom est requis."),
|
|
lastname: z.string().min(1, "Nom de famille est requis."),
|
|
email: z.string().email("Adresse email invalide."),
|
|
password: z
|
|
.string()
|
|
.min(6, "Le mot de passe doit avoir au moins 6 caractères.")
|
|
.optional(),
|
|
phone: z.string().regex(/^\d{10}$/, "Le numéro doit avoir 10 chiffres."),
|
|
role: z.string().min(1, "Le rôle est requis."),
|
|
});
|
|
|
|
const updateMemberSchema = memberSchema.partial();
|
|
|
|
export type Member = z.infer<typeof memberSchema>;
|
|
|
|
interface MemberDialogProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
member: Member | null;
|
|
onSave: (member: Member) => void;
|
|
}
|
|
|
|
export default function MemberDialog({
|
|
isOpen,
|
|
onClose,
|
|
member,
|
|
onSave,
|
|
}: MemberDialogProps) {
|
|
const schema = member?.userId ? updateMemberSchema : memberSchema;
|
|
const form = useForm<Member>({
|
|
resolver: zodResolver(schema),
|
|
defaultValues: member?.userId
|
|
? member
|
|
: {
|
|
userId: "",
|
|
firstname: "",
|
|
lastname: "",
|
|
email: "",
|
|
password: "",
|
|
phone: "",
|
|
role: "",
|
|
},
|
|
});
|
|
|
|
useEffect(() => {
|
|
if (member) {
|
|
form.reset(member);
|
|
} else {
|
|
form.reset({
|
|
userId: "",
|
|
firstname: "",
|
|
lastname: "",
|
|
email: "",
|
|
password: "",
|
|
phone: "",
|
|
role: "",
|
|
});
|
|
}
|
|
}, [member, form]);
|
|
|
|
const onSubmit = (data: Member) => {
|
|
onSave(data);
|
|
onClose();
|
|
};
|
|
|
|
return (
|
|
<Dialog open={isOpen} onOpenChange={onClose}>
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>
|
|
{member
|
|
? "Mis à jour du membre"
|
|
: "Créer un nouveau membre"}
|
|
</DialogTitle>
|
|
</DialogHeader>
|
|
<Form {...form}>
|
|
<form
|
|
onSubmit={form.handleSubmit(onSubmit)}
|
|
className="space-y-4"
|
|
>
|
|
{(
|
|
[
|
|
"userId",
|
|
"firstname",
|
|
"lastname",
|
|
"email",
|
|
"password",
|
|
"phone",
|
|
"role",
|
|
] as const
|
|
).map((field) => (
|
|
<FormField
|
|
key={field}
|
|
control={form.control}
|
|
name={field}
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>
|
|
{field.name
|
|
.charAt(0)
|
|
.toUpperCase() +
|
|
field.name.slice(1)}
|
|
</FormLabel>
|
|
<FormControl>
|
|
<Input
|
|
{...field}
|
|
disabled={
|
|
field.name === "userId"
|
|
}
|
|
/>
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
))}
|
|
<DialogFooter>
|
|
<Button type="submit">
|
|
{member ? "Actualiser" : "Ajouter"}
|
|
</Button>
|
|
</DialogFooter>
|
|
</form>
|
|
</Form>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|