Loan account transaction tab enhacements

src/app/shared/accounting/view-journal-entry-transaction/view-journal-entry-transaction.component.html

@@ -63,14 +63,12 @@
     <table mat-table [dataSource]="dataSource" matSort>
 
       <ng-container matColumnDef="id">
-        <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Entry ID' | translate }}
-        </th>
+        <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Entry ID' | translate }}</th>
         <td mat-cell *matCellDef="let transaction"> {{ transaction.id }} </td>
       </ng-container>
 
       <ng-container matColumnDef="glAccountType">
-        <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Type' | translate }}
-        </th>
+        <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Type' | translate }}</th>
         <td mat-cell *matCellDef="let transaction"> {{ transaction.glAccountType.value }} </td>
       </ng-container>
 
@@ -87,24 +85,21 @@
       </ng-container>
 
       <ng-container matColumnDef="debit">
-        <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Debit' | translate }}
-        </th>
+        <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Debit' | translate }}</th>
         <td mat-cell *matCellDef="let transaction"><span *ngIf="transaction.entryType.value === 'DEBIT'"> {{
             (transaction.currency.displaySymbol || transaction.currency.code) }} {{ transaction.amount | formatNumber }}
           </span></td>
       </ng-container>
 
       <ng-container matColumnDef="credit">
-        <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Credit' | translate }}
-        </th>
+        <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Credit' | translate }}</th>
         <td mat-cell *matCellDef="let transaction"><span *ngIf="transaction.entryType.value === 'CREDIT'"> {{
             (transaction.currency.displaySymbol || transaction.currency.code) }} {{ transaction.amount | formatNumber }}
           </span></td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="viewJournalEntry(row)" class="select-row">
-      </tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="viewJournalEntry(row)" class="select-row"></tr>
 
     </table>
 
@@ -123,4 +118,9 @@
       {{"labels.text.No data found" | translate}}
     </div>
   </div>
+
+  <div fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px" class="m-t-15 m-b-15">
+    <button type="button" color="primary" mat-raised-button (click)="goBack()">{{ 'labels.buttons.Back' | translate
+      }}</button>
+  </div>
 </div>

src/app/shared/accounting/view-journal-entry-transaction/view-journal-entry-transaction.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
 import { ViewJournalEntryComponent } from '../view-journal-entry/view-journal-entry.component';
 import { RevertTransactionComponent } from 'app/accounting/revert-transaction/revert-transaction.component';
 import { AccountingService } from 'app/accounting/accounting.service';

src/app/shared/icons.module.ts

