centralize option for next admin

premieroctet · Oct 16, 2023 · 03b873e · 03b873e
1 parent 04091e1
commit 03b873e
Show file tree

Hide file tree

Showing 5 changed files with 106 additions and 138 deletions.
diff --git a/apps/example/pages/admin/[[...nextadmin]].tsx b/apps/example/pages/admin/[[...nextadmin]].tsx
@@ -10,26 +10,98 @@ import {
 } from "@premieroctet/next-admin";
 import Dashboard from "../../components/Dashboard";
 
+const options: NextAdminOptions = {
+  basePath: "/admin",
+  model: {
+    User: {
+      toString: (user) => `${user.name} (${user.email})`,
+      list: {
+        fields: {
+          name: {
+            search: true,
+            display: true,
+          },
+          email: {
+            search: true,
+            display: true,
+          },
+          role: {
+            search: true,
+            display: true,
+            formatter: (user) => {
+              return <strong>{user.role as string}</strong>;
+            },
+          },
+          posts: {
+            search: true,
+            display: true,
+          },
+        },
+      },
+      edit: {
+        fields: {
+          id: {
+            display: true,
+          },
+          name: {
+            display: true,
+          },
+          email: {
+            display: true,
+            validate: (email) => email.includes("@") || "Invalid email",
+          },
+          role: {
+            display: true,
+          },
+          posts: {
+            display: true,
+          },
+          profile: {
+            display: true,
+          },
+        },
+      },
+    },
+    Post: {
+      toString: (post) => `${post.title}`,
+      list: {
+        fields: {
+          id: {
+            search: true,
+            display: true,
+          },
+          title: {
+            search: true,
+            display: true,
+          },
+          content: {
+            search: true,
+            display: true,
+          },
+          published: {
+            display: true,
+          },
+          authorId: {
+            display: true,
+          },
+          categories: {
+            display: true,
+          },
+        },
+      },
+    },
+    Category: {
+      toString: (category) => `${category.name}`,
+    },
+  },
+};
+
 export default function Admin(props: AdminComponentProps) {
   return (
     <NextAdmin
       {...props}
       dashboard={Dashboard}
-      options={{
-        model: {
-          User: {
-            list: {
-              fields: {
-                role: {
-                  formatter: (user) => {
-                    return <strong>{user.role as string}</strong>;
-                  },
-                },
-              },
-            },
-          },
-        },
-      }}
+      options={options}
     />
   );
 }
@@ -39,93 +111,6 @@ export const getServerSideProps: GetServerSideProps = async ({ req, res }) => {
     "@premieroctet/next-admin/dist/router"
   );
 
-  const options: NextAdminOptions = {
-    basePath: "/admin",
-    model: {
-      User: {
-        toString: (user) => `${user.name} (${user.email})`,
-        list: {
-          fields: {
-            id: {
-              search: true,
-              display: true,
-            },
-            name: {
-              search: true,
-              display: true,
-            },
-            email: {
-              search: true,
-              display: true,
-            },
-            role: {
-              search: true,
-              display: true,
-            },
-            posts: {
-              search: true,
-              display: true,
-            },
-          },
-        },
-        edit: {
-          fields: {
-            id: {
-              display: true,
-            },
-            name: {
-              display: true,
-            },
-            email: {
-              display: true,
-              validate: (email) => email.includes("@") || "Invalid email",
-            },
-            role: {
-              display: true,
-            },
-            posts: {
-              display: true,
-            },
-            profile: {
-              display: true,
-            },
-          },
-        },
-      },
-      Post: {
-        toString: (post) => `${post.title}`,
-        list: {
-          fields: {
-            id: {
-              search: true,
-              display: true,
-            },
-            title: {
-              search: true,
-              display: true,
-            },
-            content: {
-              search: true,
-              display: true,
-            },
-            published: {
-              display: true,
-            },
-            authorId: {
-              display: true,
-            },
-            categories: {
-              display: true,
-            },
-          },
-        },
-      },
-      Category: {
-        toString: (category) => `${category.name}`,
-      },
-    },
-  };
-
   const adminRouter = await nextAdminRouter(prisma, schema, options);
   return adminRouter.run(req, res) as Promise<
     GetServerSidePropsResult<{ [key: string]: any }>

diff --git a/packages/next-admin/src/components/DataTable.tsx b/packages/next-admin/src/components/DataTable.tsx
@@ -15,25 +15,34 @@ import {
   TableRow,
 } from "./radix/Table";
 import { useRouter } from "next/compat/router";
-import { ListData, ListDataItem, ModelName } from "../types";
+import { ListData, ListDataItem, ModelName, Field, NextAdminOptions } from "../types";
 import { useConfig } from "../context/ConfigContext";
 
 interface DataTableProps {
-  columns: ColumnDef<ListDataItem<ModelName>, { id: string }>[];
+  columns: ColumnDef<ListDataItem<ModelName>>[];
   data: ListData<ModelName>;
   resource: ModelName;
+  options: (Required<NextAdminOptions>)['model'][ModelName]
 }
 
