Merge branch 'dashboard-improvements' of billy/budget into master

Jenkinsfile

@@ -40,7 +40,7 @@ pipeline {
         }
         stage('Deploy to Dev') {
             steps {
-                sh 'rm /var/www/html/*'
+                sh 'rm -rf /var/www/html/*'
                 sh 'cp -rv dist/budget/* /var/www/html/'
             }
         }

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

@@ -1,6 +1,6 @@
 <mat-toolbar>
   <span>
-    <a (click)="goBack()">
+    <a mat-button (click)="goBack()">
       <mat-icon>arrow_back</mat-icon>
     </a>
   </span>
@@ -8,7 +8,7 @@
     {{ title }}
   </span>
   <span class="action-item">
-    <a (click)="save()">Save</a>
+    <a mat-button (click)="save()">Save</a>
   </span>
 </mat-toolbar>
 <div *ngIf="!currentCategory">
@@ -21,10 +21,6 @@
   <mat-form-field>
     <input matInput type="number" [(ngModel)]="currentCategory.amount" placeholder="Amount" required>
   </mat-form-field>
-  <mat-radio-group [(ngModel)]="currentCategory.type">
-    <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">

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

@@ -1,7 +1,6 @@
 import { Component, OnInit, Input } from '@angular/core';
 import { CategoryService } from '../category.service'
 import { Category } from '../category'
