Basic API consumption support and refactored UI to use material (#1)

Co-authored-by: Joe Arndt <jmarndt@users.noreply.github.com>
Reviewed-on: #1

src/app/components/expense/expense.component.ts

@@ -0,0 +1,109 @@
+import { Component, model, signal, viewChild } from '@angular/core';
+import { MatCardModule } from '@angular/material/card';
+import { MatButtonModule } from '@angular/material/button';
+import { CreateExpense, Expense, ExpenseService, UpdateExpense } from '../../services/expense.service';
+import { MatIcon } from '@angular/material/icon';
+import { ExpenseForm, ExpenseFormComponent } from './expense-form/expense-form.component';
+import { CurrencyPipe, DatePipe } from '@angular/common';
+import { Temporal } from '@js-temporal/polyfill';
+import { SnackBarService } from '../../services/snack-bar';
+
+@Component({
+  selector: 'app-expense',
+  imports: [MatCardModule, MatButtonModule, MatIcon, ExpenseFormComponent, DatePipe, CurrencyPipe],
+  providers: [],
+  templateUrl: './expense.component.html',
+  styleUrl: './expense.component.scss'
+})
+export class ExpenseComponent {
+  private form = viewChild(ExpenseFormComponent);
+
+  public editingExpense = signal(false);
+  public savingExpense = signal(false);
+
+  public expense = model<Expense>();
+  public formValid = model(false);
+  public formDirty = model(false);
+  public formData = model<ExpenseForm>();
+
+  public constructor(private readonly expenseService: ExpenseService,
+                     private readonly snackBar: SnackBarService) { }
+
+  public editClick(): void {
+    this.editingExpense.set(true);
+  }
+
+  public async addClick(): Promise<void> {
+    const form = this.formData()!;
+    const postExpense: CreateExpense = {
+      date: this.dateToPlainDate(form.date),
+      cents: form.cents,
+      categoryId: form.category.id,
+      note: !!form.note ? form.note : undefined,
+      merchantId: !!form.merchant ? form.merchant.id : undefined,
+      tagIds: form.tags.map(tag => tag.id)
+    };
+    this.savingExpense.set(true);
+    const snackId = this.snackBar.staticBar('Tracking new expense...');
+    try {
+      await this.expenseService.postExpense(postExpense);
+      this.resetForm();
+      this.snackBar.dismiss(snackId);
+      this.snackBar.autoBar('Expense tracked!');
+    }
+    catch (error) {
+      this.snackBar.dismiss(snackId);
+      this.snackBar.dismissableBar('Error: '); // TODO
+    }
+    finally {
+      this.savingExpense.set(false);
+    }
+  }
+
+  public resetAddClick(): void {
+    this.resetForm(true);
+  }
+
+  public async updateClick(): Promise<void> {
+    const form = this.formData()!;
+    const putExpense: UpdateExpense = {
+      id: this.expense()!.id,
+      date: this.dateToPlainDate(form.date),
+      cents: form.cents,
+      categoryId: form.category.id,
+      note: !!form.note ? form.note : undefined,
+      merchantId: !!form.merchant ? form.merchant.id : undefined,
+      tagIds: form.tags.map(tag => tag.id)
+    };
+    this.savingExpense.set(true);
+    const snackId = this.snackBar.staticBar('Updating expense...');
+    try {
+      const expense = await this.expenseService.updateExpense(putExpense);
+      this.expense.set(expense);
+      this.form()?.refresh(expense);
+      this.editingExpense.set(false);
+      this.snackBar.dismiss(snackId);
+      this.snackBar.autoBar('Expense updated!');
+    }
+    catch (error) {
+      this.snackBar.dismiss(snackId);
+      this.snackBar.dismissableBar('Error: '); // TODO
+    }
+    finally {
+      this.savingExpense.set(false);
+    }
+  }
+
+  public cancelUpdateClick(): void {
+    this.resetForm();
+  }
+
+  private resetForm(clearDate = false): void {
+    this.form()?.reset(clearDate);
+    this.editingExpense.set(false);
+  }
+
+  private dateToPlainDate(date: Date): Temporal.PlainDate {
+    return new Temporal.PlainDate(date.getFullYear(), date.getMonth() + 1, date.getDate());
+  }
+}