Savings account transaction with datatables (#1858)

Co-authored-by: Jose Alberto Hernandez <alberto@blue-daemon.local>

src/app/shared/shared.module.ts

@@ -41,6 +41,7 @@ import { ViewJournalEntryComponent } from './accounting/view-journal-entry/view-
 import { ViewJournalEntryTransactionComponent } from './accounting/view-journal-entry-transaction/view-journal-entry-transaction.component';
 import { AccountNumberComponent } from './account-number/account-number.component';
 import { EntityNameComponent } from './entity-name/entity-name.component';
+import { TransactionPaymentDetailComponent } from './transaction-payment-detail/transaction-payment-detail.component';
 
 /**
  * Shared Module
@@ -88,7 +89,8 @@ import { EntityNameComponent } from './entity-name/entity-name.component';
     ViewJournalEntryComponent,
     ViewJournalEntryTransactionComponent,
     AccountNumberComponent,
-    EntityNameComponent
+    EntityNameComponent,
+    TransactionPaymentDetailComponent
   ],
   exports: [
     FileUploadComponent,
@@ -114,7 +116,8 @@ import { EntityNameComponent } from './entity-name/entity-name.component';
     ViewJournalEntryComponent,
     ViewJournalEntryTransactionComponent,
     SvgIconComponent,
-    EntityNameComponent
+    EntityNameComponent,
+    TransactionPaymentDetailComponent
   ]
 })
 export class SharedModule { }

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

@@ -0,0 +1,16 @@
+export interface PaymentType {
+  id: number;
+  isSystemDefined: boolean;
+  name: string;
+}
+
+export interface PaymentDetail {
+  paymentType: PaymentType;
+  accountNumber: string;
+  checkNumber: string;
+  routingCode: string;
+  receiptNumber: string;
+  bankNumber: string;
+}
+
+

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

@@ -0,0 +1,49 @@
+<ng-container class="content">
+  <div *ngIf="paymentDetailData.paymentType" fxFlex="50%" class="attribute">
+    {{ 'Payment Type' | translate }}
+  </div>
+
+  <div *ngIf="paymentDetailData.paymentType" 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>

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

@@ -0,0 +1,14 @@
+@import "assets/styles/helper";
+
+.content {
+  width: 100%;
+  background-color: $concrete;
+
+  div {
+    text-align: left;
+  }
+
+  .attribute {
+    font-weight: 500;
+  }
+}

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

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TransactionPaymentDetailComponent } from './transaction-payment-detail.component';
+
+describe('TransactionPaymentDetailComponent', () => {
+  let component: TransactionPaymentDetailComponent;
+  let fixture: ComponentFixture<TransactionPaymentDetailComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ TransactionPaymentDetailComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(TransactionPaymentDetailComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,18 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { PaymentDetail } from './payment-detail-model';
+
+
+@Component({
+  selector: 'mifosx-transaction-payment-detail',
+  templateUrl: './transaction-payment-detail.component.html',
+  styleUrls: ['./transaction-payment-detail.component.scss']
+})
+export class TransactionPaymentDetailComponent implements OnInit {
+
+  @Input() paymentDetailData: PaymentDetail;
+
+  constructor() {}
+
+  ngOnInit(): void {}
+
+}