@@ -109,7 +109,9 @@ import {
   faFileExport,
   faCalculator,
   faCalendarCheck,
-  faPause
+  faPause,
+  faReceipt,
+  faTableCells
 } from '@fortawesome/free-solid-svg-icons';
 
 /**
@@ -231,7 +233,10 @@ export class IconsModule {
       faTasks,
       faCoins,
       faPiggyBank,
-      faBars
+      faBars,
+      faUndo,
+      faReceipt,
+      faTableCells
     );
   }
 

src/app/shared/transaction-payment-detail/transaction-payment-detail.component.html

@@ -1,49 +1,36 @@
-<ng-container class="content">
-  <div *ngIf="paymentDetailData.paymentType" fxFlex="50%" class="attribute">
-    {{ 'Payment Type' | translate}}
+<div fxLayout="row wrap" class="content">
+  <div fxFlex="50%" class="mat-body-strong">
+    {{ 'labels.inputs.Payment Type' | translate}}
   </div>
 
-  <div *ngIf="paymentDetailData.paymentType" fxFlex="50%">
+  <div fxFlex="50%">
     {{ paymentDetailData.paymentType.name }}
   </div>
-
-  <div *ngIf="paymentDetailData.accountNumber" fxFlex="50%" class="attribute">
-    {{ 'Account No.' | translate}}
-  </div>
-
-  <div *ngIf="paymentDetailData.accountNumber" fxFlex="50%">
-    {{ paymentDetailData.accountNumber }}
-  </div>
-
-  <div *ngIf="paymentDetailData.checkNumber" fxFlex="50%" class="attribute">
-    {{ 'Cheque Number' | translate}}
-  </div>
-
-  <div *ngIf="paymentDetailData.checkNumber" fxFlex="50%">
-    {{ paymentDetailData.checkNumber }}
-  </div>
-
-  <div *ngIf="paymentDetailData.routingCode" fxFlex="50%" class="attribute">
-    {{ 'Routing Code' | translate}}
-  </div>
-
-  <div *ngIf="paymentDetailData.routingCode" fxFlex="50%">
-    {{ paymentDetailData.routingCode }}
-  </div>
-
-  <div *ngIf="paymentDetailData.receiptNumber" fxFlex="50%" class="attribute">
-    {{ 'Receipt No.' | translate}}
-  </div>
-
-  <div *ngIf="paymentDetailData.receiptNumber" fxFlex="50%">
-    {{ paymentDetailData.receiptNumber }}
-  </div>
-
-  <div *ngIf="paymentDetailData.bankNumber" fxFlex="50%" class="attribute">
-    {{ 'Bank No.' | translate}}
-  </div>
-
-  <div *ngIf="paymentDetailData.bankNumber" fxFlex="50%">
-    {{ paymentDetailData.bankNumber }}
-  </div>
-</ng-container>
+</div>
+<table *ngIf="hasSomeValue()">
+  <tbody>
+    <tr>
+      <td class="mat-body-strong center" colspan="2">{{ 'labels.inputs.Payment Details' | translate}}</td>
+    </tr>
+    <tr *ngIf="isNotNullOrEmpty(paymentDetailData.accountNumber)">
+      <td class="mat-body-strong">{{ 'labels.inputs.Account No' | translate}}</td>
+      <td>{{ paymentDetailData.accountNumber }}</td>
+    </tr>
+    <tr *ngIf="isNotNullOrEmpty(paymentDetailData.checkNumber)">
+      <td class="mat-body-strong">{{ 'labels.inputs.Cheque Number' | translate}}</td>
+      <td>{{ paymentDetailData.checkNumber }}</td>
+    </tr>
+    <tr *ngIf="isNotNullOrEmpty(paymentDetailData.routingCode)">
+      <td class="mat-body-strong">{{ 'labels.inputs.Routing Code' | translate}}</td>
+      <td class="mat-body-strong">{{ paymentDetailData.routingCode }}</td>
+    </tr>
+    <tr *ngIf="isNotNullOrEmpty(paymentDetailData.receiptNumber)">
+      <td class="mat-body-strong">{{ 'labels.inputs.Receipt No' | translate}}</td>
+      <td>{{ paymentDetailData.receiptNumber }}</td>
+    </tr>
+    <tr *ngIf="isNotNullOrEmpty(paymentDetailData.bankNumber)">
+      <td class="mat-body-strong">{{ 'labels.inputs.Bank No' | translate}}</td>
+      <td>{{ paymentDetailData.bankNumber }}</td>
+    </tr>
+  </tbody>
+</table>

src/app/shared/transaction-payment-detail/transaction-payment-detail.component.scss

@@ -2,7 +2,7 @@
 
 .content {
   width: 100%;
-  background-color: $concrete;
+  padding-bottom: 25px;
 
   div {
     text-align: left;

src/app/shared/transaction-payment-detail/transaction-payment-detail.component.ts

@@ -15,4 +15,18 @@ export class TransactionPaymentDetailComponent implements OnInit {
 
   ngOnInit(): void {}
 
+  hasSomeValue(): boolean {
+    return (
+      this.isNotNullOrEmpty(this.paymentDetailData.accountNumber) ||
+      this.isNotNullOrEmpty(this.paymentDetailData.bankNumber) ||
+      this.isNotNullOrEmpty(this.paymentDetailData.checkNumber) ||
+      this.isNotNullOrEmpty(this.paymentDetailData.receiptNumber) ||
+      this.isNotNullOrEmpty(this.paymentDetailData.routingCode)
+    );
+  }
+
+  isNotNullOrEmpty(value: any): boolean {
+    return (value !== null && value !== '');
+  }
+
 }