Adding Stuff for submit transaction
This commit is contained in:
piratefinn
parent
d3c0e9ec57
commit
f040a26794
8 changed files with 308 additions and 6 deletions
|
|
@ -16,6 +16,9 @@
|
|||
"tsconfig": "tsconfig.app.json",
|
||||
"testTsconfig": "tsconfig.spec.json",
|
||||
"prefix": "app",
|
||||
"scripts": [
|
||||
"../node_modules/moment/min/moment.min.js"
|
||||
],
|
||||
"styles": [
|
||||
"scss/style.scss"
|
||||
],
|
||||
|
|
|
|||
8
package-lock.json
generated
8
package-lock.json
generated
|
|
@ -777,6 +777,14 @@
|
|||
"@types/jasmine": "2.5.54"
|
||||
}
|
||||
},
|
||||
"@types/moment": {
|
||||
"version": "2.13.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/moment/-/moment-2.13.0.tgz",
|
||||
"integrity": "sha1-YE69GJvDvDShVIaJQE5hoqSqyJY=",
|
||||
"requires": {
|
||||
"moment": "2.18.1"
|
||||
}
|
||||
},
|
||||
"@types/node": {
|
||||
"version": "8.0.24",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-8.0.24.tgz",
|
||||
|
|
|
|||
|
|
@ -25,10 +25,11 @@
|
|||
"@angular/platform-browser-dynamic": "4.0.3",
|
||||
"@angular/router": "4.0.3",
|
||||
"@angular/upgrade": "4.0.3",
|
||||
"@types/moment": "^2.13.0",
|
||||
"angular-in-memory-web-api": "^0.3.1",
|
||||
"chart.js": "2.5.0",
|
||||
"core-js": "2.4.1",
|
||||
"moment": "2.18.1",
|
||||
"moment": "^2.18.1",
|
||||
"ng2-charts": "1.6.0",
|
||||
"ng2-validation-manager": "^0.3.1",
|
||||
"ngx-bootstrap": "1.6.6",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,77 @@
|
|||
<div class="animated fadeIn">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Submit Supplier Transaction</strong>
|
||||
<small>Required Data marked in <strong>bold</strong>.</small>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 form-control-label" for="text-input"><strong>Time of Transaction</strong></label>
|
||||
<div class="col-md-9">
|
||||
<input type="datetime-local" class="form-control" [min]="minDate" [(ngModel)]="myDate" (ngModelChange)="transactionFormValidate()">
|
||||
<span class="help-block">This is a help text</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 form-control-label" for="text-input"><strong>Amount</strong></label>
|
||||
<div class="col-md-9">
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon"><i class="fa fa-gbp"></i></span>
|
||||
<input type="number" min="0.00" step="0.01" class="form-control" placeholder="0.00" [(ngModel)]="amount" (ngModelChange)="transactionFormValidate()">
|
||||
</div>
|
||||
<span class="help-block">This is a help text</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">
|
||||
<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>
|
||||
<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>
|
||||
<div class="col-md-9">
|
||||
<input type="text" class="form-control" placeholder="Which Street?" [(ngModel)]="submitOrg.street_name" (ngModelChange)="transactionFormValidate()">
|
||||
<span class="help-block">This is a help text</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 form-control-label" for="text-input"><strong>Organisation Town</strong></label>
|
||||
<div class="col-md-9">
|
||||
<input type="text" class="form-control" placeholder="Which Town?" [(ngModel)]="submitOrg.town" (ngModelChange)="transactionFormValidate()">
|
||||
<span class="help-block">This is a help text</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 form-control-label" for="text-input"><strong>Organisation Postcode</strong></label>
|
||||
<div class="col-md-9">
|
||||
<input type="text" class="form-control" placeholder="Postcode if known" [(ngModel)]="submitOrg.postcode" (ngModelChange)="transactionFormValidate()">
|
||||
<span class="help-block">This is a help text</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-md-9">
|
||||
<div [ngSwitch]="transactionFormStatus">
|
||||
<div *ngSwitchCase="'success'" class="alert alert-success" role="alert">
|
||||
Submit Succeeded.
|
||||
</div>
|
||||
<div *ngSwitchCase="'send_failed'" class="alert alert-danger" role="alert">
|
||||
{{transactionFormStatusError}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<button type="submit" (click)="postTransaction()" [disabled]="TransactionFormInvalid" class="btn btn-sm btn-primary"><i class="fa fa-dot-circle-o"></i> Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Profile & Payroll Data</strong>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,8 @@ 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 * as moment from 'moment';
|
||||
import 'rxjs/add/operator/map';
|
||||
|
||||
@Component({
|
||||
|
|
@ -13,10 +15,31 @@ export class AddDataComponent {
|
|||
suppliersForm: FormGroup;
|
||||
singleSupplierForm: FormGroup;
|
||||
employeeForm: FormGroup;
|
||||
transactionForm: FormGroup;
|
||||
payrollFormStatus: any;
|
||||
suppliersFormStatus: any;
|
||||
singleSupplierFormStatus: any;
|
||||
employeeFormStatus: any;
|
||||
transactionFormStatus: any;
|
||||
transactionFormStatusError: string = 'Error received, please try again.';
|
||||
|
||||
submitOrg = {
|
||||
name: '',
|
||||
street_name: '',
|
||||
town: '',
|
||||
postcode: '',
|
||||
};
|
||||
organisationId: number;
|
||||
organisationTown: string;
|
||||
organisationPostcode: string;
|
||||
amount: number;
|
||||
transactionAdditionType = 1;
|
||||
storeList;
|
||||
showAddStore = false;
|
||||
submitReceipt = false;
|
||||
transactionFormInvalid = true;
|
||||
myDate: any;
|
||||
minDate: any;
|
||||
|
||||
constructor(
|
||||
private http: Http,
|
||||
|
|
@ -55,6 +78,178 @@ export class AddDataComponent {
|
|||
employeepension: [''],
|
||||
employeeotherbenefit: [''],
|
||||
});
|
||||
this.myDate = moment().format('YYYY-MM-DD[T]HH:mm');
|
||||
// this.myDate = new Date().toISOString().slice(0, 16);
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.getMinDate();
|
||||
}
|
||||
|
||||
getMinDate(){
|
||||
// gets the April 1st date of the current year
|
||||
let aprilDate = moment().month(3).date(1);
|
||||
let now = moment();
|
||||
// Checks if current time is before April 1st, if so returns true
|
||||
let beforeApril = now.isBefore(aprilDate);
|
||||
if ( beforeApril == true ) {
|
||||
this.minDate = aprilDate.subtract(2, 'years').format('YYYY-MM-DD');
|
||||
} else {
|
||||
this.minDate = aprilDate.subtract(1, 'years').format('YYYY-MM-DD');
|
||||
}
|
||||
}
|
||||
|
||||
initializeItems() {
|
||||
// Dont bother searching for an empty or undefined string
|
||||
if ( this.submitOrg.name == '' ) {
|
||||
return;
|
||||
}
|
||||
var searchData = {
|
||||
search_name: this.submitOrg.name,
|
||||
};
|
||||
|
||||
this.api.search(searchData).subscribe(
|
||||
data => {
|
||||
if(data.validated.length > 0) {
|
||||
this.storeList = data.validated;
|
||||
this.showAddStore = false;
|
||||
this.transactionAdditionType = 1;
|
||||
} else {
|
||||
this.storeList = data.unvalidated;
|
||||
this.showAddStore = false;
|
||||
this.transactionAdditionType = 2;
|
||||
}
|
||||
// handle the case when the storelist is empty
|
||||
if(this.storeList.length < 1 ) {
|
||||
this.storeList = null;
|
||||
this.showAddStore = true;
|
||||
this.transactionAdditionType = 3;
|
||||
}
|
||||
},
|
||||
error => {
|
||||
console.log(error);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
// if user select a item from the list
|
||||
addStore(store){
|
||||
this.submitOrg = store;
|
||||
this.transactionFormValidate();
|
||||
this.organisationId = store.id;
|
||||
}
|
||||
|
||||
// search for store
|
||||
organisationSearch(ev) {
|
||||
// Reset items back to all of the items
|
||||
this.initializeItems();
|
||||
|
||||
// set val to the value of the searchbar
|
||||
let val = ev.target.value;
|
||||
|
||||
// Filter the store list so search seems quicker
|
||||
if (val && val.trim() != '' && this.storeList != null) {
|
||||
this.storeList = this.storeList.filter(
|
||||
(item) => {
|
||||
return ( item.name.toLowerCase().indexOf( val.toLowerCase() ) > -1 );
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
// if nothing is found
|
||||
if(!this.storeList === null){
|
||||
// display add new store button
|
||||
this.showAddStore = true;
|
||||
}
|
||||
}
|
||||
|
||||
transactionFormValidate() {
|
||||
if( this.submitOrg.name.length == 0 ||
|
||||
this.amount == 0 ) {
|
||||
this.transactionFormInvalid = true;
|
||||
}else{
|
||||
this.transactionFormInvalid = false;
|
||||
}
|
||||
}
|
||||
|
||||
public postTransaction() {
|
||||
|
||||
var myParams: any;
|
||||
let purchaseTime: string;
|
||||
purchaseTime = moment(this.myDate, 'YYYY-MM-DD[T]HH:mm').local().format('YYYY-MM-DD[T]HH:mm:ss.SSSZ');
|
||||
switch(this.transactionAdditionType){
|
||||
case 1:
|
||||
myParams = {
|
||||
transaction_type : this.transactionAdditionType,
|
||||
transaction_value : this.amount,
|
||||
purchase_time : purchaseTime,
|
||||
organisation_id : this.organisationId,
|
||||
};
|
||||
break;
|
||||
case 2:
|
||||
myParams = {
|
||||
transaction_type : this.transactionAdditionType,
|
||||
transaction_value : this.amount,
|
||||
purchase_time : purchaseTime,
|
||||
organisation_id : this.organisationId,
|
||||
};
|
||||
break;
|
||||
case 3:
|
||||
myParams = {
|
||||
transaction_type : this.transactionAdditionType,
|
||||
transaction_value : this.amount,
|
||||
purchase_time : purchaseTime,
|
||||
organisation_name : this.submitOrg.name,
|
||||
street_name : this.submitOrg.street_name,
|
||||
town : this.submitOrg.town,
|
||||
postcode : this.submitOrg.postcode,
|
||||
};
|
||||
break;
|
||||
}
|
||||
/******************************/
|
||||
|
||||
this.api
|
||||
.upload(myParams)
|
||||
.subscribe(
|
||||
result => {
|
||||
if ( result.success == true ) {
|
||||
console.log('Successful Upload');
|
||||
console.log(result);
|
||||
this.transactionFormStatus = "success";
|
||||
console.log(this.transactionFormStatus);
|
||||
this.resetForm();
|
||||
} else {
|
||||
console.log('Upload Error');
|
||||
this.transactionFormStatusError = JSON.stringify(result.status) + 'Error, ' + JSON.stringify(result.message);
|
||||
this.transactionFormStatus = "send_failed";
|
||||
console.log(this.transactionFormStatus);
|
||||
}
|
||||
},
|
||||
error => {
|
||||
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);
|
||||
} catch(e) {
|
||||
this.transactionFormStatusError = 'There was a server error, please try again later.';
|
||||
}
|
||||
this.transactionFormStatus = "send_failed";
|
||||
console.log(this.transactionFormStatus);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
private resetForm() {
|
||||
this.submitOrg = {
|
||||
name: '',
|
||||
street_name: '',
|
||||
town: '',
|
||||
postcode: '',
|
||||
};
|
||||
this.storeList = null;
|
||||
this.amount = null;
|
||||
this.transactionFormInvalid = true;
|
||||
}
|
||||
|
||||
onSubmitPayroll() {
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ import { AccountEditComponent } from './account-edit.component';
|
|||
import { AddDataComponent } from './add-data.component';
|
||||
|
||||
import { DashboardRoutingModule } from './dashboard.routing';
|
||||
import { OrgResultComponent } from '../shared/org-result.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
|
|
@ -26,6 +27,7 @@ import { DashboardRoutingModule } from './dashboard.routing';
|
|||
LeaderboardsComponent,
|
||||
AccountEditComponent,
|
||||
AddDataComponent,
|
||||
OrgResultComponent,
|
||||
]
|
||||
})
|
||||
export class DashboardModule { }
|
||||
|
|
|
|||
|
|
@ -20,18 +20,18 @@ export class ApiService {
|
|||
|
||||
// Login API
|
||||
|
||||
private getSessionKey() {
|
||||
public getSessionKey() {
|
||||
console.log('get key');
|
||||
return this.sessionKey;
|
||||
}
|
||||
|
||||
private setSessionKey(key) {
|
||||
public setSessionKey(key) {
|
||||
console.log('set key');
|
||||
this.sessionKey = key;
|
||||
localStorage.setItem('sessionKey', this.sessionKey);
|
||||
}
|
||||
|
||||
private removeSessionKey() {
|
||||
public removeSessionKey() {
|
||||
console.log('remove key');
|
||||
this.sessionKey = null;
|
||||
localStorage.removeItem('sessionKey');
|
||||
|
|
@ -71,6 +71,8 @@ export class ApiService {
|
|||
).map( response => { this.removeSessionKey(); return response.json() } );
|
||||
}
|
||||
|
||||
// Searches organisations used for transaction submission
|
||||
|
||||
public search(data) {
|
||||
data.session_key = this.sessionKey;
|
||||
return this.http.post(
|
||||
|
|
@ -79,6 +81,16 @@ export class ApiService {
|
|||
).map( response => response.json() );
|
||||
}
|
||||
|
||||
// Uploads a transaction
|
||||
|
||||
public upload(data) {
|
||||
data.session_key = this.sessionKey;
|
||||
return this.http.post(
|
||||
this.apiUrl + '/upload',
|
||||
data
|
||||
).map( response => response.json() )
|
||||
}
|
||||
|
||||
// Handles user data interaction
|
||||
|
||||
// Checks for login status
|
||||
|
|
|
|||
10
src/app/shared/org-result.component.ts
Normal file
10
src/app/shared/org-result.component.ts
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
import { Component, Input } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'org-result',
|
||||
template:'banana {{ organisation }}',
|
||||
})
|
||||
export class OrgResultComponent {
|
||||
@Input() organisation: any;
|
||||
|
||||
}
|
||||
Reference in a new issue