From 883c47bdce6a3c1a25434512d58c7ed2bf4edbdb Mon Sep 17 00:00:00 2001
From: PxlLoewe <72106766+PxlLoewe@users.noreply.github.com>
Date: Sun, 16 Feb 2025 13:10:03 +0100
Subject: [PATCH] added User edit

---
 apps/hub/app/(app)/admin/user/[id]/page.tsx   | 22 +++++++++++++++++
 .../app/(app)/admin/{users => user}/page.tsx  |  6 ++---
 apps/hub/app/_components/PaginatedTable.tsx   |  9 ++++++-
 apps/hub/app/_components/Table.tsx            | 24 ++++++++++++++++++-
 apps/hub/app/_components/ui/Nav.tsx           |  2 +-
 5 files changed, 56 insertions(+), 7 deletions(-)
 create mode 100644 apps/hub/app/(app)/admin/user/[id]/page.tsx
 rename apps/hub/app/(app)/admin/{users => user}/page.tsx (87%)

diff --git a/apps/hub/app/(app)/admin/user/[id]/page.tsx b/apps/hub/app/(app)/admin/user/[id]/page.tsx
new file mode 100644
index 00000000..19f0a092
--- /dev/null
+++ b/apps/hub/app/(app)/admin/user/[id]/page.tsx
@@ -0,0 +1,22 @@
+import { PrismaClient } from '@repo/db';
+
+export default async ({ params }: { params: Promise<{ id: string }> }) => {
+  const prisma = new PrismaClient();
+  const { id } = await params;
+
+  const user = await prisma.user.findUnique({
+    where: {
+      id: id,
+    },
+  });
+  console.log(user);
+  return (
+    <div>
+      <h1>
+        {user?.firstname} {user?.lastname}
+      </h1>
+      <p>{user?.email}</p>
+      {/* TODO: Hier Nutzerdaten bearbeiten */}
+    </div>
+  );
+};
diff --git a/apps/hub/app/(app)/admin/users/page.tsx b/apps/hub/app/(app)/admin/user/page.tsx
similarity index 87%
rename from apps/hub/app/(app)/admin/users/page.tsx
rename to apps/hub/app/(app)/admin/user/page.tsx
index 14d0a87c..b6a9b4a2 100644
--- a/apps/hub/app/(app)/admin/users/page.tsx
+++ b/apps/hub/app/(app)/admin/user/page.tsx
@@ -1,8 +1,10 @@
+import Link from 'next/link';
 import { PaginatedTable } from '../../../_components/PaginatedTable';
 
 export default async () => {
   return (
     <PaginatedTable
+      showEditButton
       prismaModel="user"
       columns={[
         {
@@ -21,10 +23,6 @@ export default async () => {
           header: 'Email',
           accessorKey: 'email',
         },
-        {
-          header: 'Role',
-          accessorKey: 'role',
-        },
       ]}
     />
   );
diff --git a/apps/hub/app/_components/PaginatedTable.tsx b/apps/hub/app/_components/PaginatedTable.tsx
index bc54e3b8..9b23ec4b 100644
--- a/apps/hub/app/_components/PaginatedTable.tsx
+++ b/apps/hub/app/_components/PaginatedTable.tsx
@@ -8,11 +8,13 @@ interface PaginatedTableProps<TData>
   extends Omit<SortableTableProps<TData>, 'data'> {
   prismaModel: keyof PrismaClient;
   rowsPerPage?: number;
+  showEditButton?: boolean;
 }
 
 export function PaginatedTable<TData>({
   prismaModel,
   rowsPerPage = 10,
+  showEditButton = false,
   ...restProps
 }: PaginatedTableProps<TData>) {
   const [data, setData] = useState<TData[]>([]);
@@ -30,7 +32,12 @@ export function PaginatedTable<TData>({
 
   return (
     <div className="space-y-4">
-      <SortableTable data={data} {...restProps} />
+      <SortableTable
+        data={data}
+        prismaModel={prismaModel}
+        showEditButton={showEditButton}
+        {...restProps}
+      />
       <Pagination
         totalPages={Math.ceil(total / rowsPerPage)}
         page={page}
diff --git a/apps/hub/app/_components/Table.tsx b/apps/hub/app/_components/Table.tsx
index 4b33f6d6..e63373d0 100644
--- a/apps/hub/app/_components/Table.tsx
+++ b/apps/hub/app/_components/Table.tsx
@@ -9,21 +9,43 @@ import {
   flexRender,
 } from '@tanstack/react-table';
 import { ArrowLeft, ArrowRight, ChevronDown, ChevronUp } from 'lucide-react'; // Icons for sorting
+import Link from 'next/link';
+import { PrismaClient } from '@repo/db';
 
 export interface SortableTableProps<TData> {
   data: TData[];
   columns: ColumnDef<TData>[];
+  showEditButton?: boolean;
+  prismaModel?: keyof PrismaClient;
 }
 
 export default function SortableTable<TData>({
   data,
   columns,
+  prismaModel,
+  showEditButton,
 }: SortableTableProps<TData>) {
   const [sorting, setSorting] = useState<SortingState>([]);
 
   const table = useReactTable({
     data,
-    columns,
+    columns: showEditButton
+      ? [
+          ...columns,
+          {
+            header: 'Actions',
+            cell: ({ row }) => (
+              <div className="flex items-center gap-1">
+                <Link
+                  href={`/admin/${prismaModel as string}/${(row.original as any).id}`}
+                >
+                  <button className="btn">Edit</button>
+                </Link>
+              </div>
+            ),
+          },
+        ]
+      : columns,
     getCoreRowModel: getCoreRowModel(),
     getSortedRowModel: getSortedRowModel(),
     onSortingChange: setSorting,
diff --git a/apps/hub/app/_components/ui/Nav.tsx b/apps/hub/app/_components/ui/Nav.tsx
index 3c74ba35..1e800aad 100644
--- a/apps/hub/app/_components/ui/Nav.tsx
+++ b/apps/hub/app/_components/ui/Nav.tsx
@@ -29,7 +29,7 @@ export const VerticalNav = () => {
             </summary>
             <ul>
               <li>
-                <Link href="/admin/users">User</Link>
+                <Link href="/admin/user">User</Link>
               </li>
             </ul>
           </details>