From d5edab6e2e606198831fe8719974987d2a0b53dd Mon Sep 17 00:00:00 2001 From: piratefinn Date: Thu, 29 Jun 2017 16:33:11 +0100 Subject: [PATCH] Fully expanded trader form with API --- src/app/components/add-data.component.html | 360 ++++++++++++--------- src/app/components/add-data.component.ts | 101 +++++- src/app/components/components.module.ts | 3 + src/app/pages/login.component.html | 36 +-- src/app/pages/register.component.ts | 1 - 5 files changed, 327 insertions(+), 174 deletions(-) diff --git a/src/app/components/add-data.component.html b/src/app/components/add-data.component.html index dd19d84..62459d8 100644 --- a/src/app/components/add-data.component.html +++ b/src/app/components/add-data.component.html @@ -3,196 +3,248 @@
- Basic Form Elements + Profile & Payroll Data + Required Data marked in bold.
-
-
+ +
- +
-

Username

-
-
-
- -
- + This is a help text
- +
- - Please enter your email + + This is a help text
- +
- - Please enter a complex password + + This is a help text
- +
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
-
- -
-
- -
-
- +
+ +
+ This is a help text
- +
- - - -
-
-
- -
-
- +
+ +
-
- + This is a help text +
+
+
+ +
+
+ +
-
- + This is a help text +
+
+
+ +
+
+ +
+ This is a help text
- +
- - - +
+ + +
+ This is a help text
- +
- +
+ + +
+ A total of other payments such as refunded fuel etc.
-
- -
- -
-
- +
+
+ +
+ +
+
+
+ Total Suppliers Data + Required Data marked in bold.
-
- - +
+
+
+ +
+ + This is a help text +
+
+
+ +
+
+ + +
+ This is a help text +
+
+
+ +
+ + This is a help text +
+
+
+ +
+ + This is a help text +
+
+
+
+ +
+
+
+
+
+ Individual Supplier Data + Optional but recommended.
+
+
+
+ +
+ + This is a help text +
+
+
+ +
+ + This is a help text +
+
+
+ +
+
+ + +
+ This is a help text +
+
+
+
+ +
+
+
+
+
+ Individual Employee Data + Optional but recommended. +
+
+
+
+ +
+ + Used to identify employee anonymously +
+
+
+ +
+
+ + +
+ This is a help text +
+
+
+ +
+
+ + +
+ This is a help text +
+
+
+ +
+
+ + +
+ This is a help text +
+
+
+ +
+
+ + +
+ This is a help text +
+
+
+ +
+
+ + +
+ A total of other payments such as refunded fuel etc. +
+
+
+
+ +
+
diff --git a/src/app/components/add-data.component.ts b/src/app/components/add-data.component.ts index 9ccea3e..688245e 100644 --- a/src/app/components/add-data.component.ts +++ b/src/app/components/add-data.component.ts @@ -9,7 +9,106 @@ import 'rxjs/add/operator/map'; providers: [ApiService] }) export class AddDataComponent { + payrollForm: FormGroup; + suppliersForm: FormGroup; + singleSupplierForm: FormGroup; + employeeForm: FormGroup; - constructor() { } + constructor( + private http: Http, + private formBuilder: FormBuilder, + private api: ApiService, + ) { + this.payrollForm = this.formBuilder.group({ + entryperiod: ['', [Validators.required]], + employeeamount: ['', [Validators.required]], + localemployeeamount: ['', [Validators.required]], + grosspayroll: ['', [Validators.required]], + payrollincometax: [''], + payrollemployeeni: [''], + payrollemployerni: [''], + payrolltotalpension: [''], + payrollotherbenefit: [''], + }); + this.suppliersForm = this.formBuilder.group({ + entryperiod: ['', [Validators.required]], + grossspend: ['', [Validators.required]], + suppliersamount: ['', [Validators.required]], + localsuppliersamount: ['', [Validators.required]], + }); + this.singleSupplierForm = this.formBuilder.group({ + supplierbusinessname: [''], + postcode: [''], + monthlyspend: [''], + }); + this.employeeForm = this.formBuilder.group({ + employeeno: [''], + employeeincometax: [''], + employeegrosswage: [''], + employeeni: [''], + employeepension: [''], + employeeotherbenefit: [''], + }); + } + + onSubmitPayroll() { + console.log(this.payrollForm.value); + + this.api + .login(this.payrollForm.value) + .subscribe( + result => { + console.log('data submitted!'); + }, + error => { + console.log( error._body ); + } + ); + } + + onSubmitSuppliers() { + console.log(this.suppliersForm.value); + + this.api + .login(this.suppliersForm.value) + .subscribe( + result => { + console.log('data submitted!'); + }, + error => { + console.log( error._body ); + } + ); + } + + onSubmitSingleSupplier() { + console.log(this.singleSupplierForm.value); + + this.api + .login(this.singleSupplierForm.value) + .subscribe( + result => { + console.log('data submitted!'); + }, + error => { + console.log( error._body ); + } + ); + } + + onSubmitEmployee() { + console.log(this.employeeForm.value); + + this.api + .login(this.employeeForm.value) + .subscribe( + result => { + console.log('data submitted!'); + }, + error => { + console.log( error._body ); + } + ); + } } diff --git a/src/app/components/components.module.ts b/src/app/components/components.module.ts index 92b42d3..f98ef2d 100644 --- a/src/app/components/components.module.ts +++ b/src/app/components/components.module.ts @@ -1,4 +1,5 @@ import { NgModule } from '@angular/core'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; // Pagesto be used in Production import { LeaderboardsComponent } from './leaderboards.component'; @@ -31,6 +32,8 @@ import { ComponentsRoutingModule } from './components-routing.module'; imports: [ ComponentsRoutingModule, BsDropdownModule.forRoot(), + FormsModule, + ReactiveFormsModule, ModalModule.forRoot(), TabsModule ], diff --git a/src/app/pages/login.component.html b/src/app/pages/login.component.html index 98d74a3..277c26c 100644 --- a/src/app/pages/login.component.html +++ b/src/app/pages/login.component.html @@ -7,24 +7,24 @@

Login

Sign In to your account

-
-
- @ - -
-
- - -
-
-
- -
-
- -
-
-
+
+
+ @ + +
+
+ + +
+
+
+ +
+
+ +
+
+
diff --git a/src/app/pages/register.component.ts b/src/app/pages/register.component.ts index 519472b..eeb4c7e 100644 --- a/src/app/pages/register.component.ts +++ b/src/app/pages/register.component.ts @@ -116,7 +116,6 @@ export class RegisterComponent { }, error => { console.log( error._body ); - } ); }