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

added in-place updating

Browse source
This commit is contained in:
Joe Arndt 2026-02-22 23:13:56 -06:00
parent ea4abe4fd6
commit e78b24e521
4 changed files with 43 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -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);
// post update dto
// set expense
this.resetForm();
const expense = await this.expenseService.updateExpense(putExpense);
this.expense.set(expense);
this.form()?.refresh(expense);
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 = {