Adding Stuff for submit transaction

.angular-cli.json

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

package-lock.json

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

package.json

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

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

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

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

@@ -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() {

src/app/dashboard/dashboard.module.ts

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

src/app/providers/api-service.ts

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

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

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