Merge pull request #21 from Pear-Trading/finn/PayrollSubmit
Transaction submitting and log added
This commit is contained in:
commit
7cf8af3058
12 changed files with 188 additions and 5 deletions
|
@ -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
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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,
|
||||
|
|
49
src/app/dashboard/payroll-log.component.html
Normal file
49
src/app/dashboard/payroll-log.component.html
Normal file
|
@ -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>
|
77
src/app/dashboard/payroll-log.component.ts
Normal file
77
src/app/dashboard/payroll-log.component.ts
Normal file
|
@ -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);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
}
|
|
@ -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>
|
||||
|
|
|
@ -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() {
|
||||
|
|
|
@ -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() );
|
||||
}
|
||||
|
|
3
src/app/shared/payroll-result.component.html
Normal file
3
src/app/shared/payroll-result.component.html
Normal file
|
@ -0,0 +1,3 @@
|
|||
<td>{{payrollDate}}</td>
|
||||
<td>{{payroll.gross_payroll | currency:'GBP':true:'1.2-2' }}</td>
|
||||
<td>{{payroll.employee_amount}}</td>
|
22
src/app/shared/payroll-result.component.ts
Normal file
22
src/app/shared/payroll-result.component.ts
Normal file
|
@ -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');
|
||||
}
|
||||
}
|
|
@ -3,7 +3,7 @@ import * as moment from 'moment';
|
|||
|
||||
interface TransactionData {
|
||||
seller: number;
|
||||
value: string;
|
||||
value: number;
|
||||
purchase_time: string;
|
||||
}
|
||||
|
||||
|
|
Reference in a new issue