108 lines
3.7 KiB
TypeScript
108 lines
3.7 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); // TODO: implement UI for saving...
|
|
|
|
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)
|
|
};
|
|
await this.expenseService.postExpense(postExpense);
|
|
this.resetForm();
|
|
}
|
|
|
|
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)
|
|
};
|
|
const expense = await this.expenseService.updateExpense(putExpense);
|
|
this.expense.set(expense);
|
|
this.form()?.refresh(expense);
|
|
this.editingExpense.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());
|
|
}
|
|
|
|
// 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);
|
|
// }
|
|
}
|