From fb5e2549a1878f6f1c0600c6d36ea26b4f16ccfa Mon Sep 17 00:00:00 2001
From: Billy Brawner <billybrawner@gmail.com>
Date: Fri, 31 Aug 2018 16:56:37 -0500
Subject: [PATCH] Fix compilation issues

---
 .../add-edit-category.component.html          |  2 +
 .../add-edit-transaction.component.ts         |  1 +
 src/app/budget-database.ts                    |  7 ++--
 src/app/categories/categories.component.ts    |  2 +-
 .../category-details.component.ts             |  3 +-
 .../category-list/category-list.component.css | 10 +++++
 .../category-list.component.html              | 16 ++++----
 .../category-list/category-list.component.ts  | 39 ++++++++++++++++++-
 src/app/category.service.ts                   |  2 +-
 src/app/dashboard/dashboard.component.ts      |  7 +++-
 10 files changed, 74 insertions(+), 15 deletions(-)

diff --git a/src/app/add-edit-category/add-edit-category.component.html b/src/app/add-edit-category/add-edit-category.component.html
index aa85d25..edf6464 100644
--- a/src/app/add-edit-category/add-edit-category.component.html
+++ b/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>
diff --git a/src/app/add-edit-transaction/add-edit-transaction.component.ts b/src/app/add-edit-transaction/add-edit-transaction.component.ts
index f430e1b..e23adda 100644
--- a/src/app/add-edit-transaction/add-edit-transaction.component.ts
+++ b/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,
diff --git a/src/app/budget-database.ts b/src/app/budget-database.ts
index b409e76..855b6be 100644
--- a/src/app/budget-database.ts
+++ b/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;
 }
 
diff --git a/src/app/categories/categories.component.ts b/src/app/categories/categories.component.ts
index d18f039..2ee26c9 100644
--- a/src/app/categories/categories.component.ts
+++ b/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,
diff --git a/src/app/category-details/category-details.component.ts b/src/app/category-details/category-details.component.ts
index 352d7e3..703fd34 100644
--- a/src/app/category-details/category-details.component.ts
+++ b/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)
+  }
 }
diff --git a/src/app/category-list/category-list.component.css b/src/app/category-list/category-list.component.css
index 2983efc..21aec15 100644
--- a/src/app/category-list/category-list.component.css
+++ b/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;
+}
diff --git a/src/app/category-list/category-list.component.html b/src/app/category-list/category-list.component.html
index 6245ec3..40d5477 100644
--- a/src/app/category-list/category-list.component.html
+++ b/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>
diff --git a/src/app/category-list/category-list.component.ts b/src/app/category-list/category-list.component.ts
index e9860fd..4b350c3 100644
--- a/src/app/category-list/category-list.component.ts
+++ b/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;
   }
 }
diff --git a/src/app/category.service.ts b/src/app/category.service.ts
index caf47f5..4dd9672 100644
--- a/src/app/category.service.ts
+++ b/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 {
diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts
index b3f2b7f..dba7a78 100644
--- a/src/app/dashboard/dashboard.component.ts
+++ b/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))
+      }
+    })
   }
 }