Merge pull request #1547 from josehernandezfintecheandomx/enhancement/create_client_with_datatables

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]
     });
   }
 

src/app/clients/clients-view/datatable-tab/single-row/single-row.component.html

@@ -11,9 +11,29 @@
       <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;Delete All
     </button>
   </div>
-  <mat-list role="list" *ngIf="dataObject.data[0]">
-    <mat-list-item role="listitem" *ngFor="let columnHeader of dataObject.columnHeaders;let i = index">
-      {{columnHeader.columnName}} : {{dataObject.data[0].row[i]}}
-    </mat-list-item>
-  </mat-list>
-</div>
+  <ng-container>
+
+    <div *ngFor="let columnHeader of dataObject.columnHeaders;let i = index" class="table-data">
+
+      <div fxFlex="45%" class="mat-body-strong left">
+        {{columnHeader.columnName}}
+      </div>
+
+      <div fxFlex="45%" [ngSwitch]="columnHeader.columnDisplayType" class="right">
+        <span *ngSwitchCase="'DATE'">
+          {{dataObject.data[0].row[i] | dateFormat}}
+        </span>
+        <span *ngSwitchCase="'DATETIME'">
+          {{dataObject.data[0].row[i] | datetimeFormat}}
+        </span>
+        <span *ngSwitchCase="'INTEGER' || 'DECIMAL'">
+          {{dataObject.data[0].row[i] | number}}
+        </span>
+        <span *ngSwitchDefault>
+          {{dataObject.data[0].row[i]}}
+        </span>
+      </div>
+    </div>
+  </ng-container>
+
+</div>

src/app/clients/clients-view/datatable-tab/single-row/single-row.component.scss

@@ -6,3 +6,8 @@
     margin-left: 1%;
   }
 }
+
+.table-data {
+  margin-top: 20px;
+  align-items: center;
+}

src/app/clients/clients.module.ts

@@ -58,6 +58,7 @@ import { ClientFamilyMemberDialogComponent } from './client-stepper/client-famil
 import { CaptureImageDialogComponent } from './clients-view/custom-dialogs/capture-image-dialog/capture-image-dialog.component';
 import { CreateSelfServiceUserComponent } from './clients-view/client-actions/create-self-service-user/create-self-service-user.component';
 import { AddClientCollateralComponent } from './clients-view/client-actions/add-client-collateral/add-client-collateral.component';
+import { ClientDatatableStepComponent } from './client-stepper/client-datatable-step/client-datatable-step.component';
 
 
 /**
@@ -122,7 +123,8 @@ import { AddClientCollateralComponent } from './clients-view/client-actions/add-
     ClientFamilyMemberDialogComponent,
     CaptureImageDialogComponent,
     CreateSelfServiceUserComponent,
-    AddClientCollateralComponent
+    AddClientCollateralComponent,
+    ClientDatatableStepComponent
   ],
   providers: [ ]
 

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

@@ -50,7 +50,15 @@
 
     </mat-step>
 
-    <mat-step *ngIf="clientGeneralForm.valid" completed>
+    <mat-step *ngFor="let datatable of clientTemplate.datatables">
+
+      <ng-template matStepLabel>{{datatable.registeredTableName}}</ng-template>
+
+      <mifosx-client-datatable-step [datatableData]="datatable" #dtclient></mifosx-client-datatable-step>
+
+    </mat-step>
+
+    <mat-step *ngIf="areFormvalids()" completed>
 
       <ng-template matStepLabel>PREVIEW</ng-template>
 

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

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, ViewChild } from '@angular/core';
+import { Component, QueryList, ViewChild, ViewChildren } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/router';
 
 /** Custom Services */
@@ -9,11 +9,11 @@ import { ClientsService } from '../clients.service';
 import { ClientGeneralStepComponent } from '../client-stepper/client-general-step/client-general-step.component';
 import { ClientFamilyMembersStepComponent } from '../client-stepper/client-family-members-step/client-family-members-step.component';
 import { ClientAddressStepComponent } from '../client-stepper/client-address-step/client-address-step.component';
+import { ClientDatatableStepComponent } from '../client-stepper/client-datatable-step/client-datatable-step.component';
 
 /** Custom Services */
 import { SettingsService } from 'app/settings/settings.service';
 
-
 /**
  * Create Client Component.
  */
@@ -30,6 +30,8 @@ export class CreateClientComponent {
   @ViewChild(ClientFamilyMembersStepComponent, { static: true }) clientFamilyMembersStep: ClientFamilyMembersStepComponent;
   /** Client Address Step */
   @ViewChild(ClientAddressStepComponent, { static: true }) clientAddressStep: ClientAddressStepComponent;
+  /** Get handle on dtclient tags in the template */
+  @ViewChildren('dtclient') clientDatatables: QueryList<ClientDatatableStepComponent>;
 
   /** Client Template */
   clientTemplate: any;
@@ -77,6 +79,21 @@ export class CreateClientComponent {
       };
     }
   }
+
+  areFormvalids(): boolean {
+    let areValids = this.clientGeneralForm.valid;
+    if (this.clientTemplate.isAddressEnabled) {
+      areValids = areValids && (this.clientAddressStep.address.address.length > 0);
+    }
+    if (this.clientTemplate.datatables && this.clientTemplate.datatables.length > 0 && this.clientDatatables) {
+      this.clientDatatables.forEach((clientDatatable: ClientDatatableStepComponent) => {
+        areValids = areValids && clientDatatable.datatableForm.valid;
+      });
+    }
+
+    return areValids;
+  }
+
   /**
    * Submits the create client form.
    */
@@ -89,6 +106,15 @@ export class CreateClientComponent {
       dateFormat,
       locale
     };
+
+    if (this.clientTemplate.datatables && this.clientTemplate.datatables.length > 0) {
+      const datatables: any[] = [];
+      this.clientDatatables.forEach((clientDatatable: ClientDatatableStepComponent) => {
+        datatables.push(clientDatatable.payload);
+      });
+      clientData['datatables'] = datatables;
+    }
+
     this.clientsService.createClient(clientData).subscribe((response: any) => {
       this.router.navigate(['../', response.resourceId], { relativeTo: this.route });
     });