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

added expense state (view, edit, add) logic

Browse source
This commit is contained in:
Joe Arndt 2026-02-14 23:39:51 -06:00
parent 23132741a9
commit fed0f7908a
9 changed files with 180 additions and 117 deletions
Download patch file Download diff file Expand all files Collapse all files

56
src/app/components/add-expense/add-expense.component.html
View file

@ -1,56 +0,0 @@
<div class="add-expense-container">
<mat-card appearance="outlined">
<mat-card-header>
<mat-card-title>Track new Expense</mat-card-title>
<button matButton="tonal" [disabled]="!enableSaveButton()" (click)="saveClick()">Save</button>
</mat-card-header>
<mat-card-content>
<mat-form-field appearance="outline">
<mat-label>Date</mat-label>
<input matInput [matDatepicker]="expenseDatePicker" [formField]="expenseForm.date">
<mat-datepicker-toggle matIconSuffix [for]="expenseDatePicker"></mat-datepicker-toggle>
<mat-datepicker #expenseDatePicker></mat-datepicker>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Cents</mat-label>
<input type="number" matInput [formField]="expenseForm.cents">
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Category</mat-label>
<input type="text" matInput [matAutocomplete]="categoryAuto" [formField]="expenseForm.category" [value]="expenseForm.category()">
<mat-autocomplete [displayWith]="autocompleteDisplay" autoActiveFirstOption #categoryAuto="matAutocomplete">
@for (category of categories(); track category.id) {
<mat-option [value]="category">{{ category.name }}</mat-option>
}
</mat-autocomplete>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Merchant</mat-label>
<input type="text" matInput [matAutocomplete]="merchantAuto" [formField]="expenseForm.merchant">
<mat-autocomplete [displayWith]="autocompleteDisplay" autoActiveFirstOption #merchantAuto="matAutocomplete">
@for (merchant of merchants(); track merchant.id) {
<mat-option [value]="merchant">{{ merchant.name }}</mat-option>
}
</mat-autocomplete>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Tags</mat-label>
<mat-select disableRipple multiple [formField]="expenseForm.tags">
@for (tag of tags(); track tag.id) {
<mat-option [value]="tag">{{ tag.name }}</mat-option>
}
</mat-select>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Note</mat-label>
<textarea rows="1" matInput [formField]="expenseForm.note"></textarea>
</mat-form-field>
</mat-card-content>
</mat-card>
</div>

57
src/app/components/expense-list/expense-list.component.html
View file

@ -1,34 +1,37 @@
<div class="expense-list-container"> <div class="expense-list-container">
<mat-card appearance="outlined" class="expense-table-card"> @for (expense of expenses(); track expense.id) {
<mat-card-header> <app-expense [expense]="expense" />
<mat-card-title>Tracked Expenses</mat-card-title> }
</mat-card-header> <!-- <mat-card appearance="outlined" class="expense-table-card">-->
<!-- <mat-card-header>-->
<!-- <mat-card-title>Tracked Expenses</mat-card-title>-->
<!-- </mat-card-header>-->
<mat-card-content> <!-- <mat-card-content>-->
<table mat-table [dataSource]="expenses()" class="expense-table"> <!-- <table mat-table [dataSource]="expenses()" class="expense-table">-->
<ng-container matColumnDef="date"> <!-- <ng-container matColumnDef="date">-->
<th mat-header-cell *matHeaderCellDef>Date</th> <!-- <th mat-header-cell *matHeaderCellDef>Date</th>-->
<td mat-cell *matCellDef="let expense">{{ `${expense.year}/${expense.month}/${expense.day}` | date }}</td> <!-- <td mat-cell *matCellDef="let expense">{{ `${expense.year}/${expense.month}/${expense.day}` | date }}</td>-->
</ng-container> <!-- </ng-container>-->
<ng-container matColumnDef="amount"> <!-- <ng-container matColumnDef="amount">-->
<th mat-header-cell *matHeaderCellDef>Amount</th> <!-- <th mat-header-cell *matHeaderCellDef>Amount</th>-->
<td mat-cell *matCellDef="let expense">{{ (expense.cents / 100) | currency: 'USD' }}</td> <!-- <td mat-cell *matCellDef="let expense">{{ (expense.cents / 100) | currency: 'USD' }}</td>-->
</ng-container> <!-- </ng-container>-->
<ng-container matColumnDef="category"> <!-- <ng-container matColumnDef="category">-->
<th mat-header-cell *matHeaderCellDef>Category</th> <!-- <th mat-header-cell *matHeaderCellDef>Category</th>-->
<td mat-cell *matCellDef="let expense">{{ expense.category.name }}</td> <!-- <td mat-cell *matCellDef="let expense">{{ expense.category.name }}</td>-->
</ng-container> <!-- </ng-container>-->
<ng-container matColumnDef="merchant"> <!-- <ng-container matColumnDef="merchant">-->
<th mat-header-cell *matHeaderCellDef>Merchant</th> <!-- <th mat-header-cell *matHeaderCellDef>Merchant</th>-->
<td mat-cell *matCellDef="let expense">{{ expense.merchant?.name ?? '--' }}</td> <!-- <td mat-cell *matCellDef="let expense">{{ expense.merchant?.name ?? '&#45;&#45;' }}</td>-->
</ng-container> <!-- </ng-container>-->
<tr mat-header-row *matHeaderRowDef="columns"></tr> <!-- <tr mat-header-row *matHeaderRowDef="columns"></tr>-->
<tr mat-row *matRowDef="let rowData; columns: columns"></tr> <!-- <tr mat-row *matRowDef="let rowData; columns: columns"></tr>-->
</table> <!-- </table>-->
</mat-card-content> <!-- </mat-card-content>-->
</mat-card> <!-- </mat-card>-->
</div> </div>

