Transactions tab standarization

alberto-art3ch · Mar 31, 2024 · 54dc91e · 54dc91e
1 parent dab5cee
commit 54dc91e
Show file tree

Hide file tree

Showing 54 changed files with 756 additions and 352 deletions.
diff --git a/.gitignore b/.gitignore
@@ -54,3 +54,4 @@ testem.log
 .DS_Store
 Thumbs.db
 .vscode/
+cypress/
diff --git a/cypress.config.ts b/cypress.config.ts
@@ -1,15 +1,24 @@
-import { defineConfig } from 'cypress'
+import { defineConfig } from "cypress";
 
 export default defineConfig({
-  videosFolder: 'cypress/videos',
-  screenshotsFolder: 'cypress/screenshots',
-  fixturesFolder: 'cypress/fixtures',
+  videosFolder: "cypress/videos",
+  screenshotsFolder: "cypress/screenshots",
+  fixturesFolder: "cypress/fixtures",
+
   e2e: {
     // We've imported your old cypress plugins here.
     // You may want to clean this up later by importing these.
     setupNodeEvents(on, config) {
-      return require('./cypress/plugins/index.ts')(on, config)
+      return require("./cypress/plugins/index.ts")(on, config);
+    },
+    baseUrl: "http://localhost:4200",
+  },
+
+  component: {
+    devServer: {
+      framework: "angular",
+      bundler: "webpack",
     },
-    baseUrl: 'http://localhost:4200',
+    specPattern: "**/*.cy.ts",
   },
-})
+});
diff --git a/src/app/core/utils/accounting.ts b/src/app/core/utils/accounting.ts
@@ -16,6 +16,19 @@ import { OptionData } from 'app/shared/models/option-data.model';
         return ['NONE', 'Cash', 'Accrual (periodic)', 'Accrual (upfront)'];
     }
 
+    public getAccountRuleName(value: string): string {
+        if (value === 'ACCRUAL PERIODIC') {
+            return 'Accrual (periodic)';
+        } else if (value === 'ACCRUAL UPFRONT') {
+            return 'Accrual (upfront)';
+        } else if (value === 'CASH BASED') {
+            return 'Cash';
+        } else if (value === 'NONE') {
+            return 'None';
+        }
+        return '';
+    }
+
     public isNoneAccounting(accountingRule: OptionData): boolean {
         return (accountingRule.id === 1);
     }

diff --git a/...ixed-deposits/fixed-deposit-account-view/transactions-tab/transactions-tab.component.html b/...ixed-deposits/fixed-deposit-account-view/transactions-tab/transactions-tab.component.html
@@ -6,6 +6,8 @@
         <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">
+          {{"labels.inputs.Hide Reversed" | translate}}</mat-checkbox>
         <mat-checkbox [formControl]="hideAccrualsParam" (click)="hideAccruals()" class="accruals">
           {{"labels.inputs.Hide Accruals" | translate}}</mat-checkbox>
       </div>
@@ -20,50 +22,55 @@ <h3>{{"labels.heading.All Transactions" | translate }}</h3>
 
       <ng-container matColumnDef="id">
         <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.ID" | translate }} </th>
-        <td mat-cell *matCellDef="let transaction" [ngClass]="{'strike': transaction.reversed}"> {{ transaction.id }} </td>
+        <td mat-cell *matCellDef="let transaction" [ngClass]="savingsTransactionColor(transaction)" (click)="showTransactions(transaction)"> {{ transaction.id }} </td>
       </ng-container>
 
       <ng-container matColumnDef="transactionDate">
         <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Transaction Date" | translate }} </th>
-        <td mat-cell *matCellDef="let transaction" [ngClass]="{'strike': transaction.reversed}"> {{ transaction.date  | dateFormat }} </td>
+        <td mat-cell *matCellDef="let transaction" [ngClass]="savingsTransactionColor(transaction)" > {{ transaction.date  | dateFormat }} </td>
       </ng-container>
 
       <ng-container matColumnDef="transactionType">
         <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Transaction Type" | translate }} </th>
