Client and External Id

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

@@ -16,7 +16,7 @@
 
     <mat-form-field fxFlex="48%">
       <mat-label>Legal Form</mat-label>
-      <mat-select formControlName="legalFormId">
+      <mat-select required formControlName="legalFormId">
         <mat-option *ngFor="let legalForm of legalFormOptions" [value]="legalForm.id">
           {{ legalForm.value }}
         </mat-option>

src/app/clients/client-stepper/client-general-step/client-general-step.component.ts

@@ -1,6 +1,7 @@
 /** Angular Imports */
 import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
+import { ClientsService } from 'app/clients/clients.service';
 import { Dates } from 'app/core/utils/dates';
 
 /** Custom Services */
@@ -51,10 +52,12 @@ export class ClientGeneralStepComponent implements OnInit {
    * @param {FormBuilder} formBuilder Form Builder
    * @param {Dates} dateUtils Date Utils
    * @param {SettingsService} settingsService Setting service
+   * @param {ClientsService} clientService Client service
    */
   constructor(private formBuilder: FormBuilder,
               private dateUtils: Dates,
-              private settingsService: SettingsService) {
+              private settingsService: SettingsService,
+              private clientService: ClientsService) {
     this.setClientForm();
   }
 
@@ -71,7 +74,7 @@ export class ClientGeneralStepComponent implements OnInit {
     this.createClientForm = this.formBuilder.group({
       'officeId': ['', Validators.required],
       'staffId': [''],
-      'legalFormId': [''],
+      'legalFormId': ['', Validators.required],
       'isStaff': [false],
       'active': [false],
       'addSavings': [false],
@@ -143,6 +146,11 @@ export class ClientGeneralStepComponent implements OnInit {
         this.createClientForm.removeControl('savingsProductId');
       }
     });
+    this.createClientForm.get('officeId').valueChanges.subscribe((officeId: number) => {
+      this.clientService.getClientWithOfficeTemplate(officeId).subscribe((clientTemplate: any) => {
+        this.staffOptions = clientTemplate.staffOptions;
+      });
+    });
   }
 
   /**

src/app/clients/clients-view/clients-view.component.html

@@ -29,20 +29,23 @@
         <mat-card-title>
           <h3>
             <i class="fa fa-stop" [ngClass]="clientViewData.status.code|statusLookup" [matTooltip]="clientViewData.status.value"></i>
-            Client Name : {{clientViewData.displayName}}
+            <b>Client Name :</b> {{clientViewData.displayName}}
           </h3>
         </mat-card-title>
 
         <mat-card-subtitle>
           <p>
-            Client #:{{clientViewData.accountNo}} | External
-            Id: {{clientViewData.externalId}} | Staff:{{clientViewData.staffName || 'Unassigned'}}<br />
-            Activation Date : {{(clientViewData.activationDate) ? (clientViewData.activationDate | dateFormat) :'Not Activated'}}<br />
-            Member Of :
-            <span *ngFor="let group of clientViewData.groups">
-              <a>{{group.name}}</a>&nbsp;
+            <b>Office :</b> {{clientViewData.officeName}}<br />
+            <b>Client :</b> {{clientViewData.accountNo}}<br />
+            <b>External Id:</b> {{clientViewData.externalId}}<br />
+            <span *ngIf="clientViewData.staffName"><b>Staff :</b> {{clientViewData.staffName || 'Unassigned'}}<br /></span>
+            <span *ngIf="clientViewData.activationDate"><b>Activation Date :</b> {{clientViewData.activationDate | dateFormat}}<br /></span>
+            <span *ngIf="clientViewData.groups.length > 0">
+              Member Of :
+              <span *ngFor="let group of clientViewData.groups">
+                <a>{{group.name}}</a>&nbsp;
+              </span>
             </span>
-            <span *ngIf="!clientViewData.groups">Unassigned</span>
             <br/>
           </p>
         </mat-card-subtitle>

src/app/clients/clients-view/clients-view.component.ts

@@ -112,7 +112,6 @@ export class ClientsViewComponent implements OnInit {
     }
   }
 
-
   /**
    * Refetches data for the component
    * TODO: Replace by a custom reload component instead of hard-coded back-routing.

src/app/clients/clients.component.html

@@ -34,7 +34,9 @@
       <!-- External ID Column -->
       <ng-container matColumnDef="externalid">
         <th mat-header-cell *matHeaderCellDef mat-sort-header="externalId"> ExternalID </th>
-        <td mat-cell *matCellDef="let row"> {{row.externalId}} </td>
+        <td mat-cell *matCellDef="let row">
+          <mifosx-external-identifier externalId="{{row.externalId}}"></mifosx-external-identifier>
+        </td>
       </ng-container>
 
       <!-- Status Column -->

src/app/clients/clients.service.ts

@@ -41,6 +41,10 @@ export class ClientsService {
     return this.http.get('/clients/template');
   }
 
+  getClientWithOfficeTemplate(officeId: number): Observable<any> {
+    return this.http.get(`/clients/template?officeId=${officeId}&staffInSelectedOfficeOnly=true`);
+  }
+
   getClientData(clientId: string) {
     return this.http.get(`/clients/${clientId}`);
   }

src/app/clients/create-client/create-client.component.ts

@@ -104,11 +104,13 @@ export class CreateClientComponent {
     if (this.legalFormType === 2) {
       legalFormTypeVal = 'entity';
     }
-    this.clientTemplate.datatables.forEach((datatable: any) => {
-      if (datatable.entitySubType.toLowerCase() === legalFormTypeVal) {
-        this.datatables.push(datatable);
-      }
-    });
+    if (this.clientTemplate.datatables) {
+      this.clientTemplate.datatables.forEach((datatable: any) => {
+        if (datatable.entitySubType.toLowerCase() === legalFormTypeVal) {
+          this.datatables.push(datatable);
+        }
+      });
+    }
   }
 
   legalFormChange(eventData: { legalForm: number }) {