feat: cashier transactions list page (#1061)

Fixes: #760

src/app/organization/organization-routing.module.ts

@@ -42,6 +42,7 @@ import { ViewCampaignComponent } from './sms-campaigns/view-campaign/view-campai
 import { ManageFundsComponent } from './manage-funds/manage-funds.component';
 import { ManageCurrenciesComponent } from './currencies/manage-currencies/manage-currencies.component';
 import { CashiersComponent } from './tellers/cashiers/cashiers.component';
+import { TransactionsComponent } from './tellers/transactions/transactions.component';
 
 /** Custom Resolvers */
 import { LoanProvisioningCriteriaResolver } from './loan-provisioning-criteria/loan-provisioning-criteria.resolver';
@@ -339,11 +340,24 @@ const routes: Routes = [
                     },
                     {
                       path: ':id',
-                      component: ViewCashierComponent,
-                      data: { title: extract('View Cashier'), breadcrumb: 'View Cashier', routeParamBreadcrumb: 'id' },
-                      resolve: {
-                        cashier: CashierResolver
-                      }
+                      data: { title: extract('View Cashier'),  routeParamBreadcrumb: 'id' },
+                      children: [
+                        {
+                          path: '',
+                          component: ViewCashierComponent,
+                          resolve: {
+                            cashier: CashierResolver
+                          }
+                        },
+                        {
+                          path: 'transactions',
+                          data: { title: extract('Cashier Transactions'), breadcrumb: 'Transactions', routeParamBreadcrumb: false },
+                          component: TransactionsComponent,
+                          resolve: {
+                            currencies: CurrenciesResolver
+                          }
+                        }
+                      ]
                     }
                   ]
                 }

src/app/organization/organization.module.ts

@@ -45,6 +45,7 @@ import { ViewCampaignComponent } from './sms-campaigns/view-campaign/view-campai
 import { ManageFundsComponent } from './manage-funds/manage-funds.component';
 import { ManageCurrenciesComponent } from './currencies/manage-currencies/manage-currencies.component';
 import { CashiersComponent } from './tellers/cashiers/cashiers.component';
+import { TransactionsComponent } from './tellers/transactions/transactions.component';
 
 /**
  * Organization Module
@@ -95,7 +96,8 @@ import { CashiersComponent } from './tellers/cashiers/cashiers.component';
     ViewCampaignComponent,
     ManageFundsComponent,
     ManageCurrenciesComponent,
-    CashiersComponent
+    CashiersComponent,
+    TransactionsComponent
   ]
 })
 export class OrganizationModule { }

src/app/organization/organization.service.ts

@@ -273,6 +273,17 @@ export class OrganizationService {
     return this.http.get(`/tellers/${tellerId}/cashiers/${cashierId}`);
   }
 
+  /**
+   * @param {string} tellerId Teller Id
+   * @param {string} cashierId Cashier Id
+   * @param {string} currencyCode Currency Code
+   * @returns {Observable<any>}
+   */
+  getCashierSummaryAndTransactions(tellerId: string, cashierId: string, currencyCode: string): Observable<any> {
+    const httpParams = new HttpParams().set('currencyCode', currencyCode);
+    return this.http.get(`/tellers/${tellerId}/cashiers/${cashierId}/summaryandtransactions`, { params: httpParams });
+  }
+
   /**
    * @param {string} tellerId Teller ID of teller to be deleted.
    * @returns {Observable<any>}

src/app/organization/tellers/cashiers/cashiers.component.html

@@ -44,7 +44,8 @@
           <button class="cashier-action-button" mat-raised-button color="warn" matTooltip="Settle Cash">
             <i class="fa fa-arrow-down"></i>
           </button>
-          <button class="cashier-action-button" mat-raised-button color="primary" matTooltip="View Transactions">
+          <button class="cashier-action-button" mat-raised-button color="primary" matTooltip="View Transactions"
+            (click)="routeEdit($event)" [routerLink]="[cashier.id, 'transactions']">
             <i class="fa fa-eye"></i>
           </button>   
         </td>

src/app/organization/tellers/cashiers/cashiers.component.ts

@@ -32,7 +32,6 @@ export class CashiersComponent implements OnInit {
   constructor(private route: ActivatedRoute) {
     this.route.data.subscribe(( data: { cashiersData: any }) => {
       this.cashiersData = data.cashiersData.cashiers;
-      console.log(this.cashiersData);
     });
   }
 
@@ -60,4 +59,12 @@ export class CashiersComponent implements OnInit {
     this.dataSource.sort = this.sort;
   }
 
+  /**
+   * Stops the propagation to view pages.
+   * @param $event Mouse Event
+   */
+  routeEdit($event: MouseEvent) {
+    $event.stopPropagation();
+  }
+
 }

