Enhancement in loan and savings account views (#1690)

Co-authored-by: Jose Alberto Hernandez <alberto@MacBook-Pro.local>

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

@@ -135,7 +135,7 @@ export class ChargesTabComponent implements OnInit {
           dateFormat,
           locale
         };
-        this.savingsService.executeSavingsAccountChargesCommand(this.savingsAccountData.id, 'pay', dataObject, chargeId)
+        this.savingsService.executeSavingsAccountChargesCommand(this.savingsAccountData.id, 'paycharge', dataObject, chargeId)
           .subscribe(() => {
             this.reload();
           });

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

@@ -19,7 +19,7 @@ export class NotesTabComponent implements OnInit {
     private authenticationService: AuthenticationService) {
     const savedCredentials = this.authenticationService.getCredentials();
     this.username = savedCredentials.username;
-    this.entityId = this.route.parent.snapshot.params['savingAccountId'];
+    this.entityId = this.route.snapshot.params['savingAccountId'];
     this.route.data.subscribe((data: { savingAccountNotes: any }) => {
       this.entityNotes = data.savingAccountNotes;
     });

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

@@ -75,7 +75,7 @@
     <div class="savings-account-tables" fxLayout="row" fxLayoutGap="2%">
 
       <div fxFlex="49%"
-        *ngIf="!savingsAccountData.status.rejected && !savingsAccountData.status.submittedAndPendingApproval; else alternateSummary">
+        *ngIf="isActive; else alternateSummary">
         <h4 class="table-headers">Account Summary</h4>
         <table>
           <tbody>
@@ -301,7 +301,7 @@
 
     </div>
 
-    <nav mat-tab-nav-bar class="navigation-tabs">
+    <nav mat-tab-nav-bar class="navigation-tabs" *ngIf="isActive">
       <a mat-tab-link [routerLink]="['./transactions']" routerLinkActive #transactions="routerLinkActive"
         [active]="transactions.isActive">
         Transactions

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

@@ -33,6 +33,8 @@ export class SavingsAccountViewComponent implements OnInit {
   /** Entity Type */
   entityType: string;
 
+  isActive = false;
+
   /**
    * Fetches savings account data from `resolve`
    * @param {ActivatedRoute} route Activated Route
@@ -65,6 +67,7 @@ export class SavingsAccountViewComponent implements OnInit {
    */
   setConditionalButtons() {
     const status = this.savingsAccountData.status.value;
+    this.isActive = (status === 'Active');
     const subStatus = this.savingsAccountData.subStatus;
     this.buttonConfig = new SavingsButtonsConfiguration(status, subStatus);
     if (this.savingsAccountData.clientId) {

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

@@ -30,7 +30,7 @@ export class SavingsDocumentsTabComponent implements OnInit {
     this.route.data.subscribe((data: { savingsDocuments: any }) => {
       this.setSavingsDocumentsData(data.savingsDocuments);
     });
-    this.entityId = this.route.parent.snapshot.params['savingAccountId'];
+    this.entityId = this.route.snapshot.params['savingAccountId'];
   }
 
   ngOnInit() {

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

@@ -1,16 +1,16 @@
 <div class="tab-container mat-typography">
 
-  <div fxLayout="row" fxLayoutAlign="start">
-    <div class="m-b-10">
-      <h3>All Transactions</h3>
-    </div>
-    <div class="action-button m-b-20" fxLayout="row" fxLayoutGap="20px" *ngIf="checkStatus()">
-      <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>
-  </div>
+  <div class="mat-elevation-z1 m-b-25" [hidden]="!accountWithTransactions">
 
-  <div class="mat-elevation-z1 m-b-25">
+    <div fxLayout="row" fxLayoutAlign="start">
+      <div class="m-b-10">
+        <h3>All Transactions</h3>
+      </div>
+      <div class="action-button m-b-20" fxLayout="row" fxLayoutGap="20px" *ngIf="checkStatus()">
+        <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>
+    </div>
 
     <table mat-table [dataSource]="dataSource" matSort>
 
@@ -62,4 +62,10 @@
 
   </div>
 
+  <div class="alert" [hidden]="accountWithTransactions">
+    <div class="message">
+      <i class="fa fa-exclamation-circle alert-check"></i>
+      No transaction was found
+    </div>
+  </div>
 </div>

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

@@ -20,12 +20,14 @@ export class TransactionsTabComponent implements OnInit {
   /** Transactions Data */
   transactionsData: any;
   /** Columns to be displayed in transactions table. */
-  displayedColumns: string[] = ['id', 'transactionDate', 'transactionType', 'debit', 'credit', 'balance', 'viewReciept'];
+  displayedColumns: string[] = ['id', 'date', 'transactionType', 'debit', 'credit', 'balance', 'viewReciept'];
   /** Data source for transactions table. */
   dataSource: MatTableDataSource<any>;
   @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
   @ViewChild(MatSort, { static: true }) sort: MatSort;
 
+  accountWithTransactions = false;
+
   /**
    * Retrieves savings account data from `resolve`.
    * @param {ActivatedRoute} route Activated Route.
@@ -40,6 +42,7 @@ export class TransactionsTabComponent implements OnInit {
 
   ngOnInit() {
     this.dataSource = new MatTableDataSource(this.transactionsData);
+    this.accountWithTransactions = (this.transactionsData.length > 0);
     this.dataSource.paginator = this.paginator;
     this.dataSource.sort = this.sort;
   }

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

@@ -34,11 +34,14 @@
           </mat-select>
         </mat-form-field>
 
-        <div fxLayoutGap="5px" fxLayout="row" fxLayout.xs="column">
-          <mat-label fxFlexAlign="center">Show Payment Details</mat-label>
-          <button type="button" mat-mini-fab color="primary" (click)="addPaymentDetails()">
-            <fa-icon [icon]="!addPaymentDetailsFlag ? 'plus-circle' : 'minus-circle'" size="lg"></fa-icon>
-          </button>
+        <div fxFlexFill>
+          <span fxFlex="75%" class="expandcollapsebutton m-l-10 m-t-40" (click)="addPaymentDetails()">
+            <mat-slide-toggle>
+              <div [className]="showPaymentDetails ? 'enabled' : 'disabled'">
+                <span class="m-l-10">Show Payment Details</span>
+              </div>
+            </mat-slide-toggle>
+          </span>
         </div>
 
         <mat-form-field *ngIf="editTransactionForm.controls['accountNumber']">
@@ -72,10 +75,9 @@
         </mat-card-actions>
 
       </mat-card-content>
-      
+
     </form>
 
   </mat-card>
 
 </div>
-  

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

@@ -33,7 +33,7 @@ export class EditTransactionComponent implements OnInit {
     position: number
   }[];
   /** Flag to enable payment details fields. */
-  addPaymentDetailsFlag: Boolean = false;
+  showPaymentDetails: Boolean = false;
   /** saving account's Id */
   savingAccountId: string;
   /** Transaction Template */
@@ -58,7 +58,7 @@ export class EditTransactionComponent implements OnInit {
       this.transactionTemplateData = data.savingsAccountTransactionTemplate;
       this.paymentTypeOptions = this.transactionTemplateData.paymentTypeOptions;
     });
-    this.savingAccountId = this.route.parent.snapshot.params['savingAccountId'];
+    this.savingAccountId = this.route.snapshot.params['savingAccountId'];
   }
 
   /**
@@ -89,8 +89,8 @@ export class EditTransactionComponent implements OnInit {
    * Method to add payment detail fields to the UI.
    */
   addPaymentDetails() {
-    this.addPaymentDetailsFlag = !this.addPaymentDetailsFlag;
-    if (this.addPaymentDetailsFlag) {
+    this.showPaymentDetails = !this.showPaymentDetails;
+    if (this.showPaymentDetails) {
       this.editTransactionForm.addControl('accountNumber', new FormControl(''));
       this.editTransactionForm.addControl('checkNumber', new FormControl(''));
       this.editTransactionForm.addControl('routingCode', new FormControl(''));

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

@@ -50,14 +50,6 @@
           {{ transactionData.date | dateFormat }}
         </div>
 
-        <div fxFlex="50%" class="mat-body-strong">
-          Amount
-        </div>
-
-        <div fxFlex="50%">
-          {{ transactionData.currency.displaySymbol }} {{ transactionData.amount | number }} ({{ transactionData.currency.code }})
-        </div>
-
         <div fxFlex="50%" class="mat-body-strong">
           Currency
         </div>
@@ -66,6 +58,14 @@
           {{ transactionData.currency.name }}
         </div>
 
+        <div fxFlex="50%" class="mat-body-strong">
+          Amount
+        </div>
+
+        <div fxFlex="50%">
+          {{ transactionData.amount | currency }} {{ transactionData.currency.code }}
+        </div>
+
         <div fxFlex="50%" class="mat-body-strong">
           Note
         </div>

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

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

src/app/savings/savings-account-view/view-charge/view-charge.component.html

@@ -91,7 +91,7 @@
         </div>
 
         <div fxFlex="50%">
-          {{ chargeData.amount }}
+          {{ chargeData.amount | number }}
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
@@ -99,7 +99,7 @@
         </div>
 
         <div fxFlex="50%">
-          {{ chargeData.amountPaid }}
+          {{ chargeData.amountPaid | number }}
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
@@ -107,7 +107,7 @@
         </div>
 
         <div fxFlex="50%">
-          {{ chargeData.amountWaived }}
+          {{ chargeData.amountWaived | number }}
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
@@ -115,11 +115,14 @@
         </div>
 
         <div fxFlex="50%">
-          {{ chargeData.amountOutstanding }}
+          {{ chargeData.amountOutstanding | number }}
         </div>
 
       </div>
 
+      <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="2%" fxLayout.lt-md="column">
+        <button type="button" mat-raised-button color="primary" [routerLink]="['../']">{{ 'Back' | translate }}</button>
+      </div>
     </mat-card-content>
 
   </mat-card>