joe/common-cents-web
1
0
Fork 0
Code Issues 6 Pull requests Projects Releases Packages Wiki Activity Actions

added saving state

Browse source
This commit is contained in:
Joe Arndt 2026-02-22 23:28:10 -06:00
parent e78b24e521
commit 49af11d7b8
2 changed files with 29 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/app/components/expense/expense.component.html
View file

@ -4,16 +4,16 @@
<div class="expense-header"> <div class="expense-header">
@if (!expense()) { @if (!expense()) {
<mat-card-title>Add new Expense</mat-card-title> <mat-card-title>Add new Expense</mat-card-title>
<button matIconButton [disabled]="!formDirty()" (click)="resetAddClick()"><mat-icon>replay</mat-icon></button> <button matIconButton [disabled]="!formDirty() || savingExpense()" (click)="resetAddClick()"><mat-icon>replay</mat-icon></button>
<button matIconButton [disabled]="!formValid()" (click)="addClick()"><mat-icon>add</mat-icon></button> <button matIconButton [disabled]="!formValid() || savingExpense()" (click)="addClick()"><mat-icon>add</mat-icon></button>
} @else { } @else {
@if (!editingExpense()) { @if (!editingExpense()) {
<mat-card-title>{{ expense()?.date?.toString() | date }}: {{ expense()?.cents! / 100 | currency }}</mat-card-title> <mat-card-title>{{ expense()?.date?.toString() | date }}: {{ expense()?.cents! / 100 | currency }}</mat-card-title>
<button matIconButton (click)="editClick()"><mat-icon>edit</mat-icon></button> <button matIconButton (click)="editClick()"><mat-icon>edit</mat-icon></button>
} @else { } @else {
<mat-card-title>Update Expense</mat-card-title> <mat-card-title>Update Expense</mat-card-title>
<button matIconButton (click)="cancelUpdateClick()"><mat-icon>undo</mat-icon></button> <button matIconButton [disabled]="savingExpense()" (click)="cancelUpdateClick()"><mat-icon>undo</mat-icon></button>
<button matIconButton [disabled]="!formValid()" (click)="updateClick()"><mat-icon>save</mat-icon></button> <button matIconButton [disabled]="!formValid() || savingExpense()" (click)="updateClick()"><mat-icon>save</mat-icon></button>
} }
} }
</div> </div>

59
src/app/components/expense/expense.component.ts
View file

@ -18,7 +18,7 @@ export class ExpenseComponent {
private form = viewChild(ExpenseFormComponent); private form = viewChild(ExpenseFormComponent);
public editingExpense = signal(false); public editingExpense = signal(false);
public savingExpense = signal(false); // TODO: implement UI for saving... public savingExpense = signal(false);
public expense = model<Expense>(); public expense = model<Expense>();
public formValid = model(false); public formValid = model(false);
@ -41,8 +41,17 @@ export class ExpenseComponent {
merchantId: !!form.merchant ? form.merchant.id : undefined, merchantId: !!form.merchant ? form.merchant.id : undefined,
tagIds: form.tags.map(tag => tag.id) tagIds: form.tags.map(tag => tag.id)
}; };
await this.expenseService.postExpense(postExpense); this.savingExpense.set(true);
this.resetForm(); 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 { public resetAddClick(): void {
@ -60,10 +69,19 @@ export class ExpenseComponent {
merchantId: !!form.merchant ? form.merchant.id : undefined, merchantId: !!form.merchant ? form.merchant.id : undefined,
tagIds: form.tags.map(tag => tag.id) tagIds: form.tags.map(tag => tag.id)
}; };
const expense = await this.expenseService.updateExpense(putExpense); this.savingExpense.set(true);
this.expense.set(expense); try {
this.form()?.refresh(expense); const expense = await this.expenseService.updateExpense(putExpense);
this.editingExpense.set(false); 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 { public cancelUpdateClick(): void {
@ -78,31 +96,4 @@ export class ExpenseComponent {
private dateToPlainDate(date: Date): Temporal.PlainDate { private dateToPlainDate(date: Date): Temporal.PlainDate {
return new Temporal.PlainDate(date.getFullYear(), date.getMonth() + 1, date.getDate()); 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);
// }
} }