feat (clients): add data in multi row datatables

fixes: #449

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

@@ -1,17 +1,16 @@
 <div class="tab-container mat-typography">
   <h3>{{datatableName}}</h3>
   <div fxLayout="row" fxLayoutAlign="flex-end">
-    <button mat-raised-button color="primary">
+    <button mat-raised-button color="primary" (click)="add()">
       <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;Add
     </button>
   </div>
-  <table mat-table *ngIf="dataObject.data[0]" [dataSource]="datatableData">
+  <table #dataTable mat-table [hidden]="!datatableData[0]" [dataSource]="datatableData">
 
     <ng-container *ngFor="let datatableColumn of datatableColumns;let i = index" [matColumnDef]="datatableColumn">
       <th mat-header-cell *matHeaderCellDef> {{datatableColumn}} </th>
       <td mat-cell *matCellDef="let data"> {{data.row[i]}} </td>
     </ng-container>
-
     <tr mat-header-row *matHeaderRowDef="datatableColumns"></tr>
     <tr mat-row *matRowDef="let row; columns: datatableColumns;"></tr>
   </table>

src/app/clients/clients-view/datatable-tab/multi-row/multi-row.component.ts

@@ -1,5 +1,17 @@
-import { Component, OnInit, Input, OnChanges } from '@angular/core';
+import { Component, OnInit, Input, OnChanges, ViewChild } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
+import { MatTable } from '@angular/material/table';
+import { MatDialog } from '@angular/material';
+import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-base';
+import { InputBase } from 'app/shared/form-dialog/formfield/model/input-base';
+import { SelectBase } from 'app/shared/form-dialog/formfield/model/select-base';
+import { DatePipe } from '@angular/common';
+
+/** Custom Components */
+import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
+
+/** Custom Services */
+import { ClientsService } from '../../../clients.service';
 
 @Component({
   selector: 'mifosx-multi-row',
@@ -7,13 +19,19 @@ import { ActivatedRoute } from '@angular/router';
   styleUrls: ['./multi-row.component.scss']
 })
 export class MultiRowComponent implements OnInit, OnChanges {
+  @ViewChild('dataTable') dataTableRef: MatTable<Element>;
   @Input() dataObject: any;
-  datatableName: String;
+  datatableName: string;
   datatableColumns: string[] = [];
   datatableData: any;
+  clientId: string;
 
-
-  constructor(private route: ActivatedRoute) { }
+  constructor(private route: ActivatedRoute,
+    private datePipe: DatePipe,
+    private clientService: ClientsService,
+    private dialog: MatDialog) {
+    this.clientId = this.route.parent.parent.snapshot.paramMap.get('clientId');
+  }
 
   ngOnInit() {
     this.route.params.subscribe((routeParams: any) => {
@@ -26,4 +44,78 @@ export class MultiRowComponent implements OnInit, OnChanges {
     });
     this.datatableData = this.dataObject.data;
   }
+
+  add() {
+    let dataTableEntryObject: any = {
+      locale: 'en'
+    };
+    const dateTransformColumns: string[] = [];
+    const columns = this.dataObject.columnHeaders.filter((column: any) => {
+      return ((column.columnName !== 'id') && (column.columnName !== 'client_id'));
+    });
+    const formfields: FormfieldBase[] = columns.map((column: any) => {
+      if (column.columnDisplayType === 'INTEGER' || column.columnDisplayType === 'STRING') {
+        return new InputBase({
+          controlName: column.columnName,
+          label: column.columnName,
+          value: '',
+          type: (column.columnDisplayType === 'INTEGER') ? 'number' : 'text',
+          required: (column.isColumnNullable) ? false : true
+        });
+      }
+      if (column.columnDisplayType === 'CODELOOKUP') {
+        return new SelectBase({
+          controlName: column.columnName,
+          label: column.columnName,
+          value: '',
+          options: { label: 'value', value: 'id', data: column.columnValues },
+          required: (column.isColumnNullable) ? false : true
+        });
+      }
+      if (column.columnDisplayType === 'DATE') {
+        dateTransformColumns.push(column.columnName);
+        dataTableEntryObject.dateFormat = 'yyyy-MM-dd';
+        return new InputBase({
+          controlName: column.columnName,
+          label: column.columnName,
+          value: '',
+          type: 'date',
+          required: (column.isColumnNullable) ? false : true
+        });
+      }
+      if (column.columnDisplayType === 'DATETIME') {
+        dateTransformColumns.push(column.columnName);
+        dataTableEntryObject.dateFormat = 'yyyy-MM-dd HH:mm';
+        return new InputBase({
+          controlName: column.columnName,
+          label: column.columnName,
+          value: '',
+          type: 'datetime-local',
+          required: (column.isColumnNullable) ? false : true
+        });
+      }
+
+    });
+    const data = {
+      title: 'Add ' + this.datatableName,
+      formfields: formfields
+    };
+    const addDialogRef = this.dialog.open(FormDialogComponent, { data });
+    addDialogRef.afterClosed().subscribe((response: any) => {
+      if (response.data) {
+        // format Dates
+        dateTransformColumns.forEach((column) => {
+          response.data.value[column] = this.datePipe.transform(response.data.value[column], dataTableEntryObject.dateFormat);
+        });
+        dataTableEntryObject = { ...response.data.value, ...dataTableEntryObject };
+        this.clientService.addClientDatatableEntry(this.clientId, this.datatableName, dataTableEntryObject).subscribe(() => {
+          this.clientService.getClientDatatable(this.clientId, this.datatableName).subscribe((dataObject: any) => {
+            this.datatableData = dataObject.data;
+            this.dataTableRef.renderRows();
+          });
+        });
+      }
+    });
+  }
+
 }

src/app/clients/clients.service.ts

@@ -43,6 +43,10 @@ export class ClientsService {
     return this.http.get(`/datatables/${datatableName}/${clientId}`, { params: httpParams });
   }
 
+  addClientDatatableEntry(clientId: string, datatableName: string, data: any) {
+    const httpParams = new HttpParams().set('genericResultSet', 'true');
+    return this.http.post(`/datatables/${datatableName}/${clientId}`, data, { params: httpParams });
+  }
 
   getClientAccountData(clientId: string) {
     return this.http.get(`/clients/${clientId}/accounts`);