refactored services and expense list

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

@@ -0,0 +1,19 @@
+<div class="add-expense-container">
+  <app-card [header]="'Add Expense'">
+    <div class="add-expense-body">
+      <div>Date</div>
+      <div>Amount</div>
+      <div>Category</div>
+      <div>Merchant</div>
+      <div>Tags</div>
+    </div>
+
+    <div>
+      Note
+    </div>
+
+    <div class="card-footer">
+      Test
+    </div>
+  </app-card>
+</div>

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

@@ -0,0 +1,5 @@
+.add-expense-body {
+  display: flex;
+  justify-content: space-between;
+  gap: 0.5rem;
+}

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

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import {CardComponent} from '../card/card.component';
+
+@Component({
+  selector: 'app-add-expense',
+  imports: [
+    CardComponent
+  ],
+  templateUrl: './add-expense.component.html',
+  styleUrl: './add-expense.component.scss',
+})
+export class AddExpenseComponent {
+
+}

src/app/components/card/card.component.html

@@ -0,0 +1,15 @@
+<div class="card-container">
+  @if (header()) {
+    <div class="card-header">{{ header() }}</div>
+  } @else {
+    <ng-content select="card-header" />
+  }
+
+  <ng-content />
+
+  @if (footer()) {
+    <div class="card-footer">{{ footer() }}</div>
+  } @else {
+    <ng-content select="card-footer" />
+  }
+</div>

src/app/components/card/card.component.scss

@@ -0,0 +1,8 @@
+.card-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;
+}

src/app/components/card/card.component.ts

@@ -0,0 +1,12 @@
+import { Component, input } from '@angular/core';
+
+@Component({
+  selector: 'app-card',
+  imports: [],
+  templateUrl: './card.component.html',
+  styleUrl: './card.component.scss',
+})
+export class CardComponent {
+  public header = input<string>('');
+  public footer = input<string>('');
+}

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

@@ -1,10 +1,6 @@
-import { Component, OnInit, signal } from '@angular/core';
-import { Expense, ExpenseService } from '../../services/expense.service';
+import { Component, computed } from '@angular/core';
+import { 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',
@@ -14,33 +10,8 @@ import { Tag, TagService } from '../../services/tag.service';
   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[]>([]);
+export class ExpenseListComponent {
+  protected expenses = computed(() => this.expensesService.expenses())
 
-  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);
-    })
-  }
+  public constructor(private readonly expensesService: ExpenseService) { }
 }

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

@@ -1,34 +1,25 @@
 <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>
+    {{ `${expense().year}/${expense().month}/${expense().day}` | date }}: {{ (expense().cents / 100) | currency: 'USD' }}
 
     @if (expense().merchant) {
-      <div class="expense-merchant">&#64; {{ expense().merchant?.name }}</div>
+      at {{ expense().merchant?.name }}
     }
   </div>
 
   <div class="expense-body">
     <div>
       Category: {{ expense().category.name }}
-      @if (expense().subCategory) {
-        / {{ expense().subCategory?.name }}
-      }
     </div>
 
     <div>
-      Description: {{ expense().description }}
+      Note: {{ expense().note ?? 'N/A' }}
     </div>
   </div>
 
   <div class="expense-footer">
     <div class="expense-tags">
-      <div>Tags:</div>
+      Tags:
       @for (tag of expense().tags; track tag.id) {
         <div>{{ tag.name }}</div>
       }