4
src/app/components/expense-list/expense-list.component.scss
View file

@ -0,0 +1,4 @@
.expense-list-container {
display: grid;
gap: 1rem;
}

3
src/app/components/expense-list/expense-list.component.ts
View file

@ -3,10 +3,11 @@ import { ExpenseService } from '../../services/expense.service';
import { MatTableModule } from '@angular/material/table'; import { MatTableModule } from '@angular/material/table';
import { CurrencyPipe, DatePipe } from '@angular/common'; import { CurrencyPipe, DatePipe } from '@angular/common';
import { MatCardModule } from '@angular/material/card'; import { MatCardModule } from '@angular/material/card';
import {ExpenseComponent} from '../expense/expense.component';
@Component({ @Component({
selector: 'app-expense-list', selector: 'app-expense-list',
imports: [MatTableModule, MatCardModule, DatePipe, CurrencyPipe], imports: [MatTableModule, MatCardModule, DatePipe, CurrencyPipe, ExpenseComponent],
templateUrl: './expense-list.component.html', templateUrl: './expense-list.component.html',
styleUrl: './expense-list.component.scss', styleUrl: './expense-list.component.scss',
}) })

96
src/app/components/expense/expense.component.html Normal file
View file

@ -0,0 +1,96 @@
<div class="expense-container">
<mat-card appearance="outlined">
<mat-card-header>
@if (state() === 'add') {
<div class="expense-header">
<mat-card-title>Track new Expense</mat-card-title>
<button matButton="tonal" [disabled]="!enableSaveButton()" (click)="saveClick()">Save</button>
</div>
}
@if (state() === 'view') {
<div class="expense-header">
<mat-card-title>{{ `${expense()?.year}-${expense()?.month}-${expense()?.day}` | date }}</mat-card-title>
<button matIconButton>
<mat-icon>edit</mat-icon>
</button>
</div>
}
</mat-card-header>
<mat-card-content>
@if (state() === 'add') {
<div class="expense-content">
<mat-form-field appearance="outline">
<mat-label>Date</mat-label>
<input matInput [matDatepicker]="expenseDatePicker" [formField]="expenseForm.date">
<mat-datepicker-toggle matIconSuffix [for]="expenseDatePicker"></mat-datepicker-toggle>
<mat-datepicker #expenseDatePicker></mat-datepicker>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Cents</mat-label>
<input type="number" matInput [formField]="expenseForm.cents">
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Category</mat-label>
<input type="text" matInput [matAutocomplete]="categoryAuto" [formField]="expenseForm.category" [value]="expenseForm.category()">
<mat-autocomplete [displayWith]="autocompleteDisplay" autoActiveFirstOption #categoryAuto="matAutocomplete">
@for (category of categories(); track category.id) {
<mat-option [value]="category">{{ category.name }}</mat-option>
}
</mat-autocomplete>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Merchant</mat-label>
<input type="text" matInput [matAutocomplete]="merchantAuto" [formField]="expenseForm.merchant">
<mat-autocomplete [displayWith]="autocompleteDisplay" autoActiveFirstOption #merchantAuto="matAutocomplete">
@for (merchant of merchants(); track merchant.id) {
<mat-option [value]="merchant">{{ merchant.name }}</mat-option>
}
</mat-autocomplete>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Note</mat-label>
<textarea rows="1" matInput [formField]="expenseForm.note"></textarea>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Tags</mat-label>
<mat-select disableRipple multiple [formField]="expenseForm.tags">
@for (tag of tags(); track tag.id) {
<mat-option [value]="tag">{{ tag.name }}</mat-option>
}
</mat-select>
</mat-form-field>
</div>
}
@if (state() === 'view') {
<div class="expense-content">
<div>
Amount: {{ expense()?.cents! / 100 | currency}}
</div>
<div>
Category: {{ expense()?.category!.name }}
</div>
<div>
Merchant: {{ expense()?.merchant?.name ?? '--' }}
</div>
</div>
<div>
Note: {{ expense()?.note ?? '--' }}
</div>
<div>
Tags:
</div>
}
</mat-card-content>
</mat-card>
</div>

