Add checkbox to hide accrual transactions on deposits

src/app/deposits/fixed-deposits/fixed-deposit-account-view/transactions-tab/transactions-tab.component.html

@@ -1,12 +1,15 @@
 <div class="tab-container mat-typography">
 
-  <div fxLayoutAlign="start">
-    <div class="m-b-20">
-      <h3>{{"labels.heading.All Transactions" | translate }}</h3>
-    </div>
-  </div>
-
   <div class="mat-elevation-z1 m-b-25">
+    <div fxLayout="row" fxLayoutAlign="start">
+      <div class="m-b-20">
+        <h3>{{"labels.heading.All Transactions" | translate }}</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>
+      </div>
+    </div>
 
     <table mat-table [dataSource]="dataSource">
 

src/app/deposits/fixed-deposits/fixed-deposit-account-view/transactions-tab/transactions-tab.component.scss

@@ -6,6 +6,9 @@
   h3 {
     margin:1% auto;
   }
+  .action-button {
+      margin-left: auto;
+  }
   table {
     width: 100%;
     color: $black;

src/app/deposits/fixed-deposits/fixed-deposit-account-view/transactions-tab/transactions-tab.component.ts

@@ -1,5 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
+import { UntypedFormControl } from '@angular/forms';
 import { MatTableDataSource } from '@angular/material/table';
 import { ActivatedRoute, Router } from '@angular/router';
 
@@ -13,8 +14,13 @@ import { ActivatedRoute, Router } from '@angular/router';
 })
 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', 'transactionDate', 'transactionType', 'debit', 'credit', 'balance', 'actions'];
   /** Data source for transactions table. */
@@ -29,11 +35,34 @@ export class TransactionsTabComponent implements OnInit {
               private router: Router) {
     this.route.parent.data.subscribe((data: { fixedDepositsAccountData: any }) => {
       this.transactionsData = data.fixedDepositsAccountData.transactions;
+      this.tempTransaction = this.transactionsData;
+      this.status = data.fixedDepositsAccountData.status.value;
     });
   }
 
   ngOnInit() {
+    this.hideAccrualsParam = new UntypedFormControl(false);
     this.dataSource = new MatTableDataSource(this.transactionsData);
+    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);
+  }
+
+  /**
+   * Checks transaction status.
+   */
+  checkStatus() {
+    if (this.status === 'Active' || this.status === 'Closed' || this.status === 'Transfer in progress' ||
+       this.status === 'Transfer on hold' || this.status === 'Premature Closed' || this.status === 'Matured') {
+      return true;
+    }
+    return false;
   }
 
   /**
@@ -71,6 +100,14 @@ export class TransactionsTabComponent implements OnInit {
     return (transactionType.accrual);
   }
 
+  hideAccruals() {
+    if (!this.hideAccrualsParam.value) {
+      this.dataSource = new MatTableDataSource(this.tempTransaction);
+    } else {
+      this.dataSource = new MatTableDataSource(this.transactionsData);
+    }
+  }
+
   /**
    * Stops the propagation to view pages.
    * @param $event Mouse Event

src/app/deposits/fixed-deposits/fixed-deposit-account-view/view-transaction/view-transaction.component.ts

@@ -30,9 +30,7 @@ export class ViewTransactionComponent {
       public dialog: MatDialog,
       private settingsService: SettingsService) {
     this.route.data.subscribe((data: { fixedDepositsAccountTransaction: any }) => {
-      console.log(this.route.parent.snapshot.params);
       this.accountId = this.route.parent.snapshot.params['fixedDepositAccountId'];
-
       this.transactionData = data.fixedDepositsAccountTransaction;
     });
   }

src/app/deposits/recurring-deposits/recurring-deposits-account-view/transactions-tab/transactions-tab.component.html

@@ -1,6 +1,15 @@
 <div class="tab-container mat-typography">
 
   <div class="mat-elevation-z1 m-b-25">
+    <div fxLayout="row" fxLayoutAlign="start">
+      <div class="m-b-20">
+        <h3>{{"labels.heading.All Transactions" | translate }}</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>
+      </div>
+    </div>
 
     <table mat-table [dataSource]="dataSource">
 

src/app/deposits/recurring-deposits/recurring-deposits-account-view/transactions-tab/transactions-tab.component.scss

@@ -4,8 +4,20 @@
   h3 {
     margin:1% auto;
   }
+  .action-button {
+      margin-left: auto;
+  }
   table {
     width: 100%;
+    .account-action-button{
+      min-width: 26px;
+      padding: 0 0 3px 0;
+      margin: 0 10%;
+      line-height: 25px;
+      .accruals {
+        padding-top: 1%;
+      }
+    }
     .select-row:hover {
       cursor: pointer;
     }

src/app/deposits/recurring-deposits/recurring-deposits-account-view/transactions-tab/transactions-tab.component.ts

@@ -1,5 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
+import { UntypedFormControl } from '@angular/forms';
 import { MatTableDataSource } from '@angular/material/table';
 import { ActivatedRoute, Router } from '@angular/router';
 
@@ -17,6 +18,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', 'transactionDate', 'transactionType', 'debit', 'credit', 'balance'];
   /** Data source for transactions table. */
@@ -30,12 +35,23 @@ export class TransactionsTabComponent implements OnInit {
               private router: Router) {
     this.route.parent.data.subscribe((data: { recurringDepositsAccountData: any }) => {
       this.transactionsData = data.recurringDepositsAccountData.transactions;
+      this.tempTransaction = this.transactionsData;
       this.status = data.recurringDepositsAccountData.status.value;
     });
   }
 
   ngOnInit() {
     this.dataSource = new MatTableDataSource(this.transactionsData);
+    this.hideAccrualsParam = new UntypedFormControl(false);
+    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);
   }
 
   /**
@@ -47,6 +63,29 @@ export class TransactionsTabComponent implements OnInit {
       || transactionType.overdraftInterest === true || transactionType.withholdTax === true;
   }
 
+  isAccrual(transactionType: any): boolean {
+    return (transactionType.accrual || transactionType.code === 'savingsAccountTransactionType.accrual');
+  }
+
+  hideAccruals() {
+    if (!this.hideAccrualsParam.value) {
+      this.dataSource = new MatTableDataSource(this.tempTransaction);
+    } else {
+      this.dataSource = new MatTableDataSource(this.transactionsData);
+    }
+  }
+
+  /**
+   * Checks transaction status.
+   */
+  checkStatus() {
+    if (this.status === 'Active' || this.status === 'Closed' || this.status === 'Transfer in progress' ||
+       this.status === 'Transfer on hold' || this.status === 'Premature Closed' || this.status === 'Matured') {
+      return true;
+    }
+    return false;
+  }
+
   /**
    * Show Transactions Details
    * @param transactionsData Transactions Data