Fully working table org search and better error
This commit is contained in:
parent
f040a26794
commit
52de477cc2
7 changed files with 86 additions and 22 deletions
|
@ -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>
|
||||
|
|
|
@ -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);
|
||||
this.transactionFormStatusError = JSON.stringify(jsonError.status) + 'Error, ' + JSON.stringify(jsonError.message);
|
||||
console.log(error.error);
|
||||
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(
|
||||
|
|
|
@ -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 { }
|
||||
|
|
4
src/app/shared/org-result.component.html
Normal file
4
src/app/shared/org-result.component.html
Normal file
|
@ -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>
|
|
@ -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',
|
||||
template:'banana {{ organisation }}',
|
||||
selector: '[org-result]',
|
||||
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
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
19
src/app/shared/org-table.component.html
Normal file
19
src/app/shared/org-table.component.html
Normal file
|
@ -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>
|
23
src/app/shared/org-table.component.ts
Normal file
23
src/app/shared/org-table.component.ts
Normal file
|
@ -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 );
|
||||
}
|
||||
}
|
Reference in a new issue