-import { CategoryType } from '../category.type'
 import { Location } from '@angular/common';
 
 @Component({
@@ -13,7 +12,6 @@ export class AddEditCategoryComponent implements OnInit {
 
   @Input() title: string;
   @Input() currentCategory: Category;
-  public categoryType = CategoryType;
 
   constructor(
     private categoryService: CategoryService,

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

@@ -1,6 +1,6 @@
 <mat-toolbar>
   <span>
-    <a (click)="goBack()">
+    <a mat-button (click)="goBack()">
       <mat-icon>arrow_back</mat-icon>
     </a>
   </span>
@@ -8,7 +8,7 @@
     {{ title }}
   </span>
   <span class="action-item">
-    <a (click)="save()">Save</a>
+    <a mat-button (click)="save()">Save</a>
   </span>
 </mat-toolbar>
 <div *ngIf="!currentTransaction">

src/app/budget-database.ts

@@ -1,7 +1,6 @@
 import { Injectable } from '@angular/core';
 import Dexie from 'dexie';
 import { Category } from './category'
-import { CategoryType } from './category.type';
 import { Transaction } from './transaction'
 import { TransactionType } from './transaction.type';
 
@@ -15,8 +14,16 @@ export class BudgetDatabase extends Dexie {
   constructor () {
     super('BudgetDatabase')
     this.version(1).stores({
+      transactions: `++id, title, description, amount, date, category, type`,
+      categories: `++id, name, amount, repeat, color`
+    })
+    this.version(2).stores({
       transactions: `++id, title, description, amount, date, category_id, type`,
-      categories: `++id, name, amount, repeat, color, type-`
+      categories: `++id, name, amount, repeat, color, type`
+    })
+    this.version(3).stores({
+      transactions: `++id, title, description, amount, date, category_id, type`,
+      categories: `++id, name, amount, repeat, color`
     })
     this.transactions.mapToClass(Transaction)
     this.categories.mapToClass(Category)
@@ -39,5 +46,4 @@ export interface ICategory{
   amount: number;
   repeat: string;
   color: string;
-  type: CategoryType;
 }

src/app/categories/categories.component.html

@@ -1,6 +1,6 @@
 <mat-toolbar>
   <span>
-    <a (click)="goBack()">
+    <a mat-button (click)="goBack()">
       <mat-icon>arrow_back</mat-icon>
     </a>
   </span>

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

@@ -13,6 +13,6 @@
       {{ getCategoryRemainingBalance(category) | currency }} remaining
     </span>
     </p>
-    <mat-progress-bar matLine mode="determinate" #categoryProgress [attr.id]="'cat-' + category.id" value="{{ getCategoryCompletion(category) }}"></mat-progress-bar>
+    <mat-progress-bar matLine color="accent" 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,6 +1,5 @@
 import { Component, OnInit, Input } from '@angular/core';
 import { Category } from '../category'
-import { CategoryType } from '../category.type'
 
 @Component({
   selector: 'app-category-list',
@@ -53,14 +52,13 @@ export class CategoryListComponent implements OnInit {
       categoryBalance = 0
     }
 
-    if (category.type === CategoryType.LIMIT) {
+    // Invert the negative/positive values for calculating progress
-      // If the category is a limit, then a negative balance needs to be turned into positive 
+    // since the limit for a category is saved as a positive but the
-      // and vice-versa for the completion to be properly calculated
+    // balance is used in the calculation. 
-      if (categoryBalance < 0) {
+    if (categoryBalance < 0) {
-        categoryBalance = Math.abs(categoryBalance)
+      categoryBalance = Math.abs(categoryBalance)
-      } else {
+    } else {
-        categoryBalance -= (categoryBalance * 2)
+      categoryBalance -= (categoryBalance * 2)
-      }
     }
 
     return categoryBalance / category.amount * 100;

src/app/category.ts

@@ -1,5 +1,4 @@
 import { ICategory } from './budget-database'
-import { CategoryType } from './category.type'
 
 export class Category implements ICategory {
   id: number;
@@ -7,5 +6,4 @@ export class Category implements ICategory {
   amount: number;
   repeat: string;
   color: string;
-  type: CategoryType = CategoryType.LIMIT;
 }

src/app/category.type.ts

@@ -1,4 +0,0 @@
-export enum CategoryType {
-    LIMIT,
-    GOAL
-}

src/app/dashboard/dashboard.component.css

@@ -35,11 +35,13 @@
   text-decoration: none;
 }
 
-.dashboard-primary a {
+.dashboard-primary div {
-  bottom: 1em;
+  bottom: 0.5em;
-  right: 1em;
+  display: flex;
+  justify-content: space-between;
+  left: 0.5em;
+  right: 0.5em;
   position: absolute;
-  text-align: right;
 }
 
 .dashboard .no-categories {
@@ -55,7 +57,6 @@
 
 a.view-all {
   position: absolute;
-  right: 1em;
+  right: 0.5em;
-  top: 1em;
+  top: 0.5em;
-  font-size: 1em;
 }

src/app/dashboard/dashboard.component.html

@@ -8,15 +8,19 @@
 <div class="dashboard">
   <div class="dashboard-primary">
     <h2 class="balance">
-      Current Balance: <span [ngClass]="{'income': balance > 0, 'expense': balance < 0}" >{{ balance | currency }}</span>
+      Current Balance: <br />
+      <span [ngClass]="{'income': balance > 0, 'expense': balance < 0}" >{{ balance | currency }}</span>
     </h2>
-    <a routerLink="/transactions">View Transactions &gt;&gt;</a>
+    <div class="transaction-navigation">
+      <a mat-button routerLink="/transactions/new">Add Transaction</a>
+      <a mat-button routerLink="/transactions">View Transactions</a>
+    </div>
   </div>
   <div class="dashboard-categories">
     <h3 class="categories">Categories</h3>
-    <a routerLink="/categories" class="view-all" *ngIf="categories">View All</a>
+    <a mat-button routerLink="/categories" class="view-all" *ngIf="categories">View All</a>
-    <div class="no-categories" *ngIf="!categories">
+    <div class="no-categories" *ngIf="!categories || categories.length === 0">
-      <a routerLink="/categories/new">
+      <a mat-button routerLink="/categories/new">
         <mat-icon>add</mat-icon>
         <p>Add categories to get more insights into your income and expenses.</p>
       </a>

src/app/dashboard/dashboard.component.ts

@@ -22,6 +22,7 @@ export class DashboardComponent implements OnInit {
   ) { }
 
   ngOnInit() {
+    this.balance = 0;
     this.getBalance();
     this.getTransactions();
     this.getCategories();

src/app/transactions/transactions.component.html

@@ -1,6 +1,6 @@
 <mat-toolbar>
   <span>
-    <a (click)="goBack()">
+    <a mat-button (click)="goBack()">
       <mat-icon>arrow_back</mat-icon>
     </a>
   </span>

src/styles.css

@@ -24,25 +24,35 @@ a.mat-fab {
 
 mat-toolbar {
   box-shadow: 0px 3px 3px 1px #212121;
-  display: flex;
+}
-  justify-content: space-between;
+
+mat-toolbar.mat-toolbar-row, mat-toolbar.mat-toolbar-single-row {
+  padding: 0;
 }
 
 mat-toolbar span {
-  display: inline-block;
+  display: flex;
-  min-width: 24px;
+  width: 33%;;
 }
 
-mat-toolbar a {
+mat-toolbar span:nth-child(1) {
-  padding: 1em 0;
+  justify-content: flex-start;
 }
 
-mat-toolbar span:nth-child(1) > a {
+mat-toolbar span:nth-child(2) {
-  padding-left: 0;
+  justify-content: center;
 }
 
-mat-toolbar span:nth-child(3) > a {
+mat-toolbar span:nth-child(3) {
-  padding-right: 0;
+  justify-content: flex-end;
+}
+
+mat-toolbar a.mat-button {
+  font-size: 1em;
+}
+
+mat-toolbar a.mat-button .mat-icon {
+  vertical-align: text-top;
 }
 
 mat-toolbar mat-icon {