From 49af11d7b80722b81034aef39ee740de328fd19e Mon Sep 17 00:00:00 2001
From: Joe Arndt <jmarndt@users.noreply.github.com>
Date: Sun, 22 Feb 2026 23:28:10 -0600
Subject: [PATCH] added saving state

---
 .../components/expense/expense.component.html |  8 +--
 .../components/expense/expense.component.ts   | 59 ++++++++-----------
 2 files changed, 29 insertions(+), 38 deletions(-)

diff --git a/src/app/components/expense/expense.component.html b/src/app/components/expense/expense.component.html
index e6c6cdd..d24ce3a 100644
--- a/src/app/components/expense/expense.component.html
+++ b/src/app/components/expense/expense.component.html
@@ -4,16 +4,16 @@
       <div class="expense-header">
         @if (!expense()) {
           <mat-card-title>Add new Expense</mat-card-title>
-          <button matIconButton [disabled]="!formDirty()" (click)="resetAddClick()"><mat-icon>replay</mat-icon></button>
-          <button matIconButton [disabled]="!formValid()" (click)="addClick()"><mat-icon>add</mat-icon></button>
+          <button matIconButton [disabled]="!formDirty() || savingExpense()" (click)="resetAddClick()"><mat-icon>replay</mat-icon></button>
+          <button matIconButton [disabled]="!formValid() || savingExpense()" (click)="addClick()"><mat-icon>add</mat-icon></button>
         } @else {
           @if (!editingExpense()) {
             <mat-card-title>{{ expense()?.date?.toString() | date }}: {{ expense()?.cents! / 100 | currency }}</mat-card-title>
             <button matIconButton (click)="editClick()"><mat-icon>edit</mat-icon></button>
           } @else {
             <mat-card-title>Update Expense</mat-card-title>
-            <button matIconButton (click)="cancelUpdateClick()"><mat-icon>undo</mat-icon></button>
-            <button matIconButton [disabled]="!formValid()" (click)="updateClick()"><mat-icon>save</mat-icon></button>
+            <button matIconButton [disabled]="savingExpense()" (click)="cancelUpdateClick()"><mat-icon>undo</mat-icon></button>
+            <button matIconButton [disabled]="!formValid() || savingExpense()" (click)="updateClick()"><mat-icon>save</mat-icon></button>
           }
         }
       </div>
diff --git a/src/app/components/expense/expense.component.ts b/src/app/components/expense/expense.component.ts
index 4aa4ee8..fe3c915 100644
--- a/src/app/components/expense/expense.component.ts
+++ b/src/app/components/expense/expense.component.ts
@@ -18,7 +18,7 @@ export class ExpenseComponent {
   private form = viewChild(ExpenseFormComponent);
 
   public editingExpense = signal(false);
-  public savingExpense = signal(false); // TODO: implement UI for saving...
+  public savingExpense = signal(false);
 
   public expense = model<Expense>();
   public formValid = model(false);
@@ -41,8 +41,17 @@ export class ExpenseComponent {
       merchantId: !!form.merchant ? form.merchant.id : undefined,
       tagIds: form.tags.map(tag => tag.id)
     };
-    await this.expenseService.postExpense(postExpense);
-    this.resetForm();
+    this.savingExpense.set(true);
+    try {
+      await this.expenseService.postExpense(postExpense);
+      this.resetForm();
+    }
+    catch (error) {
+      console.error(error); // TODO: Add error processing
+    }
+    finally {
+      this.savingExpense.set(false);
+    }
   }
 
   public resetAddClick(): void {
@@ -60,10 +69,19 @@ export class ExpenseComponent {
       merchantId: !!form.merchant ? form.merchant.id : undefined,
       tagIds: form.tags.map(tag => tag.id)
     };
-    const expense = await this.expenseService.updateExpense(putExpense);
-    this.expense.set(expense);
-    this.form()?.refresh(expense);
-    this.editingExpense.set(false);
+    this.savingExpense.set(true);
+    try {
+      const expense = await this.expenseService.updateExpense(putExpense);
+      this.expense.set(expense);
+      this.form()?.refresh(expense);
+      this.editingExpense.set(false);
+    }
+    catch (error) {
+      console.error(error); // TODO: Add error processing
+    }
+    finally {
+      this.savingExpense.set(false);
+    }
   }
 
   public cancelUpdateClick(): void {
@@ -78,31 +96,4 @@ export class ExpenseComponent {
   private dateToPlainDate(date: Date): Temporal.PlainDate {
     return new Temporal.PlainDate(date.getFullYear(), date.getMonth() + 1, date.getDate());
   }
-
-  // const saveExpenseModel = this.expenseModel();
-  // const date = this.datePipe.transform(saveExpenseModel.date, 'yyyy-MM-dd')?.split('-') ?? [];
-  // const expense: CreateExpense = {
-  //   year: date[0],
-  //   month: date[1],
-  //   day: date[2],
-  //   cents: saveExpenseModel.cents,
-  //   category: saveExpenseModel.category as Category,
-  //   merchant: saveExpenseModel.merchant ? saveExpenseModel.merchant as Merchant : undefined,
-  //   note: saveExpenseModel.note ? saveExpenseModel.note : undefined,
-  //   tags: saveExpenseModel.tags
-  // };
-  //
-  // this.saving.set(true);
-  // try {
-  //   await this.expenseService.postExpense(expense);
-  //   this.lastSelectedDate = saveExpenseModel.date ? saveExpenseModel.date as Date : undefined;
-  //   this.expenseModel.set({ ...this.defaultForm, date: saveExpenseModel.date });
-  //   this.expenseForm().reset(this.expenseModel());
-  // }
-  // catch (error) {
-  //   console.error(error);
-  // }
-  // finally {
-  //   this.saving.set(false);
-  // }
 }