feat(clients): add/edit/delete data in single row datatables

- add checkbox-base.ts 
- update clients.service.ts file
- add delete feature in multi-row and single datatables

fixes: #460

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

@@ -4,6 +4,9 @@
     <button mat-raised-button color="primary" (click)="add()">
       <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;Add
     </button>
+    <button class="delete-button" mat-raised-button color="warn" (click)="delete()" *ngIf="showDeleteBotton">
+      <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;Delete All
+    </button>
   </div>
   <table #dataTable mat-table [hidden]="!datatableData[0]" [dataSource]="datatableData">
 
@@ -14,6 +17,4 @@
     <tr mat-header-row *matHeaderRowDef="datatableColumns"></tr>
     <tr mat-row *matRowDef="let row; columns: datatableColumns;"></tr>
   </table>
-
-
 </div>

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

@@ -5,10 +5,12 @@ 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 { CheckboxBase } from 'app/shared/form-dialog/formfield/model/checkbox-base';
 import { DatePipe } from '@angular/common';
 
 /** Custom Components */
 import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
+import { DeleteDialogComponent } from '../../../../shared/delete-dialog/delete-dialog.component';
 
 /** Custom Services */
 import { ClientsService } from '../../../clients.service';
@@ -25,10 +27,11 @@ export class MultiRowComponent implements OnInit, OnChanges {
   datatableColumns: string[] = [];
   datatableData: any;
   clientId: string;
+  showDeleteBotton: boolean;
 
   constructor(private route: ActivatedRoute,
     private datePipe: DatePipe,
-    private clientService: ClientsService,
+    private clientsService: ClientsService,
     private dialog: MatDialog) {
     this.clientId = this.route.parent.parent.snapshot.paramMap.get('clientId');
   }
@@ -43,6 +46,7 @@ export class MultiRowComponent implements OnInit, OnChanges {
       return columnHeader.columnName;
     });
     this.datatableData = this.dataObject.data;
