Upgrade next-admin to 3.2.5 (#110)

* Change versions of next-admin * Upgrade next-admin to 3.2.1 with parse patch * Fix delete and set image as text field * Upgrade next-admin 3.2.5
premieroctet · Feb 27, 2024 · d5c8698 · d5c8698
1 parent b171973
commit d5c8698
Show file tree

Hide file tree

Showing 7 changed files with 228 additions and 103 deletions.
diff --git a/package.json b/package.json
@@ -27,7 +27,7 @@
     "@heroicons/react": "^2.0.16",
     "@next-auth/prisma-adapter": "^1.0.5",
     "@postlight/parser": "^2.2.3",
-    "@premieroctet/next-admin": "^3.0.0",
+    "@premieroctet/next-admin": "^3.2.5",
     "@prisma/client": "^4.11.0",
     "@radix-ui/react-dialog": "^1.0.3",
     "@radix-ui/react-navigation-menu": "^1.1.2",

diff --git a/src/actions/nextadmin.ts b/src/actions/nextadmin.ts
@@ -1,12 +1,19 @@
 'use server';
 import client from '@/lib/db';
 import { options } from '@/utils/nextadmin';
-import { ActionParams } from '@premieroctet/next-admin';
-import { submitForm } from '@premieroctet/next-admin/dist/actions';
+import { ActionParams, ModelName } from '@premieroctet/next-admin';
+import { deleteResourceItems, submitForm } from '@premieroctet/next-admin/dist/actions';
 
 export const submitFormAction = async (
   params: ActionParams,
   formData: FormData
 ) => {
   return submitForm({ ...params, options, prisma: client }, formData);
 };
+
+export const deleteItem = async (
+  model: ModelName,
+  ids: string[] | number[]
+) => {
+  return deleteResourceItems(client, model, ids);
+};
diff --git a/src/app/(admin)/admin/[[...nextadmin]]/page.tsx b/src/app/(admin)/admin/[[...nextadmin]]/page.tsx
@@ -1,35 +1,22 @@
-import { authOptions } from '@/pages/api/auth/[...nextauth]';
-import client from '@/lib/db';
-import { getServerSession } from 'next-auth';
-import { redirect } from 'next/navigation';
-import { NextAdmin } from '@premieroctet/next-admin';
-import { getPropsFromParams } from '@premieroctet/next-admin/dist/appRouter';
-import '@/theme/admin.css';
-import '@premieroctet/next-admin/dist/styles.css';
-import schema from '../../../../../prisma/json-schema/json-schema.json';
-import { options } from '@/utils/nextadmin';
-import { submitFormAction } from '@/actions/nextadmin';
+import { deleteItem, submitFormAction } from '@/actions/nextadmin';
+import Dashboard, { DashboardProps } from '@/components/admin/Dashboard';
 import {
   linksByDay,
   linksByDomain,
   newDigestByMonth,
   newUsersByMonth,
 } from '@/lib/adminQueries';
-import { Digest, Team } from '@prisma/client';
-import { Card, Col, Grid, Metric, Text } from '@tremor/react';
-import DataOverTime from '@/components/admin/widgets/DataOverTime';
-import LinksByWebsite from '@/components/admin/widgets/LinksByWebsite';
-import LinksOverTime from '@/components/admin/widgets/LinksOverTime';
+import client from '@/lib/db';
+import { authOptions } from '@/pages/api/auth/[...nextauth]';
+import '@/theme/admin.css';
+import { options } from '@/utils/nextadmin';
+import { NextAdmin } from '@premieroctet/next-admin';
+import { getPropsFromParams } from '@premieroctet/next-admin/dist/appRouter';
+import '@premieroctet/next-admin/dist/styles.css';
+import { getServerSession } from 'next-auth';
+import { redirect } from 'next/navigation';
+import schema from '../../../../../prisma/json-schema/json-schema.json';
 
-type DashboardProps = {
-  newUsersByMonth: Awaited<ReturnType<typeof newUsersByMonth>>;
-  newDigestByMonth: Awaited<ReturnType<typeof newDigestByMonth>>;
-  linksByDomain: Awaited<ReturnType<typeof linksByDomain>>;
-  linksCount: number;
-  latestTeam: Team | null;
-  latestDigest: Digest | null;
-  linksByDay: Awaited<ReturnType<typeof linksByDay>>;
-};
 
 export default async function AdminPage({
   params,
@@ -52,76 +39,33 @@ export default async function AdminPage({
     prisma: client,
     schema,
     action: submitFormAction,
+    deleteAction: deleteItem
   });
 
   const dashboardProps: DashboardProps | undefined = !params.nextadmin
     ? {
-        newUsersByMonth: await newUsersByMonth(),
-        newDigestByMonth: await newDigestByMonth(),
-        linksByDomain: await linksByDomain(),
-        linksByDay: await linksByDay(),
-        linksCount: await client.link.count(),
-        latestDigest: await client.digest.findFirst({
-          where: { publishedAt: { not: null } },
-          orderBy: { createdAt: 'desc' },
-          include: {
-            team: true,
-          },
-        }),
-        latestTeam: await client.team.findFirst({
-          orderBy: { createdAt: 'desc' },
-        }),
-      }
+      newUsersByMonth: await newUsersByMonth(),
+      newDigestByMonth: await newDigestByMonth(),
+      linksByDomain: await linksByDomain(),
+      linksByDay: await linksByDay(),
+      linksCount: await client.link.count(),
+      latestDigest: await client.digest.findFirst({
+        where: { publishedAt: { not: null } },
+        orderBy: { createdAt: 'desc' },
+        include: {
+          team: true,
+        },
+      }),
+      latestTeam: await client.team.findFirst({
+        orderBy: { createdAt: 'desc' },
+      }),
+    }
     : undefined;
 
   return (
     <NextAdmin
       {...props}
-      dashboard={
-        dashboardProps && (
-          <Grid numItems={1} numItemsSm={2} numItemsLg={3} className="gap-2">
-            <Col numColSpan={1} numColSpanLg={2}>
-              <DataOverTime
-                data={{
-                  newUsersByMonth: dashboardProps?.newUsersByMonth,
-                  newDigestByMonth: dashboardProps?.newDigestByMonth,
-                }}
-              />
-            </Col>
-            <LinksByWebsite data={dashboardProps.linksByDomain} />
-            <Col>
-              <Card>
-                <Text>Dernier digest publié</Text>
-                <Metric>
-                  <a
-                    // @ts-expect-error
-                    href={`${dashboardProps.latestDigest?.team?.slug}/${dashboardProps.latestDigest?.slug}`}
-                    target="_blank"
-                  >
-                    {dashboardProps.latestDigest?.title} par {/* @ts-ignore */}
-                    {dashboardProps.latestDigest?.team.name}
-                  </a>
-                </Metric>
-              </Card>
-            </Col>
-            <Card>
-              <Text>Dernière team créée</Text>
-              <Metric>
-                <a href={`${dashboardProps.latestTeam?.slug}`} target="_blank">
-                  {dashboardProps.latestTeam?.name}
-                </a>
-              </Metric>
-            </Card>
-            <Card>
-              <Text>Total des liens</Text>
-              <Metric>{dashboardProps?.linksCount}</Metric>
-            </Card>
-            <Col numColSpan={3} numColSpanLg={3}>
-              <LinksOverTime data={{ linksByDay: dashboardProps.linksByDay }} />
-            </Col>
-          </Grid>
-        )
-      }
+      dashboard={dashboardProps && <Dashboard {...dashboardProps} />}
     />
   );
 }
diff --git a/src/components/admin/Dashboard.tsx b/src/components/admin/Dashboard.tsx
@@ -0,0 +1,65 @@
+import { linksByDay, linksByDomain, newDigestByMonth, newUsersByMonth } from "@/lib/adminQueries";
+import { Digest, Team } from "@prisma/client";
+import { Card, Col, Grid, Metric, Text } from "@tremor/react";
+import DataOverTime from "./widgets/DataOverTime";
+import LinksByWebsite from "./widgets/LinksByWebsite";
+import LinksOverTime from "./widgets/LinksOverTime";
+
+
+export type DashboardProps = {
+  newUsersByMonth: Awaited<ReturnType<typeof newUsersByMonth>>;
+  newDigestByMonth: Awaited<ReturnType<typeof newDigestByMonth>>;
+  linksByDomain: Awaited<ReturnType<typeof linksByDomain>>;
+  linksCount: number;
+  latestTeam: Team | null;
+  latestDigest: Digest | null;
+  linksByDay: Awaited<ReturnType<typeof linksByDay>>;
+};
+
+const Dashboard = (dashboardProps: DashboardProps) => {
+  return (
+    <Grid numItems={1} numItemsSm={2} numItemsLg={3} className="gap-2">
+      <Col numColSpan={1} numColSpanLg={2}>
+        <DataOverTime
+          data={{
+            newUsersByMonth: dashboardProps?.newUsersByMonth,
+            newDigestByMonth: dashboardProps?.newDigestByMonth,
+          }}
+        />
+      </Col>
+      <LinksByWebsite data={dashboardProps.linksByDomain} />
+      <Col>
+        <Card>
+          <Text>Dernier digest publié</Text>
+          <Metric>
+            <a
+              // @ts-expect-error
+              href={`${dashboardProps.latestDigest?.team?.slug}/${dashboardProps.latestDigest?.slug}`}
+              target="_blank"
+            >
+              {dashboardProps.latestDigest?.title} par {/* @ts-ignore */}
+              {dashboardProps.latestDigest?.team.name}
+            </a>
+          </Metric>
+        </Card>
+      </Col>
+      <Card>
+        <Text>Dernière team créée</Text>
+        <Metric>
+          <a href={`${dashboardProps.latestTeam?.slug}`} target="_blank">
+            {dashboardProps.latestTeam?.name}
+          </a>
+        </Metric>
+      </Card>
+      <Card>
+        <Text>Total des liens</Text>
+        <Metric>{dashboardProps?.linksCount}</Metric>
+      </Card>
+      <Col numColSpan={3} numColSpanLg={3}>
+        <LinksOverTime data={{ linksByDay: dashboardProps.linksByDay }} />
+      </Col>
+    </Grid>
+  )
+}
+
+export default Dashboard
diff --git a/src/utils/nextadmin.ts b/src/utils/nextadmin.ts
@@ -4,28 +4,105 @@ export const options: NextAdminOptions = {
   basePath: '/admin',
   model: {
     User: {
+      aliases: {
+        emailVerified: 'Email verified date',
+        defaultTeam: 'Default team',
+      },
       toString: (user) => user.email ?? user.id,
       list: {
         display: ['id', 'email', 'name', 'role', 'createdAt'],
-        search: ['email', 'name'],
+        search: ['id', 'email', 'name'],
+        fields: {
+          createdAt: {
+            formatter: (date) => new Date(date).toLocaleString('fr'),
+          },
+        }
+      },
+      edit: {
+        display: ['id', 'createdAt', 'email', 'name', 'emailVerified', 'accounts', 'role', 'defaultTeam'],
+        fields: {
+          defaultTeam: {
+            optionFormatter: (team) => team?.name!
+          },
+        },
       },
     },
     Team: {
+      aliases: {
+        bookmarks: 'Links',
+        createdAt: 'Created at',
+        slackToken: 'Slack token',
+        slackTeamId: 'Slack team',
+        typefullyToken: 'Typefully token',
+        apiKey: 'API key',
+        nextSuggestedDigestTitle: 'Next suggested digest title',
+        subscriptionId: 'Subscription',
+      },
       list: {
         display: ['id', 'name', 'memberships', 'createdAt'],
         search: ['name'],
+        fields: {
+          createdAt: {
+            formatter: (date) => new Date(date).toLocaleString('fr'),
+          }
+        }
+      },
+      edit: {
+        fields: {
+          memberships: {
+            optionFormatter: (membership) => membership?.user?.email ?? `User ${membership?.user?.id?.slice(0, 5)}...`
+          },
+          bookmarks: {
+            optionFormatter: (bookmark) => bookmark.link.title ?? `Bookmark ${bookmark?.id?.slice(0, 5)}...`
+          },
+          color: {
+            format: 'color'
+          },
+          apiKey: {
+            format: 'password'
+          }
+        }
       },
     },
     Link: {
+      aliases: {
+        bookmark: 'Teams',
+      },
       list: {
         display: ['id', 'title', 'description', 'url'],
         search: ['url'],
       },
+      edit: {
+        fields: {
+          url: {
+            format: 'uri'
+          },
+          bookmark: {
+            optionFormatter: (bookmark) => bookmark.team.name ?? `Bookmark ${bookmark?.id?.slice(0, 5)}...`
+          },
+        }
+      },
     },
     Digest: {
+      toString: (digest) => digest.title ?? digest.id,
       list: {
         display: ['id', 'title', 'description', 'isFeatured', 'createdAt'],
+        fields: {
+          createdAt: {
+            formatter: (date) => new Date(date).toLocaleString('fr'),
+          }
+        }
       },
+      edit: {
+        fields: {
+          team: {
+            optionFormatter: (team) => team?.name!
+          },
+          digestBlocks: {
+            optionFormatter: (digestBlock) => digestBlock.title ?? `DigestBlock ${digestBlock?.id?.slice(0, 5)}...`
+          },
+        }
+      }
     },
   },
 };
diff --git a/tailwind.admin.config.js b/tailwind.admin.config.js
@@ -2,7 +2,7 @@
 
 module.exports = {
   content: [
-    './node_modules/@premieroctet/next-admin/src/**/*.{js,ts,jsx,tsx}',
+    './node_modules/@premieroctet/next-admin/dist/**/*.{js,ts,jsx,tsx}',
     './node_modules/@tremor/**/*.{js,ts,jsx,tsx}',
     './src/components/admin/**/*.{js,ts,jsx,tsx}',
   ],