26
src/app/components/add-expense/add-expense.component.scss → src/app/components/expense/expense.component.scss
View file

@ -1,23 +1,27 @@
.add-expense-container { .expense-container {
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
}
mat-card { mat-card {
max-width: 800px; max-width: 800px;
width: 100%; width: 100%;
}
} }
mat-card-header { mat-card-header {
padding-bottom: 1rem; padding-bottom: 1rem;
display: flex;
align-items: center; .expense-header {
justify-content: space-between; width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
} }
mat-card-content { .expense-content {
display: grid; display: grid;
} }
@ -26,14 +30,14 @@ mat-form-field {
} }
@media (min-width: 550px) { @media (min-width: 550px) {
mat-card-content { .expense-content {
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap: 1rem; gap: 1rem;
} }
} }
@media (min-width: 800px) { @media (min-width: 800px) {
mat-card-content { .expense-content {
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr;
} }
} }

49
src/app/components/add-expense/add-expense.component.ts → src/app/components/expense/expense.component.ts
View file

@ -1,4 +1,4 @@
import { Component, computed, signal } from '@angular/core'; import { Component, computed, input, signal } from '@angular/core';
import { Category, CategoryService } from '../../services/category.service'; import { Category, CategoryService } from '../../services/category.service';
import { Merchant, MerchantService } from '../../services/merchant.service'; import { Merchant, MerchantService } from '../../services/merchant.service';
import { Tag, TagService } from '../../services/tag.service'; import { Tag, TagService } from '../../services/tag.service';
@ -11,8 +11,9 @@ import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatSelectModule } from '@angular/material/select'; import { MatSelectModule } from '@angular/material/select';
import { MatButtonModule } from '@angular/material/button'; import { MatButtonModule } from '@angular/material/button';
import { provideNativeDateAdapter } from '@angular/material/core'; import { provideNativeDateAdapter } from '@angular/material/core';
import { CreateExpense, ExpenseService } from '../../services/expense.service'; import { CreateExpense, Expense, ExpenseService } from '../../services/expense.service';
import { DatePipe } from '@angular/common'; import {CurrencyPipe, DatePipe} from '@angular/common';
import {MatIcon} from '@angular/material/icon';
interface ExpenseForm { interface ExpenseForm {
date: Date | string; date: Date | string;
@ -24,13 +25,17 @@ interface ExpenseForm {
} }
@Component({ @Component({
selector: 'app-add-expense', selector: 'app-expense',
imports: [MatDatepickerModule, MatFormFieldModule, MatInputModule, MatCardModule, MatAutocompleteModule, MatSelectModule, MatButtonModule, FormField], imports: [MatDatepickerModule, MatFormFieldModule, MatInputModule, MatCardModule, MatAutocompleteModule, MatSelectModule, MatButtonModule, FormField, DatePipe, MatIcon, CurrencyPipe],
providers: [provideNativeDateAdapter(), DatePipe], providers: [provideNativeDateAdapter(), DatePipe],
templateUrl: './add-expense.component.html', templateUrl: './expense.component.html',
styleUrl: './add-expense.component.scss', styleUrl: './expense.component.scss',
}) })
export class AddExpenseComponent { export class ExpenseComponent {
public expense = input<Expense>();
protected expenseMode = signal<'view' | 'edit'>('view');
protected state = computed<'add' | 'view' | 'edit'>(() => this.expense() ? this.expenseMode() : 'add');
protected saving = signal(false);
protected categories = computed(() => this.categoryService.categories()); protected categories = computed(() => this.categoryService.categories());
protected merchants = computed(() => this.merchantService.merchants()); protected merchants = computed(() => this.merchantService.merchants());
protected tags = computed(() => this.tagService.tags()); protected tags = computed(() => this.tagService.tags());
@ -41,19 +46,24 @@ export class AddExpenseComponent {
const merchantValid = this.expenseForm.merchant().valid(); const merchantValid = this.expenseForm.merchant().valid();
const noteValid = this.expenseForm.note().valid(); const noteValid = this.expenseForm.note().valid();
return dateValid && centsValid && categoryValid && merchantValid && noteValid; return dateValid && centsValid && categoryValid && merchantValid && noteValid && !this.saving();
}); });
protected saving = signal(false);
private defaultFormState: ExpenseForm = { private lastSelectedDate: Date | undefined;
date: '', private expenseDate = computed(() => {
cents: NaN, return this.expense()
category: '', ? new Date(`${this.expense()?.year}-${this.expense()?.month}-${this.expense()?.day}`)
merchant: '', : this.lastSelectedDate ?? '';
note: '', });
tags: [] private defaultForm: ExpenseForm = {
date: this.expenseDate(),
cents: this.expense()?.cents ?? NaN,
category: this.expense()?.category ?? '',
merchant: this.expense()?.merchant ?? '',
note: this.expense()?.note ?? '',
tags: this.expense()?.tags ?? []
}; };
private expenseModel = signal<ExpenseForm>(this.defaultFormState); private expenseModel = signal<ExpenseForm>(this.defaultForm);
public expenseForm = form(this.expenseModel, (schema) => { public expenseForm = form(this.expenseModel, (schema) => {
required(schema.date); required(schema.date);
required(schema.cents); required(schema.cents);
@ -84,7 +94,8 @@ export class AddExpenseComponent {
this.saving.set(true); this.saving.set(true);
try { try {
await this.expenseService.postExpense(expense); await this.expenseService.postExpense(expense);
this.expenseModel.set({ ...this.defaultFormState, date: saveExpenseModel.date }); this.lastSelectedDate = saveExpenseModel.date ? saveExpenseModel.date as Date : undefined;
this.expenseModel.set({ ...this.defaultForm, date: saveExpenseModel.date });
this.expenseForm().reset(this.expenseModel()); this.expenseForm().reset(this.expenseModel());
} }
catch (error) { catch (error) {

2
src/app/pages/expenses/expenses.html
View file

@ -1,4 +1,4 @@
<div class="expenses-container"> <div class="expenses-container">
<app-add-expense /> <app-expense />
<app-expense-list /> <app-expense-list />
</div> </div>

4
src/app/pages/expenses/expenses.ts
View file

@ -1,12 +1,12 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { ExpenseListComponent } from '../../components/expense-list/expense-list.component'; import { ExpenseListComponent } from '../../components/expense-list/expense-list.component';
import { AddExpenseComponent } from '../../components/add-expense/add-expense.component'; import { ExpenseComponent } from '../../components/expense/expense.component';
@Component({ @Component({
selector: 'app-expenses', selector: 'app-expenses',
imports: [ imports: [
ExpenseListComponent, ExpenseListComponent,
AddExpenseComponent ExpenseComponent
], ],
templateUrl: './expenses.html', templateUrl: './expenses.html',
styleUrl: './expenses.scss' styleUrl: './expenses.scss'