-        <td mat-cell *matCellDef="let transaction" [ngClass]="{'strike': transaction.reversed}"> {{ transaction.transactionType.value  }} </td>
+        <td mat-cell *matCellDef="let transaction" [ngClass]="savingsTransactionColor(transaction)" > {{ transaction.transactionType.value  }} </td>
       </ng-container>
 
       <ng-container matColumnDef="debit">
         <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Debit" | translate }} </th>
-        <td mat-cell *matCellDef="let transaction" [ngClass]="{'strike': transaction.reversed}"> {{ isDebit(transaction.transactionType) ? transaction.amount : 'N/A'}} </td>
+        <td mat-cell *matCellDef="let transaction" [ngClass]="savingsTransactionColor(transaction)" > {{ isDebit(transaction.transactionType) ? transaction.amount : 'N/A'}} </td>
       </ng-container>
 
       <ng-container matColumnDef="credit">
         <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Credit" | translate }} </th>
-        <td mat-cell *matCellDef="let transaction" [ngClass]="{'strike': transaction.reversed}"> {{ !isDebit(transaction.transactionType) ? transaction.amount : 'N/A' }} </td>
+        <td mat-cell *matCellDef="let transaction" [ngClass]="savingsTransactionColor(transaction)" > {{ !isDebit(transaction.transactionType) ? transaction.amount : 'N/A' }} </td>
       </ng-container>
 
       <ng-container matColumnDef="balance">
         <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Balance" | translate }} </th>
-        <td mat-cell *matCellDef="let transaction" [ngClass]="{'strike': transaction.reversed}"> {{ transaction.runningBalance }} </td>
+        <td mat-cell *matCellDef="let transaction" [ngClass]="savingsTransactionColor(transaction)" > {{ transaction.runningBalance }} </td>
       </ng-container>
 
       <ng-container matColumnDef="actions">
         <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Actions" | translate }} </th>
         <td mat-cell class="center" *matCellDef="let transaction">
-          <button class="account-action-button" mat-raised-button color="primary" (click)="routeEdit($event)" [routerLink]="[transaction.id, 'reciept']">
-            <i class="fa fa-file" matTooltip="View Reciept"></i>
-          </button>
-          <button class="account-action-button" mat-raised-button color="primary" matTooltip="View Journal Entries"
-            matTooltipPosition="left" (click)="routeEdit($event)"
-            [routerLink]="['/','journal-entry', 'view', 'S'+transaction.id ]">
-            <i class="fa fa-arrow-circle-right"></i>
+          <button mat-icon-button [matMenuTriggerFor]="transactionMenu" aria-label="" class="action-button">
+            <mat-icon>more_vert</mat-icon>
           </button>
+          <mat-menu #transactionMenu="matMenu">
+            <button mat-menu-item (click)="showTransactions(transaction)">
+              <mat-icon><fa-icon icon="eye" size="sm"></fa-icon></mat-icon>
+              <span>{{ 'labels.text.View Transaction' | translate}}</span>
+            </button>
+            <button mat-menu-item (click)="routeEdit($event)" [routerLink]="['/','journal-entry', 'view', 'S'+transaction.id ]">
+              <mat-icon><fa-icon icon="table-cells" size="sm"></fa-icon></mat-icon>
+              <span>{{ 'tooltips.View Journal Entries' | translate}}</span>
+            </button>
+          </mat-menu>
         </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="select-row" (click)="showTransactions(row)"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="select-row"></tr>
 
     </table>
 

diff --git a/...ixed-deposits/fixed-deposit-account-view/transactions-tab/transactions-tab.component.scss b/...ixed-deposits/fixed-deposit-account-view/transactions-tab/transactions-tab.component.scss
@@ -33,18 +33,3 @@
     }
   }
 }
