Merge pull request #21 from Pear-Trading/finn/PayrollSubmit

Transaction submitting and log added

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 # Next Release
 
+* Payroll Log Data added
 * Fixed register box view on login page
 * Made the form reset properly if adding a new one
 * Added better error messages on register and account edit

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

@@ -72,7 +72,7 @@
           <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 *ngIf="false" class="card">
+      <div  *ngIf="accountType == 'organisation'" class="card">
         <div class="card-header">
           <strong>Profile & Payroll Data</strong>
           <small>Required Data marked in <strong>bold</strong>.</small>

src/app/dashboard/dashboard.module.ts

@@ -13,6 +13,7 @@ import { AccountEditComponent } from './account-edit.component';
 import { AddDataComponent } from './add-data.component';
 import { FeedbackComponent } from './feedback.component';
 import { TransactionLogComponent } from './transaction-log.component';
+import { PayrollLogComponent } from './payroll-log.component';
 
 import { GraphWidget } from '../widgets/graph-widget.component';
 import { OrgBarSnippetComponent } from '../snippets/org-snippet-bar.component';
@@ -22,6 +23,7 @@ import { DashboardRoutingModule } from './dashboard.routing';
 import { OrgResultComponent } from '../shared/org-result.component';
 import { OrgTableComponent } from '../shared/org-table.component';
 import { TransactionResultComponent } from '../shared/transaction-result.component';
