From 73c88598e7972b2a2b9b7a478d639adb0dcb1bc8 Mon Sep 17 00:00:00 2001
From: mehedi-hasan <mdmehedihasan2810@gmail.com>
Date: Sun, 5 May 2024 21:36:03 +0600
Subject: [PATCH] feat: edit evaluation page

---
 .../dashboard/evaluations/add/page.tsx        | 10 +++-
 .../dashboard/evaluations/edit/[id]/page.tsx  | 49 +++++++++++++++++++
 src/components/commits-table/cell-action.tsx  | 15 +++---
 src/components/evaluation-form.tsx            | 43 +++++++++++-----
 .../evaluations-table/cell-action.tsx         | 15 +++---
 5 files changed, 104 insertions(+), 28 deletions(-)
 create mode 100644 src/app/(dashboard)/dashboard/evaluations/edit/[id]/page.tsx

diff --git a/src/app/(dashboard)/dashboard/evaluations/add/page.tsx b/src/app/(dashboard)/dashboard/evaluations/add/page.tsx
index 1ba2ff3..d0961dd 100644
--- a/src/app/(dashboard)/dashboard/evaluations/add/page.tsx
+++ b/src/app/(dashboard)/dashboard/evaluations/add/page.tsx
@@ -1,8 +1,10 @@
+"use client"
+
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 import { Separator } from "@/components/ui/separator";
 import Breadcrumb from "@/components/breadcrumb";
