feat: user edit page

This commit is contained in:
mehedi-hasan 2024-05-03 19:43:59 +06:00
parent 32b31f9df3
commit 1a384dce5f
5 changed files with 82 additions and 35 deletions

View File

@ -1,4 +1,4 @@
import AddUserForm from "@/components/add-user-form"; import AddUserForm from "@/components/user-form";
import Breadcrumb from "@/components/breadcrumb"; import Breadcrumb from "@/components/breadcrumb";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { import {

View File

@ -0,0 +1,44 @@
import UserForm from "@/components/user-form";
import Breadcrumb from "@/components/breadcrumb";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
import { Separator } from "@/components/ui/separator";
import { dummyUsers } from "@/constants/data";
import { User } from "@/types/user";
const breadcrumbItems = [
{ title: "Dashboard", link: "/dashboard" },
{ title: "Users", link: "/dashboard/users" },
{ title: "Edit" },
];
export default function Page({ params }: { params: { id: string } }) {
console.log(params);
const user = dummyUsers.find((user) => user.id === +params.id);
console.log(user);
return (
<ScrollArea className="h-[calc(100vh-53px)]">
<div className="flex-1 space-y-4 p-4 md:p-8 pt-6">
<Breadcrumb items={breadcrumbItems} />
<div className="w-full h-full flex justify-center items-center">
<Card className="max-w-[700px] w-full mb-8">
<CardHeader>
<CardTitle className="mb-4 font-bold text-xl">
Edit User
</CardTitle>
<Separator />
</CardHeader>
<CardContent>
<UserForm user={user as User} />
</CardContent>
</Card>
</div>
</div>
<ScrollBar />
</ScrollArea>
);
}

View File

@ -17,6 +17,7 @@ import {
} from "@/components/ui/form"; } from "@/components/ui/form";
import { toast } from "@/components/ui/use-toast"; import { toast } from "@/components/ui/use-toast";
import { Input } from "./ui/input"; import { Input } from "./ui/input";
import { User } from "@/types/user";
const roles = [ const roles = [
{ {
@ -61,17 +62,14 @@ const displayFormSchema = z.object({
type DisplayFormValues = z.infer<typeof displayFormSchema>; type DisplayFormValues = z.infer<typeof displayFormSchema>;
// This can come from your database or API. export default function UserForm({ user }: { user?: User }) {
const defaultValues: Partial<DisplayFormValues> = {
fullName: "",
email: "",
roles: ["ROLE_USER"],
};
export default function AddUserForm() {
const form = useForm<DisplayFormValues>({ const form = useForm<DisplayFormValues>({
resolver: zodResolver(displayFormSchema), resolver: zodResolver(displayFormSchema),
defaultValues, defaultValues: {
fullName: user?.fullName || "",
email: user?.email || "",
roles: [user?.role || "ROLE_USER"],
},
}); });
function onSubmit(data: DisplayFormValues) { function onSubmit(data: DisplayFormValues) {

View File

@ -11,7 +11,8 @@ import {
import { useToast } from "@/components/ui/use-toast"; import { useToast } from "@/components/ui/use-toast";
import { User } from "@/types/user"; import { User } from "@/types/user";
import { BookCheck, Edit, MoreHorizontal, Trash } from "lucide-react"; import { Edit, MoreHorizontal, Trash, UserCheck } from "lucide-react";
import Link from "next/link";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import { useState } from "react"; import { useState } from "react";
@ -27,7 +28,8 @@ export const CellAction: React.FC<CellActionProps> = ({ data }) => {
const onDeleteConfirm = async () => {}; const onDeleteConfirm = async () => {};
const handleUpdateStatus = async () => {};
console.log(data)
return ( return (
<> <>
@ -47,13 +49,17 @@ export const CellAction: React.FC<CellActionProps> = ({ data }) => {
<DropdownMenuContent align="end"> <DropdownMenuContent align="end">
<DropdownMenuLabel>Actions</DropdownMenuLabel> <DropdownMenuLabel>Actions</DropdownMenuLabel>
<DropdownMenuItem <DropdownMenuItem className="cursor-pointer">
className="cursor-pointer" <UserCheck className="mr-2 h-4 w-4" /> Approve User
// onClick={() => </DropdownMenuItem>
// router.push(`#`)
// } <DropdownMenuItem className="cursor-pointer">
<Link
href={`/dashboard/users/edit/${data.id}`}
className="flex items-center gap-2"
> >
<Edit className="mr-2 h-4 w-4" /> Update <Edit className="h-4 w-4" /> Edit
</Link>
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem <DropdownMenuItem
className="cursor-pointer" className="cursor-pointer"

View File

@ -9,28 +9,27 @@ import { Organization } from "@/types/organization";
import { Skill } from "@/types/skill"; import { Skill } from "@/types/skill";
import { User } from "@/types/user"; import { User } from "@/types/user";
import { UserRound, UserRoundCheck } from "lucide-react"; import { UserRound, UserRoundCheck } from "lucide-react";
import { number } from "zod";
export const dummyUsers: User[] = [ export const dummyUsers: User[] = [
{ {
id: 1, id: 1,
email: "john@gmail.com", email: "john@gmail.com",
fullName: "John Doe", fullName: "John Doe",
role: "ADMIN", role: "ROLE_ADMIN",
created_at: new Date().toISOString(), created_at: new Date().toISOString(),
}, },
{ {
id: 2, id: 2,
email: "linustorvalds@gmail.com", email: "linustorvalds@gmail.com",
fullName: "Linus Torvalds", fullName: "Linus Torvalds",
role: "USER", role: "ROLE_USER",
created_at: new Date().toISOString(), created_at: new Date().toISOString(),
}, },
{ {
id: 3, id: 3,
email: "ryandahl@gmail.com", email: "ryandahl@gmail.com",
fullName: "Ryan Dahl", fullName: "Ryan Dahl",
role: "ADMIN", role: "ROLE_ADMIN",
created_at: new Date().toISOString(), created_at: new Date().toISOString(),
}, },
]; ];