From 1a384dce5f04bb8a2aae4a29d570b16b4f6c219a Mon Sep 17 00:00:00 2001
From: mehedi-hasan <mdmehedihasan2810@gmail.com>
Date: Fri, 3 May 2024 19:43:59 +0600
Subject: [PATCH] feat: user edit page

---
 .../(dashboard)/dashboard/users/add/page.tsx  | 26 +++++------
 .../dashboard/users/edit/[id]/page.tsx        | 44 +++++++++++++++++++
 .../{add-user-form.tsx => user-form.tsx}      | 16 +++----
 src/components/users-table/cell-action.tsx    | 24 ++++++----
 src/constants/data.ts                         |  7 ++-
 5 files changed, 82 insertions(+), 35 deletions(-)
 create mode 100644 src/app/(dashboard)/dashboard/users/edit/[id]/page.tsx
 rename src/components/{add-user-form.tsx => user-form.tsx} (96%)

diff --git a/src/app/(dashboard)/dashboard/users/add/page.tsx b/src/app/(dashboard)/dashboard/users/add/page.tsx
index 17aba0d..d678e58 100644
--- a/src/app/(dashboard)/dashboard/users/add/page.tsx
+++ b/src/app/(dashboard)/dashboard/users/add/page.tsx
@@ -1,4 +1,4 @@
-import AddUserForm from "@/components/add-user-form";
+import AddUserForm from "@/components/user-form";
 import Breadcrumb from "@/components/breadcrumb";
 import { Button } from "@/components/ui/button";
 import {
@@ -21,20 +21,20 @@ export default function SettingsDisplayPage() {
   return (
     <ScrollArea className="h-[calc(100vh-53px)]">
       <div className="flex-1 space-y-4  p-4 md:p-8 pt-6">
-      <Breadcrumb items={breadcrumbItems} />
+        <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">
-              Create User
-            </CardTitle>
-            <Separator />
-          </CardHeader>
+          <Card className="max-w-[700px] w-full mb-8">
+            <CardHeader>
+              <CardTitle className="mb-4 font-bold text-xl">
+                Create User
+              </CardTitle>
+              <Separator />
+            </CardHeader>
 
-          <CardContent>
-            <AddUserForm />
-          </CardContent>
-        </Card>
+            <CardContent>
+              <AddUserForm />
+            </CardContent>
+          </Card>
         </div>
       </div>
       <ScrollBar />
diff --git a/src/app/(dashboard)/dashboard/users/edit/[id]/page.tsx b/src/app/(dashboard)/dashboard/users/edit/[id]/page.tsx
new file mode 100644
index 0000000..e19c674
--- /dev/null
+++ b/src/app/(dashboard)/dashboard/users/edit/[id]/page.tsx
@@ -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>
+  );
+}
diff --git a/src/components/add-user-form.tsx b/src/components/user-form.tsx
similarity index 96%
rename from src/components/add-user-form.tsx
rename to src/components/user-form.tsx
index a3f3e98..1d01ad7 100644
--- a/src/components/add-user-form.tsx
+++ b/src/components/user-form.tsx
@@ -17,6 +17,7 @@ import {
 } from "@/components/ui/form";
 import { toast } from "@/components/ui/use-toast";
 import { Input } from "./ui/input";
+import { User } from "@/types/user";
 
 const roles = [
   {
@@ -61,17 +62,14 @@ const displayFormSchema = z.object({
 
 type DisplayFormValues = z.infer<typeof displayFormSchema>;
 
-// This can come from your database or API.
-const defaultValues: Partial<DisplayFormValues> = {
-  fullName: "",
-  email: "",
-  roles: ["ROLE_USER"],
-};
-
-export default function AddUserForm() {
+export default function UserForm({ user }: { user?: User }) {
   const form = useForm<DisplayFormValues>({
     resolver: zodResolver(displayFormSchema),
-    defaultValues,
+    defaultValues: {
+      fullName: user?.fullName || "",
+      email: user?.email || "",
+      roles: [user?.role || "ROLE_USER"],
+    },
   });
 
   function onSubmit(data: DisplayFormValues) {
diff --git a/src/components/users-table/cell-action.tsx b/src/components/users-table/cell-action.tsx
index 7df5e56..a6d888a 100644
--- a/src/components/users-table/cell-action.tsx
+++ b/src/components/users-table/cell-action.tsx
@@ -11,7 +11,8 @@ import {
 import { useToast } from "@/components/ui/use-toast";
 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 { useState } from "react";
 
@@ -27,7 +28,8 @@ export const CellAction: React.FC<CellActionProps> = ({ data }) => {
 
   const onDeleteConfirm = async () => {};
 
-  const handleUpdateStatus = async () => {};
+
+  console.log(data)
 
   return (
     <>
@@ -47,13 +49,17 @@ export const CellAction: React.FC<CellActionProps> = ({ data }) => {
         <DropdownMenuContent align="end">
           <DropdownMenuLabel>Actions</DropdownMenuLabel>
 
-          <DropdownMenuItem
-            className="cursor-pointer"
-            // onClick={() =>
-            //   router.push(`#`)
-            // }
-          >
-            <Edit className="mr-2 h-4 w-4" /> Update
+          <DropdownMenuItem className="cursor-pointer">
+            <UserCheck className="mr-2 h-4 w-4" /> Approve User
+          </DropdownMenuItem>
+
+          <DropdownMenuItem className="cursor-pointer">
+            <Link
+              href={`/dashboard/users/edit/${data.id}`}
+              className="flex items-center gap-2"
+            >
+              <Edit className="h-4 w-4" /> Edit
+            </Link>
           </DropdownMenuItem>
           <DropdownMenuItem
             className="cursor-pointer"
diff --git a/src/constants/data.ts b/src/constants/data.ts
index cb5ec26..0d3f130 100644
--- a/src/constants/data.ts
+++ b/src/constants/data.ts
@@ -9,28 +9,27 @@ import { Organization } from "@/types/organization";
 import { Skill } from "@/types/skill";
 import { User } from "@/types/user";
 import { UserRound, UserRoundCheck } from "lucide-react";
-import { number } from "zod";
 
 export const dummyUsers: User[] = [
   {
     id: 1,
     email: "john@gmail.com",
     fullName: "John Doe",
-    role: "ADMIN",
+    role: "ROLE_ADMIN",
     created_at: new Date().toISOString(),
   },
   {
     id: 2,
     email: "linustorvalds@gmail.com",
     fullName: "Linus Torvalds",
-    role: "USER",
+    role: "ROLE_USER",
     created_at: new Date().toISOString(),
   },
   {
     id: 3,
     email: "ryandahl@gmail.com",
     fullName: "Ryan Dahl",
-    role: "ADMIN",
+    role: "ROLE_ADMIN",
     created_at: new Date().toISOString(),
   },
 ];