Transactions tab standarization

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

@@ -3,7 +3,7 @@
   <div class="mat-elevation-z1 m-b-25" [hidden]="!accountWithTransactions">
     <div fxLayout="row" fxLayoutAlign="start">
       <div class="m-b-10">
-        <h3>{{"labels.headings.All Transactions" | translate }}</h3>
+        <h3>{{"labels.heading.All Transactions" | translate }}</h3>
       </div>
       <div class="action-button m-b-20" fxLayout="row" fxLayoutGap="20px" *ngIf="checkStatus()">
         <mat-checkbox [formControl]="hideReversedParam" (click)="hideReversed()" class="accruals">

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

@@ -25,12 +25,3 @@
     }
   }
 }
-
-.strike {
-  text-decoration: line-through;
-  color: red;
-}
-
-.transfer {
-  color: $status-transfer;
-}

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

@@ -26,8 +26,6 @@ export class TransactionsTabComponent implements OnInit {
   status: any;
   /** Transactions Data */
   transactionsData: SavingsAccountTransaction[] = [];
-  /** Temporary Transaction Data */
-  tempTransaction: any;
   /** Form control to handle accural parameter */
   hideAccrualsParam: UntypedFormControl;
   hideReversedParam: UntypedFormControl;
@@ -54,7 +52,6 @@ export class TransactionsTabComponent implements OnInit {
               private dateUtils: Dates) {
     this.route.parent.parent.data.subscribe((data: { savingsAccountData: any }) => {
       this.transactionsData = data.savingsAccountData.transactions;
-      this.tempTransaction = this.transactionsData;
       this.status = data.savingsAccountData.status.value;
     });
     this.accountId = this.route.parent.parent.snapshot.params['savingAccountId'];
@@ -71,17 +68,6 @@ export class TransactionsTabComponent implements OnInit {
     this.accountWithTransactions = (this.transactionsData && this.transactionsData.length > 0);
     this.dataSource.paginator = this.paginator;
     this.dataSource.sort = this.sort;
-    if (this.tempTransaction) {
-      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);
   }
 
   /**
@@ -129,21 +115,19 @@ export class TransactionsTabComponent implements OnInit {
   }
 
   hideAccruals() {
-    if (!this.hideAccrualsParam.value) {
-      this.dataSource = new MatTableDataSource(this.tempTransaction);
-    } else {
-      this.dataSource = new MatTableDataSource(this.transactionsData);
-    }
+    this.filterTransactions(this.hideReversedParam.value, !this.hideAccrualsParam.value);
   }
 
   hideReversed() {
+    this.filterTransactions(!this.hideReversedParam.value, this.hideAccrualsParam.value);
+  }
+
+  filterTransactions(hideReversed: boolean, hideAccrual: boolean): void {
     let transactions: SavingsAccountTransaction[] = this.transactionsData;
-    if (!this.hideReversedParam.value) {
-      transactions = [];
-      this.transactionsData.forEach((t: SavingsAccountTransaction) => {
-        if (!t.reversed) {
-          transactions.push(t);
-        }
+
+    if (hideAccrual || hideReversed) {
+      transactions = this.transactionsData.filter((t: SavingsAccountTransaction) => {
+        return (!(hideReversed && t.reversed) && !(hideAccrual && t.transactionType.accrual));
       });
     }
     this.dataSource = new MatTableDataSource(transactions);
@@ -154,11 +138,13 @@ export class TransactionsTabComponent implements OnInit {
   savingsTransactionColor(transaction: SavingsAccountTransaction): string {
     if (transaction.reversed) {
       return 'strike';
-    }
-    if (transaction.transfer) {
+    } else if (transaction.transfer) {
       return 'transfer';
+    } else if (transaction.transactionType.accrual) {
+      return 'accrual';
+    } else {
+      return '';
     }
-    return '';
   }
 
   undoTransaction(transactionData: SavingsAccountTransaction): void {

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

@@ -29,6 +29,8 @@
     <mat-card-content>
 
       <div fxLayout="row wrap" class="content">
+        <div fxFlex="100%" [ngClass]="transactionColor()">
+        </div>
 
         <div fxFlex="50%" class="mat-body-strong">
           {{"labels.inputs.Id" | translate}}
@@ -59,15 +61,15 @@
         </div>
 
         <div fxFlex="50%">
-          {{ transactionData.currency.name }}
+          {{ transactionData.currency.displayLabel }}
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          {{"labels.inputs.Amount" | translate}}
+          {{"labels.inputs.Amount" | translate }}
         </div>
 
         <div fxFlex="50%">
-          {{ transactionData.amount | currency:transactionData.currency.code }}
+          {{ transactionData.amount | currency:transactionData.currency.code:'symbol-narrow':'1.2-2' }}
         </div>
 
         <div fxFlex="50%" class="mat-body-strong" *ngIf="transactionData.note">

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

@@ -1,3 +1,5 @@
+@import "assets/styles/helper";
+
 .container {
   max-width: 37rem;
   .content {
@@ -12,3 +14,18 @@
     }
   }
 }
+
+.active {
+  background-color: $status-active;
+  height: 4px;
+}
+
+.linked {
+  background-color: $status-approved;
+  height: 4px;
+}
+
+.undo {
+  background-color: $status-active-overdue;
+  height: 4px;
+}

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

@@ -71,4 +71,10 @@ export class SavingsTransactionGeneralTabComponent implements OnInit {
     });
   }
 
+  transactionColor(): string {
+    if (this.transactionData.reversed) {
+      return 'undo';
+    }
+    return 'active';
+  }
 }

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

@@ -2,7 +2,7 @@
   <nav mat-tab-nav-bar class="navigation-tabs">
     <a mat-tab-link [routerLink]="['./general']" routerLinkActive #general="routerLinkActive"
       [active]="general.isActive">
-      General
+      {{'labels.heading.General' | translate}}
     </a>
     <ng-container *ngFor="let entityDatatable of entityDatatables">
       <a mat-tab-link [routerLink]="['./datatables',entityDatatable.registeredTableName]" routerLinkActive