Adding Stuff for submit transaction

This commit is contained in:
piratefinn 2017-08-29 18:15:47 +01:00
parent d3c0e9ec57
commit f040a26794
8 changed files with 308 additions and 6 deletions

View file

@ -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
View file

@ -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",

View file

@ -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",

View file

@ -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>
@ -105,7 +176,7 @@
<div class="card-footer">
<button type="submit" [disabled]="!payrollForm.valid" class="btn btn-sm btn-primary"><i class="fa fa-dot-circle-o"></i> Submit</button>
</div>
</form>
</form>
</div>
<div class="card">
<div class="card-header">

View file

@ -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,17 +15,38 @@ 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,
private formBuilder: FormBuilder,
private api: ApiService,
) {
this.payrollForm = this.formBuilder.group({
this.payrollForm = this.formBuilder.group({
entryperiod: ['', [Validators.required]],
employeeamount: ['', [Validators.required]],
localemployeeamount: ['', [Validators.required]],
@ -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() {

View file

@ -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 { }

View file

@ -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(
@ -78,6 +80,16 @@ export class ApiService {
data
).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

View file

@ -0,0 +1,10 @@
import { Component, Input } from '@angular/core';
@Component({
selector: 'org-result',
template:'banana {{ organisation }}',
})
export class OrgResultComponent {
@Input() organisation: any;
}