Fix compilation issues

src/app/add-edit-category/add-edit-category.component.html

@@ -25,8 +25,10 @@
     <mat-radio-button [value]="categoryType.LIMIT">Limit</mat-radio-button>
     <mat-radio-button [value]="categoryType.GOAL">Goal</mat-radio-button>
   </mat-radio-group>
+  <!--
   <mat-form-field>
     <input type="color" matInput [(ngModel)]="currentCategory.color" placeholder="Color">
   </mat-form-field>
+  -->
   <button class="button-delete" mat-button color="warn" *ngIf="currentCategory.id" (click)="delete()">Delete</button>
 </div>

src/app/add-edit-transaction/add-edit-transaction.component.ts

@@ -17,6 +17,7 @@ export class AddEditTransactionComponent implements OnInit {
   @Input() currentTransaction: Transaction;
   public transactionType = TransactionType;
   public selectedCategory: Category;
+  public categories: Category[]
 
   constructor(
     private categoryService: CategoryService,

src/app/budget-database.ts

@@ -1,8 +1,9 @@
 import { Injectable } from '@angular/core';
 import Dexie from 'dexie';
-import { TransactionType } from './transaction.type';
 import { Category } from './category'
+import { CategoryType } from './category.type';
 import { Transaction } from './transaction'
+import { TransactionType } from './transaction.type';
 
 @Injectable({
   providedIn: 'root'
@@ -14,7 +15,7 @@ export class BudgetDatabase extends Dexie {
   constructor () {
     super('BudgetDatabase')
     this.version(1).stores({
-      transactions: `++id, title, description, amount, date, category, type`,
+      transactions: `++id, title, description, amount, date, category_id, type`,
       categories: `++id, name, amount, repeat, color, type-`
     })
     this.transactions.mapToClass(Transaction)
@@ -28,7 +29,7 @@ export interface ITransaction {
   description: string;
   amount: number;
   date: Date;
-  category: ICategory;
+  categoryId: number;
   type: TransactionType;
 }
 

src/app/categories/categories.component.ts

@@ -11,7 +11,7 @@ import { Location } from '@angular/common';
 export class CategoriesComponent implements OnInit {
 
   public categories: Category[];
-  private categoryBalances: Map<number, number>;
+  public categoryBalances: Map<number, number>;
 
   constructor(
     private categoryService: CategoryService,

src/app/category-details/category-details.component.ts

@@ -24,5 +24,6 @@ export class CategoryDetailsComponent implements OnInit {
   getCategory(): void {
     const id = +this.route.snapshot.paramMap.get('id')
     this.categoryService.getCategory(id)
-      .subscribe(category => this.category = category)
+    .subscribe(category => this.category = category)
+  }
 }

src/app/category-list/category-list.component.css

@@ -6,3 +6,13 @@
 ::ng-deep .mat-progress-bar-buffer {
   background-color: #BDBDBD;
 }
+
+p.mat-line.category-list-title {
+  display: flex;
+  justify-content: space-between;
+}
+
+p.mat-line.category-list-title .remaining {
+  font-size: 0.9em;
+  font-style: italic;
+}

src/app/category-list/category-list.component.html

@@ -5,12 +5,14 @@
 </style>
 <mat-nav-list class="categories">
   <a mat-list-item *ngFor="let category of categories" routerLink="/categories/{{ category.id }}">
-    <p matLine>{{category.name}}</p>
-    <style>
-::ng-deep .mat-progress-bar-fill::after {
-  background-color: "{{ category.color }}";
-}
-    </style>
-    <mat-progress-bar matLine mode="determinate" value="{{ getCategoryCompletion(category) }}"></mat-progress-bar>
+    <p matLine class="category-list-title">
+    <span>
+      {{ category.name }}
+    </span>
+    <span class="remaining">
+      {{ getCategoryRemainingBalance(category) | currency }} remaining
+    </span>
+    </p>
+    <mat-progress-bar matLine mode="determinate" #categoryProgress [attr.id]="'cat-' + category.id" value="{{ getCategoryCompletion(category) }}"></mat-progress-bar>
   </a>
 </mat-nav-list>

src/app/category-list/category-list.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit, Input } from '@angular/core';
 import { Category } from '../category'
+import { CategoryType } from '../category.type'
 
 @Component({
   selector: 'app-category-list',
@@ -16,6 +17,32 @@ export class CategoryListComponent implements OnInit {
   ngOnInit() {
   }
 
+  /*
+  ngAfterViewInit() {
+    this.categoryProgressBars.changes.subscribe( list => 
+      list.forEach(progressBar =>
+        progressBar._elementRef.nativeElement.innerHTML += `
+        <style>
+        .mat-progress-bar-fill::after {
+          background-color: ${this.categories[0].color};
+          color: purple;
+        }
+        </style>
+        `
+      )
+    )
+  }
+  */
+
+  getCategoryRemainingBalance(category: Category): number {
+    let categoryBalance = this.categoryBalances.get(category.id)
+    if (!categoryBalance) {
+      categoryBalance = 0
+    }
+
+    return category.amount + categoryBalance;
+  }
+
   getCategoryCompletion(category: Category): number {
     if (category.amount <= 0) {
       return 0;
@@ -26,6 +53,16 @@ export class CategoryListComponent implements OnInit {
       categoryBalance = 0
     }
 
-    return categoryBalance / category.amount;
+    if (category.type === CategoryType.LIMIT) {
+      // If the category is a limit, then a negative balance needs to be turned into positive 
+      // and vice-versa for the completion to be properly calculated
+      if (categoryBalance < 0) {
+        categoryBalance = Math.abs(categoryBalance)
+      } else {
+        categoryBalance -= (categoryBalance * 2)
+      }
+    }
+
+    return categoryBalance / category.amount * 100;
   }
 }

src/app/category.service.ts

@@ -40,7 +40,7 @@ export class CategoryService {
   getBalance(category: Category): Observable<number> {
     let sum = 0;
     return from(
-      this.db.transactions.filter(transaction => transaction.category === category).each(function(transaction) {
+      this.db.transactions.filter(transaction => transaction.categoryId === category.id).each(function(transaction) {
         if (transaction.type === TransactionType.INCOME) {
           sum += transaction.amount
         } else {

src/app/dashboard/dashboard.component.ts

@@ -37,6 +37,11 @@ export class DashboardComponent implements OnInit {
   }
 
   getCategories(): void {
-    this.categoryService.getCategories(5).subscribe(categories => this.categories = categories)
+    this.categoryService.getCategories(5).subscribe(categories => {
+      this.categories = categories
+      for (let category of this.categories) {
+        this.categoryService.getBalance(category).subscribe(balance => this.categoryBalances.set(category.id,  balance))
+      }
+    })
   }
 }