added expense state (view, edit, add) logic
This commit is contained in:
Joe Arndt
parent
23132741a9
commit
fed0f7908a
9 changed files with 180 additions and 117 deletions
|
|
@ -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>
|
||||
|
|
@ -1,34 +1,37 @@
|
|||
<div class="expense-list-container">
|
||||
<mat-card appearance="outlined" class="expense-table-card">
|
||||
<mat-card-header>
|
||||
<mat-card-title>Tracked Expenses</mat-card-title>
|
||||
</mat-card-header>
|
||||
@for (expense of expenses(); track expense.id) {
|
||||
<app-expense [expense]="expense" />
|
||||
}
|
||||
<!-- <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>
|
||||
<table mat-table [dataSource]="expenses()" class="expense-table">
|
||||
<ng-container matColumnDef="date">
|
||||
<th mat-header-cell *matHeaderCellDef>Date</th>
|
||||
<td mat-cell *matCellDef="let expense">{{ `${expense.year}/${expense.month}/${expense.day}` | date }}</td>
|
||||
</ng-container>
|
||||
<!-- <mat-card-content>-->
|
||||
<!-- <table mat-table [dataSource]="expenses()" class="expense-table">-->
|
||||
<!-- <ng-container matColumnDef="date">-->
|
||||
<!-- <th mat-header-cell *matHeaderCellDef>Date</th>-->
|
||||
<!-- <td mat-cell *matCellDef="let expense">{{ `${expense.year}/${expense.month}/${expense.day}` | date }}</td>-->
|
||||
<!-- </ng-container>-->
|
||||
|
||||
<ng-container matColumnDef="amount">
|
||||
<th mat-header-cell *matHeaderCellDef>Amount</th>
|
||||
<td mat-cell *matCellDef="let expense">{{ (expense.cents / 100) | currency: 'USD' }}</td>
|
||||
</ng-container>
|
||||
<!-- <ng-container matColumnDef="amount">-->
|
||||
<!-- <th mat-header-cell *matHeaderCellDef>Amount</th>-->
|
||||
<!-- <td mat-cell *matCellDef="let expense">{{ (expense.cents / 100) | currency: 'USD' }}</td>-->
|
||||
<!-- </ng-container>-->
|
||||
|
||||
<ng-container matColumnDef="category">
|
||||
<th mat-header-cell *matHeaderCellDef>Category</th>
|
||||
<td mat-cell *matCellDef="let expense">{{ expense.category.name }}</td>
|
||||
</ng-container>
|
||||
<!-- <ng-container matColumnDef="category">-->
|
||||
<!-- <th mat-header-cell *matHeaderCellDef>Category</th>-->
|
||||
<!-- <td mat-cell *matCellDef="let expense">{{ expense.category.name }}</td>-->
|
||||
<!-- </ng-container>-->
|
||||
|
||||
<ng-container matColumnDef="merchant">
|
||||
<th mat-header-cell *matHeaderCellDef>Merchant</th>
|
||||
<td mat-cell *matCellDef="let expense">{{ expense.merchant?.name ?? '--' }}</td>
|
||||
</ng-container>
|
||||
<!-- <ng-container matColumnDef="merchant">-->
|
||||
<!-- <th mat-header-cell *matHeaderCellDef>Merchant</th>-->
|
||||
<!-- <td mat-cell *matCellDef="let expense">{{ expense.merchant?.name ?? '--' }}</td>-->
|
||||
<!-- </ng-container>-->
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="columns"></tr>
|
||||
<tr mat-row *matRowDef="let rowData; columns: columns"></tr>
|
||||
</table>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
<!-- <tr mat-header-row *matHeaderRowDef="columns"></tr>-->
|
||||
<!-- <tr mat-row *matRowDef="let rowData; columns: columns"></tr>-->
|
||||
<!-- </table>-->
|
||||
<!-- </mat-card-content>-->
|
||||
<!-- </mat-card>-->
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
.expense-list-container {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
|
@ -3,10 +3,11 @@ import { ExpenseService } from '../../services/expense.service';
|
|||
import { MatTableModule } from '@angular/material/table';
|
||||
import { CurrencyPipe, DatePipe } from '@angular/common';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import {ExpenseComponent} from '../expense/expense.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-expense-list',
|
||||
imports: [MatTableModule, MatCardModule, DatePipe, CurrencyPipe],
|
||||
imports: [MatTableModule, MatCardModule, DatePipe, CurrencyPipe, ExpenseComponent],
|
||||
templateUrl: './expense-list.component.html',
|
||||
styleUrl: './expense-list.component.scss',
|
||||
})
|
||||
|
|
|
|||
96
src/app/components/expense/expense.component.html
Normal file
96
src/app/components/expense/expense.component.html
Normal 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>
|
||||
|
|
@ -1,23 +1,27 @@
|
|||
.add-expense-container {
|
||||
.expense-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
mat-card {
|
||||
mat-card {
|
||||
max-width: 800px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
mat-card-header {
|
||||
padding-bottom: 1rem;
|
||||
|
||||
.expense-header {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
mat-card-content {
|
||||
.expense-content {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
|
|
@ -26,14 +30,14 @@ mat-form-field {
|
|||
}
|
||||
|
||||
@media (min-width: 550px) {
|
||||
mat-card-content {
|
||||
.expense-content {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 800px) {
|
||||
mat-card-content {
|
||||
.expense-content {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
|
@ -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 { Merchant, MerchantService } from '../../services/merchant.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 { MatButtonModule } from '@angular/material/button';
|
||||
import { provideNativeDateAdapter } from '@angular/material/core';
|
||||
import { CreateExpense, ExpenseService } from '../../services/expense.service';
|
||||
import { DatePipe } from '@angular/common';
|
||||
import { CreateExpense, Expense, ExpenseService } from '../../services/expense.service';
|
||||
import {CurrencyPipe, DatePipe} from '@angular/common';
|
||||
import {MatIcon} from '@angular/material/icon';
|
||||
|
||||
interface ExpenseForm {
|
||||
date: Date | string;
|
||||
|
|
@ -24,13 +25,17 @@ interface ExpenseForm {
|
|||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-add-expense',
|
||||
imports: [MatDatepickerModule, MatFormFieldModule, MatInputModule, MatCardModule, MatAutocompleteModule, MatSelectModule, MatButtonModule, FormField],
|
||||
selector: 'app-expense',
|
||||
imports: [MatDatepickerModule, MatFormFieldModule, MatInputModule, MatCardModule, MatAutocompleteModule, MatSelectModule, MatButtonModule, FormField, DatePipe, MatIcon, CurrencyPipe],
|
||||
providers: [provideNativeDateAdapter(), DatePipe],
|
||||
templateUrl: './add-expense.component.html',
|
||||
styleUrl: './add-expense.component.scss',
|
||||
templateUrl: './expense.component.html',
|
||||
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 merchants = computed(() => this.merchantService.merchants());
|
||||
protected tags = computed(() => this.tagService.tags());
|
||||
|
|
@ -41,19 +46,24 @@ export class AddExpenseComponent {
|
|||
const merchantValid = this.expenseForm.merchant().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 = {
|
||||
date: '',
|
||||
cents: NaN,
|
||||
category: '',
|
||||
merchant: '',
|
||||
note: '',
|
||||
tags: []
|
||||
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(),
|
||||
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) => {
|
||||
required(schema.date);
|
||||
required(schema.cents);
|
||||
|
|
@ -84,7 +94,8 @@ export class AddExpenseComponent {
|
|||
this.saving.set(true);
|
||||
try {
|
||||
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());
|
||||
}
|
||||
catch (error) {
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="expenses-container">
|
||||
<app-add-expense />
|
||||
<app-expense />
|
||||
<app-expense-list />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
import { Component } from '@angular/core';
|
||||
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({
|
||||
selector: 'app-expenses',
|
||||
imports: [
|
||||
ExpenseListComponent,
|
||||
AddExpenseComponent
|
||||
ExpenseComponent
|
||||
],
|
||||
templateUrl: './expenses.html',
|
||||
styleUrl: './expenses.scss'
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue