Changed form in users list and removed dashboard/users/new
This commit is contained in:
@@ -58,10 +58,6 @@ const data = {
|
||||
title: "Liste des membres",
|
||||
url: "/dashboard/members",
|
||||
},
|
||||
{
|
||||
title: "Création d'un membre",
|
||||
url: "/dashboard/members/new",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
|
||||
@@ -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"}
|
||||
|
||||
@@ -72,6 +72,7 @@ export default function MembersTable() {
|
||||
// ),
|
||||
// );
|
||||
} else {
|
||||
delete savedMember.userId;
|
||||
const res = await request<unknown>("/users/new", {
|
||||
body: savedMember,
|
||||
method: "POST",
|
||||
|
||||
Reference in New Issue
Block a user