+    this.showDeleteBotton = this.datatableData[0] ? true : false;
   }
 
   add() {
@@ -54,47 +58,54 @@ export class MultiRowComponent implements OnInit, OnChanges {
       return ((column.columnName !== 'id') && (column.columnName !== 'client_id'));
     });
     const formfields: FormfieldBase[] = columns.map((column: any) => {
-      if (column.columnDisplayType === 'INTEGER' || column.columnDisplayType === 'STRING') {
+      switch (column.columnDisplayType) {
-        return new InputBase({
+        case 'INTEGER':
+        case 'STRING':
+        case 'DECIMAL':
+        case 'TEXT': return new InputBase({
           controlName: column.columnName,
           label: column.columnName,
           value: '',
-          type: (column.columnDisplayType === 'INTEGER') ? 'number' : 'text',
+          type: (column.columnDisplayType === 'INTEGER' || column.columnDisplayType === 'DECIMAL') ? 'number' : 'text',
           required: (column.isColumnNullable) ? false : true
         });
-      }
+        case 'BOOLEAN': return new CheckboxBase({
-      if (column.columnDisplayType === 'CODELOOKUP') {
+          controlName: column.columnName,
-        return new SelectBase({
+          label: column.columnName,
+          value: '',
+          type: 'checkbox',
+          required: (column.isColumnNullable) ? false : true
+        });
+        case 'CODELOOKUP': return new SelectBase({
           controlName: column.columnName,
           label: column.columnName,
           value: '',
           options: { label: 'value', value: 'id', data: column.columnValues },
           required: (column.isColumnNullable) ? false : true
         });
+        case '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
+          });
+        }
+        case '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
+          });
+        }
       }
-      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,
@@ -108,8 +119,8 @@ export class MultiRowComponent implements OnInit, OnChanges {
           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.clientsService.addClientDatatableEntry(this.clientId, this.datatableName, dataTableEntryObject).subscribe(() => {
-          this.clientService.getClientDatatable(this.clientId, this.datatableName).subscribe((dataObject: any) => {
+          this.clientsService.getClientDatatable(this.clientId, this.datatableName).subscribe((dataObject: any) => {
             this.datatableData = dataObject.data;
             this.dataTableRef.renderRows();
           });
@@ -118,4 +129,22 @@ export class MultiRowComponent implements OnInit, OnChanges {
     });
   }
 
+  delete() {
+    const deleteDataTableDialogRef = this.dialog.open(DeleteDialogComponent, {
+      data: { deleteContext: `the contents of ${this.datatableName}` }
+    });
+    deleteDataTableDialogRef.afterClosed().subscribe((response: any) => {
+      if (response.delete) {
+        this.clientsService.deleteDatatableContent(this.clientId, this.datatableName)
+          .subscribe(() => {
+            this.clientsService.getClientDatatable(this.clientId, this.datatableName).subscribe((dataObject: any) => {
+              this.datatableData = dataObject.data;
+              this.showDeleteBotton = false;
+              this.dataTableRef.renderRows();
+            });
+          });
+      }
+    });
+  }
+
 }

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

@@ -1,9 +1,15 @@
 <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()" *ngIf="!dataObject.data[0]">
       <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;Add
     </button>
+    <button mat-raised-button color="primary" (click)="edit()" *ngIf="dataObject.data[0]">
+      <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;Edit
+    </button>
+    <button class="delete-button" mat-raised-button color="warn" (click)="delete()" *ngIf="dataObject.data[0]">
+      <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">

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

@@ -1,4 +1,8 @@
 .tab-container {
-    padding:1%;
+  padding: 1%;
-    margin: 1%;
+  margin: 1%;
-}
+
+  .delete-button {
+    margin-left: 1%;
+  }
+}

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

@@ -1,5 +1,20 @@
 import { Component, OnInit, Input } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
+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 { CheckboxBase } from 'app/shared/form-dialog/formfield/model/checkbox-base';
+import { DatePipe } from '@angular/common';
+
+/** Custom Components */
+import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
+import { DeleteDialogComponent } from '../../../../shared/delete-dialog/delete-dialog.component';
+
+/** Custom Services */
+import { ClientsService } from '../../../clients.service';
+
+
 
 @Component({
   selector: 'mifosx-single-row',
@@ -7,9 +22,17 @@ import { ActivatedRoute } from '@angular/router';
   styleUrls: ['./single-row.component.scss']
 })
 export class SingleRowComponent implements OnInit {
+
   @Input() dataObject: any;
-  datatableName: String;
+  datatableName: string;
-  constructor(private route: ActivatedRoute) { }
+  clientId: string;
+
+  constructor(private route: ActivatedRoute,
+    private datePipe: DatePipe,
+    private dialog: MatDialog,
+    private clientsService: ClientsService) {
+    this.clientId = this.route.parent.parent.snapshot.paramMap.get('clientId');
+  }
 
   ngOnInit() {
     this.route.params.subscribe((routeParams: any) => {
@@ -17,4 +40,137 @@ export class SingleRowComponent implements OnInit {
     });
   }
 
+  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[] = this.getFormfields(columns, dateTransformColumns, dataTableEntryObject);
+    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.clientsService.addClientDatatableEntry(this.clientId, this.datatableName, dataTableEntryObject).subscribe(() => {
+          this.clientsService.getClientDatatable(this.clientId, this.datatableName).subscribe((dataObject: any) => {
+            this.dataObject = dataObject;
+          });
+        });
+      }
+    });
+  }
+
+  edit() {
+    let dataTableEntryObject: any = {
+      locale: 'en'
+    };
+    const dateTransformColumns: string[] = [];
+    const columns = this.dataObject.columnHeaders.filter((column: any) => {
+      return ((column.columnName !== 'id') && (column.columnName !== 'client_id'));
+    });
+    let formfields: FormfieldBase[] = this.getFormfields(columns, dateTransformColumns, dataTableEntryObject);
+    formfields = formfields.map((formfield: FormfieldBase, index: number) => {
+      formfield.value = (this.dataObject.data[0].row[index + 1]) ? this.dataObject.data[0].row[index + 1] : '';
+      return formfield;
+    });
+    const data = {
+      title: 'Edit ' + this.datatableName,
+      formfields: formfields
+    };
+    const editDialogRef = this.dialog.open(FormDialogComponent, { data });
+    editDialogRef.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.clientsService.editClientDatatableEntry(this.clientId, this.datatableName, dataTableEntryObject).subscribe(() => {
+          this.clientsService.getClientDatatable(this.clientId, this.datatableName).subscribe((dataObject: any) => {
+            this.dataObject = dataObject;
+          });
+        });
+      }
+    });
+  }
+
+  delete() {
+    const deleteDataTableDialogRef = this.dialog.open(DeleteDialogComponent, {
+      data: { deleteContext: `the contents of ${this.datatableName}` }
+    });
+    deleteDataTableDialogRef.afterClosed().subscribe((response: any) => {
+      if (response.delete) {
+        this.clientsService.deleteDatatableContent(this.clientId, this.datatableName)
+          .subscribe(() => {
+            this.clientsService.getClientDatatable(this.clientId, this.datatableName).subscribe((dataObject: any) => {
+              this.dataObject = dataObject;
+            });
+          });
+      }
+    });
+  }
+
+  getFormfields(columns: any, dateTransformColumns: string[], dataTableEntryObject: any) {
+    return columns.map((column: any) => {
+      switch (column.columnDisplayType) {
+        case 'INTEGER':
+        case 'STRING':
+        case 'DECIMAL':
+        case 'TEXT': return new InputBase({
+          controlName: column.columnName,
+          label: column.columnName,
+          value: '',
+          type: (column.columnDisplayType === 'INTEGER' || column.columnDisplayType === 'DECIMAL') ? 'number' : 'text',
+          required: (column.isColumnNullable) ? false : true
+        });
+        case 'BOOLEAN': return new CheckboxBase({
+          controlName: column.columnName,
+          label: column.columnName,
+          value: '',
+          type: 'checkbox',
+          required: (column.isColumnNullable) ? false : true
+        });
+        case 'CODELOOKUP': return new SelectBase({
+          controlName: column.columnName,
+          label: column.columnName,
+          value: '',
+          options: { label: 'value', value: 'id', data: column.columnValues },
+          required: (column.isColumnNullable) ? false : true
+        });
+        case '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
+          });
+        }
+        case '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
+          });
+        }
+      }
+    });
+  }
+
 }

