common-cents-web/src/app/components/add-expense/add-expense.component.ts
2026-02-13 23:50:37 -06:00

48 lines
1.9 KiB
TypeScript

import { Component, computed, signal } from '@angular/core';
import { CategoryService } from '../../services/category.service';
import { MerchantService } from '../../services/merchant.service';
import { Tag, TagService } from '../../services/tag.service';
import { form, FormField } from '@angular/forms/signals';
import { MatCardModule } from '@angular/material/card';
import { MatInputModule } from '@angular/material/input';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatSelectModule } from '@angular/material/select';
import { MatButtonModule } from '@angular/material/button';
import { provideNativeDateAdapter } from '@angular/material/core';
interface AddExpenseForm {
date: Date,
amount: number | string,
categoryId: string,
merchantId: string,
note: string,
tags: Tag[]
}
@Component({
selector: 'app-add-expense',
imports: [MatDatepickerModule, MatFormFieldModule, MatInputModule, MatCardModule, MatAutocompleteModule, MatSelectModule, MatButtonModule, FormField],
providers: [provideNativeDateAdapter()],
templateUrl: './add-expense.component.html',
styleUrl: './add-expense.component.scss',
})
export class AddExpenseComponent {
protected categories = computed(() => this.categoryService.categories());
protected merchants = computed(() => this.merchantService.merchants());
protected tags = computed(() => this.tagService.tags());
private addExpenseModel = signal<AddExpenseForm>({
date: new Date(),
amount: '',
categoryId: '',
merchantId: '',
note: '',
tags: []
});
public expenseForm = form(this.addExpenseModel);
public constructor(private readonly categoryService: CategoryService,
private readonly merchantService: MerchantService,
private readonly tagService: TagService) { }
}