Fully working table org search and better error

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

@@ -30,8 +30,8 @@
               <input type="text" class="form-control" placeholder="Organisation Name" [(ngModel)]="submitOrg.name" (input)="organisationSearch($event)" (ngModelChange)="transactionFormValidate()">
               <span class="help-block">This is a help text</span>
             </div>
-          <org-result organisation="Trouble"></org-result>
           </div>
+          <org-table *ngIf="storeList != null" [orgList]="storeList" (onClick)="addStore($event)"></org-table>
           <div *ngIf="showAddStore">
             <div class="form-group row">
               <label class="col-md-3 form-control-label" for="text-input"><strong>Organisation Street Name</strong></label>

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

@@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { Validators, FormBuilder, FormGroup } from '@angular/forms';
 import { Http, Response } from '@angular/http';
 import { ApiService } from '../providers/api-service';
-import { OrgResultComponent } from '../shared/org-result.component';
+import { OrgTableComponent } from '../shared/org-table.component';
 import * as moment from 'moment';
 import 'rxjs/add/operator/map';
 
@@ -22,7 +22,7 @@ export class AddDataComponent {
   employeeFormStatus: any;
   transactionFormStatus: any;
   transactionFormStatusError: string = 'Error received, please try again.';
- 
+
  submitOrg = {
     name: '',
     street_name: '',
@@ -45,7 +45,7 @@ export class AddDataComponent {
   private http: Http,
 	private formBuilder: FormBuilder,
 	private api: ApiService,
-	) {	
+	) {
     this.payrollForm = this.formBuilder.group({
 		entryperiod:         ['', [Validators.required]],
 		employeeamount:      ['', [Validators.required]],
@@ -81,7 +81,7 @@ export class AddDataComponent {
     this.myDate = moment().format('YYYY-MM-DD[T]HH:mm');
     // this.myDate = new Date().toISOString().slice(0, 16);
   }
-  
+
   ngOnInit(): void {
     this.getMinDate();
   }
@@ -98,7 +98,7 @@ export class AddDataComponent {
       this.minDate = aprilDate.subtract(1, 'years').format('YYYY-MM-DD');
     }
   }
-  
+
   initializeItems() {
     // Dont bother searching for an empty or undefined string
     if ( this.submitOrg.name == '' ) {
@@ -229,8 +229,10 @@ export class AddDataComponent {
         console.log('Upload Error');
         console.log(error);
         try {
-          let jsonError = JSON.parse(error.body);
+          console.log(error.error);
-          this.transactionFormStatusError = JSON.stringify(jsonError.status) + 'Error, ' + JSON.stringify(jsonError.message);
+          let jsonError = error.json();
+          console.log("boop");
+          this.transactionFormStatusError = '"' + jsonError.error + '" Error, ' + jsonError.message;
         } catch(e) {
           this.transactionFormStatusError = 'There was a server error, please try again later.';
         }
@@ -251,10 +253,10 @@ export class AddDataComponent {
     this.amount = null;
     this.transactionFormInvalid = true;
   }
-  
+
   onSubmitPayroll() {
 	 console.log(this.payrollForm.value);
-	
+
 	this.api
       .login(this.payrollForm.value)
       .subscribe(
@@ -270,10 +272,10 @@ export class AddDataComponent {
         }
       );
   }
-  
+
   onSubmitSuppliers() {
 	 console.log(this.suppliersForm.value);
-	
+
 	this.api
       .login(this.suppliersForm.value)
       .subscribe(
@@ -289,10 +291,10 @@ export class AddDataComponent {
         }
       );
   }
-  
+
   onSubmitSingleSupplier() {
 	 console.log(this.singleSupplierForm.value);
-	
+
 	this.api
       .login(this.singleSupplierForm.value)
       .subscribe(
@@ -308,10 +310,10 @@ export class AddDataComponent {
         }
       );
   }
-  
+
   onSubmitEmployee() {
 	 console.log(this.employeeForm.value);
-	
+
 	this.api
       .login(this.employeeForm.value)
       .subscribe(

src/app/dashboard/dashboard.module.ts

@@ -11,6 +11,7 @@ import { AddDataComponent } from './add-data.component';
 
 import { DashboardRoutingModule } from './dashboard.routing';
 import { OrgResultComponent } from '../shared/org-result.component';
+import { OrgTableComponent } from '../shared/org-table.component';
 
 @NgModule({
   imports: [
@@ -28,6 +29,7 @@ import { OrgResultComponent } from '../shared/org-result.component';
     AccountEditComponent,
     AddDataComponent,
     OrgResultComponent,
+    OrgTableComponent,
   ]
 })
 export class DashboardModule { }

src/app/shared/org-result.component.html

@@ -0,0 +1,4 @@
+<td (click)="orgClick()">{{org.name}}</td>
+<td (click)="orgClick()">{{org.street_name}}</td>
+<td (click)="orgClick()">{{org.town}}</td>
+<td (click)="orgClick()">{{org.postcode}}</td>

src/app/shared/org-result.component.ts

@@ -1,10 +1,24 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+
+interface OrgData {
+  id: number;
+  name: string;
+  street_name: string;
+  town: string;
+  postcode: string;
+}
 
 @Component({
-  selector: 'org-result',
+  selector: '[org-result]',
-  template:'banana {{ organisation }}',
+  templateUrl: 'org-result.component.html',
 })
 export class OrgResultComponent {
-  @Input() organisation: any;
+  @Input() public org: OrgData;
-  
+  @Output() public onClick = new EventEmitter();
-}
+
+  public orgClick(): void {
+    this.onClick.emit(
+      this.org
+    )
+  }
+}

src/app/shared/org-table.component.html

@@ -0,0 +1,19 @@
+<div class="form-group row">
+  <label class="col-md-3 form-control-label" for="text-input"><strong>Organisation Search Results</strong></label>
+  <div class="col-md-9">
+    <span class="help-block"><strong>Select an Organisation from the table below</strong></span>
+    <table class="table table-hover">
+      <thead>
+        <tr>
+          <th>Organisation Name</th>
+          <th>Street Name</th>
+          <th>Town</th>
+          <th>Postcode</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr org-result *ngFor="let org of orgList" [org]="org" (onClick)="orgClick($event)"></tr>
+      </tbody>
+    </table>
+  </div>
+</div>

src/app/shared/org-table.component.ts

@@ -0,0 +1,23 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { OrgResultComponent } from '../shared/org-result.component';
+
+interface OrgData {
+  id: number;
+  name: string;
+  street_name: string;
+  town: string;
+  postcode: string;
+}
+
+@Component({
+  selector: 'org-table',
+  templateUrl: 'org-table.component.html',
+})
+export class OrgTableComponent {
+  @Input() public orgList: Array<OrgData>;
+  @Output() public onClick = new EventEmitter();
+
+  public orgClick(event: any): void {
+    this.onClick.emit( event );
+  }
+}