rough migration to material design inputs

This commit is contained in:
Joe Arndt 2026-02-13 23:50:37 -06:00
parent 17531f7c29
commit f711ab6f74
3 changed files with 63 additions and 123 deletions

View file

@ -1,9 +1,16 @@
import {Component, computed, signal} from '@angular/core';
import {Category, CategoryService} from '../../services/category.service';
import {Merchant, MerchantService} from '../../services/merchant.service';
import { Tag } from '../../services/tag.service';
import {form, FormField} from '@angular/forms/signals';
import {MatCard, MatCardContent, MatCardHeader, MatCardTitle} from '@angular/material/card';
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,
@ -16,19 +23,15 @@ interface AddExpenseForm {
@Component({
selector: 'app-add-expense',
imports: [
FormField,
MatCard,
MatCardHeader,
MatCardTitle,
MatCardContent
],
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: '',
@ -40,5 +43,6 @@ export class AddExpenseComponent {
public expenseForm = form(this.addExpenseModel);
public constructor(private readonly categoryService: CategoryService,
private readonly merchantService: MerchantService) { }
private readonly merchantService: MerchantService,
private readonly tagService: TagService) { }
}