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

Co-authored-by: Jose Alberto Hernandez <alberto@blue-daemon.local>
openMF · Jun 29, 2023 · f459b1a · f459b1a
1 parent d0bc112
commit f459b1a
Show file tree

Hide file tree

Showing 38 changed files with 309 additions and 72 deletions.
diff --git a/src/app/centers/centers-view/centers-view.component.html b/src/app/centers/centers-view/centers-view.component.html
@@ -28,7 +28,8 @@ <h3 fxFlex="95%">
                 Account #:{{centerViewData.accountNo}} <br />
                 Office: {{centerViewData.officeName}} <br />
                 <span *ngIf="centerViewData.externalId">
-                  External Id: {{centerViewData.externalId}} <br />
+                  External Id:
+                  <mifosx-external-identifier externalId="{{centerViewData.externalId}}"></mifosx-external-identifier><br />
                 </span>
                 <span *ngIf="centerViewData.staffName">
                   Staff: {{centerViewData.staffName}} <br />

diff --git a/src/app/clients/client-stepper/client-preview-step/client-preview-step.component.html b/src/app/clients/client-stepper/client-preview-step/client-preview-step.component.html
@@ -32,7 +32,9 @@ <h3 class="mat-h3" fxFlexFill>General</h3>
 
   <div fxFlexFill *ngIf="client.externalId">
     <span fxFlex="40%">External Id</span>
-    <span fxFlex="60%">{{ client.externalId }}</span>
+    <span fxFlex="60%">
+      <mifosx-external-identifier externalId="{{client.externalId}}"></mifosx-external-identifier>
+    </span>
   </div>
 
   <div fxFlexFill *ngIf="client.mobileNo">

diff --git a/src/app/clients/clients-view/clients-view.component.html b/src/app/clients/clients-view/clients-view.component.html
@@ -33,7 +33,7 @@
           <h3 fxFlex="95%">
             <i class="fa fa-stop" [ngClass]="clientViewData.status.code|statusLookup"
               [matTooltip]="clientViewData.status.value"></i>
-            <b>Client Name :</b> {{clientViewData.displayName}}
+            <b>Client Name :</b><mifosx-entity-name entityName="{{clientViewData.displayName}}"></mifosx-entity-name>
           </h3>
           <div fxFlex="5%">
             <button mat-icon-button [matMenuTriggerFor]="clientMenu" aria-label="Client actions" yPosition="below">
@@ -46,9 +46,9 @@ <h3 fxFlex="95%">
 
         <mat-card-subtitle>
           <p>
-            <b>Office :</b> {{clientViewData.officeName}}<br />
-            <b>Client :</b> {{clientViewData.accountNo}}<br />
-            <b>External Id:</b> {{clientViewData.externalId}}<br />
+            <b>Office :</b><mifosx-entity-name entityName="{{clientViewData.officeName}}"></mifosx-entity-name><br />
+            <b>Client :</b> <mifosx-account-number accountNo="{{clientViewData.accountNo}}"></mifosx-account-number><br />
+            <b>External Id:</b><mifosx-external-identifier externalId="{{clientViewData.externalId}}" completed="true"></mifosx-external-identifier><br />
             <span *ngIf="clientViewData.staffName"><b>Staff :</b> {{clientViewData.staffName ||
               'Unassigned'}}<br /></span>
             <span *ngIf="clientViewData.activationDate"><b>Activation Date :</b> {{clientViewData.activationDate |

diff --git a/src/app/clients/clients.component.html b/src/app/clients/clients.component.html
@@ -26,20 +26,22 @@
       <!-- Name Column -->
       <ng-container matColumnDef="displayName">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
-        <td mat-cell *matCellDef="let row"> {{row.displayName}} </td>
+        <td mat-cell *matCellDef="let row" [routerLink]="[row.id,'general']"> {{row.displayName}} </td>
       </ng-container>
 
       <!-- Account no Column -->
       <ng-container matColumnDef="accountNumber">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> Account No. </th>
-        <td mat-cell *matCellDef="let row"> {{row.accountNumber}} </td>
+        <td mat-cell *matCellDef="let row">
+          <mifosx-account-number display="left" accountNo="{{row.accountNumber}}"></mifosx-account-number>
+        </td>
       </ng-container>
 
       <!-- External ID Column -->
       <ng-container matColumnDef="externalId">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> External Id </th>
         <td mat-cell *matCellDef="let row">
-          <mifosx-external-identifier externalId="{{row.externalId}}"></mifosx-external-identifier>
+          <mifosx-external-identifier display="left" externalId="{{row.externalId}}"></mifosx-external-identifier>
         </td>
       </ng-container>
 
@@ -56,15 +58,14 @@
         </td>
       </ng-container>
 
-      <!-- Color Column -->
       <ng-container matColumnDef="officeName">
         <th mat-header-cell *matHeaderCellDef> Office Name </th>
         <td mat-cell *matCellDef="let row"> {{row.officeName}} </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="[row.id,'general']" class="select-row">
-      </tr> 
+      <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="select-row">
+      </tr>
     </table>
 
     <mat-paginator [pageSize]="pageSize" [pageSizeOptions]="[5, 50, 100]" [length]="totalRows" (page)="pageChanged($event)"

diff --git a/src/app/loans/external-asset-owner.service.ts b/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>}

diff --git a/...eate-glim-account/glim-account-stepper/glim-preview-step/glim-preview-step.component.html b/...eate-glim-account/glim-account-stepper/glim-preview-step/glim-preview-step.component.html
@@ -38,7 +38,9 @@ <h3 class="mat-h3" fxFlexFill>Details</h3>
 
     <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>

diff --git a/...oans-account-stepper/loans-account-preview-step/loans-account-preview-step.component.html b/...oans-account-stepper/loans-account-preview-step/loans-account-preview-step.component.html
@@ -36,7 +36,9 @@ <h3 class="mat-h3" fxFlexFill>Details</h3>
 
   <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>

diff --git a/src/app/loans/loans-view/datatable-tab/datatable-tab.component.ts b/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;
     });
   }

