Savings account transactions with check to hide accrual transactions

src/app/savings/savings-account-view/transactions-tab/transactions-tab.component.html

@@ -7,6 +7,8 @@
         <h3>All Transactions</h3>
       </div>
       <div class="action-button m-b-20" fxLayout="row" fxLayoutGap="20px" *ngIf="checkStatus()">
+        <mat-checkbox [formControl]="hideAccrualsParam" (click)="hideAccruals()" class="accruals">
+          {{"labels.inputs.Hide Accruals" | translate}}</mat-checkbox>
         <button mat-raised-button color="primary" [routerLink]="['/accounting', 'journal-entries']">View Journal Entries</button>
         <button mat-raised-button color="primary" [routerLink]="['export']">Export</button>
       </div>

src/app/savings/savings-account-view/transactions-tab/transactions-tab.component.scss

@@ -14,6 +14,9 @@
       padding: 0 0 3px 0;
       margin: 0 10%;
       line-height: 25px;
+      .accruals {
+        padding-top: 1%;
+      }
     }
     .select-row:hover {
       cursor: pointer;

src/app/savings/savings-account-view/transactions-tab/transactions-tab.component.ts

@@ -1,5 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit, ViewChild } from '@angular/core';
+import { UntypedFormControl } from '@angular/forms';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
@@ -19,6 +20,10 @@ export class TransactionsTabComponent implements OnInit {
   status: any;
   /** Transactions Data */
   transactionsData: any;
+  /** Temporary Transaction Data */
+  tempTransaction: any;
+  /** Form control to handle accural parameter */
+  hideAccrualsParam: UntypedFormControl;
   /** Columns to be displayed in transactions table. */
   displayedColumns: string[] = ['id', 'date', 'transactionType', 'debit', 'credit', 'balance', 'actions'];
   /** Data source for transactions table. */
@@ -36,15 +41,30 @@ export class TransactionsTabComponent implements OnInit {
               private router: Router) {
     this.route.parent.parent.data.subscribe((data: { savingsAccountData: any }) => {
       this.transactionsData = data.savingsAccountData.transactions?.filter((transaction: any) => !transaction.reversed);
+      this.tempTransaction = this.transactionsData;
       this.status = data.savingsAccountData.status.value;
     });
   }
 
   ngOnInit() {
+    this.hideAccrualsParam = new UntypedFormControl(false);
+    this.setTransactions();
+  }
+
+  setTransactions(): void {
     this.dataSource = new MatTableDataSource(this.transactionsData);
     this.accountWithTransactions = (this.transactionsData && this.transactionsData.length > 0);
     this.dataSource.paginator = this.paginator;
     this.dataSource.sort = this.sort;
+    this.tempTransaction.forEach((element: any) => {
+      if (this.isAccrual(element.transactionType)) {
+        this.tempTransaction = this.removeItem(this.tempTransaction, element);
+      }
+    });
+  }
+
+  private removeItem(arr: any, item: any) {
+    return arr.filter((f: any) => f !== item);
   }
 
   /**
@@ -56,6 +76,10 @@ export class TransactionsTabComponent implements OnInit {
             || transactionType.overdraftInterest === true || transactionType.withholdTax === true;
   }
 
+  isAccrual(transactionType: any): boolean {
+    return (transactionType.accrual || transactionType.code === 'savingsAccountTransactionType.accrual');
+  }
+
   /**
    * Checks transaction status.
    */
@@ -87,4 +111,12 @@ export class TransactionsTabComponent implements OnInit {
     $event.stopPropagation();
   }
 
+  hideAccruals() {
+    if (!this.hideAccrualsParam.value) {
+      this.dataSource = new MatTableDataSource(this.tempTransaction);
+    } else {
+      this.dataSource = new MatTableDataSource(this.transactionsData);
+    }
+  }
+
 }