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

@@ -10,7 +10,7 @@ import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
 import { provideNativeDateAdapter } from '@angular/material/core';
 
-export interface ExpenseForm {
+interface ExpenseForm {
   date: Date;
   cents: number;
   category: Category;
@@ -29,13 +29,14 @@ export interface ExpenseForm {
 export class ExpenseFormComponent implements OnInit {
   public expense = input<Expense>();
   public disabled = input<boolean>(false);
+
   public valid = output<boolean>();
   public dirty = output<boolean>()
-  public value = output<ExpenseForm>();
+  public value = output();
 
-  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 formDirty = computed(() => this.form().dirty() && this.form().touched());
+  private lastSelectedDate = signal<Date | undefined>(undefined);
   private formData = computed(() => this.buildForm(this.expense()));
   private formModel = signal<ExpenseForm>(this.formData());
 
@@ -48,27 +49,15 @@ export class ExpenseFormComponent implements OnInit {
                      private readonly merchantService: MerchantService,
                      private readonly tagService: TagService) {
     effect(() => {
-      const valid = this.formValid();
+      this.valid.emit(this.formValid());
-      const dirty = this.formDirty();
+      this.dirty.emit(this.formDirty());
-      const value = this.form().value();
-
-      this.valid.emit(valid);
-      this.dirty.emit(dirty);
-      this.value.emit(value);
-      this.lastDate.set(value.date);
     });
   }
 
   public ngOnInit(): void {
-    this.reset();
+    console.log({ expense: this.expense() });
-  }
-
-  public reset(clearDate = false): void {
-    if (clearDate) {
-      this.lastDate.set(undefined);
-      this.form().reset();
-    }
     this.formModel.set(this.formData());
+    this.form().reset();
   }
 
   public autocompleteDisplay(value: Merchant | Category) {
@@ -76,7 +65,7 @@ export class ExpenseFormComponent implements OnInit {
   }
 
   private buildForm(expense?: Expense): ExpenseForm {
-    let formData = { date: this.lastDate() ?? '', cents: NaN, category: {}, merchant: {}, note: '', tags: [] } as unknown as ExpenseForm
+    let formData = { date: this.lastSelectedDate() ?? '', cents: '', category: '', merchant: '', note: '', tags: ''} as unknown as ExpenseForm
     if (expense) {
       formData = {
         date: new Date(expense.date.toString()),
@@ -87,7 +76,6 @@ export class ExpenseFormComponent implements OnInit {
         tags: expense.tags ?? []
       } as ExpenseForm;
     }
-
     return formData;
   }
 

src/app/components/expense/expense.component.html

@@ -21,10 +21,9 @@
 
     <mat-card-content>
       <app-expense-form [expense]="expense()"
-                        [disabled]="savingExpense() || !!expense() && !editingExpense()"
+                        [disabled]="!!expense() && !editingExpense()"
                         (valid)="formValid.set($event)"
-                        (dirty)="formDirty.set($event)"
+                        (dirty)="formDirty.set($event)" />
-                        (value)="formData.set($event)" />
     </mat-card-content>
   </mat-card>
 </div>

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

@@ -1,11 +1,10 @@
-import { Component, input, model, signal, viewChild } from '@angular/core';
+import { Component, input, model, signal } 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 { Expense, ExpenseService } from '../../services/expense.service';
 import { MatIcon } from '@angular/material/icon';
-import { ExpenseForm, ExpenseFormComponent } from './expense-form/expense-form.component';
+import { ExpenseFormComponent } from './expense-form/expense-form.component';
 import { CurrencyPipe, DatePipe } from '@angular/common';
-import { Temporal } from '@js-temporal/polyfill';
 
 @Component({
   selector: 'app-expense',
@@ -15,15 +14,11 @@ import { Temporal } from '@js-temporal/polyfill';
   styleUrl: './expense.component.scss',
 })
 export class ExpenseComponent {
-  private form = viewChild(ExpenseFormComponent);
   public expense = input<Expense>();
 
   public editingExpense = signal(false);
-  public savingExpense = signal(false);
-
   public formValid = model(false);
   public formDirty = model(false);
-  public formData = model<ExpenseForm>();
 
   public constructor(private readonly expenseService: ExpenseService) { }
 
@@ -32,46 +27,20 @@ export class ExpenseComponent {
   }
 
   public async addClick(): Promise<void> {
-    const form = this.formData()!;
+    console.log('Adding new expense');
-    const postExpense: CreateExpense = {
-      date: new Temporal.PlainDate(form.date.getFullYear(), form.date.getMonth(), form.date.getDate()),
-      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)
-    };
-    await this.expenseService.postExpense(postExpense);
-    this.resetForm();
   }
 
   public resetAddClick(): void {
-    this.resetForm(true);
+    console.log('Reset Add expense form');
   }
 
   public async updateClick(): Promise<void> {
-    const form = this.formData()!;
+    console.log('Updating expense')
-    const updateExpense: UpdateExpense = {
+    this.editingExpense.set(false);
-      id: this.expense()!.id,
-      date: Temporal.PlainDate.from(form.date.toString()),
-      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);
-    // post update dto
-    // set expense
-    this.resetForm();
   }
 
   public cancelUpdateClick(): void {
-    this.resetForm();
+    console.log('Canceling update');
-  }
-
-  private resetForm(clearDate = false): void {
-    this.form()?.reset(clearDate);
     this.editingExpense.set(false);
   }