making database edit form functional.

src/components/wrappers/Dashboard/Projects/ProjectCard/ProjectDatabaseCard.tsx

@@ -1,40 +1,56 @@
 "use client";
 
-import {Card, CardContent, CardHeader} from "@/components/ui/card";
 import Link from "next/link";
 import Image from "next/image"
+import {Database} from "@prisma/client";
+import {Card, CardContent, CardHeader} from "@/components/ui/card";
 import {ConnectionCircle} from "@/components/wrappers/connection-circle";
 import {formatDateLastContact} from "@/utils/date-formatting";
 
 export type projectDatabaseCardProps = {
-    data: any,
+    data: Database,
     extendedProps: any
 }
 
 export const ProjectDatabaseCard = (props: projectDatabaseCardProps) => {
+
     const {data: database, extendedProps: extendedProps} = props;
+
     return (
         <Link href={`/dashboard/projects/${extendedProps.id}/database/${database.id}`}>
-            <Card className="flex flex-row justify-between">
-                <div className="flex flex-row items-center gap-2">
-                    <Image
-                        src="/PostgreSQL.png"
-                        alt="Database type Icon"
-                        width={60}
-                        height={60}
-                        className="object-cover ml-4"
-                    />
-                    <div >
-                        <CardHeader>Name : {database.name}</CardHeader>
-                        <CardContent>
-                            Last contact: {formatDateLastContact(database.lastContact)}
-                        </CardContent>
-                    </div>
-                </div>
-                <div className="mt-3 mr-3">
-                    <ConnectionCircle date={database.lastContact}/>
-                </div>
-            </Card>
+            <DatabaseCard data={database}/>
         </Link>
     )
+}
+
+export type databaseCardProps = {
+    data: Database,
+}
+
+export const DatabaseCard = (props: databaseCardProps) => {
+
+    const {data: database} = props;
+
+    return (
+        <Card className="flex flex-row justify-between">
+            <div className="flex flex-row items-center gap-2">
+                <Image
+                    src="/PostgreSQL.png"
+                    alt="Database type Icon"
+                    width={60}
+                    height={60}
+                    className="object-cover ml-4"
+                />
+                <div>
+                    <CardHeader>Name : {database.name}</CardHeader>
+                    <CardContent>
+                        Last contact: {formatDateLastContact(database.lastContact)}
+                    </CardContent>
+                </div>
+            </div>
+            <div className="mt-3 mr-3">
+                <ConnectionCircle date={database.lastContact}/>
+            </div>
+        </Card>
+    )
 }

src/components/wrappers/Database/DatabaseForm/DatabaseForm.tsx

@@ -2,7 +2,13 @@
 
 import {Card, CardContent} from "@/components/ui/card";
 import {
-    FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useZodForm
+    FormControl,
+    FormDescription,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage,
+    useZodForm
 } from "@/components/ui/form";
 import {Input} from "@/components/ui/input";
 import {Form} from "@/components/ui/form"
@@ -11,6 +17,8 @@ import {useRouter} from "next/navigation";
 import {useMutation} from "@tanstack/react-query";
 import {TooltipProvider} from "@/components/ui/tooltip";
 import {DatabaseSchema, DatabaseType} from "@/components/wrappers/Database/DatabaseForm/form-database.schema";
