Basic API consumption support and refactored UI to use material (#1)
Co-authored-by: Joe Arndt <jmarndt@users.noreply.github.com> Reviewed-on: #1
This commit is contained in:
parent
bd18fecdff
commit
f2226b2bfd
34 changed files with 726 additions and 55 deletions
58
package-lock.json
generated
58
package-lock.json
generated
|
|
@ -8,12 +8,15 @@
|
|||
"name": "common-cents-web",
|
||||
"version": "0.0.0",
|
||||
"dependencies": {
|
||||
"@angular/cdk": "~21.1.4",
|
||||
"@angular/common": "^21.1.0",
|
||||
"@angular/compiler": "^21.1.0",
|
||||
"@angular/core": "^21.1.0",
|
||||
"@angular/forms": "^21.1.0",
|
||||
"@angular/material": "~21.1.4",
|
||||
"@angular/platform-browser": "^21.1.0",
|
||||
"@angular/router": "^21.1.0",
|
||||
"@js-temporal/polyfill": "^0.5.1",
|
||||
"rxjs": "~7.8.0",
|
||||
"tslib": "^2.3.0"
|
||||
},
|
||||
|
|
@ -21,6 +24,7 @@
|
|||
"@angular/build": "^21.1.3",
|
||||
"@angular/cli": "^21.1.3",
|
||||
"@angular/compiler-cli": "^21.1.0",
|
||||
"@angular/material": "^21.1.4",
|
||||
"jsdom": "^27.1.0",
|
||||
"typescript": "~5.9.2",
|
||||
"vitest": "^4.0.8"
|
||||
|
|
@ -422,6 +426,22 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@angular/cdk": {
|
||||
"version": "21.1.4",
|
||||
"resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-21.1.4.tgz",
|
||||
"integrity": "sha512-PElA4Ww4TIa3+B/ND+fm8ZPDKONTIqc9a/s0qNxhcAD9IpDqjaBVi/fyg+ZWBtS+x0DQgJtKeCsSZ6sr2aFQaQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"parse5": "^8.0.0",
|
||||
"tslib": "^2.3.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@angular/common": "^21.0.0 || ^22.0.0",
|
||||
"@angular/core": "^21.0.0 || ^22.0.0",
|
||||
"@angular/platform-browser": "^21.0.0 || ^22.0.0",
|
||||
"rxjs": "^6.5.3 || ^7.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@angular/cli": {
|
||||
"version": "21.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@angular/cli/-/cli-21.1.3.tgz",
|
||||
|
|
@ -563,6 +583,24 @@
|
|||
"rxjs": "^6.5.3 || ^7.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@angular/material": {
|
||||
"version": "21.1.4",
|
||||
"resolved": "https://registry.npmjs.org/@angular/material/-/material-21.1.4.tgz",
|
||||
"integrity": "sha512-Vte+4os5JexhtaPk7Duk5bIC+zU5SYF7ZHUnpmAJxW0u4D4C9lpTVepm2bfMVV2AxHjHVAnW+/anINIS401UsA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"tslib": "^2.3.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@angular/cdk": "21.1.4",
|
||||
"@angular/common": "^21.0.0 || ^22.0.0",
|
||||
"@angular/core": "^21.0.0 || ^22.0.0",
|
||||
"@angular/forms": "^21.0.0 || ^22.0.0",
|
||||
"@angular/platform-browser": "^21.0.0 || ^22.0.0",
|
||||
"rxjs": "^6.5.3 || ^7.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@angular/platform-browser": {
|
||||
"version": "21.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-21.1.3.tgz",
|
||||
|
|
@ -2036,6 +2074,18 @@
|
|||
"@jridgewell/sourcemap-codec": "^1.4.14"
|
||||
}
|
||||
},
|
||||
"node_modules/@js-temporal/polyfill": {
|
||||
"version": "0.5.1",
|
||||
"resolved": "https://registry.npmjs.org/@js-temporal/polyfill/-/polyfill-0.5.1.tgz",
|
||||
"integrity": "sha512-hloP58zRVCRSpgDxmqCWJNlizAlUgJFqG2ypq79DCvyv9tHjRYMDOcPFjzfl/A1/YxDvRCZz8wvZvmapQnKwFQ==",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"jsbi": "^4.3.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/@listr2/prompt-adapter-inquirer": {
|
||||
"version": "3.0.5",
|
||||
"resolved": "https://registry.npmjs.org/@listr2/prompt-adapter-inquirer/-/prompt-adapter-inquirer-3.0.5.tgz",
|
||||
|
|
@ -5854,6 +5904,12 @@
|
|||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/jsbi": {
|
||||
"version": "4.3.2",
|
||||
"resolved": "https://registry.npmjs.org/jsbi/-/jsbi-4.3.2.tgz",
|
||||
"integrity": "sha512-9fqMSQbhJykSeii05nxKl4m6Eqn2P6rOlYiS+C5Dr/HPIU/7yZxu5qzbs40tgaFORiw2Amd0mirjxatXYMkIew==",
|
||||
"license": "Apache-2.0"
|
||||
},
|
||||
"node_modules/jsdom": {
|
||||
"version": "27.4.0",
|
||||
"resolved": "https://registry.npmjs.org/jsdom/-/jsdom-27.4.0.tgz",
|
||||
|
|
@ -6845,7 +6901,6 @@
|
|||
"version": "8.0.0",
|
||||
"resolved": "https://registry.npmjs.org/parse5/-/parse5-8.0.0.tgz",
|
||||
"integrity": "sha512-9m4m5GSgXjL4AjumKzq1Fgfp3Z8rsvjRNbnkVwfu2ImRqE5D0LnY2QfDen18FSY9C573YU5XxSapdHZTZ2WolA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"entities": "^6.0.0"
|
||||
|
|
@ -6899,7 +6954,6 @@
|
|||
"version": "6.0.1",
|
||||
"resolved": "https://registry.npmjs.org/entities/-/entities-6.0.1.tgz",
|
||||
"integrity": "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==",
|
||||
"dev": true,
|
||||
"license": "BSD-2-Clause",
|
||||
"engines": {
|
||||
"node": ">=0.12"
|
||||
|
|
|
|||
|
|
@ -23,12 +23,15 @@
|
|||
"private": true,
|
||||
"packageManager": "npm@10.9.2",
|
||||
"dependencies": {
|
||||
"@angular/cdk": "~21.1.4",
|
||||
"@angular/common": "^21.1.0",
|
||||
"@angular/compiler": "^21.1.0",
|
||||
"@angular/core": "^21.1.0",
|
||||
"@angular/forms": "^21.1.0",
|
||||
"@angular/material": "~21.1.4",
|
||||
"@angular/platform-browser": "^21.1.0",
|
||||
"@angular/router": "^21.1.0",
|
||||
"@js-temporal/polyfill": "^0.5.1",
|
||||
"rxjs": "~7.8.0",
|
||||
"tslib": "^2.3.0"
|
||||
},
|
||||
|
|
@ -36,6 +39,7 @@
|
|||
"@angular/build": "^21.1.3",
|
||||
"@angular/cli": "^21.1.3",
|
||||
"@angular/compiler-cli": "^21.1.0",
|
||||
"@angular/material": "^21.1.4",
|
||||
"jsdom": "^27.1.0",
|
||||
"typescript": "~5.9.2",
|
||||
"vitest": "^4.0.8"
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/core';
|
||||
import { provideRouter } from '@angular/router';
|
||||
|
||||
import { routes } from './app.routes';
|
||||
|
||||
export const appConfig: ApplicationConfig = {
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
import { Routes } from '@angular/router';
|
||||
import { Expenses } from './pages/expenses/expenses';
|
||||
import { Home } from './pages/home/home';
|
||||
import { ExpensePage } from './pages/expenses/expense-page.component';
|
||||
import { HomePage } from './pages/home/home-page.component';
|
||||
|
||||
export const routes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
component: Home
|
||||
component: HomePage
|
||||
},
|
||||
{
|
||||
path: 'expenses',
|
||||
component: Expenses
|
||||
component: ExpensePage
|
||||
}
|
||||
];
|
||||
|
|
|
|||
|
|
@ -1,3 +1,7 @@
|
|||
.app-content {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3.125rem;
|
||||
line-height: 100%;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,6 @@
|
|||
<div class="expense-list-container">
|
||||
<h2>Expenses</h2>
|
||||
@for (expense of expenses(); track expense.id) {
|
||||
<app-expense [expense]="expense" />
|
||||
}
|
||||
</div>
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
.expense-list-container {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
}
|
||||
17
src/app/components/expense-list/expense-list.component.ts
Normal file
17
src/app/components/expense-list/expense-list.component.ts
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
import { Component, computed } from '@angular/core';
|
||||
import { ExpenseService } from '../../services/expense.service';
|
||||
import { MatTableModule } from '@angular/material/table';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import { ExpenseComponent } from '../expense/expense.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-expense-list',
|
||||
imports: [MatTableModule, MatCardModule, ExpenseComponent],
|
||||
templateUrl: './expense-list.component.html',
|
||||
styleUrl: './expense-list.component.scss'
|
||||
})
|
||||
export class ExpenseListComponent {
|
||||
protected expenses = computed(() => this.expensesService.expenses())
|
||||
|
||||
public constructor(private readonly expensesService: ExpenseService) { }
|
||||
}
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
<div class="expense-list-container">
|
||||
<p>expense-list works!</p>
|
||||
</div>
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
import { Expenses } from '../../services/expenses';
|
||||
|
||||
@Component({
|
||||
selector: 'app-expense-list',
|
||||
imports: [],
|
||||
templateUrl: './expense-list.html',
|
||||
styleUrl: './expense-list.scss',
|
||||
})
|
||||
export class ExpenseList implements OnInit {
|
||||
public constructor(private readonly expenses: Expenses) { }
|
||||
|
||||
public ngOnInit() {
|
||||
void this.expenses.getExpenses();
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<div class="expense-form-container">
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Date</mat-label>
|
||||
<input matInput [matDatepicker]="expenseDatePicker" [formField]="form.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]="form.cents">
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Category</mat-label>
|
||||
<input type="text" matInput [matAutocomplete]="categoryAuto" [formField]="form.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]="form.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]="form.note"></textarea>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Tags</mat-label>
|
||||
<mat-select disableRipple multiple [formField]="form.tags">
|
||||
@for (tag of tags(); track tag.id) {
|
||||
<mat-option [value]="tag">{{ tag.name }}</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
.expense-form-container {
|
||||
display: grid;
|
||||
|
||||
mat-form-field {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 550px) {
|
||||
.expense-form-container {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 800px) {
|
||||
.expense-form-container {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,124 @@
|
|||
import { Component, computed, effect, input, OnInit, output, signal } from '@angular/core';
|
||||
import { min, required, disabled, form, FormField, Schema, schema } from '@angular/forms/signals';
|
||||
import { Expense } from '../../../services/expense.service';
|
||||
import { Category, CategoryService } from '../../../services/category.service';
|
||||
import { Merchant, MerchantService } from '../../../services/merchant.service';
|
||||
import { Tag, TagService } from '../../../services/tag.service';
|
||||
import { MatAutocompleteModule } from '@angular/material/autocomplete';
|
||||
import { MatDatepickerModule } from '@angular/material/datepicker';
|
||||
import { MatInputModule } from '@angular/material/input';
|
||||
import { MatSelectModule } from '@angular/material/select';
|
||||
import { provideNativeDateAdapter } from '@angular/material/core';
|
||||
|
||||
export interface ExpenseForm {
|
||||
date: Date;
|
||||
cents: number;
|
||||
category: Category;
|
||||
merchant: Merchant;
|
||||
note: string;
|
||||
tags: Tag[];
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-expense-form',
|
||||
imports: [MatAutocompleteModule, MatDatepickerModule, MatInputModule, MatSelectModule, FormField],
|
||||
providers: [provideNativeDateAdapter()],
|
||||
templateUrl: './expense-form.component.html',
|
||||
styleUrl: './expense-form.component.scss'
|
||||
})
|
||||
export class ExpenseFormComponent implements OnInit {
|
||||
public expense = input<Expense>();
|
||||
public disabled = input<boolean>(false);
|
||||
public valid = output<boolean>();
|
||||
public dirty = output<boolean>()
|
||||
public value = output<ExpenseForm>();
|
||||
|
||||
private lastDate = signal<Date | undefined>(undefined);
|
||||
private formValid = computed(() => this.form().valid() && this.form().dirty());
|
||||
private formDirty = computed(() => this.form().dirty() || this.form().touched());
|
||||
private formData = signal(this.buildForm(this.expense()));
|
||||
private formModel = signal<ExpenseForm>(this.formData());
|
||||
|
||||
protected categories = computed(() => this.categoryService.categories());
|
||||
protected merchants = computed(() => this.merchantService.merchants());
|
||||
protected tags = computed(() => this.tagService.tags());
|
||||
protected form = form(this.formModel, this.buildFormOptions());
|
||||
|
||||
constructor(private readonly categoryService: CategoryService,
|
||||
private readonly merchantService: MerchantService,
|
||||
private readonly tagService: TagService) {
|
||||
effect(() => {
|
||||
const valid = this.formValid();
|
||||
const dirty = this.formDirty();
|
||||
const value = this.form().value();
|
||||
|
||||
this.valid.emit(valid);
|
||||
this.dirty.emit(dirty);
|
||||
this.value.emit(value);
|
||||
this.lastDate.set(value.date);
|
||||
});
|
||||
}
|
||||
|
||||
public ngOnInit(): void {
|
||||
this.initialize();
|
||||
}
|
||||
|
||||
public reset(clearDate = false): void {
|
||||
if (clearDate) {
|
||||
this.lastDate.set(undefined);
|
||||
}
|
||||
this.initialize();
|
||||
}
|
||||
|
||||
public refresh(expense: Expense): void {
|
||||
this.initialize();
|
||||
this.formData.set(this.buildForm(expense));
|
||||
this.formModel.set(this.formData());
|
||||
this.form().reset(this.formModel());
|
||||
}
|
||||
|
||||
public autocompleteDisplay(value: Merchant | Category) {
|
||||
return value?.name ?? null;
|
||||
}
|
||||
|
||||
private initialize(): void {
|
||||
this.formData.set(this.buildForm(this.expense()));
|
||||
this.formModel.set(this.formData());
|
||||
this.form().reset(this.formModel());
|
||||
}
|
||||
|
||||
private buildForm(expense?: Expense): ExpenseForm {
|
||||
let formData = { date: this.lastDate() ?? '', cents: NaN, category: {}, merchant: {}, note: '', tags: [] } as unknown as ExpenseForm
|
||||
if (expense) {
|
||||
const date = expense.date.toString().split('-');
|
||||
const day = Number(date[2]);
|
||||
const month = Number(date[1]) - 1;
|
||||
const year = Number(date[0]);
|
||||
formData = {
|
||||
date: new Date(year, month, day),
|
||||
cents: expense.cents,
|
||||
category: expense.category,
|
||||
merchant: expense.merchant ?? {},
|
||||
note: expense.note ?? '',
|
||||
tags: expense.tags ?? []
|
||||
} as ExpenseForm;
|
||||
}
|
||||
|
||||
return formData;
|
||||
}
|
||||
|
||||
private buildFormOptions(): Schema<ExpenseForm> {
|
||||
return schema<ExpenseForm>((schema) => {
|
||||
required(schema.date);
|
||||
required(schema.cents);
|
||||
required(schema.category);
|
||||
min(schema.cents, 1);
|
||||
disabled(schema.date, () => this.disabled());
|
||||
disabled(schema.cents, () => this.disabled());
|
||||
disabled(schema.category, () => this.disabled());
|
||||
disabled(schema.merchant, () => this.disabled());
|
||||
disabled(schema.note, () => this.disabled());
|
||||
disabled(schema.tags, () => this.disabled());
|
||||
});
|
||||
}
|
||||
}
|
||||
30
src/app/components/expense/expense.component.html
Normal file
30
src/app/components/expense/expense.component.html
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
<div class="expense-container">
|
||||
<mat-card appearance="outlined">
|
||||
<mat-card-header>
|
||||
<div class="expense-header">
|
||||
@if (!expense()) {
|
||||
<mat-card-title>Add new Expense</mat-card-title>
|
||||
<button matIconButton [disabled]="!formDirty() || savingExpense()" (click)="resetAddClick()"><mat-icon>replay</mat-icon></button>
|
||||
<button matIconButton [disabled]="!formValid() || savingExpense()" (click)="addClick()"><mat-icon>add</mat-icon></button>
|
||||
} @else {
|
||||
@if (!editingExpense()) {
|
||||
<mat-card-title>{{ expense()?.date?.toString() | date }}: {{ expense()?.cents! / 100 | currency }}</mat-card-title>
|
||||
<button matIconButton (click)="editClick()"><mat-icon>edit</mat-icon></button>
|
||||
} @else {
|
||||
<mat-card-title>Update Expense</mat-card-title>
|
||||
<button matIconButton [disabled]="savingExpense()" (click)="cancelUpdateClick()"><mat-icon>undo</mat-icon></button>
|
||||
<button matIconButton [disabled]="!formValid() || savingExpense()" (click)="updateClick()"><mat-icon>save</mat-icon></button>
|
||||
}
|
||||
}
|
||||
</div>
|
||||
</mat-card-header>
|
||||
|
||||
<mat-card-content>
|
||||
<app-expense-form [expense]="expense()"
|
||||
[disabled]="savingExpense() || !!expense() && !editingExpense()"
|
||||
(valid)="formValid.set($event)"
|
||||
(dirty)="formDirty.set($event)"
|
||||
(value)="formData.set($event)" />
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
22
src/app/components/expense/expense.component.scss
Normal file
22
src/app/components/expense/expense.component.scss
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
.expense-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
mat-card {
|
||||
max-width: 800px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
mat-card-header {
|
||||
padding-bottom: 1rem;
|
||||
|
||||
.expense-header {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
}
|
||||
109
src/app/components/expense/expense.component.ts
Normal file
109
src/app/components/expense/expense.component.ts
Normal file
|
|
@ -0,0 +1,109 @@
|
|||
import { Component, model, signal, viewChild } from '@angular/core';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { CreateExpense, Expense, ExpenseService, UpdateExpense } from '../../services/expense.service';
|
||||
import { MatIcon } from '@angular/material/icon';
|
||||
import { ExpenseForm, ExpenseFormComponent } from './expense-form/expense-form.component';
|
||||
import { CurrencyPipe, DatePipe } from '@angular/common';
|
||||
import { Temporal } from '@js-temporal/polyfill';
|
||||
import { SnackBarService } from '../../services/snack-bar';
|
||||
|
||||
@Component({
|
||||
selector: 'app-expense',
|
||||
imports: [MatCardModule, MatButtonModule, MatIcon, ExpenseFormComponent, DatePipe, CurrencyPipe],
|
||||
providers: [],
|
||||
templateUrl: './expense.component.html',
|
||||
styleUrl: './expense.component.scss'
|
||||
})
|
||||
export class ExpenseComponent {
|
||||
private form = viewChild(ExpenseFormComponent);
|
||||
|
||||
public editingExpense = signal(false);
|
||||
public savingExpense = signal(false);
|
||||
|
||||
public expense = model<Expense>();
|
||||
public formValid = model(false);
|
||||
public formDirty = model(false);
|
||||
public formData = model<ExpenseForm>();
|
||||
|
||||
public constructor(private readonly expenseService: ExpenseService,
|
||||
private readonly snackBar: SnackBarService) { }
|
||||
|
||||
public editClick(): void {
|
||||
this.editingExpense.set(true);
|
||||
}
|
||||
|
||||
public async addClick(): Promise<void> {
|
||||
const form = this.formData()!;
|
||||
const postExpense: CreateExpense = {
|
||||
date: this.dateToPlainDate(form.date),
|
||||
cents: form.cents,
|
||||
categoryId: form.category.id,
|
||||
note: !!form.note ? form.note : undefined,
|
||||
merchantId: !!form.merchant ? form.merchant.id : undefined,
|
||||
tagIds: form.tags.map(tag => tag.id)
|
||||
};
|
||||
this.savingExpense.set(true);
|
||||
const snackId = this.snackBar.staticBar('Tracking new expense...');
|
||||
try {
|
||||
await this.expenseService.postExpense(postExpense);
|
||||
this.resetForm();
|
||||
this.snackBar.dismiss(snackId);
|
||||
this.snackBar.autoBar('Expense tracked!');
|
||||
}
|
||||
catch (error) {
|
||||
this.snackBar.dismiss(snackId);
|
||||
this.snackBar.dismissableBar('Error: '); // TODO
|
||||
}
|
||||
finally {
|
||||
this.savingExpense.set(false);
|
||||
}
|
||||
}
|
||||
|
||||
public resetAddClick(): void {
|
||||
this.resetForm(true);
|
||||
}
|
||||
|
||||
public async updateClick(): Promise<void> {
|
||||
const form = this.formData()!;
|
||||
const putExpense: UpdateExpense = {
|
||||
id: this.expense()!.id,
|
||||
date: this.dateToPlainDate(form.date),
|
||||
cents: form.cents,
|
||||
categoryId: form.category.id,
|
||||
note: !!form.note ? form.note : undefined,
|
||||
merchantId: !!form.merchant ? form.merchant.id : undefined,
|
||||
tagIds: form.tags.map(tag => tag.id)
|
||||
};
|
||||
this.savingExpense.set(true);
|
||||
const snackId = this.snackBar.staticBar('Updating expense...');
|
||||
try {
|
||||
const expense = await this.expenseService.updateExpense(putExpense);
|
||||
this.expense.set(expense);
|
||||
this.form()?.refresh(expense);
|
||||
this.editingExpense.set(false);
|
||||
this.snackBar.dismiss(snackId);
|
||||
this.snackBar.autoBar('Expense updated!');
|
||||
}
|
||||
catch (error) {
|
||||
this.snackBar.dismiss(snackId);
|
||||
this.snackBar.dismissableBar('Error: '); // TODO
|
||||
}
|
||||
finally {
|
||||
this.savingExpense.set(false);
|
||||
}
|
||||
}
|
||||
|
||||
public cancelUpdateClick(): void {
|
||||
this.resetForm();
|
||||
}
|
||||
|
||||
private resetForm(clearDate = false): void {
|
||||
this.form()?.reset(clearDate);
|
||||
this.editingExpense.set(false);
|
||||
}
|
||||
|
||||
private dateToPlainDate(date: Date): Temporal.PlainDate {
|
||||
return new Temporal.PlainDate(date.getFullYear(), date.getMonth() + 1, date.getDate());
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +1,4 @@
|
|||
<div class="expenses-container">
|
||||
<app-expense />
|
||||
<app-expense-list />
|
||||
</div>
|
||||
5
src/app/pages/expenses/expense-page.component.scss
Normal file
5
src/app/pages/expenses/expense-page.component.scss
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
.expenses-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
14
src/app/pages/expenses/expense-page.component.ts
Normal file
14
src/app/pages/expenses/expense-page.component.ts
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { ExpenseListComponent } from '../../components/expense-list/expense-list.component';
|
||||
import { ExpenseComponent } from '../../components/expense/expense.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-expenses',
|
||||
imports: [
|
||||
ExpenseListComponent,
|
||||
ExpenseComponent
|
||||
],
|
||||
templateUrl: './expense-page.component.html',
|
||||
styleUrl: './expense-page.component.scss'
|
||||
})
|
||||
export class ExpensePage { }
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { ExpenseList } from '../../components/expense-list/expense-list';
|
||||
|
||||
@Component({
|
||||
selector: 'app-expenses',
|
||||
imports: [
|
||||
ExpenseList
|
||||
],
|
||||
templateUrl: './expenses.html',
|
||||
styleUrl: './expenses.scss'
|
||||
})
|
||||
export class Expenses { }
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<div class="home-container">
|
||||
<ul>
|
||||
<li>
|
||||
<a routerLink="expenses">Expenses</a>
|
||||
<a routerLink="expenses">ExpenseService</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -6,7 +6,7 @@ import { RouterLink } from '@angular/router';
|
|||
imports: [
|
||||
RouterLink
|
||||
],
|
||||
templateUrl: './home.html',
|
||||
styleUrl: './home.scss',
|
||||
templateUrl: './home-page.component.html',
|
||||
styleUrl: './home-page.component.scss',
|
||||
})
|
||||
export class Home { }
|
||||
export class HomePage { }
|
||||
24
src/app/services/category.service.ts
Normal file
24
src/app/services/category.service.ts
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
import { Injectable, signal } from '@angular/core';
|
||||
import { HttpService } from './http.service';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class CategoryService {
|
||||
private internalCategories = signal<Category[]>([]);
|
||||
public readonly categories = this.internalCategories.asReadonly();
|
||||
public readonly categoryPath = 'http://localhost:3000/common-cents/categories';
|
||||
|
||||
public constructor(private readonly http: HttpService) {
|
||||
void this.fetchCategories();
|
||||
}
|
||||
|
||||
public async fetchCategories(): Promise<void> {
|
||||
this.internalCategories.set(await this.http.get<Category[]>(this.categoryPath));
|
||||
}
|
||||
}
|
||||
|
||||
export interface Category {
|
||||
id: string;
|
||||
name: string;
|
||||
}
|
||||
57
src/app/services/expense.service.ts
Normal file
57
src/app/services/expense.service.ts
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
import { Injectable, signal } from '@angular/core';
|
||||
import { Category } from './category.service';
|
||||
import { Merchant } from './merchant.service';
|
||||
import { Tag } from './tag.service';
|
||||
import { HttpService } from './http.service';
|
||||
import { Temporal } from '@js-temporal/polyfill';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class ExpenseService {
|
||||
private internalExpenses = signal<Expense[]>([]);
|
||||
public readonly expenses = this.internalExpenses.asReadonly();
|
||||
public readonly expensePath = 'http://localhost:3000/common-cents/expenses'; // TODO: refactor
|
||||
|
||||
public constructor(private readonly http: HttpService) {
|
||||
void this.fetchExpenses();
|
||||
}
|
||||
|
||||
public async fetchExpenses(): Promise<void> {
|
||||
this.internalExpenses.set(await this.http.get(this.expensePath));
|
||||
}
|
||||
|
||||
public async postExpense(createExpense: CreateExpense): Promise<Expense> {
|
||||
const createdExpense = await this.http.post<Expense>(this.expensePath, createExpense);
|
||||
await this.fetchExpenses();
|
||||
|
||||
return createdExpense;
|
||||
}
|
||||
|
||||
public async updateExpense(updateExpense: UpdateExpense): Promise<Expense> {
|
||||
return await this.http.put<Expense>(this.expensePath, updateExpense);
|
||||
}
|
||||
}
|
||||
|
||||
export interface Expense {
|
||||
id: string;
|
||||
date: Date;
|
||||
cents: number;
|
||||
category: Category;
|
||||
note?: string;
|
||||
merchant?: Merchant;
|
||||
tags: Tag[];
|
||||
}
|
||||
|
||||
export interface CreateExpense {
|
||||
date: Temporal.PlainDate;
|
||||
cents: number;
|
||||
categoryId: string;
|
||||
note?: string;
|
||||
merchantId?: string;
|
||||
tagIds?: string[];
|
||||
}
|
||||
|
||||
export interface UpdateExpense extends CreateExpense {
|
||||
id: string;
|
||||
}
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
import { Injectable } from '@angular/core';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root',
|
||||
})
|
||||
export class Expenses {
|
||||
public static readonly BASE_URL = 'http://localhost:3000/common-cents/expenses';
|
||||
|
||||
public async getExpenses(): Promise<void> {
|
||||
console.log('getExpenses called');
|
||||
}
|
||||
}
|
||||
40
src/app/services/http.service.ts
Normal file
40
src/app/services/http.service.ts
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
import { Injectable } from '@angular/core';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { firstValueFrom } from 'rxjs';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class HttpService {
|
||||
public constructor(private httpClient: HttpClient) { }
|
||||
|
||||
public async get<T>(url: string): Promise<T> {
|
||||
return this.request<T>(url, 'get');
|
||||
}
|
||||
|
||||
public async post<T>(url: string, body?: any): Promise<T> {
|
||||
return this.request<T>(url, 'post', body);
|
||||
}
|
||||
|
||||
public async put<T>(url: string, body?: any): Promise<T> {
|
||||
return this.request<T>(url, 'put', body);
|
||||
}
|
||||
|
||||
public async delete<T>(url: string): Promise<T> {
|
||||
return this.request<T>(url, 'delete');
|
||||
}
|
||||
|
||||
private async request<T>(url: string, method: 'get' | 'post' | 'put' | 'delete', body?: any): Promise<T> {
|
||||
const headers = { 'Accept': 'application/json', 'Content-Type': 'application/json' };
|
||||
switch (method) {
|
||||
case 'post':
|
||||
return firstValueFrom(this.httpClient.post<T>(url, body, { headers }));
|
||||
case 'put':
|
||||
return firstValueFrom(this.httpClient.put<T>(url, body, { headers }));
|
||||
case 'delete':
|
||||
return firstValueFrom(this.httpClient.delete<T>(url, { headers }));
|
||||
default:
|
||||
return firstValueFrom(this.httpClient.get<T>(url, { headers }));
|
||||
}
|
||||
}
|
||||
}
|
||||
24
src/app/services/merchant.service.ts
Normal file
24
src/app/services/merchant.service.ts
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
import { Injectable, signal } from '@angular/core';
|
||||
import { HttpService } from './http.service';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class MerchantService {
|
||||
private internalMerchants = signal<Merchant[]>([]);
|
||||
public readonly merchants = this.internalMerchants.asReadonly();
|
||||
public readonly merchantPath = 'http://localhost:3000/common-cents/merchants';
|
||||
|
||||
public constructor(private readonly http: HttpService) {
|
||||
void this.fetchMerchants();
|
||||
}
|
||||
|
||||
public async fetchMerchants(): Promise<void> {
|
||||
this.internalMerchants.set(await this.http.get<Merchant[]>(this.merchantPath));
|
||||
}
|
||||
}
|
||||
|
||||
export interface Merchant {
|
||||
id: string;
|
||||
name: string;
|
||||
}
|
||||
44
src/app/services/snack-bar.ts
Normal file
44
src/app/services/snack-bar.ts
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
import { Injectable, signal } from '@angular/core';
|
||||
import { MatSnackBar, MatSnackBarRef, TextOnlySnackBar } from '@angular/material/snack-bar';
|
||||
|
||||
interface SnackBar {
|
||||
id: string;
|
||||
ref: MatSnackBarRef<TextOnlySnackBar>;
|
||||
}
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class SnackBarService {
|
||||
protected TIMEOUT = 3000;
|
||||
|
||||
private snackBars = signal<SnackBar[]>([]);
|
||||
|
||||
public constructor(private snackBar: MatSnackBar) { }
|
||||
|
||||
public autoBar(msg: string, milliseconds = this.TIMEOUT): void {
|
||||
const timeout = milliseconds ?? this.TIMEOUT;
|
||||
this.snackBar.open(msg, undefined, { duration: timeout });
|
||||
}
|
||||
public dismissableBar(msg: string, dismissMsg = 'Dismiss'): void {
|
||||
this.snackBar.open(msg, dismissMsg);
|
||||
}
|
||||
|
||||
public staticBar(msg: string): string {
|
||||
const snackBar: SnackBar = {
|
||||
id: crypto.randomUUID().toString(),
|
||||
ref: this.snackBar.open(msg)
|
||||
};
|
||||
this.snackBars.update((bars) => [...bars, snackBar]);
|
||||
|
||||
return snackBar.id;
|
||||
}
|
||||
|
||||
public dismiss(id: string): void {
|
||||
const snackBar = this.snackBars().find((snackBar) => snackBar.id === id);
|
||||
if (snackBar) {
|
||||
snackBar.ref.dismiss();
|
||||
this.snackBars.update((bars) => bars.filter((bar) => bar.id !== snackBar.id));
|
||||
}
|
||||
}
|
||||
}
|
||||
24
src/app/services/tag.service.ts
Normal file
24
src/app/services/tag.service.ts
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
import { Injectable, signal } from '@angular/core';
|
||||
import { HttpService } from './http.service';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class TagService {
|
||||
private internalTags = signal<Tag[]>([]);
|
||||
public readonly tags = this.internalTags.asReadonly();
|
||||
public readonly tagPath = 'http://localhost:3000/common-cents/tags';
|
||||
|
||||
public constructor(private readonly http: HttpService) {
|
||||
void this.fetchTags();
|
||||
}
|
||||
|
||||
public async fetchTags(): Promise<void> {
|
||||
this.internalTags.set(await this.http.get<Tag[]>(this.tagPath));
|
||||
}
|
||||
}
|
||||
|
||||
export interface Tag {
|
||||
id: string;
|
||||
name: string;
|
||||
}
|
||||
|
|
@ -6,6 +6,10 @@
|
|||
<base href="/">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<app-root></app-root>
|
||||
|
|
|
|||
|
|
@ -1 +1,38 @@
|
|||
|
||||
// Include theming for Angular Material with `mat.theme()`.
|
||||
// This Sass mixin will define CSS variables that are used for styling Angular Material
|
||||
// components according to the Material 3 design spec.
|
||||
// Learn more about theming and how to use it for your application's
|
||||
// custom components at https://material.angular.dev/guide/theming
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
@include mat.theme((
|
||||
color: (
|
||||
primary: mat.$cyan-palette,
|
||||
tertiary: mat.$orange-palette,
|
||||
),
|
||||
typography: Roboto,
|
||||
density: 0
|
||||
));
|
||||
}
|
||||
|
||||
body {
|
||||
// Default the application to a light color theme. This can be changed to
|
||||
// `dark` to enable the dark color theme, or to `light dark` to defer to the
|
||||
// user's system settings.
|
||||
color-scheme: light dark;
|
||||
|
||||
// Set a default background, font and text colors for the application using
|
||||
// Angular Material's system-level CSS variables. Learn more about these
|
||||
// variables at https://material.angular.dev/guide/system-variables
|
||||
background-color: var(--mat-sys-surface);
|
||||
color: var(--mat-sys-on-surface);
|
||||
font: var(--mat-sys-body-medium);
|
||||
|
||||
// Reset the user agent margin.
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
}
|
||||
/* You can add global styles to this file, and also import other style files */
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue