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

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

src/app/clients/client-stepper/client-preview-step/client-preview-step.component.html

@@ -32,7 +32,9 @@
 
   <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">

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 @@
 
         <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 |

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)"