Changed form in users list and removed dashboard/users/new

This commit is contained in:
cdricms
2025-01-28 13:55:19 +01:00
parent b723479ec8
commit 74118a5aa6
4 changed files with 155 additions and 263 deletions

View File

@@ -58,10 +58,6 @@ const data = {
title: "Liste des membres",
url: "/dashboard/members",
},
{
title: "Création d'un membre",
url: "/dashboard/members/new",
},
],
},
{

View File

@@ -11,7 +11,6 @@ import {
} 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,
@@ -20,6 +19,15 @@ import {
FormLabel,
FormMessage,
} from "@/components/ui/form";
import {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectLabel,
SelectTrigger,
SelectValue,
} from "./ui/select";
const memberSchema = z.object({
userId: z.string().optional(),
@@ -94,51 +102,171 @@ export default function MemberDialog({
<DialogHeader>
<DialogTitle>
{member
? "Mis à jour du membre"
? "Mise à jour du membre"
: "Créer un nouveau membre"}
</DialogTitle>
</DialogHeader>
<Form {...form}>
<form
onSubmit={form.handleSubmit(onSubmit)}
className="space-y-4"
className="space-y-8"
>
{(
[
"userId",
"firstname",
"lastname",
"email",
"password",
"phone",
"role",
] as const
).map((field) => (
<div className="grid gap-4">
{/* Firstname Field */}
<FormField
key={field}
control={form.control}
name={field}
name="firstname"
render={({ field }) => (
<FormItem>
<FormLabel>
{field.name
.charAt(0)
.toUpperCase() +
field.name.slice(1)}
<FormItem className="grid gap-2">
<FormLabel htmlFor="name">
Prénom
</FormLabel>
<FormControl>
<Input
id="firstname"
placeholder="John Doe"
type="text"
autoComplete="firstname"
{...field}
disabled={
field.name === "userId"
}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
))}
<div className="grid gap-4">
{/* Firstname Field */}
<FormField
control={form.control}
name="lastname"
render={({ field }) => (
<FormItem className="grid gap-2">
<FormLabel htmlFor="lastname">
Nom
</FormLabel>
<FormControl>
<Input
id="lastname"
placeholder="John Doe"
type="text"
autoComplete="lastname"
{...field}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
{/* Email Field */}
<FormField
control={form.control}
name="email"
render={({ field }) => (
<FormItem className="grid gap-2">
<FormLabel htmlFor="email">
Email
</FormLabel>
<FormControl>
<Input
id="email"
placeholder="johndoe@mail.com"
type="email"
autoComplete="email webauthn"
{...field}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
{/* Password Field */}
{!member?.userId && (
<FormField
control={form.control}
name="password"
render={({ field }) => (
<FormItem className="grid gap-2">
<FormLabel htmlFor="password">
Mot de passe
</FormLabel>
<FormControl>
<Input
id="password"
placeholder=""
type="password"
autoComplete="new-password webauthn"
{...field}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
)}
<FormField
control={form.control}
name="role"
render={({ field }) => (
<FormItem className="grid gap-2">
<FormLabel htmlFor="role">
Role
</FormLabel>
<FormControl>
<Select
value={field.value}
onValueChange={(
value: string,
) => field.onChange(value)}
>
<SelectTrigger className="w-[180px]">
<SelectValue placeholder="Séléctionner un rôle" />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectLabel>
Role
</SelectLabel>
<SelectItem value="admin">
Administrateur
</SelectItem>
<SelectItem value="user">
Utilisateur
</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
{/* Phone Field */}
<FormField
control={form.control}
name="phone"
render={({ field }) => (
<FormItem className="grid gap-2">
<FormLabel htmlFor="phone">
Phone number
</FormLabel>
<FormControl>
<Input
id="phone"
placeholder="0648265441"
type="tel"
autoComplete="phone"
{...field}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
</div>
<DialogFooter>
<Button type="submit">
{member ? "Actualiser" : "Ajouter"}

View File

@@ -72,6 +72,7 @@ export default function MembersTable() {
// ),
// );
} else {
delete savedMember.userId;
const res = await request<unknown>("/users/new", {
body: savedMember,
method: "POST",