+import { PayrollResultComponent } from '../shared/payroll-result.component';
 
 @NgModule({
   imports: [
@@ -43,6 +45,8 @@ import { TransactionResultComponent } from '../shared/transaction-result.compone
     OrgTableComponent,
     TransactionLogComponent,
     TransactionResultComponent,
+    PayrollLogComponent,
+    PayrollResultComponent,
     FeedbackComponent,
     GraphWidget,
     OrgBarSnippetComponent,

src/app/dashboard/dashboard.routing.ts

@@ -12,6 +12,7 @@ import { AccountEditComponent } from './account-edit.component';
 import { AddDataComponent } from './add-data.component';
 import { FeedbackComponent } from './feedback.component';
 import { TransactionLogComponent } from './transaction-log.component';
+import { PayrollLogComponent } from './payroll-log.component';
 
 // Using child path to allow for FullLayout theming
 const routes: Routes = [
@@ -48,6 +49,12 @@ const routes: Routes = [
         component: TransactionLogComponent,
         data: { title: 'Transaction Log' },
       },
+      {
+        path: 'payroll-log',
+        component: PayrollLogComponent,
+        data: { title: 'Payroll Log' },
+        canActivate: [OrgGuard],
+      },
       {
         path: 'feedback',
         component: FeedbackComponent,

src/app/dashboard/payroll-log.component.html

@@ -0,0 +1,49 @@
+<div class="animated fadeIn">
+  <div class="row">
+    <div class="col-lg-12">
+      <div class="card">
+        <div class="card-header">
+          <strong>Log of Payroll submissions</strong>
+          <small>Sorted descending from submission date.</small>
+        </div>
+        <div *ngIf="!noPayrollList" class="card-block">
+          <table class="table table-striped table-hover">
+            <thead>
+              <tr>
+                <th>Entry Period</th>
+                <th>Gross Payroll</th>
+                <th>Employees</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr payroll-result *ngFor="let payroll of payrollList | paginate: paginateConfig" [payroll]="payroll"></tr>
+            </tbody>
+          </table>
+          <pagination-template #p="paginationApi"
+          [id]="paginateConfig.id"
+          (pageChange)="loadPayrolls($event)">
+          <ul class="pagination">
+             <li class="page-item" [class.disabled]="p.isFirstPage()">
+               <a class="page-link clickable" *ngIf="!p.isFirstPage()" (click)="p.previous()">Prev</a>
+             </li>
+             <li *ngFor="let page of p.pages" class="page-item" [class.active]="p.getCurrent() === page.value">
+                <a class="page-link clickable" (click)="p.setCurrent(page.value)" *ngIf="p.getCurrent() !== page.value">
+                    <span>{{ page.label }}</span>
+                </a>
+                <div class="page-link" *ngIf="p.getCurrent() === page.value">
+                    <span>{{ page.label }}</span>
+                </div>
+            </li>
+            <li class="page-item" [class.disabled]="p.isLastPage()">
+              <a class="page-link clickable" *ngIf="!p.isLastPage()" (click)="p.next()">Next</a>
+            </li>
+          </ul>
+          </pagination-template>
+        </div>
+        <div *ngIf="noPayrollList" class="card-block">
+          No Payroll data available.
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/app/dashboard/payroll-log.component.ts

@@ -0,0 +1,77 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { Http, Response } from '@angular/http';
+import { ApiService } from '../providers/api-service';
+// import { PaginatePipe } from 'ngx-pagination';
+import {PaginationInstance} from 'ngx-pagination';
+// import { PaginationControlsComponent } from 'ngx-pagination';
+// import { PaginationControlsDirective } from 'ngx-pagination';
+// import { TransactionResultComponent } from '../shared/transaction-result.component';
+import * as moment from 'moment';
+import 'rxjs/add/operator/map';
+
+@Component({
+  templateUrl: 'payroll-log.component.html',
+})
+export class PayrollLogComponent implements OnInit {
+
+  payrollList;
+  noPayrollList = true;
+  myDate: any;
+  minDate: any;
+
+  public paginateConfig: PaginationInstance = {
+        id: 'transpaginate',
+        itemsPerPage: 10,
+        currentPage: 1,
+        totalItems: 0
+    };
+
+  constructor(
+  private http: Http,
+	private api: ApiService,
+	) {
+    this.myDate = moment().format('YYYY-MM-DD[T]HH:mm');
+    // this.myDate = new Date().toISOString().slice(0, 16);
+  }
+
+  ngOnInit(): void {
+    this.getMinDate();
+    this.loadPayrolls(1);
+  }
+
+  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');
+    }
+  }
+
+  loadPayrolls(logPage: number) {
+    console.log(logPage);
+    this.api.payrollList(logPage).subscribe(
+      result => {
+        if(result.payrolls.length > 0) {
+          this.payrollList = result.payrolls;
+          //TODO Rename in server
+          this.paginateConfig.totalItems = result.page_no;
+          this.paginateConfig.currentPage = logPage;
+          this.noPayrollList = false;
+        } else {
+        // handle the case when the payrollList is empty
+          this.payrollList = null;
+          this.noPayrollList = true;
+        }
+      },
+      error => {
+        console.log(error);
+      }
+    );
+  }
+
+}

src/app/layouts/full-layout.component.html

@@ -45,6 +45,11 @@
             <i class="icon-basket"></i> Transaction Log
           </a>
         </li>
+        <li  *ngIf="accountType == 'organisation'" class="nav-item">
+          <a class="nav-link" routerLinkActive="active" [routerLink]="['/payroll-log']">
+            <i class="icon-basket"></i> Payroll Log
+          </a>
+        </li>
       </ul>
     </nav>
   </div>

src/app/layouts/full-layout.component.ts

@@ -8,6 +8,7 @@ import { Router } from '@angular/router';
 })
 export class FullLayoutComponent implements OnInit {
   public displayName: string;
+  public accountType: any;
   public disabled = false;
   public status: {isopen: boolean} = {isopen: false};
 
@@ -29,6 +30,7 @@ export class FullLayoutComponent implements OnInit {
   // getDisplayName function from api didnt work
   ngOnInit(): void {
     this.displayName = localStorage.getItem('displayname') || 'User';
+    this.accountType = localStorage.getItem('usertype');
   }
 
   userLogout() {

src/app/providers/api-service.ts

@@ -136,12 +136,25 @@ export class ApiService {
     ).map( response => response.json() );
   }
 
+  // gets payroll list for log
+
+  public payrollList(data) {
+    const key = this.sessionKey;
+    return this.http.post(
+    this.apiUrl + '/v1/organisation/payroll',
+    {
+      session_key : key,
+      page : data
+    }
+    ).map( response => response.json() );
+  }
+
   // handles Org data added
 
   public orgPayroll(data) {
     data.session_key = this.sessionKey;
     return this.http.post(
-      this.apiUrl + '/org/payroll',
+      this.apiUrl + '/v1/organisation/payroll/add',
       data
     ).map( response => response.json() );
   }
@@ -149,7 +162,7 @@ export class ApiService {
   public orgSupplier(data) {
     data.session_key = this.sessionKey;
     return this.http.post(
-      this.apiUrl + '/org/supplier',
+      this.apiUrl + '/v1/organisation/supplier/add',
       data
     ).map( response => response.json() );
   }
@@ -157,7 +170,7 @@ export class ApiService {
   public orgEmployee(data) {
     data.session_key = this.sessionKey;
     return this.http.post(
-      this.apiUrl + '/org/employee',
+      this.apiUrl + '/v1/organisation/employee/add',
       data
     ).map( response => response.json() );
   }

src/app/shared/payroll-result.component.html

@@ -0,0 +1,3 @@
+<td>{{payrollDate}}</td>
+<td>{{payroll.gross_payroll | currency:'GBP':true:'1.2-2' }}</td>
+<td>{{payroll.employee_amount}}</td>

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

@@ -0,0 +1,22 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import * as moment from 'moment';
+
+interface PayrollData {
+  entry_period: string;
+  gross_payroll: number;
+  employee_amount: number;
+}
+
+@Component({
+  // tslint:disable-next-line
+  selector: '[payroll-result]',
+  templateUrl: 'payroll-result.component.html',
+})
+export class PayrollResultComponent implements OnInit {
+  @Input() public payroll: PayrollData;
+  public payrollDate: string;
+
+  ngOnInit(): void {
+    this.payrollDate = moment(this.payroll.entry_period).format('MMMM YYYY');
+  }
+}

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

@@ -3,7 +3,7 @@ import * as moment from 'moment';
 
 interface TransactionData {
   seller: number;
-  value: string;
+  value: number;
   purchase_time: string;
 }