Asset Externalization Owner management for Loans (#1771)

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

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

@@ -0,0 +1,81 @@
+<div class="tab-container mat-typography">
+  <div fxLayout="row" fxLayoutAlign="start center">
+
+    <h3 fxFlex="90%">External Asset Owner</h3>
+
+    <div fxFlex="10%" *ngIf="canBeSaled()" >
+      <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
+      </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
+      </button>
+    </div>
+
+    <div fxFlex="10%" *ngIf="canBeBuyed()" >
+      <button mat-raised-button class="f-right" color="primary" (click)="buyBackLoan()" *mifosxHasPermission="'SALE_LOAN'">
+        <fa-icon icon="dollar-sign" class="m-r-10"></fa-icon>Buy Back Loan
+      </button>
+    </div>
+  </div>
+
+  <table mat-table mat-sort [dataSource]="loanTransfersData" *ngIf="loanTransfersData.length>0">
+
+    <ng-container matColumnDef="status">
+      <th mat-header-cell *matHeaderCellDef> Status </th>
+      <td mat-cell *matCellDef="let item">
+        <div [ngClass]="itemStatus(item.status)">
+          <fa-icon icon="stop"></fa-icon>
+          <span class="m-l-10 status">
+            {{ item.status | translate }}
+          </span>
+        </div>
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="effectiveFrom">
+      <th mat-header-cell *matHeaderCellDef> Effective From </th>
+      <td mat-cell *matCellDef="let item"> {{ item.effectiveFrom | dateFormat }}</td>
+    </ng-container>
+
+    <ng-container matColumnDef="ownerExternalId">
+      <th mat-header-cell *matHeaderCellDef> Owner External Id </th>
+      <td mat-cell *matCellDef="let item">
+        <mifosx-external-identifier externalId="{{item.owner.externalId}}"></mifosx-external-identifier>
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="transferExternalId">
+      <th mat-header-cell *matHeaderCellDef> Transfer External Id </th>
+      <td mat-cell *matCellDef="let item">
+        <mifosx-external-identifier externalId="{{item.transferExternalId}}"></mifosx-external-identifier>
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="settlementDate">
+      <th mat-header-cell *matHeaderCellDef> Settlement Date </th>
+      <td mat-cell *matCellDef="let item"> {{ item.settlementDate | dateFormat }}</td>
+    </ng-container>
+
+    <ng-container matColumnDef="purchasePriceRatio">
+      <th mat-header-cell *matHeaderCellDef> Purchase Price Ratio </th>
+      <td mat-cell *matCellDef="let item"> {{ item.purchasePriceRatio | number }}</td>
+    </ng-container>
+
+    <ng-container matColumnDef="actions">
+      <th mat-header-cell class="center" *matHeaderCellDef> Actions </th>
+      <td mat-cell *matCellDef="let item" class="center td-min-space">
+        <button class="account-action-button" *ngIf="!isPending(item)" mat-raised-button color="primary" matTooltip="View Journal Entries"
+          matTooltipPosition="left" (click)="routeJournalEntry($event)" [routerLink]="['/', 'journal-entry', 'view-transfer', item.transferId]">
+          <i class="fa fa-arrow-circle-right"></i>
+        </button>
+      </td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="loanTransferColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: loanTransferColumns;"></tr>
+  </table>
+</div>

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

@@ -0,0 +1,35 @@
+.container {
+  padding-bottom: 2%;
+
+  .transaction-buttons {
+    padding-bottom: 1rem;
+    padding-top: 1rem;
+    .accruals {
+      padding-top: 1%;
+    }
+  }
+
+  table {
+    width: 100%;
+
+    .select-row:hover {
+      cursor: pointer;
+    }
+  }
+}
+
+.tab-container {
+	padding: 1%;
+	margin: 1%;
+}
+
+.status {
+  color: black;
+}
+
+.account-action-button{
+  min-width: 26px;
+  padding: 0 0 3px 0;
+  margin: 0 2%;
+  line-height: 25px;
+}

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

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

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

@@ -0,0 +1,97 @@
+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 { CancelDialogComponent } from 'app/shared/cancel-dialog/cancel-dialog.component';
+
+@Component({
+  selector: 'mifosx-external-asset-owner-tab',
+  templateUrl: './external-asset-owner-tab.component.html',
+  styleUrls: ['./external-asset-owner-tab.component.scss']
+})
+export class ExternalAssetOwnerTabComponent implements OnInit {
+
+  loanTransfersData: any[] = [];
+  activeTransferData: any;
+  loanTransferColumns: string[] = ['status', 'effectiveFrom', 'ownerExternalId', 'transferExternalId', 'settlementDate', 'purchasePriceRatio', 'actions'];
+
+  currentItem: any;
+
+  constructor(private route: ActivatedRoute,
+    private router: Router,
+    private dialog: MatDialog,
+    private externalAssetOwnerService: ExternalAssetOwnerService
+    ) {
+    this.route.data.subscribe((data: { loanTransfersData: any, activeTransferData: any }) => {
+      this.loanTransfersData =  data.loanTransfersData.empty ? [] : data.loanTransfersData.content;
+      this.activeTransferData = data.activeTransferData || {};
+    });
+  }
+
+  ngOnInit(): void {
+    this.currentItem = null;
+    if (this.loanTransfersData.length > 0) {
+      this.currentItem = this.loanTransfersData[(this.loanTransfersData.length - 1)];
+    }
+  }
+
+  itemStatus(status: string): string {
+    return 'status-' + status.toLowerCase();
+  }
+
+  isPending(item: any): boolean {
+    return (item.status === 'PENDING');
+  }
+
+  canBeCancelled(): boolean {
+    return this.validateStatus('PENDING');
+  }
+
+  canBeSaled(): boolean {
+    if (this.currentItem == null) {
+      return true;
+    }
+    return ['', 'BUYBACK'].includes(this.currentItem.status);
+  }
+
+  canBeBuyed(): boolean {
+    return this.validateStatus('ACTIVE');
+  }
+
+  private validateStatus(status: string): boolean {
+    if (this.currentItem != null) {
+      return (this.currentItem.status === status);
+    }
+    return false;
+  }
+
+  saleLoan(): void {
+    this.router.navigate(['../actions/Sale Loan'], { relativeTo: this.route });
+  }
+
+  cancelSaleLoan(): void {
+    const deleteDataTableDialogRef = this.dialog.open(CancelDialogComponent, {
+      data: { cancelContext: `the Asset Transfer with the Owner External Id ${this.currentItem.owner.externalId} ` }
+    });
+    deleteDataTableDialogRef.afterClosed().subscribe((response: any) => {
+      if (response.cancel) {
+        const payload: any = {
+          transferExternalId: this.currentItem.transferExternalId
+        };
+        this.externalAssetOwnerService.executeExternalAssetOwnerLoanCommand(this.currentItem.loan.loanId, payload, 'cancel')
+          .subscribe((result: any) => {
+            console.log(result);
+        });
+      }
+    });
+  }
+
+  buyBackLoan(): void {
+    this.router.navigate(['../actions/Buy Back Loan'], { relativeTo: this.route });
+  }
+
+  routeJournalEntry(ev: MouseEvent): void {
+    ev.stopPropagation();
+  }
+
+}