src/app/organization/tellers/transactions/transactions.component.html

@@ -0,0 +1,127 @@
+<div fxLayout="row" fxLayoutGap="1%" fxLayoutAlign="end" class="container m-b-20">
+  <button mat-raised-button color="accent">
+      <fa-icon icon="arrow-up"></fa-icon>&nbsp;&nbsp;
+      Allocate Cash
+  </button>
+  <button mat-raised-button color="warn">
+      <fa-icon icon="arrow-down"></fa-icon>&nbsp;&nbsp;
+      Settle Cash
+  </button>
+</div>
+
+<div class="container m-b-20" *ngIf="cashierData">
+
+    <mat-card class="mat-elevation-z8">
+
+      <mat-card-content>
+
+        <div fxLayout="row wrap" class="content">
+
+          <div fxFlex="25%" fxFlex.lt-md="50%" class="header">
+            Branch
+          </div>
+
+          <div fxFlex="25%" fxFlex.lt-md="50%">
+            {{ cashierData.officeName }}
+          </div>
+
+          <div fxFlex="25%" fxFlex.lt-md="50%" class="header">
+            Teller
+          </div>
+
+          <div fxFlex="25%" fxFlex.lt-md="50%">
+            {{ cashierData.tellerName }}
+          </div>
+
+          <div fxFlex="25%" fxFlex.lt-md="50%" class="header">
+            Cashier
+          </div>
+
+          <div fxFlex="25%" fxFlex.lt-md="50%">
+            {{ cashierData.cashierName }}
+          </div>
+
+          <div fxFlex="25%" fxFlex.lt-md="50%" class="header">
+            Net Cash
+          </div>
+
+          <div fxFlex="25%" fxFlex.lt-md="50%">
+            {{ cashierData.netCash | number }} [{{currencySelector.value}}]
+          </div>
+
+        </div>
+
+      </mat-card-content>
+
+    </mat-card>
+
+</div>
+
+<div class="container">
+
+  <mat-card fxLayout="column" fxLayoutGap="2%" class="mat-elevation-z8">
+
+    <div fxLayout="row" fxLayoutGap="2%">
+
+      <mat-form-field fxFlex>
+        <mat-label>Filter</mat-label>
+        <input matInput (keyup)="applyFilter($event.target.value)">
+      </mat-form-field>
+  
+      <mat-form-field>
+        <mat-label> Select Currency </mat-label>
+        <mat-select [formControl]="currencySelector" required>
+          <mat-option *ngFor="let currency of currencyData" [value]="currency.code">
+            {{ currency.name }}
+          </mat-option>
+        </mat-select>
+      </mat-form-field>
+
+    </div>
+
+    <div *ngIf="cashierData">
+
+      <table class="mat-elevation-z1" mat-table [dataSource]="dataSource" matSort>
+
+        <ng-container matColumnDef="date">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Date </th>
+          <td mat-cell *matCellDef="let transaction"> {{ transaction.txnDate | date }} </td>
+        </ng-container>
+  
+        <ng-container matColumnDef="transactions">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Transactions </th>
+          <td mat-cell *matCellDef="let transaction"> {{ transaction.txnType.value }} </td>
+        </ng-container>
+  
+        <ng-container matColumnDef="allocation">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Allocation ({{cashierData.sumCashAllocation | number}}) </th>
+          <td mat-cell *matCellDef="let transaction"> {{ transaction.txnType.value === "Allocate Cash" ? (transaction.txnAmount | number) : '-' }} </td>
+        </ng-container>
+  
+        <ng-container matColumnDef="cashIn">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Cash In ({{cashierData.sumInwardCash | number}})  </th>
+          <td mat-cell *matCellDef="let transaction"> {{ transaction.txnType.value === "Cash In" ? (transaction.txnAmount | number) : '-' }} </td>
+        </ng-container>
+  
+        <ng-container matColumnDef="cashOut">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Cash Out ({{cashierData.sumOutwardCash | number}}) </th>
+          <td mat-cell *matCellDef="let transaction"> {{ transaction.txnType.value === "Cash Out" ? (transaction.txnAmount | number) : '-' }} </td>
+        </ng-container>
+  
+        <ng-container matColumnDef="settlement">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Settlement ({{cashierData.sumCashSettlement | number}})</th>
+          <td mat-cell *matCellDef="let transaction"> {{ transaction.txnType.value === "Settle Cash" ? (transaction.txnAmount | number) : '-' }} </td>
+        </ng-container>
+  
+        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+        <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="select-row" [routerLink]="[row.id]"></tr>
+  
+      </table>
+  
+      <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>  
+
+    </div>
+    
+  </mat-card>
+
+</div>

