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

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

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>

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>

src/app/organization/offices/offices.component.html

@@ -170,11 +170,11 @@
                 </div>
 
                 <div fxFlex="50%" class="mat-body-strong" *ngIf="office.externalId">
-                  {{'External ID'|translate}}
+                  {{'External Id'|translate}}
                 </div>
 
                 <div fxFlex="50%" *ngIf="office.externalId">
-                  {{ office.externalId }}
+                  <mifosx-external-identifier externalId="{{office.externalId}}"></mifosx-external-identifier>
                 </div>
 
               </div>

src/app/organization/offices/view-office/general-tab/general-tab.component.html

@@ -34,8 +34,11 @@
     <div fxFlex="45%" class="mat-body-strong left">
       External Id
     </div>
-    <div fxFlex="50%" class="right">
-      {{ officeData.externalId ? officeData.externalId : 'Unassigned' }}
+    <div fxFlex="50%" class="right" *ngIf="officeData.externalId">
+      <mifosx-external-identifier externalId="{{officeData.externalId}}"></mifosx-external-identifier>
+    </div>
+    <div fxFlex="50%" class="right" *ngIf="!officeData.externalId">
+      Unassigned
     </div>
   </div>