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

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

src/app/navigation/center-navigation/center-navigation.component.html

@@ -4,7 +4,7 @@
     <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>
@@ -12,7 +12,12 @@
       </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 @@
           {{ groupData ? groupData.length : '' }}
         </div>
 
-      </div>    
+      </div>
     </mat-tab>
 
     <mat-tab label="Loan Accounts" *ngIf="centerAccountsData && centerAccountsData.loanAccounts">
@@ -115,7 +120,7 @@
     <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>

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>