Implement category assigning for transactions

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

@@ -26,10 +26,13 @@
   </mat-form-field>
   <mat-form-field>
     <input matInput type="date" [(ngModel)]="currentTransaction.date" placeholder="Date" required>
-    <!--
+  </mat-form-field>
-      <input matInput [matDatePicker]="transactionDatePicker" [(ngModel)]="currentTransaction.date" placeholder="Date" required>
+  <mat-form-field>
-      <mat-datepicker #transactionDatePicker></mat-datepicker>
+    <mat-select placeholder="Category" [(ngModel)]="currentTransaction.categoryId">
-    -->
+      <mat-option *ngFor="let category of categories" [value]="category.id">
+        {{ category.name }}
+      </mat-option>
+    </mat-select>
   </mat-form-field>
   <mat-radio-group [(ngModel)]="currentTransaction.type">
     <mat-radio-button [value]="transactionType.EXPENSE">Expense</mat-radio-button>

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

@@ -3,6 +3,8 @@ import { Transaction } from '../transaction'
 import { TransactionType } from '../transaction.type'
 import { TransactionService } from '../transaction.service'
 import { Location } from '@angular/common';
+import { Category } from '../category' 
+import { CategoryService } from '../category.service'
 
 @Component({
   selector: 'app-add-edit-transaction',
@@ -14,13 +16,16 @@ export class AddEditTransactionComponent implements OnInit {
   @Input() title: string;
   @Input() currentTransaction: Transaction;
   public transactionType = TransactionType;
+  public selectedCategory: Category;
 
   constructor(
+    private categoryService: CategoryService,
     private transactionService: TransactionService,
     private location: Location
   ) { }
 
   ngOnInit() {
+    this.getCategories()
   }
 
   goBack(): void {
@@ -42,4 +47,8 @@ export class AddEditTransactionComponent implements OnInit {
     this.transactionService.deleteTransaction(this.currentTransaction);
     this.goBack()
   }
+
+  getCategories() {
+    this.categoryService.getCategories().subscribe(categories => this.categories = categories)
+  }
 }

src/app/app.module.ts

@@ -11,6 +11,7 @@ import {
   MatListModule, 
   MatRadioModule,
   MatProgressBarModule,
+  MatSelectModule,
   MatToolbarModule, 
 } from '@angular/material';
 
@@ -52,6 +53,7 @@ import { CategoryListComponent } from './category-list/category-list.component';
     MatListModule,
     MatRadioModule,
     MatProgressBarModule,
+    MatSelectModule,
     MatToolbarModule,
     AppRoutingModule,
     FormsModule

src/app/transaction.ts

@@ -1,5 +1,5 @@
 import { ITransaction } from './budget-database'
-import { ICategory } from './budget-database'
+import { Category } from './category'
 import { TransactionType } from './transaction.type';
 
 export class Transaction implements ITransaction {
@@ -8,6 +8,6 @@ export class Transaction implements ITransaction {
     description: string;
     amount: number;
     date: Date = new Date();
-    category: ICategory;
+    categoryId: number;
     type: TransactionType = TransactionType.EXPENSE;
 }