External Identifier as component with copy to clipboard (#1774)

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

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

@@ -20,6 +20,17 @@ export class ExternalAssetOwnerService {
     return this.http.post(`/external-asset-owners/transfers/loans/${loanId}`, data, { params: httpParams });
   }
 
+  /**
+   * @param {string} transferId Transfer Id
+   * @param {string} command Command
+   * @param {any} data Data
+   * @returns {Observable<any>}
+   */
+  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 });
+  }
+
   /**
    * @param {string} loanId Loan Id
    * @returns {Observable<any>}

src/app/loans/glim-account/create-glim-account/glim-account-stepper/glim-preview-step/glim-preview-step.component.html

@@ -38,7 +38,9 @@
 
     <div fxFlexFill *ngIf="loansAccount.externalId">
       <span fxFlex="40%">External id:</span>
-      <span fxFlex="60%">{{ loansAccount.externalId }}</span>
+      <span fxFlex="60%">
+        <mifosx-external-identifier externalId="{{loansAccount.externalId}}"></mifosx-external-identifier>
+      </span>
     </div>
 
     <h3 class="mat-h3" fxFlexFill>Terms</h3>

src/app/loans/loans-account-stepper/loans-account-preview-step/loans-account-preview-step.component.html

@@ -36,7 +36,9 @@
 
   <div fxFlexFill *ngIf="loansAccount.externalId">
     <span fxFlex="40%">External id:</span>
-    <span fxFlex="60%">{{ loansAccount.externalId }}</span>
+    <span fxFlex="60%">
+      <mifosx-external-identifier externalId="{{loansAccount.externalId}}"></mifosx-external-identifier>
+    </span>
   </div>
 
   <h3 class="mat-h3" fxFlexFill>Terms</h3>

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

@@ -23,7 +23,6 @@ export class DatatableTabComponent {
     this.entityDatatable = null;
     this.route.data.subscribe((data: { loanDatatable: any }) => {
       this.entityDatatable = data.loanDatatable;
-      console.log(this.entityDatatable);
       this.multiRowDatatableFlag = this.entityDatatable.columnHeaders[0].columnName === 'id' ? true : false;
     });
   }

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

@@ -18,7 +18,7 @@
               <b>Owner External Id :</b>
             </td>
             <td fxFlex="25%" class="left">
-              {{activeTransferData.owner.externalId}}
+              <mifosx-external-identifier externalId="{{activeTransferData.owner.externalId}}" completed="true"></mifosx-external-identifier>
             </td>
           </tr>
           <tr>
@@ -44,27 +44,27 @@
                 <tbody>
                   <tr>
                     <td fxFlex="50%"><b>Principal Outstanding :</b></td>
-                    <td fxFlex="50%" class="r-amount">{{activeTransferData.details.totalPrincipalOutstanding | number}}</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 | number}}</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 | number}}</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 | number}}</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 | number}}</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 | number}}</td>
+                    <td fxFlex="50%" class="r-amount">{{activeTransferData.details.totalOverpaid | formatNumber}}</td>
                   </tr>
                 </tbody>
               </table>
@@ -144,7 +144,7 @@
     <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"
+        <button class="account-action-button" *ngIf="!isPendingOrCanceled(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>

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

@@ -11,6 +11,7 @@ import { CancelDialogComponent } from 'app/shared/cancel-dialog/cancel-dialog.co
 })
 export class ExternalAssetOwnerTabComponent implements OnInit {
 
+  defaultDate = '9999-12-31';
   loanTransfersData: any[] = [];
   activeTransferData: any;
   loanTransferColumns: string[] = ['status', 'effectiveFrom', 'ownerExternalId', 'transferExternalId', 'settlementDate', 'purchasePriceRatio', 'actions'];
@@ -27,8 +28,6 @@ export class ExternalAssetOwnerTabComponent implements OnInit {
       this.loanTransfersData =  data.loanTransfersData.empty ? [] : data.loanTransfersData.content;
       this.activeTransferData = data.activeTransferData || null;
       this.existActiveTransfer = (data.activeTransferData && data.activeTransferData.transferId != null);
-      console.log(this.existActiveTransfer);
-      console.log(this.activeTransferData);
     });
   }
 
@@ -40,7 +39,7 @@ export class ExternalAssetOwnerTabComponent implements OnInit {
   }
 
   itemCurrentStatus(item: any): string {
-    if (item.status === 'BUYBACK' && item.effectiveTo === '9999-12-31') {
+    if (this.isBuyBackPending(item)) {
       return item.status + ' PENDING';
     }
     return item.status;
@@ -54,6 +53,14 @@ export class ExternalAssetOwnerTabComponent implements OnInit {
     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(): boolean {
     return this.validateStatus('PENDING');
   }
@@ -62,7 +69,7 @@ export class ExternalAssetOwnerTabComponent implements OnInit {
     if (this.currentItem == null) {
       return true;
     }
-    return ['', 'BUYBACK'].includes(this.currentItem.status);
+    return ['', 'CANCELLED'].includes(this.currentItem.status) || (this.currentItem.status === 'BUYBACK' && this.currentItem.effectiveTo !== this.defaultDate);
   }
 
   canBeBuyed(): boolean {
@@ -89,9 +96,9 @@ export class ExternalAssetOwnerTabComponent implements OnInit {
         const payload: any = {
           transferExternalId: this.currentItem.transferExternalId
         };
-        this.externalAssetOwnerService.executeExternalAssetOwnerLoanCommand(this.currentItem.loan.loanId, payload, 'cancel')
+        this.externalAssetOwnerService.executeExternalAssetOwnerTransferCommand(this.currentItem.transferId, payload, 'cancel')
           .subscribe((result: any) => {
-            console.log(result);
+            this.reload();
         });
       }
     });
@@ -105,4 +112,9 @@ export class ExternalAssetOwnerTabComponent implements OnInit {
     ev.stopPropagation();
   }
 
+  reload() {
+    const url: string = this.router.url;
+    this.router.navigateByUrl(`/`, {skipLocationChange: true})
+      .then(() => this.router.navigate([url]));
+  }
 }

src/app/loans/loans-view/general-tab/general-tab.component.html

@@ -113,7 +113,9 @@
           </ng-container>
 
           <ng-container *ngIf="ele.key === 'External Id'">
-            <span *ngIf="loanDetails.externalId"> {{loanDetails.externalId}} </span>
+            <span *ngIf="loanDetails.externalId">
+              <mifosx-external-identifier externalId="{{loanDetails.externalId}}" completed="true"></mifosx-external-identifier>
+            </span>
             <span *ngIf="!loanDetails.externalId"> Not Available </span>
           </ng-container>
 
@@ -159,11 +161,13 @@
           </ng-container>
 
           <ng-container *ngIf="ele.key === 'Currency'">
-            <span> {{loanDetails.currency.name }} </span>
+            <span> {{loanDetails.currency.name }} {{loanDetails.currency.code}} </span>
           </ng-container>
 
           <ng-container *ngIf="ele.key === 'External Id'">
-            <span *ngIf="loanDetails.externalId"> {{loanDetails.externalId}} </span>
+            <span *ngIf="loanDetails.externalId">
+              <mifosx-external-identifier externalId="{{loanDetails.externalId}}" completed="true"></mifosx-external-identifier>
+            </span>
             <span *ngIf="!loanDetails.externalId"> Not Available </span>
           </ng-container>
 

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

@@ -25,7 +25,9 @@
             </tr>
             <tr>
               <td>External Id</td>
-              <td>{{dataObject.externalId}}</td>
+              <td>
+                <mifosx-external-identifier externalId="{{dataObject.externalId}}"></mifosx-external-identifier>
+              </td>
             </tr>
           </tbody>
         </table>

src/app/loans/loans-view/loans-view.component.html

@@ -20,8 +20,7 @@
               <h3>
                 <i class="fa fa-stop" matTooltip="{{ loanDetailsData.status.value }}"
                   [ngClass]="loanDetailsData.inArrears?'status-active-overdue':( iconLoanStatusColor() | statusLookup)"></i>
-                Loan Product: {{loanDetailsData.loanProductName}}<span
-                  class="m-l-10">({{loanDetailsData.accountNo}})</span>
+                Loan Product: {{loanDetailsData.loanProductName}} <mifosx-account-number accountNo="{{loanDetailsData.accountNo}}"></mifosx-account-number>
               </h3>
               <span class="loans-overview">
                 {{entityType}} Name: {{loanDetailsData.clientName ||

src/app/loans/loans-view/transactions/view-transaction/view-transaction.component.html

@@ -81,7 +81,7 @@
         </div>
 
         <div fxFlex="50%" *ngIf="transactionData.externalId">
-          {{ transactionData.externalId }}
+          <mifosx-external-identifier externalId="{{transactionData.externalId}}" completed="true"></mifosx-external-identifier>
         </div>
 
         <mat-divider *ngIf="existTransactionRelations" [inset]="true"></mat-divider>