From 228aa983e0062f585f6c2730ac6575185bf1fc68 Mon Sep 17 00:00:00 2001
From: Markus Thielker <mail.markus.thielker@gmail.com>
Date: Sun, 17 Mar 2024 12:00:32 +0100
Subject: [PATCH] N-FIN-42: show default category on entity page

---
 src/app/entities/columns.tsx                  | 27 ++++++++++++++++++-
 src/app/entities/page.tsx                     | 15 +++++++++++
 src/components/entityPageClientComponents.tsx |  7 ++---
 3 files changed, 45 insertions(+), 4 deletions(-)

diff --git a/src/app/entities/columns.tsx b/src/app/entities/columns.tsx
index 90b3754..c68da1b 100644
--- a/src/app/entities/columns.tsx
+++ b/src/app/entities/columns.tsx
@@ -1,12 +1,13 @@
 'use client';
 
 import { ColumnDef } from '@tanstack/react-table';
-import { Entity } from '@prisma/client';
+import { Category, Entity } from '@prisma/client';
 import { CellContext, ColumnDefTemplate } from '@tanstack/table-core';
 import { format } from 'date-fns';
 
 export const columns = (
     actionCell: ColumnDefTemplate<CellContext<Entity, unknown>>,
+    categories: Category[],
 ) => {
 
     return [
@@ -19,6 +20,30 @@ export const columns = (
             header: 'Type',
             size: 100,
         },
+        {
+            accessorKey: 'defaultCategoryId',
+            header: 'Default Category',
+            cell: ({row}) => {
+                const category = categories.find((category) => category.id === row.original.defaultCategoryId);
+                return (
+                    <>
+                        {
+                            category && (
+                                <div className="flex items-center space-x-4">
+                                    <svg className="h-5" fill={category?.color} viewBox="0 0 20 20"
+                                         xmlns="http://www.w3.org/2000/svg">
+                                        <circle cx="10" cy="10" r="10"/>
+                                    </svg>
+                                    <p>{category?.name ?? '-'}</p>
+                                </div>
+                            )
+                        }
+
+                    </>
+                );
+            },
+            size: 200,
+        },
         {
             accessorKey: 'createdAt',
             header: 'Created at',
diff --git a/src/app/entities/page.tsx b/src/app/entities/page.tsx
index 6f41ba5..f5b7d0a 100644
--- a/src/app/entities/page.tsx
+++ b/src/app/entities/page.tsx
@@ -23,9 +23,24 @@ export default async function EntitiesPage() {
         ],
     });
 
+    const categories = await prismaClient.category.findMany({
+        where: {
+            userId: user?.id,
+        },
+        orderBy: [
+            {
+                name: 'asc',
+            },
+            {
+                id: 'asc',
+            },
+        ],
+    });
+
     return (
         <EntityPageClientContent
             entities={entities}
+            categories={categories}
             onSubmit={entityCreateUpdate}
             onDelete={entityDelete}
             className="flex flex-col justify-center space-y-4"/>
diff --git a/src/components/entityPageClientComponents.tsx b/src/components/entityPageClientComponents.tsx
index 3845ee1..22b55db 100644
--- a/src/components/entityPageClientComponents.tsx
+++ b/src/components/entityPageClientComponents.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Entity } from '@prisma/client';
+import { Category, Entity } from '@prisma/client';
 import React, { useState } from 'react';
 import { CellContext } from '@tanstack/table-core';
 import { Button } from '@/components/ui/button';
@@ -27,8 +27,9 @@ import {
 import { useMediaQuery } from '@/lib/hooks/useMediaQuery';
 import { Drawer, DrawerContent, DrawerHeader, DrawerTitle, DrawerTrigger } from '@/components/ui/drawer';
 
-export default function EntityPageClientContent({entities, onSubmit, onDelete, className}: {
+export default function EntityPageClientContent({entities, categories, onSubmit, onDelete, className}: {
     entities: Entity[],
+    categories: Category[],
     onSubmit: (data: z.infer<typeof entityFormSchema>) => Promise<ActionResponse>,
     onDelete: (id: number) => Promise<ActionResponse>,
     className: string,
@@ -184,7 +185,7 @@ export default function EntityPageClientContent({entities, onSubmit, onDelete, c
             {/* Data Table */}
             <DataTable
                 className="w-full"
-                columns={columns(actionCell)}
+                columns={columns(actionCell, categories)}
                 data={filterEntities(entities, filter)}
                 pagination/>