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

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

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

@@ -16,7 +16,12 @@
 
   <div fxFlexFill>
     <span fxFlex="40%">External Id</span>
-    <span fxFlex="60%">{{ savingsAccount.externalId || 'Unassigned' }}</span>
+    <span fxFlex="60%" *ngIf="savingsAccount.externalId">
+      <mifosx-external-identifier externalId="{{savingsAccount.externalId}}"></mifosx-external-identifier>
+    </span>
+    <span fxFlex="60%" *ngIf="!savingsAccount.externalId">
+      Unassigned
+    </span>
   </div>
 
   <div fxFlexFill>

src/app/savings/savings-account-view/savings-account-view.component.html

@@ -18,7 +18,8 @@
               [matTooltip]="savingsAccountData.status.value" *ngIf="!savingsAccountData.subStatus.block"></i>
             <i class="fa fa-stop" [ngClass]="savingsAccountData.subStatus.value | statusLookup"
               [matTooltip]="savingsAccountData.subStatus.value" *ngIf="savingsAccountData.subStatus.block"></i>
-            Savings Product : {{savingsAccountData.savingsProductName}}<span class="m-l-10">({{savingsAccountData.accountNo}})</span>
+            Savings Product : {{savingsAccountData.savingsProductName}}<span class="m-l-10">
+              <mifosx-account-number accountNo="{{savingsAccountData.accountNo}}"></mifosx-account-number></span>
           </h3>
           <div fxFlex="5%">
             <button mat-icon-button [matMenuTriggerFor]="accountMenu" aria-label="Loan account actions"
@@ -213,7 +214,10 @@
               </tr>
               <tr>
                 <td>External Id</td>
-                <td>{{savingsAccountData.externalId ? savingsAccountData.externalId : 'Not Provided'}}</td>
+                <td *ngIf="savingsAccountData.externalId">
+                  <mifosx-external-identifier externalId="{{savingsAccountData.externalId}}"></mifosx-external-identifier>
+                </td>
+                <td *ngIf="!savingsAccountData.externalId">Not Provided</td>
               </tr>
             </tbody>
           </table>
@@ -238,8 +242,10 @@
               </tr>
               <tr>
                 <td>External Id</td>
-                <td>{{savingsAccountData.externalId ? savingsAccountData.externalId : 'Not Provided'}}</td>
-              </tr>
+                <td *ngIf="savingsAccountData.externalId">
+                  <mifosx-external-identifier externalId="{{savingsAccountData.externalId}}"></mifosx-external-identifier>
+                </td>
+                <td *ngIf="!savingsAccountData.externalId">Not Provided</td>              </tr>
               <tr>
                 <td>Currency</td>
                 <td>{{savingsAccountData.currency.name}} [{{savingsAccountData.currency.code}}]</td>