99 lines
3 KiB
TypeScript
99 lines
3 KiB
TypeScript
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';
|
|
import { MatIcon } from '@angular/material/icon';
|
|
import { ExpenseForm, ExpenseFormComponent } from './expense-form/expense-form.component';
|
|
import { CurrencyPipe, DatePipe } from '@angular/common';
|
|
import { Temporal } from '@js-temporal/polyfill';
|
|
|
|
@Component({
|
|
selector: 'app-expense',
|
|
imports: [MatCardModule, MatButtonModule, MatIcon, ExpenseFormComponent, DatePipe, CurrencyPipe],
|
|
providers: [],
|
|
templateUrl: './expense.component.html',
|
|
styleUrl: './expense.component.scss'
|
|
})
|
|
export class ExpenseComponent {
|
|
private form = viewChild(ExpenseFormComponent);
|
|
|
|
public editingExpense = signal(false);
|
|
public savingExpense = signal(false);
|
|
|
|
public expense = model<Expense>();
|
|
public formValid = model(false);
|
|
public formDirty = model(false);
|
|
public formData = model<ExpenseForm>();
|
|
|
|
public constructor(private readonly expenseService: ExpenseService) { }
|
|
|
|
public editClick(): void {
|
|
this.editingExpense.set(true);
|
|
}
|
|
|
|
public async addClick(): Promise<void> {
|
|
const form = this.formData()!;
|
|
const postExpense: CreateExpense = {
|
|
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)
|
|
};
|
|
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 {
|
|
this.resetForm(true);
|
|
}
|
|
|
|
public async updateClick(): Promise<void> {
|
|
const form = this.formData()!;
|
|
const putExpense: UpdateExpense = {
|
|
id: this.expense()!.id,
|
|
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)
|
|
};
|
|
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 {
|
|
this.resetForm();
|
|
}
|
|
|
|
private resetForm(clearDate = false): void {
|
|
this.form()?.reset(clearDate);
|
|
this.editingExpense.set(false);
|
|
}
|
|
|
|
private dateToPlainDate(date: Date): Temporal.PlainDate {
|
|
return new Temporal.PlainDate(date.getFullYear(), date.getMonth() + 1, date.getDate());
|
|
}
|
|
}
|