Merge pull request #8 from Pear-Trading/finn/TransactionLog

View Transaction List

package-lock.json

@@ -5586,6 +5586,11 @@
         "moment": "2.18.1"
       }
     },
+    "ngx-pagination": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/ngx-pagination/-/ngx-pagination-3.0.1.tgz",
+      "integrity": "sha1-WoAA5AwEJNnEHJ1tWSVi4VR6vyQ="
+    },
     "no-case": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/no-case/-/no-case-2.3.1.tgz",

package.json

@@ -33,6 +33,7 @@
     "ng2-charts": "1.6.0",
     "ng2-validation-manager": "^0.3.1",
     "ngx-bootstrap": "1.6.6",
+    "ngx-pagination": "^3.0.1",
     "rxjs": "5.4.2",
     "ts-helpers": "1.1.2",
     "webpack": "3.5.4",

src/app/app.module.ts

@@ -6,6 +6,7 @@ import { HttpModule } from '@angular/http';
 import { AppComponent } from './app.component';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { TabsModule } from 'ngx-bootstrap/tabs';
+import { NgxPaginationModule } from 'ngx-pagination';
 import { NAV_DROPDOWN_DIRECTIVES } from './shared/nav-dropdown.directive';
 
 import { SIDEBAR_TOGGLE_DIRECTIVES } from './shared/sidebar.directive';
@@ -37,6 +38,7 @@ import { DashboardModule } from './dashboard/dashboard.module';
   imports: [
     BrowserModule,
     HttpModule,
+    NgxPaginationModule,
     BsDropdownModule.forRoot(),
     TabsModule.forRoot(),
     AuthModule,

src/app/dashboard/dashboard.module.ts

@@ -3,18 +3,21 @@ 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 { DashboardComponent } from './dashboard.component';
 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: [
@@ -24,6 +27,7 @@ import { OrgTableComponent } from '../shared/org-table.component';
     ReactiveFormsModule,
     ChartsModule,
     BsDropdownModule,
+    NgxPaginationModule,
     DashboardRoutingModule,
   ],
   declarations: [
@@ -33,6 +37,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-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);
+      }
+    );
+  }
+
+}

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

@@ -30,14 +30,19 @@
             <i class="icon-speedometer"></i> Dashboard
           </a>
         </li>
+        <li class="nav-item">
+          <a class="nav-link" routerLinkActive="active" [routerLink]="['/add-data']">
+            <i class="icon-basket"></i> Add Transaction
+          </a>
+        </li>
         <li class="nav-item">
           <a class="nav-link" routerLinkActive="active" [routerLink]="['/feedback']">
             <i class="icon-envelope-letter"></i> Enter Feedback
           </a>
         </li>
         <li class="nav-item">
-          <a class="nav-link" routerLinkActive="active" [routerLink]="['/add-data']">
-            <i class="icon-basket"></i> Add Transaction
+          <a class="nav-link" routerLinkActive="active" [routerLink]="['/transaction-log']">
+            <i class="icon-basket"></i> Transaction Log
           </a>
         </li>
       </ul>

src/app/providers/api-service.ts

@@ -97,6 +97,19 @@ export class ApiService {
       ).map( response => response.json() );
   }
 
+  // gets transaction list for log
+
+  public transList(data) {
+	  let key = this.sessionKey;
+	  return this.http.post(
+		this.apiUrl + '/outgoing-transactions',
+		{
+      session_key : key,
+      page : data
+    }
+	  ).map( response => response.json() );
+  }
+
   // Searches organisations used for transaction submission
 
   public search(data) {

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

@@ -0,0 +1,3 @@
+<td>{{transaction.seller}}</td>
+<td>{{transaction.value | currency:'GBP':true:'1.2-2' }}</td>
+<td>{{transactionDate}}</td>

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

@@ -0,0 +1,21 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import * as moment from 'moment';
+
+interface TransactionData {
+  seller: number;
+  value: string;
+  purchase_time: string;
+}
+
+@Component({
+  selector: '[transaction-result]',
+  templateUrl: 'transaction-result.component.html',
+})
+export class TransactionResultComponent implements OnInit {
+  @Input() public transaction: TransactionData;
+  public transactionDate: string;
+
+  ngOnInit(): void {
+    this.transactionDate = moment(this.transaction.purchase_time).format('llll');
+  }
+}

src/scss/_custom.scss

@@ -1,5 +1,7 @@
 // Here you can add other styles
-
+.clickable {
+  cursor: pointer;
+}
 // white title font variant on type-2 as defined in _widgets.css
 .horizontal-bars {
   padding: 0;