cdricms/latosa-escrima
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

233
frontend/app/(auth)/dashboard/members/new/page.tsx
View File

@@ -1,233 +0,0 @@
"use client";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import {
Form,
FormControl,
FormField,
FormItem,
FormLabel,
FormMessage,
} from "@/components/ui/form";
import { Button } from "@/components/ui/button";
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import useApiMutation from "@/hooks/use-api";
import {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectLabel,
SelectTrigger,
SelectValue,
} from "@/components/ui/select"
const formSchema = z.object({
firstname: z.string().min(2, { message: "Prénom trop court." }),
lastname: z.string().min(2, { message: "Nom trop court." }),
role: z.enum(["admin", "user"], { message: "Rôle invalide." }),
phone: z
.string()
.max(10, { message: "Un numéro de téléphone à 10 chiffres." })
.optional(),
email: z.string().email({ message: "Email invalide." })
});
export default function CreateMemberForm() {
const {
trigger
} = useApiMutation(
"/users/new",
{ onSuccess: () => console.log("Member created") },
"POST",
true,
false
)
const form = useForm<z.infer<typeof formSchema>>({
resolver: zodResolver(formSchema),
defaultValues: {
firstname: "",
lastname: "",
role: "user",
phone: "",
email: "",
},
});
async function onSubmit(values: z.infer<typeof formSchema>) {
try {
const res = await trigger(values)
if (!res) throw new Error("The server hasn't responded.");
if (res.status === "Error") throw new Error(res.message);
} catch (error) {
console.error("Form submission error", error);
}
console.log("submited");
}
return (
<div className="flex min-h-[60vh] h-full w-full items-center justify-center px-4">
<Card className="mx-auto max-w-md">
<CardHeader>
<CardTitle className="text-2xl">Création de membre</CardTitle>
<CardDescription>
Remplissez les différents champs pour créer un membre.
Un code sera envoyé par mail à l'utilisateur.
Il pourra ensuite modifier le mot de passe de son compte avec ce code.
</CardDescription>
</CardHeader>
<CardContent>
<Form {...form}>
<form
onSubmit={form.handleSubmit(onSubmit)}
className="space-y-8"
>
<div className="grid gap-4">
{/* Firstname Field */}
<FormField
control={form.control}
name="firstname"
render={({ field }) => (
<FormItem className="grid gap-2">
<FormLabel htmlFor="name">
Prénom
</FormLabel>
<FormControl>
<Input
id="firstname"
placeholder="John Doe"
type="text"
autoComplete="firstname"
{...field}
/>
</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"
{...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="Select a role" />
</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>
)}
/>
<Button type="submit" className="w-full">
Add member
</Button>
</div>
</div>
</form>
</Form>
</CardContent>
</Card>
</div>
);
}

4
frontend/components/app-sidebar.tsx
View File

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

180
frontend/components/member-dialog.tsx
View File

@@ -11,7 +11,6 @@ import {
} from "@/components/ui/dialog"; } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { import {
Form, Form,
FormControl, FormControl,
@@ -20,6 +19,15 @@ import {
FormLabel, FormLabel,
FormMessage, FormMessage,
} from "@/components/ui/form"; } from "@/components/ui/form";
import {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectLabel,
SelectTrigger,
SelectValue,
} from "./ui/select";
const memberSchema = z.object({ const memberSchema = z.object({
userId: z.string().optional(), userId: z.string().optional(),
@@ -94,51 +102,171 @@ export default function MemberDialog({
<DialogHeader> <DialogHeader>
<DialogTitle> <DialogTitle>
{member {member
? "Mis à jour du membre" ? "Mise à jour du membre"
: "Créer un nouveau membre"} : "Créer un nouveau membre"}
</DialogTitle> </DialogTitle>
</DialogHeader> </DialogHeader>
<Form {...form}> <Form {...form}>
<form <form
onSubmit={form.handleSubmit(onSubmit)} onSubmit={form.handleSubmit(onSubmit)}
className="space-y-4" className="space-y-8"
> >
{( <div className="grid gap-4">
[ {/* Firstname Field */}
"userId",
"firstname",
"lastname",
"email",
"password",
"phone",
"role",
] as const
).map((field) => (
<FormField <FormField
key={field}
control={form.control} control={form.control}
name={field} name="firstname"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem className="grid gap-2">
<FormLabel> <FormLabel htmlFor="name">
{field.name Prénom
.charAt(0)
.toUpperCase() +
field.name.slice(1)}
</FormLabel> </FormLabel>
<FormControl> <FormControl>
<Input <Input
id="firstname"
placeholder="John Doe"
type="text"
autoComplete="firstname"
{...field} {...field}
disabled={
field.name === "userId"
}
/> />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </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> <DialogFooter>
<Button type="submit"> <Button type="submit">
{member ? "Actualiser" : "Ajouter"} {member ? "Actualiser" : "Ajouter"}

1
frontend/components/members-table.tsx
View File

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