functional receiving, choosing and upload of transaction category

src/app/dashboard/add-data.component.html

@@ -24,6 +24,20 @@
               <span class="help-block">Enter the amount spent, such as 5.35 for £5.35.</span>
             </div>
           </div>
+          <div class="form-group row">
+            <label class="col-md-3 form-control-label" for="text-input">Category</label>
+            <div class="col-md-9">
+              <div class="input-group">
+                <select type="text" class="form-control" [(ngModel)]="categoryId">
+                  <option value="" disabled>Choose a category</option>
+                  <option *ngFor="let category of categoryIdList, let i=index" [ngValue]="category" >
+                    {{ categoryNameList[i] }}
+                  </option>
+                </select>
+              </div>
+              <span class="help-block"><strong>Optional:</strong> Choose the relevant Category for the purchase.</span>
+            </div>
+          </div>
           <div class="form-group row">
             <label class="col-md-3 form-control-label" for="text-input"><strong>Organisation Name</strong></label>
             <div class="col-md-9">

src/app/dashboard/add-data.component.ts

@@ -30,6 +30,7 @@ export class AddDataComponent implements OnInit {
   organisationTown: string;
   organisationPostcode: string;
   amount: number;
+  categoryId: number;
   transactionAdditionType = 1;
   storeList = [];
   showAddStore = false;
@@ -37,8 +38,8 @@ export class AddDataComponent implements OnInit {
   transactionFormInvalid = true;
   myDate: any;
   minDate: any;
-  categoryIds: number[] = [];
+  categoryIdList: number[] = [];
-  categoryNames: string[] = [];
+  categoryNameList: string[] = [];
 
   constructor(
   private formBuilder: FormBuilder,
@@ -70,6 +71,7 @@ export class AddDataComponent implements OnInit {
       result => {
         this.categories = result;
         console.log(this.categories);
+        this.setCategoryList(result.categories);
       },
       error => {
         console.log('Retrieval Error');
@@ -83,6 +85,11 @@ export class AddDataComponent implements OnInit {
     this.accountType = localStorage.getItem('usertype');
   }
 
+  private setCategoryList(data: any) {
+    this.categoryIdList = Object.keys(data.ids).map(key => data.ids[key]);
+    this.categoryNameList = Object.keys(data.names).map(key => data.names[key]);
+  }
+
   getMinDate() {
     // gets the April 1st date of the current year
     const aprilDate = moment().month(3).date(1);
@@ -182,6 +189,7 @@ export class AddDataComponent implements OnInit {
           transaction_value : this.amount,
           purchase_time     : purchaseTime,
           organisation_id   : this.organisationId,
+          category          : this.categoryId,
         };
         break;
       case 2:
@@ -190,6 +198,7 @@ export class AddDataComponent implements OnInit {
           transaction_value : this.amount,
           purchase_time     : purchaseTime,
           organisation_id   : this.organisationId,
+          category          : this.categoryId,
         };
         break;
       case 3:
@@ -201,6 +210,7 @@ export class AddDataComponent implements OnInit {
           street_name       : this.submitOrg.street_name,
           town              : this.submitOrg.town,
           postcode          : this.submitOrg.postcode,
+          category          : this.categoryId,
         };
         break;
     }
@@ -251,6 +261,7 @@ export class AddDataComponent implements OnInit {
     this.amount = null;
     this.transactionFormInvalid = true;
     this.showAddStore = false;
+    this.categoryId = null;
   }
 
   onSubmitPayroll() {