N-FIN-42: add default category to entity (#53)

Resolves #42

prisma/migrations/20240317102723_add_default_category_to_entity/migration.sql

@@ -0,0 +1,7 @@
+-- AlterTable
+ALTER TABLE "entities"
+    ADD COLUMN "default_category_id" INTEGER;
+
+-- AddForeignKey
+ALTER TABLE "entities"
+    ADD CONSTRAINT "entities_default_category_id_fkey" FOREIGN KEY ("default_category_id") REFERENCES "categories" ("id") ON DELETE SET NULL ON UPDATE CASCADE;

prisma/schema.prisma

@@ -34,13 +34,15 @@ model Session {
 }
 
 model Entity {
-  id        Int        @id @default(autoincrement())
+  id                Int        @id @default(autoincrement())
-  userId    String     @map("user_id")
+  userId            String     @map("user_id")
-  user      User       @relation(fields: [userId], references: [id])
+  user              User       @relation(fields: [userId], references: [id])
-  name      String
+  name              String
-  type      EntityType
+  type              EntityType
-  createdAt DateTime   @default(now()) @map("created_at")
+  defaultCategory   Category?  @relation(fields: [defaultCategoryId], references: [id])
-  updatedAt DateTime   @updatedAt @map("updated_at")
+  defaultCategoryId Int?       @map("default_category_id")
+  createdAt         DateTime   @default(now()) @map("created_at")
+  updatedAt         DateTime   @updatedAt @map("updated_at")
 
   paymentsAsPayor Payment[] @relation("PayorEntity")
   paymentsAsPayee Payment[] @relation("PayeeEntity")
@@ -84,6 +86,7 @@ model Category {
   updatedAt DateTime @updatedAt @map("updated_at")
 
   payments Payment[]
+  Entity   Entity[]
 
   @@unique(fields: [userId, name])
   @@map("categories")

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',

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"/>

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,
@@ -146,6 +147,7 @@ export default function EntityPageClientContent({entities, onSubmit, onDelete, c
                                 </DialogHeader>
                                 <EntityForm
                                     value={selectedEntity}
+                                    categories={categories}
                                     onSubmit={handleSubmit}
                                     className="grid grid-cols-1 md:grid-cols-2 gap-4 py-4"/>
                             </DialogContent>
@@ -167,6 +169,7 @@ export default function EntityPageClientContent({entities, onSubmit, onDelete, c
                                 </DrawerHeader>
                                 <EntityForm
                                     value={selectedEntity}
+                                    categories={categories}
                                     onSubmit={handleSubmit}
                                     className="grid grid-cols-1 md:grid-cols-2 gap-4 py-4"/>
                             </DrawerContent>
@@ -184,7 +187,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/>
 

src/components/form/entityForm.tsx

@@ -12,11 +12,13 @@ import { useRouter } from 'next/navigation';
 import { toast } from 'sonner';
 import { sonnerContent } from '@/components/ui/sonner';
 import { entityFormSchema } from '@/lib/form-schemas/entityFormSchema';
-import { Entity, EntityType } from '@prisma/client';
+import { Category, Entity, EntityType } from '@prisma/client';
 import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { AutoCompleteInput } from '@/components/ui/auto-complete-input';
 
-export default function EntityForm({value, onSubmit, className}: {
+export default function EntityForm({value, categories, onSubmit, className}: {
     value: Entity | undefined,
+    categories: Category[],
     onSubmit: (data: z.infer<typeof entityFormSchema>) => Promise<ActionResponse>
     className?: string
 }) {
@@ -29,6 +31,7 @@ export default function EntityForm({value, onSubmit, className}: {
             id: value?.id ?? undefined,
             name: value?.name ?? '',
             type: value?.type ?? EntityType.Entity,
+            defaultCategoryId: value?.defaultCategoryId ?? undefined,
         },
     });
 
@@ -40,6 +43,13 @@ export default function EntityForm({value, onSubmit, className}: {
         }
     };
 
+    const categoriesMapped = categories?.map((category) => {
+        return {
+            label: category.name,
+            value: category.id,
+        };
+    }) ?? [];
+
     return (
         <Form {...form}>
             <form autoComplete="off" onSubmit={form.handleSubmit(handleSubmit)}>
@@ -94,6 +104,22 @@ export default function EntityForm({value, onSubmit, className}: {
                             </FormItem>
                         )}
                     />
+                    <FormField
+                        control={form.control}
+                        name="defaultCategoryId"
+                        render={({field}) => (
+                            <FormItem>
+                                <FormLabel>Category</FormLabel>
+                                <FormControl>
+                                    <AutoCompleteInput
+                                        placeholder="Select category"
+                                        items={categoriesMapped}
+                                        {...field} />
+                                </FormControl>
+                                <FormMessage/>
+                            </FormItem>
+                        )}
+                    />
                 </div>
                 <Button type="submit" className="w-full">{value?.id ? 'Update Entity' : 'Create Entity'}</Button>
             </form>

src/components/form/paymentForm.tsx

@@ -166,7 +166,17 @@ export default function PaymentForm({value, entities, categories, onSubmit, clas
                                         placeholder="Select payee"
                                         items={entitiesMapped}
                                         next={categoryRef}
-                                        {...field} />
+                                        {...field}
+                                        onChange={(e) => {
+                                            field.onChange(e);
+                                            if (e && e.target.value) {
+                                                const entity = entities.find((entity) => entity.id === Number(e.target.value));
+                                                console.log(entity?.defaultCategoryId);
+                                                if (entity?.defaultCategoryId !== null) {
+                                                    form.setValue('categoryId', entity?.defaultCategoryId);
+                                                }
+                                            }
+                                        }}/>
                                 </FormControl>
                                 <FormMessage/>
                             </FormItem>

src/components/ui/auto-complete-input.tsx

@@ -13,12 +13,12 @@ export interface AutoCompleteInputProps
 const AutoCompleteInput = React.forwardRef<HTMLInputElement, AutoCompleteInputProps>(
     ({className, type, ...props}, ref) => {
 
-        const [value, setValue] = useState(getInitialValue());
+        const [value, setValue] = useState(getNameOfPropValue());
         const [open, setOpen] = useState(false);
         const [lastKey, setLastKey] = useState('');
         const [filteredItems, setFilteredItems] = useState(props.items);
 
-        function getInitialValue() {
+        function getNameOfPropValue() {
 
             if (!props.items) {
                 return '';
@@ -50,6 +50,15 @@ const AutoCompleteInput = React.forwardRef<HTMLInputElement, AutoCompleteInputPr
             }
         }, [filteredItems]);
 
+        useEffect(() => {
+            console.log('Prop value changed', value, props.value);
+            if (props.value) {
+                setValue(getNameOfPropValue());
+            } else {
+                setValue('');
+            }
+        }, [props.value]);
+
         return (
             <div className="relative">
                 <input

src/lib/actions/entityCreateUpdate.ts

@@ -9,6 +9,7 @@ export default async function entityCreateUpdate({
     id,
     name,
     type,
+    defaultCategoryId,
 }: z.infer<typeof entityFormSchema>): Promise<ActionResponse> {
     'use server';
 
@@ -32,6 +33,7 @@ export default async function entityCreateUpdate({
                     data: {
                         name: name,
                         type: type,
+                        defaultCategoryId: defaultCategoryId,
                     },
                 },
             );
@@ -47,6 +49,7 @@ export default async function entityCreateUpdate({
                     userId: user.id,
                     name: name,
                     type: type,
+                    defaultCategoryId: defaultCategoryId,
                 },
             });
 

src/lib/form-schemas/entityFormSchema.ts

@@ -5,4 +5,5 @@ export const entityFormSchema = z.object({
     id: z.number().positive().optional(),
     name: z.string().min(1).max(32),
     type: z.nativeEnum(EntityType),
+    defaultCategoryId: z.number().positive().optional(),
 });