Enhancement/inverstor search data (#1838)

* Investor Search data

* Investor module

---------

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

src/app/loans/common-resolvers/external-asset-owner-active-transfer.resolver.ts

@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
 import { Observable } from 'rxjs';
-import { ExternalAssetOwnerService } from '../external-asset-owner.service';
+import { ExternalAssetOwnerService } from '../services/external-asset-owner.service';
 
 @Injectable({
   providedIn: 'root'

src/app/loans/common-resolvers/external-asset-owner-journal-entry.resolver.ts

@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
 import { Observable, of } from 'rxjs';
-import { ExternalAssetOwnerService } from '../external-asset-owner.service';
+import { ExternalAssetOwnerService } from '../services/external-asset-owner.service';
 
 @Injectable({
   providedIn: 'root'

src/app/loans/common-resolvers/external-asset-owner.resolver.ts

@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
 import { Observable } from 'rxjs';
-import { ExternalAssetOwnerService } from '../external-asset-owner.service';
+import { ExternalAssetOwnerService } from '../services/external-asset-owner.service';
 
 @Injectable({
   providedIn: 'root'

src/app/loans/common-resolvers/loan-collaterals.resolver.ts

@@ -0,0 +1,27 @@
+import { Injectable } from '@angular/core';
+import {
+  Resolve,
+  ActivatedRouteSnapshot
+} from '@angular/router';
+import { Observable } from 'rxjs';
+import { LoansService } from '../loans.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class LoanCollateralsResolver implements Resolve<boolean> {
+
+  /**
+   * @param {LoansService} LoansService Loans service.
+   */
+  constructor(private loansService: LoansService) { }
+
+  /**
+   * Returns the Loans data.
+   * @returns {Observable<any>}
+   */
+  resolve(route: ActivatedRouteSnapshot): Observable<any> {
+    const loanId = route.paramMap.get('loanId') || route.parent.paramMap.get('loanId');
+    return this.loansService.getLoanCollaterals(loanId);
+  }
+}

src/app/loans/loans-routing.module.ts

@@ -61,6 +61,7 @@ import { ExternalAssetOwnerTabComponent } from './loans-view/external-asset-owne
 import { ExternalAssetOwnerResolver } from './common-resolvers/external-asset-owner.resolver';
 import { ExternalAssetOwnerActiveTransferResolver } from './common-resolvers/external-asset-owner-active-transfer.resolver';
 import { ExternalAssetOwnerJournalEntryResolver } from './common-resolvers/external-asset-owner-journal-entry.resolver';
+import { LoanCollateralsResolver } from './common-resolvers/loan-collaterals.resolver';
 
 /** Loans Route. */
 const routes: Routes = [
@@ -160,6 +161,9 @@ const routes: Routes = [
             path: 'loan-collateral',
             component: LoanCollateralTabComponent,
             data: { title: extract('Loan Collateral Details'), breadcrumb: 'Loan Collateral Details', routeParamBreadcrumb: false },
+            resolve: {
+              loanCollaterals: LoanCollateralsResolver
+            }
           },
           {
             path: 'loan-tranche-details',

src/app/loans/loans-view/external-asset-owner-tab/external-asset-owner-tab.component.html

@@ -1,93 +1,22 @@
 <div class="tab-container mat-typography">
   <div fxFlexFill *ngIf="existActiveTransfer">
     <h3>Active Asset Transfer</h3>
-    <div fxLayout="row" fxLayoutGap="32px" class="asset-transfer-container">
-      <table>
-        <tbody>
-          <tr>
-            <td fxFlex="25%">
-              <b>Status :</b>
-            </td>
-            <td fxFlex="25%" class="left">
-              <div [ngClass]="itemStatus(activeTransferData.status)">
-                <fa-icon icon="stop"></fa-icon>
-                <span class="m-l-10 status">{{activeTransferData.status}}</span>
-              </div>
-            </td>
-            <td fxFlex="25%">
-              <b>Owner External Id :</b>
-            </td>
-            <td fxFlex="25%" class="left">
-              <mifosx-external-identifier externalId="{{activeTransferData.owner.externalId}}" completed="true"></mifosx-external-identifier>
-            </td>
-          </tr>
-          <tr>
-            <td fxFlex="25%">
-              <b>Settlement Date :</b>
-            </td>
-            <td fxFlex="25%" class="left">
-              {{activeTransferData.settlementDate | dateFormat}}
-            </td>
-            <td fxFlex="25%">
-              <b>Effective Date :</b>
-            </td>
-            <td fxFlex="25%" class="left">
-              {{activeTransferData.effectiveFrom | dateFormat}}
-            </td>
-          </tr>
-          <tr>
-            <td fxFlex="25%">
-              <b>Details :</b>
-            </td>
-            <td fxFlex="75%" class="left">
-              <table>
-                <tbody>
-                  <tr>
-                    <td fxFlex="50%"><b>Principal Outstanding :</b></td>
-                    <td fxFlex="50%" class="r-amount">{{activeTransferData.details.totalPrincipalOutstanding | formatNumber}}</td>
-                  </tr>
-                  <tr>
-                    <td fxFlex="50%"><b>Interest Outstanding :</b></td>
-                    <td fxFlex="50%" class="r-amount">{{activeTransferData.details.totalInterestOutstanding | formatNumber}}</td>
-                  </tr>
-                  <tr>
-                    <td fxFlex="50%"><b>Fees Outstanding :</b></td>
-                    <td fxFlex="50%" class="r-amount">{{activeTransferData.details.totalFeeChargesOutstanding | formatNumber}}</td>
-                  </tr>
-                  <tr>
-                    <td fxFlex="50%"><b>Penalties Outstanding :</b></td>
-                    <td fxFlex="50%" class="r-amount">{{activeTransferData.details.totalPenaltyChargesOutstanding | formatNumber}}</td>
-                  </tr>
-                  <tr>
-                    <td fxFlex="50%"><b>Outstanding :</b></td>
-                    <td fxFlex="50%" class="r-amount">{{activeTransferData.details.totalOutstanding | formatNumber}}</td>
-                  </tr>
-                  <tr>
-                    <td fxFlex="50%"><b>Overpaid :</b></td>
-                    <td fxFlex="50%" class="r-amount">{{activeTransferData.details.totalOverpaid | formatNumber}}</td>
-                  </tr>
-                </tbody>
-              </table>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
+    <mifosx-external-asset-transfer [transferData]="activeTransferData"></mifosx-external-asset-transfer>
   </div>
 
   <div fxLayout="row" fxLayoutAlign="start center">
 
     <h3 fxFlex="90%">External Asset Owner</h3>
 
-    <div fxFlex="10%" *ngIf="canBeSaled()" >
+    <div fxFlex="10%" *ngIf="canBeSold()" >
       <button mat-raised-button class="f-right" color="primary" (click)="saleLoan()" *mifosxHasPermission="'SALE_LOAN'">
-        <fa-icon icon="dollar-sign" class="m-r-10"></fa-icon>Sale Loan
+        <fa-icon icon="dollar-sign" class="m-r-10"></fa-icon>Sell Loan
       </button>
     </div>
 
     <div fxFlex="10%" *ngIf="canBeCancelled()" >
       <button mat-raised-button class="f-right" color="warn" (click)="cancelSaleLoan()" *mifosxHasPermission="'SALE_LOAN'">
-        <fa-icon icon="trash" class="m-r-10"></fa-icon>Cancel Sale Loan
+        <fa-icon icon="trash" class="m-r-10"></fa-icon>Cancel Sell Loan
       </button>
     </div>
 

src/app/loans/loans-view/external-asset-owner-tab/external-asset-owner-tab.component.ts

@@ -1,7 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
-import { ExternalAssetOwnerService } from 'app/loans/external-asset-owner.service';
+import { ExternalAssetOwner } from 'app/loans/services/external-asset-owner';
+import { ExternalAssetOwnerService } from 'app/loans/services/external-asset-owner.service';
 import { CancelDialogComponent } from 'app/shared/cancel-dialog/cancel-dialog.component';
 
 @Component({
@@ -22,6 +23,7 @@ export class ExternalAssetOwnerTabComponent implements OnInit {
   constructor(private route: ActivatedRoute,
     private router: Router,
     private dialog: MatDialog,
+    private externalAssetOwner: ExternalAssetOwner,
     private externalAssetOwnerService: ExternalAssetOwnerService
     ) {
     this.route.data.subscribe((data: { loanTransfersData: any, activeTransferData: any }) => {
@@ -39,52 +41,39 @@ export class ExternalAssetOwnerTabComponent implements OnInit {
   }
 
   itemCurrentStatus(item: any): string {
-    if (this.isBuyBackPending(item)) {
-      return item.status + ' PENDING';
-    }
-    return item.status;
+    return this.externalAssetOwner.itemCurrentStatus(item);
   }
 
   itemStatus(status: string): string {
-    return 'status-' + status.toLowerCase();
+    return this.externalAssetOwner.itemStatus(status);
   }
 
   isPending(item: any): boolean {
-    return (item.status === 'PENDING');
+    return this.externalAssetOwner.isPending(item);
   }
 
   isPendingOrCanceled(item: any): boolean {
-    return ((item.status === 'PENDING') || (item.status === 'CANCELLED') || this.isBuyBackPending(item));
+    return this.externalAssetOwner.isPendingOrCanceled(item);
   }
 
   isBuyBackPending(item: any): boolean {
-    return (item.status === 'BUYBACK' && item.effectiveTo === this.defaultDate);
+    return this.externalAssetOwner.isBuyBackPending(item);
   }
 
   canBeCancelled(): boolean {
-    return this.validateStatus('PENDING');
+    return this.externalAssetOwner.validateStatus(this.currentItem, 'PENDING');
   }
 
-  canBeSaled(): boolean {
-    if (this.currentItem == null) {
-      return true;
-    }
-    return ['', 'CANCELLED'].includes(this.currentItem.status) || (this.currentItem.status === 'BUYBACK' && this.currentItem.effectiveTo !== this.defaultDate);
+  canBeSold(): boolean {
+    return this.externalAssetOwner.canBeSold(this.currentItem);
   }
 
   canBeBuyed(): boolean {
-    return this.validateStatus('ACTIVE');
-  }
-
-  private validateStatus(status: string): boolean {
-    if (this.currentItem != null) {
-      return (this.currentItem.status === status);
-    }
-    return false;
+    return this.externalAssetOwner.validateStatus(this.currentItem, 'ACTIVE');
   }
 
   saleLoan(): void {
-    this.router.navigate(['../actions/Sale Loan'], { relativeTo: this.route });
+    this.router.navigate(['../actions/Sell Loan'], { relativeTo: this.route });
   }
 
   cancelSaleLoan(): void {

src/app/loans/loans-view/external-asset-owner-tab/external-asset-transfer/external-asset-transfer.component.html

@@ -0,0 +1,72 @@
+<div fxLayout="row" fxLayoutGap="32px" class="asset-transfer-container">
+  <table>
+    <tbody>
+      <tr>
+        <td fxFlex="25%" class="m-l-5">
+          <b>Status :</b>
+        </td>
+        <td fxFlex="25%" class="m-l-5 left">
+          <div [ngClass]="itemStatus(transferData.status)">
+            <fa-icon icon="stop"></fa-icon>
+            <span class="m-l-5 status">{{transferData.status}}</span>
+          </div>
+        </td>
+        <td fxFlex="25%" class="m-l-5">
+          <b>Owner External Id :</b>
+        </td>
+        <td fxFlex="25%" class="m-l-5 left">
+          <mifosx-external-identifier externalId="{{transferData.owner.externalId}}" completed="true"></mifosx-external-identifier>
+        </td>
+      </tr>
+      <tr>
+        <td fxFlex="25%" class="m-l-5">
+          <b>Settlement Date :</b>
+        </td>
+        <td fxFlex="25%" class="m-l-5">
+          {{transferData.settlementDate | dateFormat}}
+        </td>
+        <td fxFlex="25%" class="m-l-5">
+          <b>Effective Date :</b>
+        </td>
+        <td fxFlex="25%" class="m-l-5">
+          {{transferData.effectiveFrom | dateFormat}}
+        </td>
+      </tr>
+      <tr>
+        <td fxFlex="25%" class="m-l-5">
+          <b>Details :</b>
+        </td>
+        <td fxFlex="75%" class="left">
+          <table>
+            <tbody>
+              <tr>
+                <td fxFlex="50%" class="m-l-5"><b>Principal Outstanding :</b></td>
+                <td fxFlex="50%" class="r-amount">{{transferData.details.totalPrincipalOutstanding | formatNumber}}</td>
+              </tr>
+              <tr>
+                <td fxFlex="50%" class="m-l-5"><b>Interest Outstanding :</b></td>
+                <td fxFlex="50%" class="r-amount">{{transferData.details.totalInterestOutstanding | formatNumber}}</td>
+              </tr>
+              <tr>
+                <td fxFlex="50%" class="m-l-5"><b>Fees Outstanding :</b></td>
+                <td fxFlex="50%" class="r-amount">{{transferData.details.totalFeeChargesOutstanding | formatNumber}}</td>
+              </tr>
+              <tr>
+                <td fxFlex="50%" class="m-l-5"><b>Penalties Outstanding :</b></td>
+                <td fxFlex="50%" class="r-amount">{{transferData.details.totalPenaltyChargesOutstanding | formatNumber}}</td>
+              </tr>
+              <tr>
+                <td fxFlex="50%" class="m-l-5"><b>Outstanding :</b></td>
+                <td fxFlex="50%" class="r-amount">{{transferData.details.totalOutstanding | formatNumber}}</td>
+              </tr>
+              <tr>
+                <td fxFlex="50%" class="m-l-5"><b>Overpaid :</b></td>
+                <td fxFlex="50%" class="r-amount">{{transferData.details.totalOverpaid | formatNumber}}</td>
+              </tr>
+            </tbody>
+          </table>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>

src/app/loans/loans-view/external-asset-owner-tab/external-asset-transfer/external-asset-transfer.component.scss

@@ -0,0 +1,8 @@
+.asset-transfer-container {
+
+  height: 150px;
+
+  .status {
+    color: black;
+  }
+}

src/app/loans/loans-view/external-asset-owner-tab/external-asset-transfer/external-asset-transfer.component.spec.ts

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

src/app/loans/loans-view/external-asset-owner-tab/external-asset-transfer/external-asset-transfer.component.ts

@@ -0,0 +1,23 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { ExternalAssetOwner } from 'app/loans/services/external-asset-owner';
+
+@Component({
+  selector: 'mifosx-external-asset-transfer',
+  templateUrl: './external-asset-transfer.component.html',
+  styleUrls: ['./external-asset-transfer.component.scss']
+})
+export class ExternalAssetTransferComponent implements OnInit {
+  /** Input Fields Data */
+  @Input() transferData: any;
+
+  constructor(private externalAssetOwner: ExternalAssetOwner) { }
+
+  ngOnInit(): void {
+    console.log(this.transferData);
+  }
+
+  itemStatus(status: string): string {
+    return this.externalAssetOwner.itemStatus(status);
+  }
+
+}

src/app/loans/loans-view/loan-account-actions/add-collateral/add-collateral.component.html

@@ -36,7 +36,7 @@
         </div>
 
         <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-          <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
+          <button type="button" mat-raised-button [routerLink]="['../../loan-collateral']">Cancel</button>
           <button mat-raised-button color="primary" [disabled]="!collateralForm.valid"
             *mifosxHasPermission="'CREATE_COLLATERAL'">Submit</button>
         </mat-card-actions>

src/app/loans/loans-view/loan-account-actions/add-collateral/add-collateral.component.ts

@@ -62,7 +62,7 @@ export class AddCollateralComponent implements OnInit {
     const collateralForm = this.collateralForm.value;
     collateralForm.locale = 'en';
     this.loanService.createLoanCollateral(loanId, collateralForm).subscribe((response: any) => {
-      this.router.navigate(['../../general'], { relativeTo: this.route });
+      this.router.navigate(['../../loan-collateral'], { relativeTo: this.route });
     });
   }
 

src/app/loans/loans-view/loan-account-actions/asset-transfer-loan/asset-transfer-loan.component.ts

@@ -2,7 +2,7 @@ import { Component, Input, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Dates } from 'app/core/utils/dates';
-import { ExternalAssetOwnerService } from 'app/loans/external-asset-owner.service';
+import { ExternalAssetOwnerService } from 'app/loans/services/external-asset-owner.service';
 import { SettingsService } from 'app/settings/settings.service';
 
 @Component({
@@ -22,7 +22,7 @@ export class AssetTransferLoanComponent implements OnInit {
   minDate = new Date(2000, 0, 1);
   /** Maximum Date allowed. */
   maxDate = new Date();
-  /** Sale Loan Form */
+  /** Sell Loan Form */
   saleLoanForm: FormGroup;
 
   constructor(private formBuilder: FormBuilder,
@@ -33,11 +33,11 @@ export class AssetTransferLoanComponent implements OnInit {
     private settingsService: SettingsService) {
       this.loanId = this.route.snapshot.params['loanId'];
       const actionName = this.route.snapshot.params['action'];
-      this.command = (actionName === 'Sale Loan') ? this.SALE_COMMAND : this.BUYBACK_COMMAND;
+      this.command = (actionName === 'Sell Loan') ? this.SALE_COMMAND : this.BUYBACK_COMMAND;
     }
 
   /**
-   * Creates the sale loan form
+   * Creates the Sell Loan form
    * and initialize with the required values
    */
   ngOnInit() {

src/app/loans/loans-view/loan-collateral-tab/loan-collateral-tab.component.html

@@ -1,25 +1,52 @@
 <div class="container">
 
-  <table mat-table [dataSource]="loanDetails.collateral">
+  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px" class="action-buttons">
+    <button mat-raised-button color="primary" [routerLink]="['../actions/Add Collateral']">
+      Add Collateral
+    </button>
+  </div>
+
+  <div fxLayout="row" fxLayoutGap="32px" *ngIf="loanCollaterals?.length > 0" class="performance-history-container">
+    <table>
+      <tbody>
+        <tr>
+          <td fxFlex="25%">
+            <b>Number of Collaterals :</b>
+          </td>
+          <td fxFlex="25%" class="left">
+            {{loanCollaterals?.length | formatNumber}}
+          </td>
+          <td fxFlex="25%">
+            <b>Total Amount :</b>
+          </td>
+          <td fxFlex="25%" class="left">
+            {{totalAmount | formatNumber}}
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+
+  <table mat-table *ngIf="loanCollaterals?.length > 0" [dataSource]="loanCollaterals">
 
     <ng-container matColumnDef="id">
       <th mat-header-cell *matHeaderCellDef> ID </th>
-      <td mat-cell *matCellDef="let ele"> {{ ele.clientCollateralId }} </td>
+      <td mat-cell *matCellDef="let ele"> {{ ele.id }} </td>
     </ng-container>
 
-    <ng-container matColumnDef="quantity">
-      <th mat-header-cell *matHeaderCellDef> Quantity </th>
-      <td mat-cell *matCellDef="let ele"> {{ ele.quantity }} </td>
+    <ng-container matColumnDef="currency">
+      <th mat-header-cell *matHeaderCellDef> Currency </th>
+      <td mat-cell *matCellDef="let ele"> {{ ele.currency.code }} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="description">
+      <th mat-header-cell *matHeaderCellDef> Description </th>
+      <td mat-cell *matCellDef="let ele"> {{ ele.description }} </td>
     </ng-container>
 
     <ng-container matColumnDef="total">
       <th mat-header-cell *matHeaderCellDef> Total Value </th>
-      <td mat-cell *matCellDef="let ele"> {{ ele.total }} </td>
-    </ng-container>
-
-    <ng-container matColumnDef="totalCollateral">
-      <th mat-header-cell *matHeaderCellDef> Total Collateral Value </th>
-      <td mat-cell *matCellDef="let ele"> {{ ele.totalCollateral }} </td>
+      <td mat-cell *matCellDef="let ele"> {{ ele.value | currency:currencyCode:'symbol-narrow':'1.2-2' }} </td>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>

src/app/loans/loans-view/loan-collateral-tab/loan-collateral-tab.component.ts

@@ -8,22 +8,28 @@ import { ActivatedRoute } from '@angular/router';
 })
 export class LoanCollateralTabComponent implements OnInit {
 
-  /** Loan Details */
-  loanDetails: any;
+  /** Loan Collateral Details */
+  loanCollaterals: any[] = [];
   /** Columns to be displayed in collateral table. */
-  displayedColumns: string[] = ['id', 'quantity', 'total', 'totalCollateral'];
+  displayedColumns: string[] = ['id', 'currency', 'description', 'total'];
+
+  totalAmount: number;
 
   /**
    * Retrieves the loans data from `resolve`.
    * @param {ActivatedRoute} route Activated Route.
    */
   constructor(private route: ActivatedRoute) {
-    this.route.parent.data.subscribe((data: { loanDetailsData: any }) => {
-      this.loanDetails = data.loanDetailsData;
+    this.route.data.subscribe((data: { loanCollaterals: any }) => {
+      this.loanCollaterals = data.loanCollaterals;
     });
   }
 
   ngOnInit() {
+    this.totalAmount = 0;
+    this.loanCollaterals.forEach((collateral: any) => {
+      this.totalAmount = this.totalAmount + collateral.value;
+    });
   }
 
 }

src/app/loans/loans-view/transactions-tab/transactions-tab.component.ts

@@ -162,13 +162,15 @@ export class TransactionsTabComponent implements OnInit {
     if (this.isChargeOff(transaction.type)) {
       command = 'undo-charge-off';
       operationDate = this.settingsService.businessDate;
+      payload = {};
+    } else {
+      payload = {
+        transactionDate: this.dateUtils.formatDate(operationDate && new Date(operationDate), dateFormat),
+        transactionAmount: 0,
+        dateFormat,
+        locale
+      };
     }
-    payload = {
-      transactionDate: this.dateUtils.formatDate(operationDate && new Date(operationDate), dateFormat),
-      transactionAmount: 0,
-      dateFormat,
-      locale
-    };
 
     const undoTransactionAccountDialogRef = this.dialog.open(ConfirmationDialogComponent, {
       data: { heading: 'Undo Transaction', dialogContext: `Are you sure you want undo the transaction type ${transaction.type.value} with id ${transaction.id}` }

src/app/loans/loans.module.ts

@@ -77,6 +77,7 @@ import { AdjustLoanChargeComponent } from './loans-view/loan-account-actions/adj
 import { ChargeOffComponent } from './loans-view/loan-account-actions/charge-off/charge-off.component';
 import { AssetTransferLoanComponent } from './loans-view/loan-account-actions/asset-transfer-loan/asset-transfer-loan.component';
 import { ExternalAssetOwnerTabComponent } from './loans-view/external-asset-owner-tab/external-asset-owner-tab.component';
+import { ExternalAssetTransferComponent } from './loans-view/external-asset-owner-tab/external-asset-transfer/external-asset-transfer.component';
 
 /**
  * Loans Module
@@ -152,7 +153,8 @@ import { ExternalAssetOwnerTabComponent } from './loans-view/external-asset-owne
     AdjustLoanChargeComponent,
     ChargeOffComponent,
     AssetTransferLoanComponent,
-    ExternalAssetOwnerTabComponent
+    ExternalAssetOwnerTabComponent,
+    ExternalAssetTransferComponent
   ],
   providers: [ ],
 })

src/app/loans/loans.service.ts

@@ -112,6 +112,15 @@ export class LoansService {
     return this.http.get(`/loans/${loanId}/collaterals/template`);
   }
 
+  /**
+   * Get collaterals.
+   * @param {string} loanId Loan Id.
+   * @returns {Observable<any>}
+   */
+  getLoanCollaterals(loanId: string): Observable<any> {
+    return this.http.get(`/loans/${loanId}/collaterals`);
+  }
+
   /**
    * Create Loan Collateral.
    * @param {string} loanId Loan Id.

src/app/loans/services/external-asset-owner.service.ts

@@ -7,6 +7,8 @@ import { Observable } from 'rxjs';
 })
 export class ExternalAssetOwnerService {
 
+  basePath = '/external-asset-owners';
+
   constructor(private http: HttpClient) { }
 
   /**
@@ -17,7 +19,7 @@ export class ExternalAssetOwnerService {
    */
   executeExternalAssetOwnerLoanCommand(loanId: string, data: any, command: string): Observable<any> {
     const httpParams = new HttpParams().set('command', command);
-    return this.http.post(`/external-asset-owners/transfers/loans/${loanId}`, data, { params: httpParams });
+    return this.http.post(`${this.basePath}/transfers/loans/${loanId}`, data, { params: httpParams });
   }
 
   /**
@@ -28,7 +30,7 @@ export class ExternalAssetOwnerService {
    */
   executeExternalAssetOwnerTransferCommand(transferId: string, data: any, command: string): Observable<any> {
     const httpParams = new HttpParams().set('command', command);
-    return this.http.post(`/external-asset-owners/transfers/${transferId}`, data, { params: httpParams });
+    return this.http.post(`${this.basePath}/transfers/${transferId}`, data, { params: httpParams });
   }
 
   /**
@@ -37,7 +39,7 @@ export class ExternalAssetOwnerService {
    */
   retrieveExternalAssetOwnerTransfers(loanId: string): Observable<any> {
     const httpParams = new HttpParams().set('loanId', loanId);
-    return this.http.get(`/external-asset-owners/transfers`, { params: httpParams });
+    return this.http.get(`${this.basePath}/transfers`, { params: httpParams });
   }
 
   /**
@@ -46,7 +48,7 @@ export class ExternalAssetOwnerService {
    */
   retrieveExternalAssetOwnerActiveTransfer(loanId: string): Observable<any> {
     const httpParams = new HttpParams().set('loanId', loanId);
-    return this.http.get(`/external-asset-owners/transfers/active-transfer`, { params: httpParams });
+    return this.http.get(`${this.basePath}/transfers/active-transfer`, { params: httpParams });
   }
 
   /**
@@ -54,7 +56,15 @@ export class ExternalAssetOwnerService {
    * @returns {Observable<any>}
    */
   retrieveExternalAssetOwnerTransferJournalEntries(transferId: string): Observable<any> {
-    return this.http.get(`/external-asset-owners/transfers/${transferId}/journal-entries`);
+    return this.http.get(`${this.basePath}/transfers/${transferId}/journal-entries`);
+  }
+
+  /**
+   * @param {any} request Transfer Id
+   * @returns {Observable<any>}
+   */
+  searchExternalAssetOwnerTransfer(request: any): Observable<any> {
+    return this.http.post(`${this.basePath}/search`, request);
   }
 
 }

src/app/loans/services/external-asset-owner.ts

@@ -0,0 +1,55 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ExternalAssetOwner {
+  defaultDate = '9999-12-31';
+
+  validateStatus(item: any, status: string): boolean {
+    if (item != null) {
+      return (item.status === status);
+    }
+    return false;
+  }
+
+  itemCurrentStatus(item: any): string {
+    if (this.isBuyBackPending(item)) {
+      return item.status + ' PENDING';
+    }
+    return item.status;
+  }
+
+  itemStatus(status: string): string {
+    return 'status-' + status.toLowerCase();
+  }
+
+  isPending(item: any): boolean {
+    return (item.status === 'PENDING');
+  }
+
+  isPendingOrCanceled(item: any): boolean {
+    return ((item.status === 'PENDING') || (item.status === 'CANCELLED') || this.isBuyBackPending(item));
+  }
+
+  isBuyBackPending(item: any): boolean {
+    return (item.status === 'BUYBACK' && item.effectiveTo === this.defaultDate);
+  }
+
+  canBeCancelled(item: any): boolean {
+    return this.validateStatus(item, 'PENDING');
+  }
+
+  canBeSold(item: any): boolean {
+    if (item == null) {
+      return true;
+    }
+    return ['', 'CANCELLED'].includes(item.status)
+      || (item.status === 'BUYBACK' && item.effectiveTo !== this.defaultDate);
+  }
+
+  canBeBuyed(item: any): boolean {
+    return this.validateStatus(item, 'ACTIVE');
+  }
+
+}