-export function DataTable({ columns, data, resource }: DataTableProps) {
+export function DataTable({ columns, data, resource, options }: DataTableProps) {
   const router = useRouter();
   const { basePath } = useConfig()
+  const hasDisplayField = options?.list?.fields && Object.values(options?.list?.fields).some(field => field.display)
+  const columnsVisibility = columns.reduce((acc, column) => {
+    // @ts-expect-error
+    const key = column.accessorKey as Field<typeof resource>;
+    acc[key] = options?.list?.fields[key]?.display ? true : false;
+    return acc;
+  }, {} as Record<Field<typeof resource>, boolean>)
+
   const table = useReactTable({
     data,
     manualSorting: true,
     columns,
     getCoreRowModel: getCoreRowModel(),
     initialState: {
-      columnVisibility: { _accessorKey: false },
+      columnVisibility: !hasDisplayField ? {} : columnsVisibility,
     },
   });
 
@@ -67,7 +76,7 @@ export function DataTable({ columns, data, resource }: DataTableProps) {
                 className="cursor-pointer hover:bg-indigo-50"
                 onClick={() => {
                   router?.push({
-                    pathname: `${basePath}/${resource}/${row.original._accessorKey}`,
+                    pathname: `${basePath}/${resource}/${row.original.id}`,
                   });
                 }}
               >

diff --git a/packages/next-admin/src/components/List.tsx b/packages/next-admin/src/components/List.tsx
@@ -4,7 +4,7 @@ import { useRouter } from "next/compat/router";
 import { ChangeEvent, useTransition } from "react";
 
 import { ITEMS_PER_PAGE } from "../config";
-import { AdminComponentOptions, ListData, ListDataItem, ListFieldsOptions, ModelName } from "../types";
+import { ListData, ListDataItem, ListFieldsOptions, ModelName, NextAdminOptions } from "../types";
 import Cell from "./Cell";
 import { DataTable } from "./DataTable";
 import ListHeader from "./ListHeader";
@@ -23,7 +23,7 @@ export type ListProps = {
   resource: ModelName;
   data: ListData<ModelName>;
   total: number;
-  options?: (Required<AdminComponentOptions<ModelName>>)['model'][ModelName]
+  options?: (Required<NextAdminOptions>)['model'][ModelName]
 };
 
 function List({ resource, data, total, options }: ListProps) {
@@ -103,6 +103,7 @@ function List({ resource, data, total, options }: ListProps) {
             resource={resource}
             data={data}
             columns={columns}
+            options={options}
           />
           {data.length ? (
             <div className="flex-1 flex items-center space-x-2 py-4">

diff --git a/packages/next-admin/src/types.ts b/packages/next-admin/src/types.ts
@@ -30,6 +30,7 @@ export type ListFieldsOptions<T extends ModelName> = {
   [P in Field<T>]?: {
     display?: true;
     search?: true;
+    formatter?: (item: ListDataItem<ModelName>) => ReactNode;
   };
 };
 
@@ -140,23 +141,6 @@ export type ListDataFieldValue =
     value: Date;
   };
 
-export type ListComponentFieldsOptions<T extends ModelName> = {
-  [P in Field<T>]?: {
-    formatter?: (item: ListDataItem<ModelName>) => ReactNode;
-  };
-};
-
-export type AdminComponentOptions<T extends ModelName> = {
-  model?: {
-    [P in T]?: {
-      toString?: (item: Model<P>) => string;
-      list?: {
-        fields: ListComponentFieldsOptions<P>;
-      };
-    };
-  };
-};
-
 export type AdminComponentProps = {
   basePath: string;
   schema: Schema;
@@ -171,7 +155,7 @@ export type AdminComponentProps = {
   resources?: ModelName[];
   total?: number;
   dmmfSchema: Prisma.DMMF.Field[];
-  options?: AdminComponentOptions<ModelName>;
+  options?: NextAdminOptions;
 };
 
 export type CustomUIProps = {

diff --git a/packages/next-admin/src/utils/prisma.ts b/packages/next-admin/src/utils/prisma.ts
@@ -127,17 +127,6 @@ export const getMappedDataList = async (prisma: PrismaClient, resource: ModelNam
 
   data = await findRelationInData(data, dmmfSchema?.fields);
 
-
-  const isIdDisplayed = options?.model?.[resource]?.list?.fields.id?.display;
-
-  data.forEach((item) => {
-    const id = item.id;
-    if (!isIdDisplayed) {
-      delete item.id;
-    }
-    item._accessorKey = id;
-  });
-
   return {
     data,
     total,