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

added expense view mode

Browse source
This commit is contained in:
Joe Arndt 2026-02-16 15:41:15 -06:00
parent fed0f7908a
commit e127b8ec45
25 changed files with 349 additions and 125 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -12,8 +12,10 @@ import { MatSelectModule } from '@angular/material/select';
import { MatButtonModule } from '@angular/material/button';
import { provideNativeDateAdapter } from '@angular/material/core';
import { CreateExpense, Expense, ExpenseService } from '../../services/expense.service';
import {CurrencyPipe, DatePipe} from '@angular/common';
import {MatIcon} from '@angular/material/icon';
import { CurrencyPipe, DatePipe } from '@angular/common';
import { MatIcon } from '@angular/material/icon';
import { Temporal } from '@js-temporal/polyfill';
// import { MatChip } from '@angular/material/chips';
interface ExpenseForm {
date: Date | string;
@ -26,7 +28,20 @@ interface ExpenseForm {
@Component({
selector: 'app-expense',
imports: [MatDatepickerModule, MatFormFieldModule, MatInputModule, MatCardModule, MatAutocompleteModule, MatSelectModule, MatButtonModule, FormField, DatePipe, MatIcon, CurrencyPipe],
imports: [
MatDatepickerModule,
MatFormFieldModule,
MatInputModule,
MatCardModule,
MatAutocompleteModule,
MatSelectModule,
MatButtonModule,
FormField,
DatePipe,
MatIcon,
CurrencyPipe,
// MatChip
],
providers: [provideNativeDateAdapter(), DatePipe],
templateUrl: './expense.component.html',
styleUrl: './expense.component.scss',
@ -49,14 +64,14 @@ export class ExpenseComponent {
return dateValid && centsValid && categoryValid && merchantValid && noteValid && !this.saving();
});
private lastSelectedDate: Date | undefined;
private expenseDate = computed(() => {
return this.expense()
? new Date(`${this.expense()?.year}-${this.expense()?.month}-${this.expense()?.day}`)
: this.lastSelectedDate ?? '';
});
// private lastSelectedDate: Date | undefined;
// private expenseDate = computed(() => {
// return this.expense()
// ? new Date(`${this.expense()?.year}-${this.expense()?.month}-${this.expense()?.day}`)
// : this.lastSelectedDate ?? '';
// });
private defaultForm: ExpenseForm = {
date: this.expenseDate(),
date: '',
cents: this.expense()?.cents ?? NaN,
category: this.expense()?.category ?? '',
merchant: this.expense()?.merchant ?? '',
@ -78,32 +93,36 @@ export class ExpenseComponent {
private readonly datePipe: DatePipe) { }
public async saveClick(): Promise<void> {
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
};
// 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);
// }
}
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);
}
public editClick(): void {
this.expenseMode.set('edit');
}
public autocompleteDisplay(value: Merchant | Category) {