diff --git a/src/app/loans/loans-view/external-asset-owner-tab/external-asset-owner-tab.component.html b/src/app/loans/loans-view/external-asset-owner-tab/external-asset-owner-tab.component.html
@@ -18,7 +18,7 @@ <h3>Active Asset Transfer</h3>
               <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 @@ <h3>Active Asset Transfer</h3>
                 <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 @@ <h3 fxFlex="90%">External Asset Owner</h3>
     <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>

diff --git a/src/app/loans/loans-view/external-asset-owner-tab/external-asset-owner-tab.component.ts b/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]));
+  }
 }
diff --git a/src/app/loans/loans-view/general-tab/general-tab.component.html b/src/app/loans/loans-view/general-tab/general-tab.component.html
@@ -113,7 +113,9 @@ <h3> Loan Details</h3>
           </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 @@ <h3> Loan Details </h3>
           </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>
 

diff --git a/src/app/loans/loans-view/loan-account-actions/view-guarantors/view-guarantors.component.html b/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>

diff --git a/src/app/loans/loans-view/loans-view.component.html b/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 ||

diff --git a/src/app/loans/loans-view/transactions/view-transaction/view-transaction.component.html b/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>

diff --git a/src/app/navigation/center-navigation/center-navigation.component.html b/src/app/navigation/center-navigation/center-navigation.component.html
@@ -4,15 +4,20 @@
     <div class="mat-typography">
       <mat-card-title>
         <h2>
-          {{ centerData.name }} 
+          {{ centerData.name }}
           <span [className]="centerData.status.code | statusLookup">
             <fa-icon matTooltip="{{ centerData.status.value }}" matTooltipPosition="right" icon="circle" size="lg"></fa-icon>
           </span>
         </h2>
       </mat-card-title>
       <mat-card-subtitle>
         <p>
-          Account No: {{ centerData.accountNo }} | {{ centerData.externalId ? '| External ID: ' + centerData.externalId : '' }}
+          Account No:
+          <mifosx-account-number accountNo="{{centerData.accountNo}}"></mifosx-account-number>
+        </p>
+        <p *ngIf="centerData.externalId">
+          External Id:
+          <mifosx-external-identifier externalId="{{centerData.externalId}}"></mifosx-external-identifier>
         </p>
       </mat-card-subtitle>
     </div>
@@ -105,7 +110,7 @@ <h2>
           {{ groupData ? groupData.length : '' }}
         </div>
 
-      </div>    
+      </div>
     </mat-tab>
 
     <mat-tab label="Loan Accounts" *ngIf="centerAccountsData && centerAccountsData.loanAccounts">
@@ -115,7 +120,7 @@ <h2>
     <mat-tab label="Savings Accounts" *ngIf="centerAccountsData && centerAccountsData.savingsAccounts">
       <mifosx-savings-account-table [savingsAccountData]="centerAccountsData.savingsAccounts"></mifosx-savings-account-table>
     </mat-tab>
-    
+
   </mat-tab-group>
 
 </mat-card-content>
diff --git a/src/app/navigation/office-navigation/office-navigation.component.html b/src/app/navigation/office-navigation/office-navigation.component.html
@@ -4,16 +4,16 @@
     <div class="mat-typography">
       <mat-card-title>
         <h2>
-          {{ officeData.name }} 
+          {{ officeData.name }}
         </h2>
       </mat-card-title>
       <mat-card-subtitle>
-        <p>
-          {{ officeData.externalId ? 'External ID: ' + officeData.externalId : '' }}
+        <p *ngIf="officeData.externalId">
+          External Id:<mifosx-external-identifier externalId="{{officeData.externalId}}"></mifosx-external-identifier>
         </p>
       </mat-card-subtitle>
     </div>
-  </mat-card-title-group>      
+  </mat-card-title-group>
 </mat-card-header>
 
 <mat-card-content>

diff --git a/src/app/organization/manage-funds/manage-funds.component.html b/src/app/organization/manage-funds/manage-funds.component.html
@@ -27,7 +27,9 @@
 
       <ng-container matColumnDef="externalId">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> External Id </th>
-        <td mat-cell *matCellDef="let charge"> {{ charge.externalId }} </td>
+        <td mat-cell *matCellDef="let charge">
+          <mifosx-external-identifier externalId="{{charge.externalId}}"></mifosx-external-identifier>
+        </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>

diff --git a/src/app/organization/manage-funds/view-fund/view-fund.component.html b/src/app/organization/manage-funds/view-fund/view-fund.component.html
@@ -26,7 +26,7 @@
         </div>
 
         <div fxFlex="50%">
-          {{ fundData.externalId }}
+          <mifosx-external-identifier externalId="{{fundData.externalId}}" completed="true"></mifosx-external-identifier>
         </div>
 
       </div>