-import AddEvaluationForm from "@/components/evaluation-form";
+import EvaluationForm from "@/components/evaluation-form";
 
 const breadcrumbItems = [
   { title: "Dashboard", link: "/dashboard" },
@@ -25,7 +27,11 @@ export default function Page() {
             </CardHeader>
 
             <CardContent>
-              <AddEvaluationForm />
+              <EvaluationForm
+                onSubmit={() => {}}
+                btn1_content="Create"
+                btn2_content="Create and add another"
+              />
             </CardContent>
           </Card>
         </div>
diff --git a/src/app/(dashboard)/dashboard/evaluations/edit/[id]/page.tsx b/src/app/(dashboard)/dashboard/evaluations/edit/[id]/page.tsx
new file mode 100644
index 0000000..b8fd13d
--- /dev/null
+++ b/src/app/(dashboard)/dashboard/evaluations/edit/[id]/page.tsx
@@ -0,0 +1,49 @@
+"use client";
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
+import { Separator } from "@/components/ui/separator";
+import Breadcrumb from "@/components/breadcrumb";
+import EvaluationForm from "@/components/evaluation-form";
+import { Evaluation } from "@/types/evaluation";
+import { dummyEvaluations } from "@/constants/data";
+
+const breadcrumbItems = [
+  { title: "Dashboard", link: "/dashboard" },
+  { title: "Evaluation", link: "/dashboard/evaluations" },
+  { title: "Edit" },
+];
+
+export default function Page({ params }: { params: { id: string } }) {
+  const evaluation = dummyEvaluations.find(
+    (evaluation) => evaluation.id === +params.id
+  );
+
+  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">
+            <CardHeader>
+              <CardTitle className="mb-4 font-bold text-xl">
+                Edit Evaluation
+              </CardTitle>
+              <Separator />
+            </CardHeader>
+
+            <CardContent>
+              <EvaluationForm
+                evaluation={evaluation as Evaluation}
+                onSubmit={() => {}}
+                btn1_content="Save and continue editing"
+                btn2_content="Save changes"
+              />
+            </CardContent>
+          </Card>
+        </div>
+        <ScrollBar />
+      </div>
+    </ScrollArea>
+  );
+}
diff --git a/src/components/commits-table/cell-action.tsx b/src/components/commits-table/cell-action.tsx
index 5ccdcaf..c6b945f 100644
--- a/src/components/commits-table/cell-action.tsx
+++ b/src/components/commits-table/cell-action.tsx
@@ -16,6 +16,7 @@ import { EvaluationStart } from "@/types/evaluation-start";
 import { Skill } from "@/types/skill";
 
 import { Edit, GitCommit, MoreHorizontal, Trash } from "lucide-react";
+import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 
@@ -51,13 +52,13 @@ 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" /> Edit
+          <DropdownMenuItem className="cursor-pointer p-0">
+            <Link
+              href={`/dashboard/commits/edit/${data.id}`}
+              className="flex items-center gap-2 px-2 py-1.5 w-full"
+            >
+              <Edit className="h-4 w-4" /> Edit
+            </Link>
           </DropdownMenuItem>
           <DropdownMenuItem
             className="cursor-pointer"
diff --git a/src/components/evaluation-form.tsx b/src/components/evaluation-form.tsx
index f0a66c0..70e137f 100644
--- a/src/components/evaluation-form.tsx
+++ b/src/components/evaluation-form.tsx
@@ -27,6 +27,7 @@ import {
 import { cn } from "@/lib/utils";
 import { CommandList } from "cmdk";
 import { useState } from "react";
+import { Evaluation } from "@/types/evaluation";
 
 const statuses = [
   "uploading",
@@ -43,8 +44,8 @@ const statuses = [
   "evaluation_failed",
 ] as const;
 
-const uploaders = ["hello@skilld.team", "johndoe@gmail.com"] as const;
-const developers = ["hello@skilld.team", "johndoe@gmail.com"] as const;
+const uploaders = ["johndoe@gmail.com", "danabramov@gmail.com"] as const;
+const developers = ["danabramov@gmail.com", "johndoe@gmail.com"] as const;
 
 const displayFormSchema = z.object({
   status: z.string().trim().min(1, "Status is required"),
@@ -65,22 +66,38 @@ const displayFormSchema = z.object({
 
 type DisplayFormValues = z.infer<typeof displayFormSchema>;
 
-// This can come from your database or API.
-const defaultValues: Partial<DisplayFormValues> = {
-  status: "",
-  uploadTime: "",
-  uploaderAccount: "",
-  developerUser: "",
+// const defaultValues: Partial<DisplayFormValues> = {
+//   status: "",
+//   uploadTime: "",
+//   uploaderAccount: "",
+//   developerUser: "",
+// };
+
+type Props = {
+  evaluation?: Evaluation;
+  onSubmit: () => void;
+  btn1_content: string;
+  btn2_content: string;
 };
 
-export default function AddEvaluationForm() {
+export default function EvaluationForm({
+  evaluation,
+  onSubmit: onFormSubmit,
+  btn1_content,
+  btn2_content,
+}: Props) {
   const [isStatusPopoverOpen, setIsStatusPopoverOpen] = useState(false);
   const [isUploaderPopoverOpen, setIsUploaderPopoverOpen] = useState(false);
   const [isDeveloperPopoverOpen, setIsDeveloperPopoverOpen] = useState(false);
 
   const form = useForm<DisplayFormValues>({
     resolver: zodResolver(displayFormSchema),
-    defaultValues,
+    defaultValues: {
+      status: evaluation?.status || "",
+      uploadTime: evaluation?.uploadTime || "",
+      uploaderAccount: evaluation?.uploaderAccount || "",
+      developerUser: evaluation?.developerUser || "",
+    },
   });
 
   function onSubmit(data: DisplayFormValues) {
@@ -92,6 +109,8 @@ export default function AddEvaluationForm() {
         </pre>
       ),
     });
+
+    onFormSubmit();
   }
 
   return (
@@ -312,10 +331,10 @@ export default function AddEvaluationForm() {
 
         <div className="flex items-center gap-4 flex-col sm:flex-row">
           <Button className="w-full" size="lg">
-            Create
+            {btn1_content}
           </Button>
           <Button variant="secondary" className="w-full" size="lg">
-            Create and add another
+            {btn2_content}
           </Button>
         </div>
       </form>
diff --git a/src/components/evaluations-table/cell-action.tsx b/src/components/evaluations-table/cell-action.tsx
index 9ebf732..9b2d8c4 100644
--- a/src/components/evaluations-table/cell-action.tsx
+++ b/src/components/evaluations-table/cell-action.tsx
@@ -15,6 +15,7 @@ import { EvaluationStart } from "@/types/evaluation-start";
 import { Skill } from "@/types/skill";
 
 import { Edit, GitCommit, MoreHorizontal, Trash } from "lucide-react";
+import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 
@@ -50,13 +51,13 @@ 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" /> Edit
+          <DropdownMenuItem className="cursor-pointer p-0">
+            <Link
+              href={`/dashboard/evaluations/edit/${data.id}`}
+              className="flex items-center gap-2 px-2 py-1.5 w-full"
+            >
+              <Edit className="h-4 w-4" /> Edit
+            </Link>
           </DropdownMenuItem>
           <DropdownMenuItem
             className="cursor-pointer"