From df83c049c954ac82bcc784f05aec83df346ad146 Mon Sep 17 00:00:00 2001
From: mehedi-hasan <mdmehedihasan2810@gmail.com>
Date: Fri, 3 May 2024 20:49:43 +0600
Subject: [PATCH] feat: edit configuration page

---
 .../dashboard/configurations/add/page.tsx     | 36 ++++++++------
 .../configurations/edit/[id]/page.tsx         | 47 +++++++++++++++++++
 ...ration-form.tsx => configuration-form.tsx} | 26 ++++++----
 .../configurations-table/cell-action.tsx      | 15 +++---
 src/constants/data.ts                         | 10 ++--
 src/types/configuration.ts                    |  2 +-
 6 files changed, 100 insertions(+), 36 deletions(-)
 create mode 100644 src/app/(dashboard)/dashboard/configurations/edit/[id]/page.tsx
 rename src/components/{add-configuration-form.tsx => configuration-form.tsx} (82%)

diff --git a/src/app/(dashboard)/dashboard/configurations/add/page.tsx b/src/app/(dashboard)/dashboard/configurations/add/page.tsx
index cef60ac..c3f3a49 100644
--- a/src/app/(dashboard)/dashboard/configurations/add/page.tsx
+++ b/src/app/(dashboard)/dashboard/configurations/add/page.tsx
@@ -1,7 +1,9 @@
+"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 AddConfigurationForm from "@/components/add-configuration-form";
+import ConfigurationForm from "@/components/configuration-form";
 import Breadcrumb from "@/components/breadcrumb";
 
 const breadcrumbItems = [
@@ -10,25 +12,29 @@ const breadcrumbItems = [
   { title: "Add" },
 ];
 
-export default function SettingsDisplayPage() {
+export default function Page() {
   return (
     <ScrollArea className="h-[calc(100vh-53px)]">
-       <div className="flex-1 space-y-4  p-4 md:p-8 pt-6">
+      <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">
-              Create Configuration
-            </CardTitle>
-            <Separator />
-          </CardHeader>
+          <Card className="max-w-[700px] w-full">
+            <CardHeader>
+              <CardTitle className="mb-4 font-bold text-xl">
+                Create Configuration
+              </CardTitle>
+              <Separator />
+            </CardHeader>
 
-          <CardContent>
-            <AddConfigurationForm />
-          </CardContent>
-        </Card>
-      </div>
+            <CardContent>
+              <ConfigurationForm
+                onSubmit={() => {}}
+                btn1_content="Create"
+                btn2_content="Create and add another"
+              />
+            </CardContent>
+          </Card>
+        </div>
       </div>
       <ScrollBar />
     </ScrollArea>
diff --git a/src/app/(dashboard)/dashboard/configurations/edit/[id]/page.tsx b/src/app/(dashboard)/dashboard/configurations/edit/[id]/page.tsx
new file mode 100644
index 0000000..0135180
--- /dev/null
+++ b/src/app/(dashboard)/dashboard/configurations/edit/[id]/page.tsx
@@ -0,0 +1,47 @@
+"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 ConfigurationForm from "@/components/configuration-form";
+import Breadcrumb from "@/components/breadcrumb";
+import { dummyConfigurations } from "@/constants/data";
+import { Configuration } from "@/types/configuration";
+
+const breadcrumbItems = [
+  { title: "Dashboard", link: "/dashboard" },
+  { title: "Configurations", link: "/dashboard/configurations" },
+  { title: "Edit" },
+];
+
+export default function Page({ params }: { params: { id: string } }) {
+  const configuration = dummyConfigurations.find((configuration) => configuration.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 Configuration
+              </CardTitle>
+              <Separator />
+            </CardHeader>
+
+            <CardContent>
+              <ConfigurationForm
+                configuration={configuration as Configuration}
+                onSubmit={() => {}}
+                btn1_content="Save and continue editing"
+                btn2_content="Save changes"
+              />
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+      <ScrollBar />
+    </ScrollArea>
+  );
+}
diff --git a/src/components/add-configuration-form.tsx b/src/components/configuration-form.tsx
similarity index 82%
rename from src/components/add-configuration-form.tsx
rename to src/components/configuration-form.tsx
index 646892c..7290a0e 100644
--- a/src/components/add-configuration-form.tsx
+++ b/src/components/configuration-form.tsx
@@ -15,6 +15,7 @@ import {
 } from "@/components/ui/form";
 import { toast } from "@/components/ui/use-toast";
 import { Input } from "./ui/input";
+import { Configuration } from "@/types/configuration";
 
 const displayFormSchema = z.object({
   name: z.string().trim().min(1, "Name is required."),
@@ -23,16 +24,25 @@ const displayFormSchema = z.object({
 
 type DisplayFormValues = z.infer<typeof displayFormSchema>;
 
-// This can come from your database or API.
-const defaultValues: Partial<DisplayFormValues> = {
-  name: "",
-  value: "",
+type Props = {
+  configuration?: Configuration;
+  onSubmit: () => void;
+  btn1_content: string;
+  btn2_content: string;
 };
 
-export default function AddConfigurationForm() {
+export default function ConfigurationForm({
+  configuration,
+  onSubmit: onFormSubmit,
+  btn1_content,
+  btn2_content,
+}: Props) {
   const form = useForm<DisplayFormValues>({
     resolver: zodResolver(displayFormSchema),
-    defaultValues,
+    defaultValues: {
+      name: configuration?.name || "",
+      value: configuration?.value || "",
+    },
   });
 
   function onSubmit(data: DisplayFormValues) {
@@ -78,10 +88,10 @@ export default function AddConfigurationForm() {
 
         <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/configurations-table/cell-action.tsx b/src/components/configurations-table/cell-action.tsx
index 96a0b37..e4d1963 100644
--- a/src/components/configurations-table/cell-action.tsx
+++ b/src/components/configurations-table/cell-action.tsx
@@ -12,6 +12,7 @@ import { useToast } from "@/components/ui/use-toast";
 import { Configuration } from "@/types/configuration";
 
 import { BookCheck, Edit, MoreHorizontal, Trash } from "lucide-react";
+import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 
@@ -47,13 +48,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" /> Update
+          <DropdownMenuItem className="cursor-pointer p-0">
+            <Link
+              href={`/dashboard/configurations/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/constants/data.ts b/src/constants/data.ts
index 3a2b33d..43d90de 100644
--- a/src/constants/data.ts
+++ b/src/constants/data.ts
@@ -108,31 +108,31 @@ export const dummyConfigurations: Configuration[] = [
   {
     id: 1,
     name: "process_limit",
-    value: 20,
+    value: "20",
     created_at: new Date().toISOString(),
   },
   {
     id: 2,
     name: "process_timeout",
-    value: 600,
+    value: "600",
     created_at: new Date().toISOString(),
   },
   {
     id: 3,
     name: "number_of_courses_to_create",
-    value: 5,
+    value: "5",
     created_at: new Date().toISOString(),
   },
   {
     id: 4,
     name: "max_retries",
-    value: 2,
+    value: "2",
     created_at: new Date().toISOString(),
   },
   {
     id: 5,
     name: "max_token_per_evaluation",
-    value: 1000000,
+    value: "1000000",
     created_at: new Date().toISOString(),
   },
 ];
diff --git a/src/types/configuration.ts b/src/types/configuration.ts
index 6eaef96..a65c41e 100644
--- a/src/types/configuration.ts
+++ b/src/types/configuration.ts
@@ -1,6 +1,6 @@
 export interface Configuration {
   id: number;
   name: string;
-  value: number;
+  value: string;
   created_at: string;
 }