Merge branch 'development' into TBSliver/Widget-Graph-Improvements

src/app/dashboard/dashboard.module.ts

@@ -3,6 +3,7 @@ import { CommonModule } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { ChartsModule } from 'ng2-charts/ng2-charts';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
+import { NgxPaginationModule } from 'ngx-pagination';
 
 import { CurrencyPipe } from '@angular/common';
 
@@ -11,12 +12,14 @@ import { DashboardCustomerComponent } from './dashboard-customer.component';
 import { AccountEditComponent } from './account-edit.component';
 import { AddDataComponent } from './add-data.component';
 import { FeedbackComponent } from './feedback.component';
+import { TransactionLogComponent } from './transaction-log.component';
 
 import { GraphWidget } from '../widgets/graph-widget.component';
 
 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';
 
 @NgModule({
   imports: [
@@ -26,6 +29,7 @@ import { OrgTableComponent } from '../shared/org-table.component';
     ReactiveFormsModule,
     ChartsModule,
     BsDropdownModule,
+    NgxPaginationModule,
     DashboardRoutingModule,
   ],
   declarations: [
@@ -35,6 +39,8 @@ import { OrgTableComponent } from '../shared/org-table.component';
     AddDataComponent,
     OrgResultComponent,
     OrgTableComponent,
+    TransactionLogComponent,
+    TransactionResultComponent,
     FeedbackComponent,
     GraphWidget,
   ],

src/app/dashboard/dashboard.routing.ts

@@ -11,6 +11,7 @@ import { FullLayoutComponent } from '../layouts/full-layout.component';
 import { AccountEditComponent } from './account-edit.component';
 import { AddDataComponent } from './add-data.component';
 import { FeedbackComponent } from './feedback.component';
+import { TransactionLogComponent } from './transaction-log.component';
 
 // Using child path to allow for FullLayout theming
 const routes: Routes = [
@@ -42,6 +43,11 @@ const routes: Routes = [
         component: AddDataComponent,
         data: { title: 'Add Transaction' },
       },
+      {
+        path: 'transaction-log',
+        component: TransactionLogComponent,
+        data: { title: 'Transaction Log' },
+      },
       {
         path: 'feedback',
         component: FeedbackComponent,

src/app/dashboard/transaction-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 Outgoing Transactions</strong>
+          <small>This lists all purchases that have been submitted.</small>
+        </div>
+        <div *ngIf="!noTransactionList" class="card-block">
+          <table class="table table-striped table-hover">
+            <thead>
+              <tr>
+                <th>Seller</th>
+                <th>Value</th>
+                <th>Purchase Time</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr transaction-result *ngFor="let transaction of transactionList | paginate: paginateConfig" [transaction]="transaction"></tr>
+            </tbody>
+          </table>
+          <pagination-template #p="paginationApi"
+          [id]="paginateConfig.id"
+          (pageChange)="loadTransactions($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="noTransactionList" class="card-block">
+          No Transactions available.
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,78 @@
+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: 'transaction-log.component.html',
+  providers: [ApiService]
+})
+export class TransactionLogComponent {
+
+  transactionList;
+  noTransactionList = 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.loadTransactions(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');
+    }
+  }
+
+  loadTransactions(logPage: number) {
+    console.log(logPage);
+    this.api.transList(logPage).subscribe(
+      result => {
+        if(result.transactions.length > 0) {
+          this.transactionList = result.transactions;
+          //TODO Rename in server
+          this.paginateConfig.totalItems = result.page_no;
+          this.paginateConfig.currentPage = logPage;
+          this.noTransactionList = false;
+        } else {
+        // handle the case when the transactionList is empty
+          this.transactionList = null;
+          this.noTransactionList = true;
+        }
+      },
+      error => {
+        console.log(error);
+      }
+    );
+  }
+
+}