From a431cce0415d6a6c3cccd6326234e3c9daca5352 Mon Sep 17 00:00:00 2001
From: William Brawner <me@wbrawner.com>
Date: Thu, 27 Feb 2020 16:42:34 +0000
Subject: [PATCH] Filter categories based on transaction expense and make
 buttons easier to tap

Signed-off-by: William Brawner <me@wbrawner.com>
---
 .../add-edit-transaction.component.css        |  5 ++--
 .../add-edit-transaction.component.html       | 12 +++++-----
 .../add-edit-transaction.component.ts         | 23 +++++++++++--------
 3 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/src/app/transactions/add-edit-transaction/add-edit-transaction.component.css b/src/app/transactions/add-edit-transaction/add-edit-transaction.component.css
index 7d44de1..a34bdac 100644
--- a/src/app/transactions/add-edit-transaction/add-edit-transaction.component.css
+++ b/src/app/transactions/add-edit-transaction/add-edit-transaction.component.css
@@ -11,6 +11,7 @@ mat-radio-button {
   padding-bottom: 15px;
 }
 
-.button-delete {
-  float: right;
+button {
+  width: 100%;
+  margin: 1em 0;
 }
diff --git a/src/app/transactions/add-edit-transaction/add-edit-transaction.component.html b/src/app/transactions/add-edit-transaction/add-edit-transaction.component.html
index db8246d..ff6ec6f 100644
--- a/src/app/transactions/add-edit-transaction/add-edit-transaction.component.html
+++ b/src/app/transactions/add-edit-transaction/add-edit-transaction.component.html
@@ -17,6 +17,10 @@
   <mat-form-field>
     <input matInput type="time" [(ngModel)]="currentTime" placeholder="Time" required>
   </mat-form-field>
+  <mat-radio-group [(ngModel)]="currentTransaction.expense" (change)="updateCategories($event)">
+    <mat-radio-button [value]="true">Expense</mat-radio-button>
+    <mat-radio-button [value]="false">Income</mat-radio-button>
+  </mat-radio-group>
   <mat-form-field>
     <mat-select placeholder="Category" [(ngModel)]="currentTransaction.categoryId">
       <mat-option *ngFor="let category of categories" [value]="category.id">
@@ -24,10 +28,6 @@
       </mat-option>
     </mat-select>
   </mat-form-field>
-  <mat-radio-group [(ngModel)]="currentTransaction.expense">
-    <mat-radio-button [value]="true">Expense</mat-radio-button>
-    <mat-radio-button [value]="false">Income</mat-radio-button>
-  </mat-radio-group>
-  <button mat-button color="accent" (click)="save()">Save</button>
-  <button class="button-delete" mat-button color="warn" *ngIf="currentTransaction.id" (click)="delete()">Delete</button>
+  <button mat-raised-button color="accent" (click)="save()">Save</button>
+  <button class="button-delete" mat-raised-button color="warn" *ngIf="currentTransaction.id" (click)="delete()">Delete</button>
 </div>
diff --git a/src/app/transactions/add-edit-transaction/add-edit-transaction.component.ts b/src/app/transactions/add-edit-transaction/add-edit-transaction.component.ts
index c27d635..26a339f 100644
--- a/src/app/transactions/add-edit-transaction/add-edit-transaction.component.ts
+++ b/src/app/transactions/add-edit-transaction/add-edit-transaction.component.ts
@@ -4,6 +4,7 @@ import { TransactionType } from '../transaction.type';
 import { Category } from 'src/app/categories/category';
 import { AppComponent } from 'src/app/app.component';
 import { TWIGS_SERVICE, TwigsService } from 'src/app/shared/twigs.service';
+import { MatRadioChange } from '@angular/material';
 
 @Component({
   selector: 'app-add-edit-transaction',
@@ -28,13 +29,15 @@ export class AddEditTransactionComponent implements OnInit, OnChanges {
   ngOnInit() {
     this.app.title = this.title;
     this.app.backEnabled = true;
-    this.getCategories();
-    let d: Date;
+    let d: Date, expense: boolean;
     if (this.currentTransaction) {
       d = new Date(this.currentTransaction.date);
+      expense = this.currentTransaction.expense;
     } else {
       d = new Date();
+      expense = true;
     }
+    this.updateCategories(new MatRadioChange(undefined, expense));
     this.transactionDate = d.toLocaleDateString(undefined, {year: 'numeric', month: '2-digit', day: '2-digit'});
     this.currentTime = d.toLocaleTimeString(undefined, {hour: '2-digit', hour12: false, minute: '2-digit'});
   }
@@ -49,14 +52,18 @@ export class AddEditTransactionComponent implements OnInit, OnChanges {
     this.currentTime = d.toLocaleTimeString(undefined, {hour: '2-digit', hour12: false, minute: '2-digit'});
   }
 
+  updateCategories(change: MatRadioChange) {
+    this.twigsService.getCategories(this.budgetId)
+    .subscribe(newCategories => {
+      this.categories = newCategories.filter(category => category.expense === change.value)
+    })
+  }
+
   save(): void {
     // The amount will be input as a decimal value so we need to convert it
     // to an integer
     let observable;
-    const dateParts = this.transactionDate.split('-');
-    this.currentTransaction.date.setFullYear(parseInt(dateParts[0], 10));
-    this.currentTransaction.date.setMonth(parseInt(dateParts[1], 10) - 1);
-    this.currentTransaction.date.setDate(parseInt(dateParts[2], 10));
+    this.currentTransaction.date = new Date(this.transactionDate);
     const timeParts = this.currentTime.split(':');
     this.currentTransaction.date.setHours(parseInt(timeParts[0], 10));
     this.currentTransaction.date.setMinutes(parseInt(timeParts[1], 10));
@@ -97,8 +104,4 @@ export class AddEditTransactionComponent implements OnInit, OnChanges {
       this.app.goBack();
     });
   }
-
-  getCategories() {
-    this.twigsService.getCategories(this.budgetId).subscribe(categories => this.categories = categories);
-  }
 }