Show transactions for category on details page

Signed-off-by: William Brawner <me@wbrawner.com>

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({

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,

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);

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>

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;
       });
   }
 }

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;
+}

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>

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();
+  });
+});

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;
+    });
+  }
+}

src/app/transactions/transactions.component.css

@@ -1,6 +0,0 @@
-.transactions .list-row-one {
-    display: flex;
-    justify-content: space-between;
-    padding-bottom: 0.2em;
-}
-

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>

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;
-    });
   }
 }