src/app/clients/clients.service.ts

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

src/app/shared/form-dialog/formfield/formfield.component.html

@@ -1,25 +1,35 @@
 <div [formGroup]="form" fxFlexFill>
 
-  <mat-form-field fxFlexFill>
+  <div>
 
-    <mat-label>{{ formfield.label }}</mat-label>
+    <div *ngIf="formfield.controlType==='input'||formfield.controlType==='select'">
+      
+      <mat-form-field fxFlexFill>
 
-    <div [ngSwitch]="formfield.controlType">
+        <mat-label>{{ formfield.label }}</mat-label>
 
-      <input *ngSwitchCase="'input'" [type]="formfield.type" matInput [formControlName]="formfield.controlName" [required]="formfield.required">
+        <input *ngIf="formfield.controlType==='input'" [type]="formfield.type" matInput
+          [formControlName]="formfield.controlName" [required]="formfield.required">
 
-      <mat-select *ngSwitchCase="'select'" [formControlName]="formfield.controlName" [required]="formfield.required">
+        <mat-select *ngIf="formfield.controlType==='select'" [formControlName]="formfield.controlName"
-        <mat-option *ngFor="let option of formfield.options.data" [value]="option[formfield.options.value]">
+          [required]="formfield.required">
-          {{ option[formfield.options.label] }}
+          <mat-option *ngFor="let option of formfield.options.data" [value]="option[formfield.options.value]">
-        </mat-option>
+            {{ option[formfield.options.label] }}
-      </mat-select>
+          </mat-option>
+        </mat-select>
 
+        <mat-error *ngIf="form.controls[formfield.controlName].hasError('required')">
+          {{ formfield.label }} is <strong>required</strong>
+        </mat-error>
+
+      </mat-form-field>
     </div>
 
-    <mat-error *ngIf="form.controls[formfield.controlName].hasError('required')">
+    <mat-checkbox *ngIf="formfield.controlType==='checkbox'" labelPosition="before" [checked]="formfield.value"
-      {{ formfield.label }} is <strong>required</strong>
+      [formControlName]="formfield.controlName" [required]="formfield.required">
-    </mat-error>
+      {{ formfield.label }}
+    </mat-checkbox>
 
-  </mat-form-field>
+  </div>
 
-</div>
+</div>

src/app/shared/form-dialog/formfield/model/checkbox-base.ts

@@ -0,0 +1,10 @@
+import { FormfieldBase } from './formfield-base';
+
+export class CheckboxBase extends FormfieldBase {
+    controlType = 'checkbox';
+
+    constructor(options: any) {
+        super(options);
+    }
+
+}