Client datatables to be shown on the Client creation page based on legal form

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

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
 import { Dates } from 'app/core/utils/dates';
 
@@ -16,6 +16,8 @@ import { SettingsService } from 'app/settings/settings.service';
 })
 export class ClientGeneralStepComponent implements OnInit {
 
+  @Output() legalFormChangeEvent = new EventEmitter<{ legalForm: number }>();
+
   /** Minimum date allowed. */
   minDate = new Date(2000, 0, 1);
   /** Maximum date allowed. */
@@ -104,7 +106,8 @@ export class ClientGeneralStepComponent implements OnInit {
    * Adds controls conditionally.
    */
   buildDependencies() {
-    this.createClientForm.get('legalFormId').valueChanges.subscribe((legalFormId: any) => {
+    this.createClientForm.get('legalFormId').valueChanges.subscribe((legalFormId: number) => {
+      this.legalFormChangeEvent.emit({ legalForm: legalFormId });
       if (legalFormId === 1) {
         this.createClientForm.removeControl('fullname');
         this.createClientForm.removeControl('clientNonPersonDetails');

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

@@ -26,7 +26,7 @@
 
       <ng-template matStepLabel>GENERAL</ng-template>
 
-      <mifosx-client-general-step [clientTemplate]="clientTemplate"></mifosx-client-general-step>
+      <mifosx-client-general-step [clientTemplate]="clientTemplate" (legalFormChangeEvent)="legalFormChange($event)"></mifosx-client-general-step>
 
     </mat-step>
 
@@ -50,7 +50,7 @@
 
     </mat-step>
 
-    <mat-step *ngFor="let datatable of clientTemplate.datatables">
+    <mat-step *ngFor="let datatable of datatables">
 
       <ng-template matStepLabel>{{datatable.registeredTableName}}</ng-template>
 

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

@@ -33,6 +33,9 @@ export class CreateClientComponent {
   /** Get handle on dtclient tags in the template */
   @ViewChildren('dtclient') clientDatatables: QueryList<ClientDatatableStepComponent>;
 
+  datatables: any = [];
+  legalFormType = 1;
+
   /** Client Template */
   clientTemplate: any;
   /** Client Address Field Config */
@@ -52,6 +55,7 @@ export class CreateClientComponent {
     this.route.data.subscribe((data: { clientTemplate: any, clientAddressFieldConfig: any }) => {
       this.clientTemplate = data.clientTemplate;
       this.clientAddressFieldConfig = data.clientAddressFieldConfig;
+      this.setDatatables();
     });
   }
 
@@ -94,6 +98,24 @@ export class CreateClientComponent {
     return areValids;
   }
 
+  setDatatables(): void {
+    this.datatables = [];
+    let legalFormTypeVal = 'Person';
+    if (this.legalFormType === 2) {
+      legalFormTypeVal = 'Entity';
+    }
+    this.clientTemplate.datatables.forEach((datatable: any) => {
+      if (datatable.entitySubType === legalFormTypeVal) {
+        this.datatables.push(datatable);
+      }
+    });
+  }
+
+  legalFormChange(eventData: { legalForm: number }) {
+    this.legalFormType = eventData.legalForm;
+    this.setDatatables();
+  }
+
   /**
    * Submits the create client form.
    */