added in-place updating

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

@@ -8,7 +8,7 @@ import { ExpenseComponent } from '../expense/expense.component';
   selector: 'app-expense-list',
   imports: [MatTableModule, MatCardModule, ExpenseComponent],
   templateUrl: './expense-list.component.html',
-  styleUrl: './expense-list.component.scss',
+  styleUrl: './expense-list.component.scss'
 })
 export class ExpenseListComponent {
   protected expenses = computed(() => this.expensesService.expenses())

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

@@ -24,7 +24,7 @@ export interface ExpenseForm {
   imports: [MatAutocompleteModule, MatDatepickerModule, MatInputModule, MatSelectModule, FormField],
   providers: [provideNativeDateAdapter()],
   templateUrl: './expense-form.component.html',
-  styleUrl: './expense-form.component.scss',
+  styleUrl: './expense-form.component.scss'
 })
 export class ExpenseFormComponent implements OnInit {
   public expense = input<Expense>();
@@ -36,7 +36,7 @@ export class ExpenseFormComponent implements OnInit {
   private lastDate = signal<Date | undefined>(undefined);
   private formValid = computed(() => this.form().valid() && this.form().dirty());
   private formDirty = computed(() => this.form().dirty() || this.form().touched());
-  private formData = computed(() => this.buildForm(this.expense()));
+  private formData = signal(this.buildForm(this.expense()));
   private formModel = signal<ExpenseForm>(this.formData());
 
   protected categories = computed(() => this.categoryService.categories());
@@ -60,30 +60,46 @@ export class ExpenseFormComponent implements OnInit {
   }
 
   public ngOnInit(): void {
-    this.reset();
+    this.initialize();
   }
 
   public reset(clearDate = false): void {
     if (clearDate) {
       this.lastDate.set(undefined);
-      this.form().reset();
     }
+    this.initialize();
+  }
+
+  public refresh(expense: Expense): void {
+    this.initialize();
+    this.formData.set(this.buildForm(expense));
     this.formModel.set(this.formData());
+    this.form().reset(this.formModel());
   }
 
   public autocompleteDisplay(value: Merchant | Category) {
     return value?.name ?? null;
   }
 
+  private initialize(): void {
+    this.formData.set(this.buildForm(this.expense()));
+    this.formModel.set(this.formData());
+    this.form().reset(this.formModel());
+  }
+
   private buildForm(expense?: Expense): ExpenseForm {
     let formData = { date: this.lastDate() ?? '', cents: NaN, category: {}, merchant: {}, note: '', tags: [] } as unknown as ExpenseForm
     if (expense) {
+      const date = expense.date.toString().split('-');
+      const day = Number(date[2]);
+      const month = Number(date[1]) - 1;
+      const year = Number(date[0]);
       formData = {
-        date: new Date(expense.date.toString()),
+        date: new Date(year, month, day),
         cents: expense.cents,
         category: expense.category,
-        merchant: expense.merchant,
+        merchant: expense.merchant ?? {},
-        note: expense.note,
+        note: expense.note ?? '',
         tags: expense.tags ?? []
       } as ExpenseForm;
     }

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

@@ -1,4 +1,4 @@
-import { Component, input, model, signal, viewChild } from '@angular/core';
+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';
@@ -12,15 +12,15 @@ import { Temporal } from '@js-temporal/polyfill';
   imports: [MatCardModule, MatButtonModule, MatIcon, ExpenseFormComponent, DatePipe, CurrencyPipe],
   providers: [],
   templateUrl: './expense.component.html',
-  styleUrl: './expense.component.scss',
+  styleUrl: './expense.component.scss'
 })
 export class ExpenseComponent {
   private form = viewChild(ExpenseFormComponent);
-  public expense = input<Expense>();
 
   public editingExpense = signal(false);
-  public savingExpense = signal(false);
+  public savingExpense = signal(false); // TODO: implement UI for saving...
 
+  public expense = model<Expense>();
   public formValid = model(false);
   public formDirty = model(false);
   public formData = model<ExpenseForm>();
@@ -34,7 +34,7 @@ export class ExpenseComponent {
   public async addClick(): Promise<void> {
     const form = this.formData()!;
     const postExpense: CreateExpense = {
-      date: new Temporal.PlainDate(form.date.getFullYear(), form.date.getMonth(), form.date.getDate()),
+      date: this.dateToPlainDate(form.date),
       cents: form.cents,
       categoryId: form.category.id,
       note: !!form.note ? form.note : undefined,
@@ -51,19 +51,19 @@ export class ExpenseComponent {
 
   public async updateClick(): Promise<void> {
     const form = this.formData()!;
-    const updateExpense: UpdateExpense = {
+    const putExpense: UpdateExpense = {
       id: this.expense()!.id,
-      date: Temporal.PlainDate.from(form.date.toString()),
+      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)
     };
-    console.log('update:', updateExpense);
+    const expense = await this.expenseService.updateExpense(putExpense);
-    // post update dto
+    this.expense.set(expense);
-    // set expense
+    this.form()?.refresh(expense);
-    this.resetForm();
+    this.editingExpense.set(false);
   }
 
   public cancelUpdateClick(): void {
@@ -75,6 +75,10 @@ export class ExpenseComponent {
     this.editingExpense.set(false);
   }
 
+  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 = {

src/app/services/expense.service.ts

@@ -6,12 +6,12 @@ import { HttpService } from './http.service';
 import { Temporal } from '@js-temporal/polyfill';
 
 @Injectable({
-  providedIn: 'root',
+  providedIn: 'root'
 })
 export class ExpenseService {
   private internalExpenses = signal<Expense[]>([]);
   public readonly expenses = this.internalExpenses.asReadonly();
-  public readonly expensePath = 'http://localhost:3000/common-cents/expenses';
+  public readonly expensePath = 'http://localhost:3000/common-cents/expenses'; // TODO: refactor
 
   public constructor(private readonly http: HttpService) {
     void this.fetchExpenses();
@@ -19,29 +19,23 @@ export class ExpenseService {
 
   public async fetchExpenses(): Promise<void> {
     this.internalExpenses.set(await this.http.get(this.expensePath));
-    console.log({ expenses: this.internalExpenses() }); // TODO: Remove
   }
 
   public async postExpense(createExpense: CreateExpense): Promise<Expense> {
     const createdExpense = await this.http.post<Expense>(this.expensePath, createExpense);
     await this.fetchExpenses();
-    console.log({ createExpense, createdExpense}); // TODO: Remove
 
     return createdExpense;
   }
 
   public async updateExpense(updateExpense: UpdateExpense): Promise<Expense> {
-    const updatedExpense = await this.http.put<Expense>(this.expensePath, updateExpense);
+    return await this.http.put<Expense>(this.expensePath, updateExpense);
-    await this.fetchExpenses();
-    console.log({ updateExpense, updatedExpense}); // TODO: Remove
-
-    return updatedExpense;
   }
 }
 
 export interface Expense {
   id: string;
-  date: Temporal.PlainDate;
+  date: Date;
   cents: number;
   category: Category;
   note?: string;