Loan account transaction tab enhacements

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 !== '');
+  }
+
 }