scaffold expense list

src/app/components/expense-list/expense-list.component.html

@@ -0,0 +1,7 @@
+<div class="expense-list-container">
+  @for (expense of expenses(); track expense.id) {
+    <div class="expense-item">
+      <app-expense [expense]="expense" />
+    </div>
+  }
+</div>

src/app/components/expense-list/expense-list.component.scss

@@ -0,0 +1,7 @@
+.expense-list-container {
+  padding: 1rem;
+}
+
+.expense-item {
+  padding-bottom: 1rem;
+}

src/app/components/expense-list/expense-list.component.ts

@@ -0,0 +1,46 @@
+import { Component, OnInit, signal } from '@angular/core';
+import { Expense, ExpenseService } from '../../services/expense.service';
+import { ExpenseComponent } from '../expense/expense.component';
+import { Category, CategoryService } from '../../services/category.service';
+import { SubCategory, SubCategoryService } from '../../services/sub-category.service';
+import { Merchant, MerchantService } from '../../services/merchant.service';
+import { Tag, TagService } from '../../services/tag.service';
+
+@Component({
+  selector: 'app-expense-list',
+  imports: [
+    ExpenseComponent
+  ],
+  templateUrl: './expense-list.component.html',
+  styleUrl: './expense-list.component.scss',
+})
+export class ExpenseListComponent implements OnInit {
+  protected expenses = signal<Expense[]>([]);
+  protected categories = signal<Category[]>([]);
+  protected subCategories = signal<SubCategory[]>([]);
+  protected merchants = signal<Merchant[]>([]);
+  protected tags = signal<Tag[]>([]);
+
+  public constructor(private readonly expensesService: ExpenseService,
+                     private readonly categoryService: CategoryService,
+                     private readonly subCategoryService: SubCategoryService,
+                     private readonly merchantService: MerchantService,
+                     private readonly tagService: TagService) { }
+
+  public ngOnInit() {
+    Promise.all([
+      this.expensesService.getExpenses(),
+      this.categoryService.getCategories(),
+      this.subCategoryService.getSubCategories(),
+      this.merchantService.getMerchants(),
+      this.tagService.getTags()
+    ]).then(([expenses, categories, subCategories, merchants, tags]) => {
+      console.log({ expenses, categories, subCategories, merchants, tags }); // TODO: Remove me
+      this.expenses.set(expenses);
+      this.categories.set(categories);
+      this.subCategories.set(subCategories);
+      this.merchants.set(merchants);
+      this.tags.set(tags);
+    })
+  }
+}

src/app/components/expense-list/expense-list.html

@@ -1,3 +0,0 @@
-<div class="expense-list-container">
-  <p>expense-list works!</p>
-</div>

src/app/components/expense-list/expense-list.ts

@@ -1,18 +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() {
-    this.expenses.getExpenses().then(expenses => {
-      console.log({ expenses });
-    });
-  }
-}

src/app/components/expense/expense.component.html

@@ -0,0 +1,37 @@
+<div class="expense-container">
+  <div class="expense-header">
+    <div class="expense-date">
+      {{ `${expense().year}/${expense().month}/${expense().day}` | date }}
+    </div>
+
+    <div class="expense-amount">
+      {{ (expense().cents / 100) | currency: 'USD' }}
+    </div>
+
+    @if (expense().merchant) {
+      <div class="expense-merchant">&#64; {{ expense().merchant?.name }}</div>
+    }
+  </div>
+
+  <div class="expense-body">
+    <div>
+      Category: {{ expense().category.name }}
+      @if (expense().subCategory) {
+        / {{ expense().subCategory?.name }}
+      }
+    </div>
+
+    <div>
+      Description: {{ expense().description }}
+    </div>
+  </div>
+
+  <div class="expense-footer">
+    <div class="expense-tags">
+      <div>Tags:</div>
+      @for (tag of expense().tags; track tag.id) {
+        <div>{{ tag.name }}</div>
+      }
+    </div>
+  </div>
+</div>

src/app/components/expense/expense.component.scss

@@ -0,0 +1,24 @@
+.expense-container {
+  border-radius: 5px;
+  padding: 1rem;
+  box-shadow: rgba(99, 99, 99, 0.2) 0 2px 8px 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.expense-header {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.expense-body {
+
+}
+
+.expense-footer {
+  .expense-tags {
+    display: flex;
+    gap: 0.5rem;
+  }
+}

src/app/components/expense/expense.component.ts

@@ -0,0 +1,16 @@
+import {Component, input} from '@angular/core';
+import { Expense } from '../../services/expense.service';
+import {CurrencyPipe, DatePipe} from '@angular/common';
+
+@Component({
+  selector: 'app-expense',
+  imports: [
+    CurrencyPipe,
+    DatePipe
+  ],
+  templateUrl: './expense.component.html',
+  styleUrl: './expense.component.scss',
+})
+export class ExpenseComponent {
+  public expense = input.required<Expense>();
+}