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

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

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

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

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

@@ -23,8 +23,8 @@
           <p>
             Account #: {{sharesAccountData.accountNo}} | Client Name: {{sharesAccountData.clientName}}<br/>
             Current Market Price: {{sharesAccountData.currency.displaySymbol}}&nbsp;{{sharesAccountData.currentMarketPrice}}<br/>
-            Lockin Period: {{sharesAccountData.lockinPeriod ? sharesAccountData.lockinPeriod : 'N/A'}} 
-            {{sharesAccountData.lockinPeriod ? sharesAccountData.lockPeriodTypeEnum.value : ''}} 
+            Lockin Period: {{sharesAccountData.lockinPeriod ? sharesAccountData.lockinPeriod : 'N/A'}}
+            {{sharesAccountData.lockinPeriod ? sharesAccountData.lockPeriodTypeEnum.value : ''}}
           </p>
         </mat-card-subtitle>
       </div>
@@ -37,7 +37,7 @@
         <button mat-raised-button *mifosxHasPermission="button.taskPermissionName" (click)="doAction(button.name)">
           <i class="{{button.icon}}"></i> {{button.name}}</button>
       </ng-container>
-  
+
       <ng-container *ngIf="buttonConfig.options.length">
         <button mat-raised-button [matMenuTriggerFor]="More">More</button>
         <mat-menu #More="matMenu">
@@ -46,7 +46,7 @@
         </span>
         </mat-menu>
       </ng-container>
-  
+
     </mat-card-actions>
 
   </mat-card-header>
@@ -69,11 +69,21 @@
             </tr>
             <tr>
               <td>External Id</td>
-              <td>{{sharesAccountData.externalId ? sharesAccountData.externalId : 'Not Provided'}}</td>
+              <td *ngIf="sharesAccountData.externalId">
+                <mifosx-external-identifier externalId="{{sharesAccountData.externalId}}"></mifosx-external-identifier>
+              </td>
+              <td *ngIf="!sharesAccountData.externalId">
+                Unassigned
+              </td>
             </tr>
             <tr>
               <td>Linked Savings Account(Dividend Posting)</td>
-              <td>{{sharesAccountData.savingsAccountNumber ? sharesAccountData.savingsAccountNumber : 'Unassigned'}}</td>
+              <td *ngIf="sharesAccountData.savingsAccountNumber">
+                <mifosx-account-number accountNo="{{sharesAccountData.savingsAccountNumber}}"></mifosx-account-number>
+              </td>
+              <td *ngIf="!sharesAccountData.savingsAccountNumber">
+                Unassigned
+              </td>
             </tr>
           </tbody>
         </table>