diff --git a/src/app/accounts/account-details/account-details.component.html b/src/app/accounts/account-details/account-details.component.html index eb8020c..44a0fec 100644 --- a/src/app/accounts/account-details/account-details.component.html +++ b/src/app/accounts/account-details/account-details.component.html @@ -10,15 +10,26 @@
-

Categories

- View All -
+

Income

+ Add Category + - + +
+
+

Expenses

+ Add Category + +
diff --git a/src/app/accounts/account-details/account-details.component.ts b/src/app/accounts/account-details/account-details.component.ts index 1d30991..e631487 100644 --- a/src/app/accounts/account-details/account-details.component.ts +++ b/src/app/accounts/account-details/account-details.component.ts @@ -19,7 +19,8 @@ export class AccountDetailsComponent implements OnInit { account: Account; public transactions: Transaction[]; - public categories: Category[]; + public expenses: Category[] = []; + public income: Category[] = []; categoryBalances: Map; constructor( @@ -66,9 +67,13 @@ export class AccountDetailsComponent implements OnInit { } getCategories(): void { - this.categoryService.getCategories(this.account.id, 5).subscribe(categories => { - this.categories = categories; + this.categoryService.getCategories(this.account.id).subscribe(categories => { for (const category of categories) { + if (category.isExpense) { + this.expenses.push(category); + } else { + this.income.push(category); + } this.getCategoryBalance(category.id).subscribe(balance => this.categoryBalances.set(category.id, balance)); } }); diff --git a/src/app/categories/add-edit-category/add-edit-category.component.css b/src/app/categories/add-edit-category/add-edit-category.component.css index 92e1e78..847ea58 100644 --- a/src/app/categories/add-edit-category/add-edit-category.component.css +++ b/src/app/categories/add-edit-category/add-edit-category.component.css @@ -1,3 +1,11 @@ .button-delete { float: right; } + +.category-form * { + display: block; +} + +mat-radio-button { + padding-bottom: 15px; +} diff --git a/src/app/categories/add-edit-category/add-edit-category.component.html b/src/app/categories/add-edit-category/add-edit-category.component.html index 74a5bcb..9a42f4f 100644 --- a/src/app/categories/add-edit-category/add-edit-category.component.html +++ b/src/app/categories/add-edit-category/add-edit-category.component.html @@ -2,16 +2,20 @@

Select a category from the list to view details about it or edit it.

- + - + + + Expense + Income + -
+ \ No newline at end of file diff --git a/src/app/categories/add-edit-category/add-edit-category.component.ts b/src/app/categories/add-edit-category/add-edit-category.component.ts index 022e961..6bcb649 100644 --- a/src/app/categories/add-edit-category/add-edit-category.component.ts +++ b/src/app/categories/add-edit-category/add-edit-category.component.ts @@ -42,7 +42,8 @@ export class AddEditCategoryComponent implements OnInit, Actionable, OnDestroy { this.currentCategory.id, { name: this.currentCategory.name, - amount: this.currentCategory.amount * 100 + amount: this.currentCategory.amount * 100, + isExpense: this.currentCategory.isExpense } ); } else { @@ -50,7 +51,8 @@ export class AddEditCategoryComponent implements OnInit, Actionable, OnDestroy { observable = this.categoryService.createCategory( this.accountId, this.currentCategory.name, - this.currentCategory.amount * 100 + this.currentCategory.amount * 100, + this.currentCategory.isExpense ); } observable.subscribe(val => { @@ -63,7 +65,8 @@ export class AddEditCategoryComponent implements OnInit, Actionable, OnDestroy { } delete(): void { - this.categoryService.deleteCategory(this.accountId, this.currentCategory.id); - this.app.goBack(); + this.categoryService.deleteCategory(this.accountId, this.currentCategory.id).subscribe(() => { + this.app.goBack(); + }); } } diff --git a/src/app/categories/category-list/category-list.component.css b/src/app/categories/category-list/category-list.component.css index 21aec15..3c95b86 100644 --- a/src/app/categories/category-list/category-list.component.css +++ b/src/app/categories/category-list/category-list.component.css @@ -16,3 +16,15 @@ p.mat-line.category-list-title .remaining { font-size: 0.9em; font-style: italic; } + +::ng-deep .income .mat-progress-bar-fill::after { + background-color: #81C784 !important; +} + +::ng-deep .expense .mat-progress-bar-fill::after { + background-color: #E57373 !important; +} + +::ng-deep .mat-progress-bar-buffer { + background-color: #333333 !important; +} \ No newline at end of file diff --git a/src/app/categories/category-list/category-list.component.html b/src/app/categories/category-list/category-list.component.html index 66755c9..c0a7911 100644 --- a/src/app/categories/category-list/category-list.component.html +++ b/src/app/categories/category-list/category-list.component.html @@ -1,8 +1,3 @@ -

@@ -10,9 +5,9 @@ {{ category.name }} - {{ getCategoryRemainingBalance(category) | currency }} remaining + {{ getCategoryRemainingBalance(category) | currency }} remaining of {{ category.amount / 100 | currency }}

- +
diff --git a/src/app/categories/category-list/category-list.component.ts b/src/app/categories/category-list/category-list.component.ts index 7110fe2..6126dc3 100644 --- a/src/app/categories/category-list/category-list.component.ts +++ b/src/app/categories/category-list/category-list.component.ts @@ -1,6 +1,5 @@ import { Component, OnInit, Input } from '@angular/core'; import { Category } from '../category'; -import { Account } from 'src/app/accounts/account'; @Component({ selector: 'app-category-list', @@ -24,13 +23,15 @@ export class CategoryListComponent implements OnInit { categoryBalance = 0; } - return (category.amount / 100) + (categoryBalance / 100); + if (category.isExpense) { + return (category.amount / 100) + (categoryBalance / 100); + } else { + return (category.amount / 100) - (categoryBalance / 100); + } } getCategoryCompletion(category: Category): number { - if (category.amount <= 0) { - return 0; - } + const amount = category.amount > 0 ? category.amount : 1; let categoryBalance = this.categoryBalances.get(category.id); if (!categoryBalance) { @@ -40,12 +41,14 @@ export class CategoryListComponent implements OnInit { // Invert the negative/positive values for calculating progress // since the limit for a category is saved as a positive but the // balance is used in the calculation. - if (categoryBalance < 0) { - categoryBalance = Math.abs(categoryBalance); - } else { - categoryBalance -= (categoryBalance * 2); + if (category.isExpense) { + if (categoryBalance < 0) { + categoryBalance = Math.abs(categoryBalance); + } else { + categoryBalance -= (categoryBalance * 2); + } } - return categoryBalance / category.amount * 100; + return categoryBalance / amount * 100; } } diff --git a/src/app/categories/category.service.firestore.ts b/src/app/categories/category.service.firestore.ts index 5820d3c..1d93815 100644 --- a/src/app/categories/category.service.firestore.ts +++ b/src/app/categories/category.service.firestore.ts @@ -14,7 +14,7 @@ export class CategoryServiceFirebaseFirestoreImpl { getCategories(accountId: string, count?: number): Observable { return Observable.create(subscriber => { - let query: any = firebase.firestore().collection('accounts').doc(accountId).collection('categories'); + let query: any = firebase.firestore().collection('accounts').doc(accountId).collection('categories').orderBy('name'); if (count) { query = query.limit(count); } @@ -49,11 +49,12 @@ export class CategoryServiceFirebaseFirestoreImpl { }); } - createCategory(accountId: string, name: string, amount: number): Observable { + createCategory(accountId: string, name: string, amount: number, isExpense: boolean): Observable { return Observable.create(subscriber => { firebase.firestore().collection('accounts').doc(accountId).collection('categories').add({ name: name, - amount: amount + amount: amount, + isExpense: isExpense }).then(docRef => { if (!docRef) { console.error('Failed to create category'); diff --git a/src/app/categories/category.service.ts b/src/app/categories/category.service.ts index 98fcbdc..40e3a67 100644 --- a/src/app/categories/category.service.ts +++ b/src/app/categories/category.service.ts @@ -9,7 +9,7 @@ export interface CategoryService { getCategory(accountId: string, id: string): Observable; - createCategory(accountId: string, name: string, amount: number): Observable; + createCategory(accountId: string, name: string, amount: number, isExpense: boolean): Observable; updateCategory(accountId: string, id: string, changes: object): Observable; diff --git a/src/app/categories/category.ts b/src/app/categories/category.ts index 2ff3a1c..bc4fbad 100644 --- a/src/app/categories/category.ts +++ b/src/app/categories/category.ts @@ -2,8 +2,7 @@ export class Category { id: string; name: string; amount: number; - repeat: string; - color: string; + isExpense: boolean; accountId: string; static fromSnapshotRef(accountId: string, snapshot: firebase.firestore.DocumentSnapshot): Category { @@ -11,6 +10,11 @@ export class Category { category.id = snapshot.id; category.name = snapshot.get('name'); category.amount = snapshot.get('amount'); + let isExpense = snapshot.get('isExpense'); + if (isExpense === undefined) { + isExpense = true; + } + category.isExpense = isExpense; category.accountId = accountId; return category; } diff --git a/src/app/transactions/transaction.service.firestore.ts b/src/app/transactions/transaction.service.firestore.ts index bdbfbc4..a708f53 100644 --- a/src/app/transactions/transaction.service.firestore.ts +++ b/src/app/transactions/transaction.service.firestore.ts @@ -10,7 +10,11 @@ export class TransactionServiceFirebaseFirestoreImpl implements TransactionServi getTransactions(accountId: string, category?: string, count?: number): Observable { return Observable.create(subscriber => { - let transactionQuery: any = firebase.firestore().collection('accounts').doc(accountId).collection('transactions'); + let transactionQuery: any = firebase.firestore() + .collection('accounts') + .doc(accountId) + .collection('transactions') + .orderBy('date', 'desc'); if (category) { transactionQuery = transactionQuery.where('category', '==', category); } @@ -18,11 +22,6 @@ export class TransactionServiceFirebaseFirestoreImpl implements TransactionServi transactionQuery = transactionQuery.limit(count); } transactionQuery.onSnapshot(snapshot => { - if (snapshot.empty) { - subscriber.error(`Unable to query transactions within account ${accountId}`); - return; - } - const transactions = []; snapshot.docs.forEach(transaction => { transactions.push(Transaction.fromSnapshotRef(transaction));