Merge pull request #36 from evmiguel/edit-fields

Edit fields

app/api/purchase/route.ts

@@ -31,6 +31,21 @@ export async function POST(request: NextRequest) {
     return NextResponse.json({result});
 }
 
+export async function PUT(request: NextRequest) {
+    const res = await request.json();
+    const { id, name, category } = res;
+    const result = await prisma.purchase.update({
+        where: {
+            id
+        },
+        data: {
+            name,
+            category
+        }
+    })
+    return NextResponse.json({ result })
+}
+
 export async function DELETE(request: NextRequest) {
     const res = await request.json()
     const { id } = res;

app/purchases/page.tsx

@@ -4,7 +4,6 @@ import { redirect } from "next/navigation";
 import Purchases from "@/components/Purchases";
 import AddPurchase from "@/components/AddPurchase";
 import Sidebar from "@/components/Sidebar";
-import FilterProvider from "../filter-provider";
 import { authOptions } from "../api/auth/[...nextauth]/options";
 
 async function getPurchases(email: string) {

components/EditPurchase/index.tsx

@@ -0,0 +1,80 @@
+import { Button } from "@/components/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import Link from "next/link"
+import { Purchase } from "../Purchases/columns"
+import { useRouter } from "next/navigation"
+
+type EditPurchaseProps = {
+    purchase: Purchase,
+    open: boolean,
+    openOnChange: (value: boolean) => void
+}
+
+export default function EditPurchase({ purchase, open, openOnChange }: EditPurchaseProps) {
+    const router = useRouter();
+
+    async function updatePurchase(formData: FormData) {
+
+        const data = {
+            id: purchase.id,
+            name: formData.get('name'),
+            category: formData.get('category')
+        }
+
+        try {
+            await fetch('/api/purchase', { 
+                method: 'PUT',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(data)
+            });
+            openOnChange(false);
+            router.refresh();
+        } catch (error) {
+            console.error(error);
+        }
+    }
+
+    return (
+        <Dialog open={open} onOpenChange={openOnChange}>
+            <DialogContent className="sm:max-w-[425px]">
+                <DialogHeader>
+                <DialogTitle>Edit Purchase</DialogTitle>
+                <DialogDescription>
+                    Change the name or category of your purchase. Hit save when you&apos;re done
+                </DialogDescription>
+                </DialogHeader>
+                <form action={updatePurchase}>
+                    <div className="grid gap-4 py-4">
+                        <div className="grid grid-cols-4 items-center gap-4">
+                            <Label htmlFor="name" className="text-right">
+                            Name
+                            </Label>
+                            <Input id="name" name="name" defaultValue={purchase.name} className="col-span-3" />
+                        </div>
+                        <div className="grid grid-cols-4 items-center gap-4">
+                            <Label htmlFor="category" className="text-right">
+                            Category
+                            </Label>
+                            <Input id="category" name="category" defaultValue={purchase.category as string} className="col-span-3" />
+                        </div>
+                    </div>
+                <DialogFooter>
+                    <Button type="submit">Save changes</Button>
+                </DialogFooter>
+                </form>
+            </DialogContent>
+        </Dialog>
+    )
+}

components/Purchases/columns.tsx

@@ -1,10 +1,17 @@
 "use client"
 
 import { ColumnDef } from "@tanstack/react-table"
-import { Button } from "@/components/ui/button";
-import { ArrowUpDown } from "lucide-react";
-import DeletePurchase from "../DeletePurchase";
+import { ArrowUpDown, MoreHorizontal } from "lucide-react";
+import { Button } from "@/components/ui/button"
 import dayjs from 'dayjs';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuLabel,
+    DropdownMenuSeparator,
+    DropdownMenuTrigger,
+  } from "@/components/ui/dropdown-menu";
 
 export type Purchase = {
     id: bigint,
@@ -70,11 +77,34 @@ export const columns: ColumnDef<Purchase>[] = [
             </div>,
     },
     {
-        id: "delete",
-        cell: ({ row }) => {
+        id: "row_actions",
+        cell: ({ table, row }) => {
             const purchase = row.original;
 
-            return <DeletePurchase id={purchase.id} />
+            return (
+                <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                        <Button variant="ghost" className="h-8 w-8 p-0">
+                        <span className="sr-only">Open menu</span>
+                        <MoreHorizontal className="h-4 w-4" />
+                        </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end">
+                        <DropdownMenuLabel>Actions</DropdownMenuLabel>
+                        <DropdownMenuItem onClick={() => {
+                            (table.options.meta as any).setCurrentPurchase(purchase);
+                            (table.options.meta as any).handleEditComponent(!(table.options.meta as any).editComponentOpen);
+                        }}>
+                            Edit Purchase
+                        </DropdownMenuItem>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem onClick={async () => await (table.options.meta as any).deletePurchase(purchase.id)}>
+                            Delete Purchase
+                        </DropdownMenuItem>
+                    </DropdownMenuContent>
+                </DropdownMenu>
+            )
+
         }
     }
 ]

components/Purchases/data-table.tsx

@@ -18,15 +18,24 @@ import {
     TableHeader,
     TableRow,
 } from "@/components/ui/table";
+import { Purchase } from "./columns";
 
 interface DataTableProps<TData, TValue> {
     columns: ColumnDef<TData, TValue>[]
-    data: TData[]
+    data: TData[],
+    editComponentOpen: boolean,
+    handleEditComponent: (open: boolean) => void,
+    deletePurchase: (id: bigint) => void,
+    setCurrentPurchase: (purchase: Purchase) => void
 }
 
 export function DataTable<TData, TValue>({
     columns,
     data,
+    editComponentOpen,
+    handleEditComponent,
+    deletePurchase,
+    setCurrentPurchase
   }: DataTableProps<TData, TValue>) {
     const [sorting, setSorting] = React.useState<SortingState>([])
 
@@ -38,7 +47,13 @@ export function DataTable<TData, TValue>({
       getSortedRowModel: getSortedRowModel(),
         state: {
         sorting,
-    }
+    },
+      meta: {
+        editComponentOpen,
+        handleEditComponent,
+        deletePurchase,
+        setCurrentPurchase
+      }
     })
 
     return (

components/Purchases/index.tsx

@@ -6,10 +6,15 @@ import { DataTable } from "./data-table"
 import dayjs from 'dayjs';
 import isoWeek from 'dayjs/plugin/isoWeek'
 import * as _ from "lodash";
-import { useContext } from "react";
+import { useContext, useState } from "react";
+import { useRouter } from "next/navigation";
+import EditPurchase from "../EditPurchase";
 
 dayjs.extend(isoWeek);
 
+// @ts-ignore
+BigInt.prototype.toJSON = function() { return this.toString() }
+
 interface PurchaseProps {
     purchases: Array<Purchase>
 }
@@ -38,6 +43,31 @@ const filterPurchases = (purchases: Array<Purchase>, filter: string) => {
 }
 
 export default function Purchases(props: PurchaseProps) {
+
+    const router = useRouter();
+
+    async function deletePurchase(id: bigint) {
+        const data = {
+            id
+        }
+
+        try {
+            await fetch('/api/purchase', { 
+                method: 'DELETE',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(data)
+            });
+            router.refresh();
+        } catch (error) {
+            console.error(error);
+        }
+    }
+
+    const [editComponentOpen, setEditComponentOpen] = useState(false);
+    const [currentPurchase, setCurrentPurchase] = useState({} as Purchase);
+
     const { purchases } = props;
 
     const context = useContext(FilterContext);
@@ -49,7 +79,15 @@ export default function Purchases(props: PurchaseProps) {
     return (
         <>
             <div className="container mx-auto text-center mb-10 mt-10">
-                <DataTable columns={columns} data={sortedPurchases}  />
+                <DataTable 
+                    columns={columns} 
+                    data={sortedPurchases} 
+                    editComponentOpen={editComponentOpen} 
+                    handleEditComponent={setEditComponentOpen}
+                    deletePurchase={deletePurchase}
+                    setCurrentPurchase={setCurrentPurchase}
+                />
+                <EditPurchase purchase={currentPurchase} open={editComponentOpen} openOnChange={setEditComponentOpen} />
             </div>
         </>
     )