Expenses CRUD operations

app/[slug]/dashboard/expenses/page.tsx

@@ -1,15 +1,44 @@
 /* Copyright (C) 2024 Manuel Bustillo*/
 
-import { lusitana } from '@/app/ui/fonts';
+'use client'
+
+import { AbstractApi } from '@/app/api/abstract-api';
+import { Expense, ExpenseSerializer } from '@/app/lib/expense';
+import { classNames } from '@/app/ui/components/button';
+import ExpenseFormDialog from '@/app/ui/components/expense-form-dialog';
 import ExpensesTable from '@/app/ui/expenses/table';
+import SkeletonTable from '@/app/ui/guests/skeleton-row';
+import { Suspense, useEffect, useState } from 'react';
 
 export default function Page() {
+  const refreshExpenses = () => {
+    new AbstractApi<Expense>().getAll(new ExpenseSerializer(), (expenses: Expense[]) => {
+      setExpenses(expenses);
+    });
+  }
+
+  const [expenses, setExpenses] = useState<Expense[]>([]);
+  const [expenseBeingEdited, setExpenseBeingEdited] = useState<Expense | undefined>(undefined);
+  useEffect(() => { refreshExpenses() }, []);
+
   return (
     <div className="w-full">
-      <div className="w-full items-center justify-between">
-        <h1 className={`${lusitana.className} text-2xl`}>Expenses</h1>
-        <h2 className={`${lusitana.className} text-xl`}>Summary</h2>
-        <ExpensesTable />
+      <div className="flex flex-col w-full items-center justify-between">
+        <button onClick={() => setExpenseBeingEdited({})} className={classNames('primary')}>Add new</button>
+        <ExpenseFormDialog
+          key={expenseBeingEdited?.id}
+          onCreate={() => { refreshExpenses(); setExpenseBeingEdited(undefined) }}
+          expense={expenseBeingEdited}
+          visible={expenseBeingEdited !== undefined}
+          onHide={() => { setExpenseBeingEdited(undefined) }}
+        />
+        <Suspense fallback={<SkeletonTable />}>
+          <ExpensesTable
+            expenses={expenses}
+            onUpdate={refreshExpenses}
+            onEdit={(expense) => setExpenseBeingEdited(expense)}
+          />
+        </Suspense>
       </div>
     </div>
   );

app/api/expenses.tsx

@@ -1,40 +0,0 @@
-// /* Copyright (C) 2024 Manuel Bustillo*/
-
-// import { Expense } from '@/app/lib/definitions';
-// import { getCsrfToken, getSlug } from '@/app/lib/utils';
-
-// export function loadExpenses(onLoad?: (expenses: Expense[]) => void) {
-//   fetch(`/api/${getSlug()}/expenses`)
-//     .then((response) => response.json())
-//     .then((data) => {
-//       onLoad && onLoad(data.map((record: any) => {
-//         return ({
-//           id: record.id,
-//           name: record.name,
-//           amount: record.amount,
-//           pricingType: record.pricing_type
-//         });
-//       }));
-//     }, (error) => {
-//       return [];
-//     });
-// }
-
-// export function updateExpense(expense: Expense) {
-//   fetch(`/api/${getSlug()}/expenses/${expense.id}`,
-//     {
-//       method: 'PUT',
-//       body: JSON.stringify({
-//         expense: {
-//           name: expense.name,
-//           amount: expense.amount,
-//           pricing_type: expense.pricingType,
-//         }
-//       }),
-//       headers: {
-//         'Content-Type': 'application/json',
-//         'X-CSRF-TOKEN': getCsrfToken(),
-//       }
-//     })
-//     .catch((error) => console.error(error));
-// }

app/lib/expense.tsx

@@ -1,7 +1,7 @@
 import { Serializable } from "../api/abstract-api";
 import { Entity } from "./definitions";
 
-export const pricingTypes = ['fixed', 'per person'] as const;
+export const pricingTypes = ['fixed', 'per_person'] as const;
 export type PricingType = typeof pricingTypes[number];
 
 export class Expense implements Entity {

app/ui/components/expense-form-dialog.tsx

@@ -0,0 +1,83 @@
+/* Copyright (C) 2024 Manuel Bustillo*/
+
+'use client';
+
+import { AbstractApi } from '@/app/api/abstract-api';
+import { Expense, ExpenseSerializer, PricingType, pricingTypes } from '@/app/lib/expense';
+import { capitalize } from '@/app/lib/utils';
+import { classNames } from '@/app/ui/components/button';
+import { Dialog } from 'primereact/dialog';
+import { Dropdown } from 'primereact/dropdown';
+import { FloatLabel } from 'primereact/floatlabel';
+import { InputText } from 'primereact/inputtext';
+import { useState } from 'react';
+
+export default function ExpenseFormDialog({ onCreate, onHide, expense, visible }: {
+  onCreate?: () => void,
+  onHide: () => void,
+  expense?: Expense,
+  visible: boolean,
+}) {
+
+  const [name, setName] = useState<string>(expense?.name || '');
+  const [amount, setAmount] = useState<number>(expense?.amount || 0);
+  const [pricingType, setPricingType] = useState<PricingType>(expense?.pricingType || 'fixed');
+
+  const api = new AbstractApi<Expense>();
+  const serializer = new ExpenseSerializer();
+
+  function resetForm() {
+    setName('');
+    setAmount(0);
+    setPricingType('fixed');
+  }
+
+  function submitGroup() {
+    if (expense?.id !== undefined) {
+      expense.name = name;
+      expense.amount = amount;
+      expense.pricingType = pricingType;
+
+      api.update(serializer, expense, () => {
+        resetForm();
+        onCreate && onCreate();
+      });
+    } else {
+
+      api.create(serializer, new Expense(undefined, name, amount, pricingType), () => {
+        resetForm();
+        onCreate && onCreate();
+      });
+    }
+  }
+
+  return (
+    <>
+
+      <Dialog header="Add/edit expense" visible={visible} style={{ width: '60vw' }} onHide={onHide}>
+        <div className="card flex justify-evenly py-5">
+          <FloatLabel>
+            <InputText id="name" className='rounded-sm' value={name} onChange={(e) => setName(e.target.value)} />
+            <label htmlFor="name">Name</label>
+          </FloatLabel>
+          <FloatLabel>
+            <InputText id="amount" className='rounded-sm' value={amount.toString()} onChange={(e) => setAmount(parseFloat(e.target.value))} />
+            <label htmlFor="amount">Amount</label>
+          </FloatLabel>
+          <FloatLabel>
+            <Dropdown id="pricingType" className='rounded-sm min-w-32' value={pricingType} onChange={(e) => setPricingType(e.target.value)} options={
+              pricingTypes.map((type) => {
+                return { label: capitalize(type), value: type };
+              })
+            } />
+            <label htmlFor="pricingType">Pricing type</label>
+          </FloatLabel>
+
+          <button className={classNames('primary')} onClick={submitGroup} disabled={!(name.length > 0)}>
+            {expense?.id !== undefined ? 'Update' : 'Create'}
+          </button>
+        </div>
+      </Dialog>
+    </>
+  );
+}

app/ui/expenses/table.tsx

@@ -2,45 +2,43 @@
 
 'use client'
 
-import { useState } from "react";
-import InlineTextField from "../components/form/inlineTextField";
-import TableOfContents from "../components/table-of-contents";
 import { AbstractApi } from '@/app/api/abstract-api';
 import { Expense, ExpenseSerializer } from '@/app/lib/expense';
-
-export default function ExpensesTable() {
-  const [expenses, setExpenses] = useState<Array<Expense>>([]);
-  const [expensesLoaded, setExpensesLoaded] = useState(false);
+import { PencilIcon, TrashIcon } from '@heroicons/react/24/outline';
+import TableOfContents from "../components/table-of-contents";
 
 
-  function refreshExpenses() {
-    new AbstractApi<Expense>().getAll(new ExpenseSerializer(), (expenses: Expense[]) => {    
-      setExpenses(expenses);
-      setExpensesLoaded(true);
-    });
-  }
-
-  !expensesLoaded && refreshExpenses();
+export default function ExpensesTable({ expenses, onUpdate, onEdit }: {
+  expenses: Expense[],
+  onUpdate: () => void,
+  onEdit: (expense: Expense) => void,
+}) {
 
   const api = new AbstractApi<Expense>();
   const serializer = new ExpenseSerializer();
 
   return (
     <TableOfContents
-      headers={['Name', 'Amount (€)', 'Pricing Type']}
+      headers={['Name', 'Amount (€)', 'Pricing Type', 'Actions']}
       caption='Expenses'
       elements={expenses}
       rowRender={(expense) => (
         <tr key={expense.id} className="bg-white border-b odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800">
           <th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
-            <InlineTextField initialValue={expense.name} onChange={(value) => { expense.name = value; updateExpense(expense) }} />
+            {expense.name}
           </th>
           <td className="px-6 py-4">
-            <InlineTextField initialValue={expense.amount.toString()} onChange={(value) => { expense.amount = parseFloat(value); updateExpense(expense) }} />
+            {expense.amount}
           </td>
           <td>
             {expense.pricingType}
           </td>
+          <td>
+            <div className="flex flex-row items-center">
+              <TrashIcon className='size-6 cursor-pointer' onClick={() => { api.destroy(serializer, expense, onUpdate) }} />
+              <PencilIcon className='size-6 cursor-pointer' onClick={() => onEdit(expense)} />
+            </div>
+          </td>
         </tr>
       )}
     />