+import {updateDatabaseAction} from "@/components/wrappers/Database/DatabaseForm/form-database.action";
+import {toast} from "sonner";
 
 export type DatabaseFormProps = {
     defaultValues?: DatabaseType;
@@ -19,19 +27,33 @@ export type DatabaseFormProps = {
 
 export const DatabaseForm = (props: DatabaseFormProps) => {
 
-    const isCreate = !Boolean(props.defaultValues)
+    const {defaultValues, databaseId} = props;
+
+    const isCreate = !Boolean(defaultValues)
 
     const form = useZodForm({
         schema: DatabaseSchema,
-        defaultValues: props.defaultValues,
+        defaultValues: {...defaultValues},
     });
 
+    console.log("aaaaaaaaaa", form.getValues())
+
     const router = useRouter();
 
     const mutation = useMutation({
         mutationFn: async (values: DatabaseType) => {
-            console.log("values", values)
 
+            const database = await updateDatabaseAction({id: databaseId, data: values});
+
+            if (database.serverError) {
+                console.error(database?.serverError);
+                toast.error(database?.serverError);
+                return;
+            }
+            console.log(database)
+            toast.success(`Database settings successfully updated!`);
+
+            router.back()
         }
     })
 
@@ -42,20 +64,18 @@ export const DatabaseForm = (props: DatabaseFormProps) => {
                     <Form form={form}
                           className="flex flex-col gap-4 mt-3"
                           onSubmit={async (values) => {
+                              console.log("sssssss")
                               await mutation.mutateAsync(values);
                           }}
                     >
                         <FormField
                             control={form.control}
                             name="name"
-                            disabled
-                            defaultValue=""
                             render={({field}) => (
                                 <FormItem>
                                     <FormLabel>Name</FormLabel>
                                     <FormControl>
-                                        <Input
-                                            placeholder="Database 1" {...field} />
+                                        <Input disabled placeholder="Database 1" {...field}/>
                                     </FormControl>
                                     <FormDescription>Your database project name setup in agent</FormDescription>
                                     <FormMessage/>
@@ -65,14 +85,11 @@ export const DatabaseForm = (props: DatabaseFormProps) => {
                         <FormField
                             control={form.control}
                             name="dbms"
-                            defaultValue=""
-                            disabled
                             render={({field}) => (
                                 <FormItem>
                                     <FormLabel>Database type</FormLabel>
                                     <FormControl>
-                                        <Input
-                                            placeholder="PostgreSQL" {...field} value={field.value ?? ""} />
+                                        <Input disabled placeholder="PostgreSQL" {...field}/>
                                     </FormControl>
                                     <FormDescription>Your database project name setup in agent</FormDescription>
                                     <FormMessage/>
@@ -82,13 +99,11 @@ export const DatabaseForm = (props: DatabaseFormProps) => {
                         <FormField
                             control={form.control}
                             name="description"
-                            defaultValue=""
                             render={({field}) => (
                                 <FormItem>
                                     <FormLabel>Description</FormLabel>
                                     <FormControl>
-                                        <Input
-                                            placeholder="Prod database for project 1" {...field} value={field.value ?? ""} />
+                                        <Input placeholder="Prod database for project 1" {...field}/>
                                     </FormControl>
                                     <FormDescription>Add a short description about this database</FormDescription>
                                     <FormMessage/>

src/components/wrappers/Database/DatabaseForm/form-database.action.ts

@@ -0,0 +1,25 @@
+"use server"
+
+import {z} from "zod";
+
+import {userAction} from "@/safe-actions";
+import {prisma} from "@/prisma";
+import {DatabaseSchema} from "@/components/wrappers/Database/DatabaseForm/form-database.schema";
+
+
+export const updateDatabaseAction = userAction
+    .schema(
+        z.object({
+                id: z.string(),
+                data: DatabaseSchema,
+            }
+        )
+    )
+    .action(async ({parsedInput, ctx}) => {
+        return prisma.database.update({
+            where: {
+                id: parsedInput.id,
+            },
+            data: parsedInput.data,
+        });
+    })

src/components/wrappers/Database/DatabaseForm/form-database.schema.ts

@@ -4,10 +4,9 @@ const cronRegex = /^(\d{1,2}|\*|(\d{1,2}-\d{1,2})|(\d{1,2}\/\d{1,2}))\s+(\d{1,2}
 
 
 export const DatabaseSchema = z.object({
-    name: z.string(),
-    description: z.string().optional().nullable(),
-    dbms: z.string(),
-    backupPolicy: z.string().regex(cronRegex, 'Invalid cron format')
+    name: z.string().readonly(),
+    description: z.string().optional(),
+    dbms: z.string().readonly(),
 });
 
 export type DatabaseType = z.infer<typeof DatabaseSchema>;

src/components/wrappers/table/data-table.tsx

@@ -1,6 +1,6 @@
 import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow} from "@/components/ui/table";
 import {flexRender, Row, RowData} from "@tanstack/react-table";
-import {cn} from "@/lib/utils";
+
 
 export type dataTableProps = {
     table: any,
@@ -31,26 +31,21 @@ export const DataTable = ({table}: dataTableProps) => {
                 </TableHeader>
                 <TableBody>
                     {table.getRowModel().rows?.length ? (
-                        table.getRowModel().rows.map((row: Row<RowData>) => {
-                            console.log("row.original",row.original.id)
-                            return(
-                                <TableRow
-                                    className={cn(row.original ?? "bg-gray-200 pointer-events-none")}
-                                    key={row.id}
-                                    data-state={row.getIsSelected() && "selected"}
-                                >
-                                    {row.getVisibleCells().map((cell) => (
-                                        <TableCell key={cell.id}>
-                                            {flexRender(
-                                                cell.column.columnDef.cell,
-                                                cell.getContext(),
-                                            )}
-                                        </TableCell>
-                                    ))}
-                                </TableRow>
-                            )
-                        })
-                    ) : (
+                        table.getRowModel().rows.map((row: Row<RowData>) => (
+                            <TableRow
+                                key={row.id}
+                                data-state={row.getIsSelected() && "selected"}
+                            >
+                                {row.getVisibleCells().map((cell) => (
+                                    <TableCell key={cell.id}>
+                                        {flexRender(
+                                            cell.column.columnDef.cell,
+                                            cell.getContext(),
+                                        )}
+                                    </TableCell>
+                                ))}
+                            </TableRow>
+                        ))) : (
                         <TableRow>
                             <TableCell colSpan={table.getAllColumns().length} className="h-24 text-center">
                                 No results.