From a86ff5d48d5db456cafbd04c91acc1d9a6380ff6 Mon Sep 17 00:00:00 2001
From: William Brawner <me@wbrawner.com>
Date: Sun, 5 Jul 2020 17:13:20 +0000
Subject: [PATCH] Show transactions for category on details page

Signed-off-by: William Brawner <me@wbrawner.com>
---
 src/app/app-routing.module.ts                 |  1 +
 src/app/app.module.ts                         |  2 ++
 .../budget-details.component.ts               |  1 +
 .../category-details.component.html           |  5 ++-
 .../category-details.component.ts             | 11 ++++--
 .../transaction-list.component.css            |  5 +++
 .../transaction-list.component.html           | 12 +++++++
 .../transaction-list.component.spec.ts        | 25 +++++++++++++
 .../transaction-list.component.ts             | 35 +++++++++++++++++++
 .../transactions/transactions.component.css   |  6 ----
 .../transactions/transactions.component.html  | 12 +------
 .../transactions/transactions.component.ts    | 22 ++----------
 12 files changed, 97 insertions(+), 40 deletions(-)
 create mode 100644 src/app/transactions/transaction-list/transaction-list.component.css
 create mode 100644 src/app/transactions/transaction-list/transaction-list.component.html
 create mode 100644 src/app/transactions/transaction-list/transaction-list.component.spec.ts
 create mode 100644 src/app/transactions/transaction-list/transaction-list.component.ts

diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 986eefc..972c5af 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -25,6 +25,7 @@ const routes: Routes = [
   { path: 'budgets/:budgetId/categories', component: CategoriesComponent },
   { path: 'budgets/:budgetId/categories/new', component: NewCategoryComponent },
   { path: 'budgets/:budgetId/categories/:id', component: CategoryDetailsComponent },
+  { path: 'budgets/:budgetId/categories/:id/edit', component: CategoryDetailsComponent },
 ];
 
 @NgModule({
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 9af0b6e..4fe7559 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -46,6 +46,7 @@ import { AuthInterceptor } from './shared/auth.interceptor';
 import { TwigsHttpService } from './shared/twigs.http.service';
 import { TwigsLocalService } from './shared/twigs.local.service';
 import { CookieService } from 'ngx-cookie-service';
+import { TransactionListComponent } from './transactions/transaction-list/transaction-list.component';
 
 export const CustomCurrencyMaskConfig: CurrencyMaskConfig = {
   align: 'left',
@@ -78,6 +79,7 @@ export const CustomCurrencyMaskConfig: CurrencyMaskConfig = {
     BudgetDetailsComponent,
     BudgetsComponent,
     CategoryBreakdownComponent,
+    TransactionListComponent,
   ],
   imports: [
     BrowserModule,
diff --git a/src/app/budgets/budget-details/budget-details.component.ts b/src/app/budgets/budget-details/budget-details.component.ts
index ba8d0e2..e805446 100644
--- a/src/app/budgets/budget-details/budget-details.component.ts
+++ b/src/app/budgets/budget-details/budget-details.component.ts
@@ -93,6 +93,7 @@ export class BudgetDetailsComponent implements OnInit {
     date.setHours(0);
     date.setMinutes(0);
     date.setSeconds(0);
+    date.setMilliseconds(0);
     date.setDate(1);
     this.twigsService.getTransactions(this.budget.id, null, 5, date)
       .subscribe(transactions => this.transactions = <Transaction[]>transactions);
diff --git a/src/app/categories/category-details/category-details.component.html b/src/app/categories/category-details/category-details.component.html
index 284f021..a786ed4 100644
--- a/src/app/categories/category-details/category-details.component.html
+++ b/src/app/categories/category-details/category-details.component.html
@@ -1 +1,4 @@
-<app-add-edit-category [title]="'Edit Category'" [budgetId]="budgetId" [currentCategory]="category"></app-add-edit-category>
+<app-transaction-list *ngIf="budgetId && category" [budgetId]="budgetId" [categoryId]="category.id"></app-transaction-list>
+<a mat-fab routerLink="/budgets/{{ budgetId }}/transactions/new">
+    <mat-icon aria-label="Add">add</mat-icon>
+</a>
\ No newline at end of file
diff --git a/src/app/categories/category-details/category-details.component.ts b/src/app/categories/category-details/category-details.component.ts
index adf5a4e..6b6c6a0 100644
--- a/src/app/categories/category-details/category-details.component.ts
+++ b/src/app/categories/category-details/category-details.component.ts
@@ -1,7 +1,9 @@
-import { Component, OnInit, Inject } from '@angular/core';
+import { Component, OnInit, Inject, ApplicationModule } from '@angular/core';
 import { Category } from '../category';
 import { ActivatedRoute } from '@angular/router';
-import { TWIGS_SERVICE, TwigsService } from 'src/app/shared/twigs.service';
+import { TWIGS_SERVICE, TwigsService } from '../../shared/twigs.service';
+import { Transaction } from '../../transactions/transaction';
+import { AppComponent } from '../../app.component';
 
 @Component({
   selector: 'app-category-details',
@@ -12,13 +14,16 @@ export class CategoryDetailsComponent implements OnInit {
 
   budgetId: number;
   category: Category;
+  public transactions: Transaction[];
 
   constructor(
     private route: ActivatedRoute,
+    private app: AppComponent,
     @Inject(TWIGS_SERVICE) private twigsService: TwigsService,
   ) { }
 
   ngOnInit() {
+    this.app.backEnabled = true;
     this.getCategory();
   }
 
@@ -27,7 +32,9 @@ export class CategoryDetailsComponent implements OnInit {
     this.twigsService.getCategory(id)
       .subscribe(category => {
         category.amount /= 100;
+        this.app.title = category.title;
         this.category = category;
+        this.budgetId = category.budgetId;
       });
   }
 }
diff --git a/src/app/transactions/transaction-list/transaction-list.component.css b/src/app/transactions/transaction-list/transaction-list.component.css
new file mode 100644
index 0000000..8e4dd44
--- /dev/null
+++ b/src/app/transactions/transaction-list/transaction-list.component.css
@@ -0,0 +1,5 @@
+.transactions .list-row-one {
+    display: flex;
+    justify-content: space-between;
+    padding-bottom: 0.2em;
+}
diff --git a/src/app/transactions/transaction-list/transaction-list.component.html b/src/app/transactions/transaction-list/transaction-list.component.html
new file mode 100644
index 0000000..17c7bdf
--- /dev/null
+++ b/src/app/transactions/transaction-list/transaction-list.component.html
@@ -0,0 +1,12 @@
+<mat-nav-list *ngIf="transactions" class="transactions">
+    <a mat-list-item *ngFor="let transaction of transactions"
+        routerLink="/budgets/{{ budgetId }}/transactions/{{ transaction.id }}">
+        <div matLine class="list-row-one">
+            <p>{{transaction.title}}</p>
+            <p class="amount" [class.expense]="transaction.expense" [class.income]="!transaction.expense">
+                {{ transaction.amount / 100 | currency }}
+            </p>
+        </div>
+        <p matLine class="text-small">{{ transaction.date | date }}</p>
+    </a>
+</mat-nav-list>
\ No newline at end of file
diff --git a/src/app/transactions/transaction-list/transaction-list.component.spec.ts b/src/app/transactions/transaction-list/transaction-list.component.spec.ts
new file mode 100644
index 0000000..6109011
--- /dev/null
+++ b/src/app/transactions/transaction-list/transaction-list.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TransactionListComponent } from './transaction-list.component';
+
+describe('TransactionListComponent', () => {
+  let component: TransactionListComponent;
+  let fixture: ComponentFixture<TransactionListComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TransactionListComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TransactionListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/transactions/transaction-list/transaction-list.component.ts b/src/app/transactions/transaction-list/transaction-list.component.ts
new file mode 100644
index 0000000..dba3a53
--- /dev/null
+++ b/src/app/transactions/transaction-list/transaction-list.component.ts
@@ -0,0 +1,35 @@
+import { Component, OnInit, Input, Inject } from '@angular/core';
+import { Transaction } from '../transaction';
+import { TWIGS_SERVICE, TwigsService } from '../../shared/twigs.service';
+
+@Component({
+  selector: 'app-transaction-list',
+  templateUrl: './transaction-list.component.html',
+  styleUrls: ['./transaction-list.component.css']
+})
+export class TransactionListComponent implements OnInit {
+
+  @Input() budgetId: number;
+  @Input() categoryId?: number;
+  public transactions: Transaction[];
+
+  constructor(
+    @Inject(TWIGS_SERVICE) private twigsService: TwigsService,
+  ) { }
+
+  ngOnInit(): void {
+    this.getTransactions();
+  }
+
+  getTransactions(): void {
+    let date = new Date();
+    date.setHours(0);
+    date.setMinutes(0);
+    date.setSeconds(0);
+    date.setMilliseconds(0);
+    date.setDate(1);
+    this.twigsService.getTransactions(this.budgetId, this.categoryId, null, date).subscribe(transactions => {
+      this.transactions = transactions;
+    });
+  }
+}
diff --git a/src/app/transactions/transactions.component.css b/src/app/transactions/transactions.component.css
index 144b4a2..e69de29 100644
--- a/src/app/transactions/transactions.component.css
+++ b/src/app/transactions/transactions.component.css
@@ -1,6 +0,0 @@
-.transactions .list-row-one {
-    display: flex;
-    justify-content: space-between;
-    padding-bottom: 0.2em;
-}
-
diff --git a/src/app/transactions/transactions.component.html b/src/app/transactions/transactions.component.html
index e506862..3194c12 100644
--- a/src/app/transactions/transactions.component.html
+++ b/src/app/transactions/transactions.component.html
@@ -1,14 +1,4 @@
-<mat-nav-list *ngIf="transactions" class="transactions">
-  <a mat-list-item *ngFor="let transaction of transactions" routerLink="/budgets/{{ budgetId }}/transactions/{{ transaction.id }}">
-    <div matLine class="list-row-one">
-      <p>{{transaction.title}}</p>
-      <p class="amount" [class.expense]="transaction.type === transactionType.EXPENSE" [class.income]="transaction.type === transactionType.INCOME">
-        {{ transaction.amount / 100 | currency }}
-      </p>
-    </div>
-    <p matLine class="text-small">{{ transaction.date | date }}</p>
-  </a>
-</mat-nav-list>
+<app-transaction-list [budgetId]="budgetId" [categoryId]="categoryId"></app-transaction-list>
 <a mat-fab routerLink="/budgets/{{ budgetId }}/transactions/new">
   <mat-icon aria-label="Add">add</mat-icon>
 </a>
\ No newline at end of file
diff --git a/src/app/transactions/transactions.component.ts b/src/app/transactions/transactions.component.ts
index 1fffd38..afbda28 100644
--- a/src/app/transactions/transactions.component.ts
+++ b/src/app/transactions/transactions.component.ts
@@ -1,10 +1,6 @@
 import { Component, OnInit, Input, Inject } from '@angular/core';
-import { Transaction } from './transaction';
-import { TransactionType } from './transaction.type';
 import { AppComponent } from '../app.component';
-import { Budget } from '../budgets/budget';
 import { ActivatedRoute } from '@angular/router';
-import { TWIGS_SERVICE, TwigsService } from '../shared/twigs.service';
 
 @Component({
   selector: 'app-transactions',
@@ -14,31 +10,17 @@ import { TWIGS_SERVICE, TwigsService } from '../shared/twigs.service';
 export class TransactionsComponent implements OnInit {
 
   budgetId: number;
-  public transactionType = TransactionType;
-
-  public transactions: Transaction[];
+  categoryId?: number;
 
   constructor(
     private route: ActivatedRoute,
     private app: AppComponent,
-    @Inject(TWIGS_SERVICE) private twigsService: TwigsService,
   ) { }
 
   ngOnInit() {
     this.budgetId = Number.parseInt(this.route.snapshot.paramMap.get('budgetId'));
+    this.categoryId = Number.parseInt(this.route.snapshot.queryParamMap.get('categoryId'));
     this.app.backEnabled = true;
     this.app.title = 'Transactions';
-    this.getTransactions();
-  }
-
-  getTransactions(): void {
-    let date = new Date();
-    date.setHours(0);
-    date.setMinutes(0);
-    date.setSeconds(0);
-    date.setDate(1);
-    this.twigsService.getTransactions(this.budgetId, null, null, date).subscribe(transactions => {
-      this.transactions = transactions;
-    });
   }
 }