-
-.active {
-  background-color: $status-active;
-  height: 4px;
-}
-
-.linked {
-  background-color: $status-approved;
-  height: 4px;
-}
-
-.undo {
-  background-color: $status-active-overdue;
-  height: 4px;
-}
diff --git a/.../fixed-deposits/fixed-deposit-account-view/transactions-tab/transactions-tab.component.ts b/.../fixed-deposits/fixed-deposit-account-view/transactions-tab/transactions-tab.component.ts
@@ -1,8 +1,12 @@
 /** Angular Imports */
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
 import { UntypedFormControl } from '@angular/forms';
+import { MatDialog } from '@angular/material/dialog';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
 import { ActivatedRoute, Router } from '@angular/router';
+import { SavingsAccountTransaction } from 'app/savings/models/savings-account-transaction.model';
 
 /**
  * Transactions Tab Component.
@@ -13,47 +17,39 @@ import { ActivatedRoute, Router } from '@angular/router';
   styleUrls: ['./transactions-tab.component.scss']
 })
 export class TransactionsTabComponent implements OnInit {
-
+  accountId: string;
   status: any;
   /** Transactions Data */
   transactionsData: any;
-  /** Temporary Transaction Data */
-  tempTransaction: any;
   /** Form control to handle accural parameter */
   hideAccrualsParam: UntypedFormControl;
+  hideReversedParam: UntypedFormControl;
   /** Columns to be displayed in transactions table. */
   displayedColumns: string[] = ['row', 'id', 'transactionDate', 'transactionType', 'debit', 'credit', 'balance', 'actions'];
   /** Data source for transactions table. */
   dataSource: MatTableDataSource<any>;
