External Asset Owner tab with details (#1773)

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

@@ -1,4 +1,80 @@
 <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">
+              {{activeTransferData.owner.externalId}}
+            </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 | number}}</td>
+                  </tr>
+                  <tr>
+                    <td fxFlex="50%"><b>Interest Outstanding :</b></td>
+                    <td fxFlex="50%" class="r-amount">{{activeTransferData.details.totalInterestOutstanding | number}}</td>
+                  </tr>
+                  <tr>
+                    <td fxFlex="50%"><b>Fees Outstanding :</b></td>
+                    <td fxFlex="50%" class="r-amount">{{activeTransferData.details.totalFeeChargesOutstanding | number}}</td>
+                  </tr>
+                  <tr>
+                    <td fxFlex="50%"><b>Penalties Outstanding :</b></td>
+                    <td fxFlex="50%" class="r-amount">{{activeTransferData.details.totalPenaltyChargesOutstanding | number}}</td>
+                  </tr>
+                  <tr>
+                    <td fxFlex="50%"><b>Outstanding :</b></td>
+                    <td fxFlex="50%" class="r-amount">{{activeTransferData.details.totalOutstanding | number}}</td>
+                  </tr>
+                  <tr>
+                    <td fxFlex="50%"><b>Overpaid :</b></td>
+                    <td fxFlex="50%" class="r-amount">{{activeTransferData.details.totalOverpaid | number}}</td>
+                  </tr>
+                </tbody>
+              </table>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+
   <div fxLayout="row" fxLayoutAlign="start center">
 
     <h3 fxFlex="90%">External Asset Owner</h3>
@@ -30,7 +106,7 @@
         <div [ngClass]="itemStatus(item.status)">
           <fa-icon icon="stop"></fa-icon>
           <span class="m-l-10 status">
-            {{ item.status | translate }}
+            {{ itemCurrentStatus(item) | translate }}
           </span>
         </div>
       </td>

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

@@ -1,6 +1,10 @@
-.container {
+.tab-container {
   padding-bottom: 2%;
 
+  h3 {
+    margin: 1% auto;
+  }
+
   .transaction-buttons {
     padding-bottom: 1rem;
     padding-top: 1rem;
@@ -9,6 +13,12 @@
     }
   }
 
+  .asset-transfer-container {
+    border: 1px solid;
+    padding: 1%;
+    margin-bottom: 20px;
+  }
+
   table {
     width: 100%;
 
@@ -33,3 +43,5 @@
   margin: 0 2%;
   line-height: 25px;
 }
+
+

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

@@ -16,6 +16,7 @@ export class ExternalAssetOwnerTabComponent implements OnInit {
   loanTransferColumns: string[] = ['status', 'effectiveFrom', 'ownerExternalId', 'transferExternalId', 'settlementDate', 'purchasePriceRatio', 'actions'];
 
   currentItem: any;
+  existActiveTransfer = false;
 
   constructor(private route: ActivatedRoute,
     private router: Router,
@@ -24,7 +25,10 @@ export class ExternalAssetOwnerTabComponent implements OnInit {
     ) {
     this.route.data.subscribe((data: { loanTransfersData: any, activeTransferData: any }) => {
       this.loanTransfersData =  data.loanTransfersData.empty ? [] : data.loanTransfersData.content;
-      this.activeTransferData = data.activeTransferData || {};
+      this.activeTransferData = data.activeTransferData || null;
+      this.existActiveTransfer = (data.activeTransferData && data.activeTransferData.transferId != null);
+      console.log(this.existActiveTransfer);
+      console.log(this.activeTransferData);
     });
   }
 
@@ -35,6 +39,13 @@ export class ExternalAssetOwnerTabComponent implements OnInit {
     }
   }
 
+  itemCurrentStatus(item: any): string {
+    if (item.status === 'BUYBACK' && item.effectiveTo === '9999-12-31') {
+      return item.status + ' PENDING';
+    }
+    return item.status;
+  }
+
   itemStatus(status: string): string {
     return 'status-' + status.toLowerCase();
   }