From 8bb4fd5b59e8093f9ca891be9bd17814434f134b Mon Sep 17 00:00:00 2001 From: Jivjyot Singh Date: Fri, 26 Jul 2019 06:15:02 +0530 Subject: [PATCH] feat (clients): add data in multi row datatables fixes: #449 --- .../multi-row/multi-row.component.html | 5 +- .../multi-row/multi-row.component.ts | 100 +++++++++++++++++- src/app/clients/clients.service.ts | 4 + 3 files changed, 102 insertions(+), 7 deletions(-) diff --git a/src/app/clients/clients-view/datatable-tab/multi-row/multi-row.component.html b/src/app/clients/clients-view/datatable-tab/multi-row/multi-row.component.html index 28511a64e..d1753b1d7 100644 --- a/src/app/clients/clients-view/datatable-tab/multi-row/multi-row.component.html +++ b/src/app/clients/clients-view/datatable-tab/multi-row/multi-row.component.html @@ -1,17 +1,16 @@

{{datatableName}}

-
- +
-
{{datatableColumn}} {{data.row[i]}}
diff --git a/src/app/clients/clients-view/datatable-tab/multi-row/multi-row.component.ts b/src/app/clients/clients-view/datatable-tab/multi-row/multi-row.component.ts index 422b2945e..c8df33fce 100644 --- a/src/app/clients/clients-view/datatable-tab/multi-row/multi-row.component.ts +++ b/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; @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(); + }); + }); + } + }); + } + } diff --git a/src/app/clients/clients.service.ts b/src/app/clients/clients.service.ts index e3b610d29..3343da192 100644 --- a/src/app/clients/clients.service.ts +++ b/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`);