+  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
+  @ViewChild(MatSort, { static: true }) sort: MatSort;
 
   /**
    * Retrieves fixed deposits account data from `resolve`.
    * @param {ActivatedRoute} route Activated Route.
    * @param {Router} router Router
    */
   constructor(private route: ActivatedRoute,
-              private router: Router) {
+    private router: Router,
+    public dialog: MatDialog) {
     this.route.parent.data.subscribe((data: { fixedDepositsAccountData: any }) => {
       this.transactionsData = data.fixedDepositsAccountData.transactions;
-      this.tempTransaction = this.transactionsData;
+      this.accountId = this.route.parent.snapshot.params['fixedDepositAccountId'];
       this.status = data.fixedDepositsAccountData.status.value;
     });
   }
 
   ngOnInit() {
     this.hideAccrualsParam = new UntypedFormControl(false);
+    this.hideReversedParam = new UntypedFormControl(false);
     this.dataSource = new MatTableDataSource(this.transactionsData);
-    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);
   }
 
   /**
@@ -88,25 +84,36 @@ export class TransactionsTabComponent implements OnInit {
     }
   }
 
-  transactionColor(transaction: any): string {
-    if (transaction.reversed) {
-      return 'strike';
-    }
-    if (this.isAccrual(transaction.transactionType)) {
-      return 'accrual';
-    }
-    return '';
+  hideAccruals() {
+    this.filterTransactions(this.hideReversedParam.value, !this.hideAccrualsParam.value);
   }
 
-  private isAccrual(transactionType: any): boolean  {
-    return (transactionType.accrual);
+  hideReversed() {
+    this.filterTransactions(!this.hideReversedParam.value, this.hideAccrualsParam.value);
   }
 
-  hideAccruals() {
-    if (!this.hideAccrualsParam.value) {
-      this.dataSource = new MatTableDataSource(this.tempTransaction);
+  filterTransactions(hideReversed: boolean, hideAccrual: boolean): void {
+    let transactions: SavingsAccountTransaction[] = this.transactionsData;
+
+    if (hideAccrual || hideReversed) {
+      transactions = this.transactionsData.filter((t: SavingsAccountTransaction) => {
+        return (!(hideReversed && t.reversed) && !(hideAccrual && t.transactionType.accrual));
+      });
+    }
+    this.dataSource = new MatTableDataSource(transactions);
+    this.dataSource.paginator = this.paginator;
+    this.dataSource.sort = this.sort;
+  }
+
+  savingsTransactionColor(transaction: SavingsAccountTransaction): string {
+    if (transaction.reversed) {
+      return 'strike';
+    } else if (transaction.transfer) {
+      return 'transfer';
+    } else if (transaction.transactionType.accrual) {
+      return 'accrual';
     } else {
-      this.dataSource = new MatTableDataSource(this.transactionsData);
+      return '';
     }
   }
 
@@ -118,4 +125,7 @@ export class TransactionsTabComponent implements OnInit {
     $event.stopPropagation();
   }
 
+  undoTransaction(transactionData: SavingsAccountTransaction): void {
+
+  }
 }
diff --git a/...ixed-deposits/fixed-deposit-account-view/view-transaction/view-transaction.component.html b/...ixed-deposits/fixed-deposit-account-view/view-transaction/view-transaction.component.html
@@ -64,57 +64,9 @@
           {{ transactionData.note }}
         </div>
 
-        <ng-container *ngIf="transactionData.paymentDetailData">
-
-          <div *ngIf="transactionData.paymentDetailData.paymentType" fxFlex="50%" class="mat-body-strong">
-            {{"labels.inputs.Payment Type" | translate }}
-          </div>
-
-          <div *ngIf="transactionData.paymentDetailData.paymentType" fxFlex="50%">
-            {{ transactionData.paymentDetailData.paymentType.name }}
-          </div>
-
-          <div *ngIf="transactionData.paymentDetailData.accountNumber" fxFlex="50%" class="mat-body-strong">
-            {{"labels.inputs.Account No" | translate }}.
-          </div>
-
-          <div *ngIf="transactionData.paymentDetailData.accountNumber" fxFlex="50%">
-            {{ transactionData.paymentDetailData.accountNumber }}
-          </div>
-
-          <div *ngIf="transactionData.paymentDetailData.checkNumber" fxFlex="50%" class="mat-body-strong">
-            {{"labels.inputs.Cheque Number" | translate }}
-          </div>
-
-          <div *ngIf="transactionData.paymentDetailData.checkNumber" fxFlex="50%">
-            {{ transactionData.paymentDetailData.checkNumber }}
-          </div>
-
-          <div *ngIf="transactionData.paymentDetailData.routingCode" fxFlex="50%" class="mat-body-strong">
-            {{"labels.inputs.Routing Code" | translate }}
-          </div>
-
-          <div *ngIf="transactionData.paymentDetailData.routingCode" fxFlex="50%">
-            {{ transactionData.paymentDetailData.routingCode }}
-          </div>
-
-          <div *ngIf="transactionData.paymentDetailData.receiptNumber" fxFlex="50%" class="mat-body-strong">
-            {{"labels.inputs.Receipt No" | translate }}.
-          </div>
-
-          <div *ngIf="transactionData.paymentDetailData.receiptNumber" fxFlex="50%">
-            {{ transactionData.paymentDetailData.receiptNumber }}
-          </div>
-
-          <div *ngIf="transactionData.paymentDetailData.bankNumber" fxFlex="50%" class="mat-body-strong">
-            {{"labels.inputs.Bank No" | translate }}.
-          </div>
-
-          <div *ngIf="transactionData.paymentDetailData.bankNumber" fxFlex="50%">
-            {{ transactionData.paymentDetailData.bankNumber }}
-          </div>
-
-        </ng-container>
+        <mifosx-transaction-payment-detail *ngIf="transactionData.paymentDetailData"
+          [paymentDetailData]="transactionData.paymentDetailData">
+        </mifosx-transaction-payment-detail>
 
       </div>