src/app/organization/tellers/transactions/transactions.component.scss

@@ -0,0 +1,13 @@
+.content {
+  div {
+    line-height: 3rem;
+
+    &.header {
+      font-weight: 500;
+    }
+  }
+}
+
+table {
+  width: 100%;
+}

src/app/organization/tellers/transactions/transactions.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TransactionsComponent } from './transactions.component';
+
+describe('TransactionsComponent', () => {
+  let component: TransactionsComponent;
+  let fixture: ComponentFixture<TransactionsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TransactionsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TransactionsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/organization/tellers/transactions/transactions.component.ts

@@ -0,0 +1,91 @@
+/** Angular Imports */
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { MatTableDataSource, MatSort, MatPaginator } from '@angular/material';
+import { ActivatedRoute } from '@angular/router';
+import { FormControl } from '@angular/forms';
+
+/** Custom Services */
+import { OrganizationService } from 'app/organization/organization.service';
+
+/**
+ * Cashier Transactions Component.
+ */
+@Component({
+  selector: 'mifosx-transactions',
+  templateUrl: './transactions.component.html',
+  styleUrls: ['./transactions.component.scss']
+})
+export class TransactionsComponent implements OnInit {
+
+  /** Currency selector. */
+  currencySelector = new FormControl();
+  /** Cashier Id */
+  cashierId: any;
+  /** Teller Id */
+  tellerId: any;
+  /** Cashier data. */
+  cashierData: any;
+  /** Currencys data. */
+  currencyData: any;
+  /** Columns to be displayed in transactions table. */
+  displayedColumns: string[] = ['date', 'transactions', 'allocation', 'cashIn', 'cashOut', 'settlement'];
+  /** Data source for transactions table. */
+  dataSource: MatTableDataSource<any>;
+
+  /** Paginator for transactions table. */
+  @ViewChild(MatPaginator) paginator: MatPaginator;
+  /** Sorter for transactions table. */
+  @ViewChild(MatSort) sort: MatSort;
+
+  /**
+   * Retrieves the currencies data from `resolve`.
+   * @param {OrganizationService} organizationService Organization Service.
+   * @param {ActivatedRoute} route Activated Route.
+   */
+  constructor(private organizationService: OrganizationService,
+              private route: ActivatedRoute) {
+    this.route.data.subscribe(( data: { currencies: any }) => {
+      this.currencyData = data.currencies.selectedCurrencyOptions;
+    });
+    this.tellerId = this.route.parent.parent.parent.snapshot.params['id'];
+    this.cashierId = this.route.parent.snapshot.params['id'];
+  }
+
+  /**
+   * Filters data in transactions table based on passed value.
+   * @param {string} filterValue Value to filter data.
+   */
+  applyFilter(filterValue: string) {
+    this.dataSource.filter = filterValue.trim().toLowerCase();
+  }
+
+  /**
+   * Retrieves transactions data on changing currency.
+   */
+  ngOnInit() {
+    this.onChangeCurrency();
+  }
+
+  /**
+   * Retrieves the transactions data on changing currency and sets the transactions table.
+   */
+  onChangeCurrency() {
+    this.currencySelector.valueChanges.subscribe((currencyCode: any) => {
+      this.organizationService.getCashierSummaryAndTransactions(this.tellerId, this.cashierId, currencyCode)
+        .subscribe((response: any) => {
+          this.cashierData = response;
+          this.setTransactions();
+        });
+    });
+  }
+
+  /**
+   * Initializes the data source, paginator and sorter for transactions table.
+   */
+  setTransactions() {
+    this.dataSource = new MatTableDataSource(this.cashierData.cashierTransactions.pageItems);
+    this.dataSource.paginator = this.paginator;
+    this.dataSource.sort = this.sort;
+  }
+
+}

src/app/shared/icons.module.ts

@@ -90,7 +90,9 @@ import {
   faMoneyBill,
   faChartLine,
   faPen,
-  faFlag
+  faFlag,
+  faArrowUp,
+  faArrowDown
 } from '@fortawesome/free-solid-svg-icons';
 
 /** Add icons to the library for convenient access in other components. */
@@ -180,7 +182,9 @@ library.add(
   faMoneyBill,
   faChartLine,
   faPen,
-  faFlag
+  faFlag,
+  faArrowUp,
+  faArrowDown
 );
 
 /**