Client datatables to be shown on the Client creation page

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

@@ -0,0 +1,48 @@
+<form [formGroup]="datatableForm">
+
+  <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
+
+    <div *ngFor="let datatableInput of datatableInputs" fxFlex="48%">
+      <mat-form-field fxFlex="100%" *ngIf="!isBoolean(datatableInput.columnDisplayType)">
+
+        <mat-label>{{getInputName(datatableInput)}}</mat-label>
+
+        <mat-select *ngIf="isDropdown(datatableInput.columnDisplayType)" formControlName="{{datatableInput.controlName}}">
+          <mat-option *ngFor="let code of datatableInput.columnValues" [value]="code.id">
+            {{ code.value }}
+          </mat-option>
+        </mat-select>
+
+        <input matInput type="number" *ngIf="isNumeric(datatableInput.columnDisplayType)"
+        formControlName="{{datatableInput.controlName}}">
+
+        <input matInput *ngIf="isString(datatableInput.columnDisplayType)"
+        formControlName="{{datatableInput.controlName}}">
+
+        <span *ngIf="isDate(datatableInput.columnDisplayType)" (click)="datePicker.open()">
+          <input matInput [matDatepicker]="datePicker" formControlName="{{datatableInput.controlName}}" class="date-picker">
+          <mat-datepicker-toggle matSuffix [for]="datePicker"></mat-datepicker-toggle>
+          <mat-datepicker #datePicker></mat-datepicker>
+        </span>
+      </mat-form-field>
+
+      <mat-checkbox *ngIf="isBoolean(datatableInput.columnDisplayType)" formControlName="{{datatableInput.controlName}}"
+        labelPosition="before" class="margin-v">
+        {{getInputName(datatableInput)}}
+      </mat-checkbox>
+    </div>
+
+  </div>
+
+  <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
+    <button mat-raised-button matStepperPrevious disabled>
+      <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+      Previous
+    </button>
+    <button mat-raised-button matStepperNext>
+      Next&nbsp;&nbsp;
+      <fa-icon icon="arrow-right"></fa-icon>
+    </button>
+  </div>
+
+</form>

src/app/clients/client-stepper/client-datatable-step/client-datatable-step.component.scss

@@ -0,0 +1,7 @@
+.date-picker {
+  width: 92%;
+}
+
+mat-checkbox {
+  margin-top: 30px;
+}

src/app/clients/client-stepper/client-datatable-step/client-datatable-step.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ClientDatatableStepComponent } from './client-datatable-step.component';
+
+describe('ClientDatatableStepComponent', () => {
+  let component: ClientDatatableStepComponent;
+  let fixture: ComponentFixture<ClientDatatableStepComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ClientDatatableStepComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ClientDatatableStepComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,104 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { Dates } from 'app/core/utils/dates';
+import { SettingsService } from 'app/settings/settings.service';
+
+@Component({
+  selector: 'mifosx-client-datatable-step',
+  templateUrl: './client-datatable-step.component.html',
+  styleUrls: ['./client-datatable-step.component.scss']
+})
+export class ClientDatatableStepComponent implements OnInit {
+  /** Input Fields Data */
+  @Input() datatableData: any;
+  /** Create Input Form */
+  datatableForm: FormGroup;
+
+  datatableInputs: any = [];
+
+  constructor(private formBuilder: FormBuilder,
+    private settingsService: SettingsService,
+    private dateUtils: Dates) { }
+
+  ngOnInit(): void {
+    this.datatableInputs = this.datatableData.columnHeaderData.filter((column: any) => {
+      return ((column.columnName !== 'id') && (column.columnName !== 'client_id') && (column.columnName !== 'created_at') && (column.columnName !== 'updated_at'));
+    });
+    const inputItems: any = {};
+    this.datatableInputs.forEach((input: any) => {
+      input.controlName = this.getInputName(input);
+      if (!input.isColumnNullable) {
+        if (this.isNumeric(input.columnDisplayType)) {
+          inputItems[input.controlName] = new FormControl(0, [Validators.required]);
+        } else {
+          inputItems[input.controlName] = new FormControl('', [Validators.required]);
+        }
+      } else {
+        inputItems[input.controlName] = new FormControl('');
+      }
+    });
+    this.datatableForm = this.formBuilder.group(inputItems);
+  }
+
+  getInputName(datatableInput: any): string {
+    if (datatableInput.columnName && datatableInput.columnName.includes('_cd_')) {
+      return datatableInput.columnName.split('_cd_')[0];
+    }
+    return datatableInput.columnName;
+  }
+
+  isNumeric(columnType: string) {
+    return this.isColumnType(columnType, 'INTEGER') || this.isColumnType(columnType, 'DECIMAL');
+  }
+
+  isDate(columnType: string) {
+    return this.isColumnType(columnType, 'DATE') || this.isColumnType(columnType, 'DATETIME');
+  }
+
+  isBoolean(columnType: string) {
+    return this.isColumnType(columnType, 'BOOLEAN');
+  }
+
+  isDropdown(columnType: string) {
+    return this.isColumnType(columnType, 'CODELOOKUP');
+  }
+
+  isString(columnType: string) {
+    return this.isColumnType(columnType, 'STRING');
+  }
+
+  isColumnType(columnType: string, expectedType: string) {
+    return (columnType === expectedType);
+  }
+
+  get payload(): any {
+    const dateFormat = this.settingsService.dateFormat;
+    const datatableDataValues = this.datatableForm.value;
+    const data = {
+      locale: this.settingsService.language.code
+    };
+    let existDate = false;
+    this.datatableInputs.forEach((input: any) => {
+      const controlName = this.getInputName(input);
+      if (this.isNumeric(input.columnDisplayType)) {
+        data[input.columnName] = datatableDataValues[controlName] * 1;
+      } else if (this.isDate(input.columnDisplayType)) {
+        data[input.columnName] = this.dateUtils.formatDate(datatableDataValues[controlName], dateFormat);
+        existDate = true;
+      } else {
+        data[input.columnName] = datatableDataValues[controlName];
+      }
+    });
+
+    if (existDate) {
+      data['dateFormat'] = dateFormat;
+    }
+
+    const payload = {
+      registeredTableName: this.datatableData.registeredTableName,
+      data: data
+    };
+    return payload;
+  }
+
+}

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

@@ -81,7 +81,7 @@ export class ClientGeneralStepComponent implements OnInit {
       'dateOfBirth': [''],
       'clientTypeId': [''],
       'clientClassificationId': [''],
-      'submittedOnDate': ['']
+      'submittedOnDate': [this.settingsService.businessDate, Validators.required]
     });
   }