Enhancements for datatables datetime fields

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

@@ -10,15 +10,12 @@ import { DeleteDialogComponent } from '../../../../shared/delete-dialog/delete-d
 
 /** Custom Models */
 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 { DatepickerBase } from 'app/shared/form-dialog/formfield/model/datepicker-base';
 
 /** Custom Services */
 import { CentersService } from '../../../centers.service';
 import { SettingsService } from 'app/settings/settings.service';
 import { Dates } from 'app/core/utils/dates';
+import { Datatables } from 'app/core/utils/datatables';
 
 /**
  * Center Multi Row Data Tables
@@ -54,12 +51,14 @@ export class MultiRowComponent implements OnInit, OnChanges {
    * @param {CentersService} centersService Centers Service.
    * @param {SettingsService} settingsService Settings Service.
    * @param {MatDialog} dialog Mat Dialog.
+   * @param {Datatables} datatables Datatable utils
    */
   constructor(private route: ActivatedRoute,
               private dateUtils: Dates,
               private centersService: CentersService,
               private settingsService: SettingsService,
-              private dialog: MatDialog) {
+              private dialog: MatDialog,
+              private datatables: Datatables) {
     this.centerId = this.route.parent.parent.snapshot.paramMap.get('centerId');
   }
 
@@ -93,56 +92,7 @@ export class MultiRowComponent implements OnInit, OnChanges {
     const columns = this.dataObject.columnHeaders.filter((column: any) => {
       return ((column.columnName !== 'id') && (column.columnName !== 'center_id') && (column.columnName !== 'created_at') && (column.columnName !== 'updated_at'));
     });
-    const formfields: FormfieldBase[] = 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 = this.settingsService.dateFormat;
-          return new DatepickerBase({
-            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 DatepickerBase({
-            controlName: column.columnName,
-            label: column.columnName,
-            value: '',
-            type: 'datetime-local',
-            required: (column.isColumnNullable) ? false : true
-          });
-        }
-      }
-    });
+    const formfields: FormfieldBase[] = this.datatables.getFormfields(columns, dateTransformColumns, dataTableEntryObject);
     const data = {
       title: 'Add ' + this.datatableName,
       formfields: formfields

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

@@ -9,15 +9,12 @@ import { DeleteDialogComponent } from '../../../../shared/delete-dialog/delete-d
 
 /** Custom Models */
 import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-base';
-import { InputBase } from 'app/shared/form-dialog/formfield/model/input-base';
-import { DatepickerBase } from 'app/shared/form-dialog/formfield/model/datepicker-base';
-import { SelectBase } from 'app/shared/form-dialog/formfield/model/select-base';
-import { CheckboxBase } from 'app/shared/form-dialog/formfield/model/checkbox-base';
 
 /** Custom Services */
 import { CentersService } from '../../../centers.service';
 import { SettingsService } from 'app/settings/settings.service';
 import { Dates } from 'app/core/utils/dates';
+import { Datatables } from 'app/core/utils/datatables';
 
 /**
  * Centers Single Row Data Tables
@@ -41,15 +38,17 @@ export class SingleRowComponent implements OnInit {
    * Fetches center Id from parent route params.
    * @param {ActivatedRoute} route Activated Route.
    * @param {Dates} dateUtils Date Utils.
-   * @param {CentersService} centersService Centers Service.
-   * @param {SettingsService} settingsService Settings Service.
    * @param {MatDialog} dialog Mat Dialog.
+   * @param {SettingsService} settingsService Settings Service.
+   * @param {CentersService} centersService Centers Service.
+   * @param {Datatables} datatables Datatable utils
    */
   constructor(private route: ActivatedRoute,
               private dateUtils: Dates,
               private dialog: MatDialog,
               private settingsService: SettingsService,
-              private centersService: CentersService) {
+              private centersService: CentersService,
+              private datatables: Datatables) {
     this.centerId = this.route.parent.parent.snapshot.paramMap.get('centerId');
   }
 
@@ -72,7 +71,7 @@ export class SingleRowComponent implements OnInit {
     const columns = this.dataObject.columnHeaders.filter((column: any) => {
       return ((column.columnName !== 'id') && (column.columnName !== 'center_id') && (column.columnName !== 'created_at') && (column.columnName !== 'updated_at'));
     });
-    const formfields: FormfieldBase[] = this.getFormfields(columns, dateTransformColumns, dataTableEntryObject);
+    const formfields: FormfieldBase[] = this.datatables.getFormfields(columns, dateTransformColumns, dataTableEntryObject);
     const data = {
       title: 'Add ' + this.datatableName,
       formfields: formfields
@@ -102,7 +101,7 @@ export class SingleRowComponent implements OnInit {
     const columns = this.dataObject.columnHeaders.filter((column: any) => {
       return ((column.columnName !== 'id') && (column.columnName !== 'center_id'));
     });
-    let formfields: FormfieldBase[] = this.getFormfields(columns, dateTransformColumns, dataTableEntryObject);
+    let formfields: FormfieldBase[] = this.datatables.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;
@@ -147,63 +146,4 @@ export class SingleRowComponent implements OnInit {
     });
   }
 
-  /**
-   * Maps API response to data table form fields.
-   * @param {any} columns Data Table Columns.
-   * @param {string[]} dateTransformColumns Columns transformed with Date Utils.
-   * @param {any} dataTableEntryObject Additional data table details.
-   */
-  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 = this.settingsService.dateFormat;
-          return new DatepickerBase({
-            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 DatepickerBase({
-            controlName: column.columnName,
-            label: column.columnName,
-            value: '',
-            type: 'datetime-local',
-            required: (column.isColumnNullable) ? false : true
-          });
-        }
-      }
-    });
-  }
-
 }

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

@@ -3,9 +3,6 @@ import { ActivatedRoute } from '@angular/router';
 import { MatTable } from '@angular/material/table';
 import { MatDialog } from '@angular/material/dialog';
 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';
 
 /** Custom Components */
 import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
@@ -15,6 +12,7 @@ import { DeleteDialogComponent } from '../../../../shared/delete-dialog/delete-d
 import { ClientsService } from '../../../clients.service';
 import { SettingsService } from 'app/settings/settings.service';
 import { Dates } from 'app/core/utils/dates';
+import { Datatables } from 'app/core/utils/datatables';
 
 @Component({
   selector: 'mifosx-multi-row',
@@ -30,11 +28,21 @@ export class MultiRowComponent implements OnInit, OnChanges {
   clientId: string;
   showDeleteBotton: boolean;
 
+  /**
+   * Fetches Client Id from parent route params.
+   * @param {ActivatedRoute} route Activated Route.
+   * @param {Dates} dateUtils Date Utils.
+   * @param {ClientsService} clientsService Clients Service.
+   * @param {MatDialog} dialog Dialog Service.
+   * @param {SettingsService} settingsService Settings Service
+   * @param {Datatables} datatables Datatable utils
+   */
   constructor(private route: ActivatedRoute,
     private dateUtils: Dates,
     private clientsService: ClientsService,
     private dialog: MatDialog,
-    private settingsService: SettingsService) {
+    private settingsService: SettingsService,
+    private datatables: Datatables) {
     this.clientId = this.route.parent.parent.snapshot.paramMap.get('clientId');
   }
 
@@ -43,6 +51,7 @@ export class MultiRowComponent implements OnInit, OnChanges {
       this.datatableName = routeParams.datatableName;
     });
   }
+
   ngOnChanges() {
     this.datatableColumns = this.dataObject.columnHeaders.map((columnHeader: any) => {
       return columnHeader.columnName;
@@ -59,56 +68,7 @@ export class MultiRowComponent implements OnInit, OnChanges {
     const columns = this.dataObject.columnHeaders.filter((column: any) => {
       return ((column.columnName !== 'id') && (column.columnName !== 'client_id') && (column.columnName !== 'created_at') && (column.columnName !== 'updated_at'));
     });
-    const formfields: FormfieldBase[] = 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
-          });
-        }
-      }
-    });
+    const formfields: FormfieldBase[] = this.datatables.getFormfields(columns, dateTransformColumns, dataTableEntryObject);
     const data = {
       title: 'Add ' + this.datatableName,
       formfields: formfields

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

@@ -2,9 +2,6 @@ import { Component, OnInit, Input } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { MatDialog } from '@angular/material/dialog';
 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';
 
 /** Custom Components */
 import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
@@ -14,6 +11,7 @@ import { DeleteDialogComponent } from '../../../../shared/delete-dialog/delete-d
 import { ClientsService } from '../../../clients.service';
 import { SettingsService } from 'app/settings/settings.service';
 import { Dates } from 'app/core/utils/dates';
+import { Datatables } from 'app/core/utils/datatables';
 
 
 @Component({
@@ -27,11 +25,20 @@ export class SingleRowComponent implements OnInit {
   datatableName: string;
   clientId: string;
 
+  /**
+   * Fetches Client Id from parent route params.
+   * @param {ActivatedRoute} route Activated Route.
+   * @param {Dates} dateUtils Date Utils.
+   * @param {ClientsService} clientsService Clients Service.
+   * @param {SettingsService} settingsService Settings Service
+   * @param {Datatables} datatables Datatable utils
+   */
   constructor(private route: ActivatedRoute,
     private dateUtils: Dates,
     private dialog: MatDialog,
     private clientsService: ClientsService,
-    private settingsService: SettingsService) {
+    private settingsService: SettingsService,
+    private datatables: Datatables) {
     this.clientId = this.route.parent.parent.snapshot.paramMap.get('clientId');
   }
 
@@ -49,7 +56,7 @@ export class SingleRowComponent implements OnInit {
     const columns = this.dataObject.columnHeaders.filter((column: any) => {
       return ((column.columnName !== 'id') && (column.columnName !== 'client_id') && (column.columnName !== 'created_at') && (column.columnName !== 'updated_at'));
     });
-    const formfields: FormfieldBase[] = this.getFormfields(columns, dateTransformColumns, dataTableEntryObject);
+    const formfields: FormfieldBase[] = this.datatables.getFormfields(columns, dateTransformColumns, dataTableEntryObject);
     const data = {
       title: 'Add ' + this.datatableName,
       formfields: formfields
@@ -79,7 +86,7 @@ export class SingleRowComponent implements OnInit {
     const columns = this.dataObject.columnHeaders.filter((column: any) => {
       return ((column.columnName !== 'id') && (column.columnName !== 'client_id') && (column.columnName !== 'created_at') && (column.columnName !== 'updated_at'));
     });
-    let formfields: FormfieldBase[] = this.getFormfields(columns, dateTransformColumns, dataTableEntryObject);
+    let formfields: FormfieldBase[] = this.datatables.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;
@@ -121,57 +128,4 @@ export class SingleRowComponent implements OnInit {
     });
   }
 
-  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/core/utils/datatables.ts

@@ -0,0 +1,69 @@
+import { Injectable } from '@angular/core';
+import { CheckboxBase } from 'app/shared/form-dialog/formfield/model/checkbox-base';
+import { InputBase } from 'app/shared/form-dialog/formfield/model/input-base';
+import { SelectBase } from 'app/shared/form-dialog/formfield/model/select-base';
+import { Dates } from './dates';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class Datatables {
+
+  constructor() { }
+
+  public 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);
+          if (!dataTableEntryObject.dateFormat) {
+            dataTableEntryObject.dateFormat = Dates.DEFAULT_DATEFORMAT;
+          }
+          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 = Dates.DEFAULT_DATETIMEFORMAT;
+          return new InputBase({
+            controlName: column.columnName,
+            label: column.columnName,
+            value: '',
+            type: 'datetime-local',
+            required: (column.isColumnNullable) ? false : true
+          });
+        }
+      }
+    });
+  }
+
+}

src/app/core/utils/dates.ts

@@ -7,6 +7,9 @@ import * as moment from 'moment';
 })
 export class Dates {
 
+  public static DEFAULT_DATEFORMAT = 'yyyy-MM-dd';
+  public static DEFAULT_DATETIMEFORMAT = 'yyyy-MM-dd HH:mm';
+
   constructor(private datePipe: DatePipe) {}
 
   public getDate(timestamp: any): string {

src/app/groups/groups-view/datatable-tabs/multi-row/multi-row.component.ts

@@ -10,15 +10,12 @@ import { DeleteDialogComponent } from '../../../../shared/delete-dialog/delete-d
 
 /** Custom Models */
 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 { DatepickerBase } from 'app/shared/form-dialog/formfield/model/datepicker-base';
 
 /** Custom Services */
 import { GroupsService } from '../../../groups.service';
 import { SettingsService } from 'app/settings/settings.service';
 import { Dates } from 'app/core/utils/dates';
+import { Datatables } from 'app/core/utils/datatables';
 
 /**
  * Group Multi Row Data Tables
@@ -54,12 +51,14 @@ export class MultiRowComponent implements OnInit, OnChanges {
    * @param {GroupsService} groupsService Groups Service.
    * @param {MatDialog} dialog Mat Dialog.
    * @param {SettingsService} settingsService SettingsService
+   * @param {Datatables} datatables Datatable utils
    */
   constructor(private route: ActivatedRoute,
               private dateUtils: Dates,
               private groupsService: GroupsService,
               private dialog: MatDialog,
-              private settingsService: SettingsService) {
+              private settingsService: SettingsService,
+              private datatables: Datatables) {
     this.groupId = this.route.parent.parent.snapshot.paramMap.get('groupId');
   }
 
@@ -93,56 +92,7 @@ export class MultiRowComponent implements OnInit, OnChanges {
     const columns = this.dataObject.columnHeaders.filter((column: any) => {
       return ((column.columnName !== 'id') && (column.columnName !== 'group_id'));
     });
-    const formfields: FormfieldBase[] = 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 DatepickerBase({
-            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 DatepickerBase({
-            controlName: column.columnName,
-            label: column.columnName,
-            value: '',
-            type: 'datetime-local',
-            required: (column.isColumnNullable) ? false : true
-          });
-        }
-      }
-    });
+    const formfields: FormfieldBase[] = this.datatables.getFormfields(columns, dateTransformColumns, dataTableEntryObject);
     const data = {
       title: 'Add ' + this.datatableName,
       formfields: formfields

src/app/groups/groups-view/datatable-tabs/single-row/single-row.component.ts

@@ -9,15 +9,12 @@ import { DeleteDialogComponent } from '../../../../shared/delete-dialog/delete-d
 
 /** Custom Models */
 import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-base';
-import { InputBase } from 'app/shared/form-dialog/formfield/model/input-base';
-import { DatepickerBase } from 'app/shared/form-dialog/formfield/model/datepicker-base';
-import { SelectBase } from 'app/shared/form-dialog/formfield/model/select-base';
-import { CheckboxBase } from 'app/shared/form-dialog/formfield/model/checkbox-base';
 
 /** Custom Services */
 import { GroupsService } from '../../../groups.service';
 import { SettingsService } from 'app/settings/settings.service';
 import { Dates } from 'app/core/utils/dates';
+import { Datatables } from 'app/core/utils/datatables';
 
 /**
  * Groups Single Row Data Tables
@@ -44,12 +41,14 @@ export class SingleRowComponent implements OnInit {
    * @param {GroupsService} groupsService Groups Service.
    * @param {MatDialog} dialog Mat Dialog.
    * @param {SettingsService} settingsService SettingsService
+   * @param {Datatables} datatables Datatable utils
    */
   constructor(private route: ActivatedRoute,
               private dateUtils: Dates,
               private dialog: MatDialog,
               private groupsService: GroupsService,
-              private settingsService: SettingsService) {
+              private settingsService: SettingsService,
+              private datatables: Datatables) {
     this.groupId = this.route.parent.parent.snapshot.paramMap.get('groupId');
   }
 
@@ -70,9 +69,9 @@ export class SingleRowComponent implements OnInit {
     let dataTableEntryObject: any = { locale: this.settingsService.language.code };
     const dateTransformColumns: string[] = [];
     const columns = this.dataObject.columnHeaders.filter((column: any) => {
-      return ((column.columnName !== 'id') && (column.columnName !== 'group_id'));
+      return ((column.columnName !== 'id') && (column.columnName !== 'group_id') && (column.columnName !== 'created_at') && (column.columnName !== 'updated_at'));
     });
-    const formfields: FormfieldBase[] = this.getFormfields(columns, dateTransformColumns, dataTableEntryObject);
+    const formfields: FormfieldBase[] = this.datatables.getFormfields(columns, dateTransformColumns, dataTableEntryObject);
     const data = {
       title: 'Add ' + this.datatableName,
       formfields: formfields
@@ -102,7 +101,7 @@ export class SingleRowComponent implements OnInit {
     const columns = this.dataObject.columnHeaders.filter((column: any) => {
       return ((column.columnName !== 'id') && (column.columnName !== 'group_id'));
     });
-    let formfields: FormfieldBase[] = this.getFormfields(columns, dateTransformColumns, dataTableEntryObject);
+    let formfields: FormfieldBase[] = this.datatables.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;
@@ -147,63 +146,4 @@ export class SingleRowComponent implements OnInit {
     });
   }
 
-  /**
-   * Maps API response to data table form fields.
-   * @param {any} columns Data Table Columns.
-   * @param {string[]} dateTransformColumns Columns transformed with Date Utils.
-   * @param {any} dataTableEntryObject Additional data table details.
-   */
-  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 DatepickerBase({
-            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 DatepickerBase({
-            controlName: column.columnName,
-            label: column.columnName,
-            value: '',
-            type: 'datetime-local',
-            required: (column.isColumnNullable) ? false : true
-          });
-        }
-      }
-    });
-  }
-
 }

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

@@ -11,14 +11,11 @@ import { SettingsService } from 'app/settings/settings.service';
 
 /** Custom Models */
 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 { DatepickerBase } from 'app/shared/form-dialog/formfield/model/datepicker-base';
 
 /** Custom Services */
 import { LoansService } from '../../../loans.service';
 import { Dates } from 'app/core/utils/dates';
+import { Datatables } from 'app/core/utils/datatables';
 
 /**
  * Loan Multi Row Data Tables
@@ -54,12 +51,14 @@ export class MultiRowComponent implements OnInit, OnChanges {
    * @param {LoansService} loansService Loans Service.
    * @param {MatDialog} dialog Mat Dialog.
    * @param {SettingsService} settingsService Settings Service
+   * @param {Datatables} datatables Datatable utils
    */
   constructor(private route: ActivatedRoute,
               private dateUtils: Dates,
               private loansService: LoansService,
               private dialog: MatDialog,
-              private settingsService: SettingsService) {
+              private settingsService: SettingsService,
+              private datatables: Datatables) {
     this.loanId = this.route.parent.parent.snapshot.paramMap.get('loanId');
   }
 
@@ -88,61 +87,12 @@ export class MultiRowComponent implements OnInit, OnChanges {
    * Adds a new row to the given multi row data table.
    */
   add() {
-    let dataTableEntryObject: any = { locale: 'en' };
+    let dataTableEntryObject: any = { locale: this.settingsService.language.code };
     const dateTransformColumns: string[] = [];
     const columns = this.dataObject.columnHeaders.filter((column: any) => {
       return ((column.columnName !== 'id') && (column.columnName !== 'loan_id') && (column.columnName !== 'created_at') && (column.columnName !== 'updated_at'));
     });
-    const formfields: FormfieldBase[] = 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 = this.settingsService.dateFormat;
-          return new DatepickerBase({
-            controlName: column.columnName,
-            label: column.columnName,
-            value: '',
-            type: 'date',
-            required: (column.isColumnNullable) ? false : true
-          });
-        }
-        case 'DATETIME': {
-          dateTransformColumns.push(column.columnName);
-          dataTableEntryObject.dateFormat = this.settingsService.dateFormat;
-          return new DatepickerBase({
-            controlName: column.columnName,
-            label: column.columnName,
-            value: '',
-            type: 'datetime-local',
-            required: (column.isColumnNullable) ? false : true
-          });
-        }
-      }
-    });
+    const formfields: FormfieldBase[] = this.datatables.getFormfields(columns, dateTransformColumns, dataTableEntryObject);
     const data = {
       title: 'Add ' + this.datatableName,
       formfields: formfields

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

@@ -10,14 +10,11 @@ import { SettingsService } from 'app/settings/settings.service';
 
 /** Custom Models */
 import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-base';
-import { InputBase } from 'app/shared/form-dialog/formfield/model/input-base';
-import { DatepickerBase } from 'app/shared/form-dialog/formfield/model/datepicker-base';
-import { SelectBase } from 'app/shared/form-dialog/formfield/model/select-base';
-import { CheckboxBase } from 'app/shared/form-dialog/formfield/model/checkbox-base';
 
 /** Custom Services */
 import { LoansService } from '../../../loans.service';
 import { Dates } from 'app/core/utils/dates';
+import { Datatables } from 'app/core/utils/datatables';
 
 
 @Component({
@@ -42,12 +39,14 @@ export class SingleRowComponent implements OnInit {
    * @param {LoansService} loansService Loans Service.
    * @param {MatDialog} dialog Mat Dialog.
    * @param {SettingsService} settingsService Settings Service
+   * @param {Datatables} datatables Datatable utils
    */
   constructor(private route: ActivatedRoute,
               private dateUtils: Dates,
               private dialog: MatDialog,
               private loansService: LoansService,
-              private settingsService: SettingsService) {
+              private settingsService: SettingsService,
+              private datatables: Datatables) {
     this.loanId = this.route.parent.parent.snapshot.paramMap.get('loanId');
   }
 
@@ -70,7 +69,7 @@ export class SingleRowComponent implements OnInit {
     const columns = this.dataObject.columnHeaders.filter((column: any) => {
       return ((column.columnName !== 'id') && (column.columnName !== 'loan_id') && (column.columnName !== 'created_at') && (column.columnName !== 'updated_at'));
     });
-    const formfields: FormfieldBase[] = this.getFormfields(columns, dateTransformColumns, dataTableEntryObject);
+    const formfields: FormfieldBase[] = this.datatables.getFormfields(columns, dateTransformColumns, dataTableEntryObject);
     const data = {
       title: 'Add ' + this.datatableName,
       formfields: formfields
@@ -100,7 +99,7 @@ export class SingleRowComponent implements OnInit {
     const columns = this.dataObject.columnHeaders.filter((column: any) => {
       return ((column.columnName !== 'id') && (column.columnName !== 'loan_id') && (column.columnName !== 'created_at') && (column.columnName !== 'updated_at'));
     });
-    let formfields: FormfieldBase[] = this.getFormfields(columns, dateTransformColumns, dataTableEntryObject);
+    let formfields: FormfieldBase[] = this.datatables.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;
@@ -145,63 +144,4 @@ export class SingleRowComponent implements OnInit {
     });
   }
 
-  /**
-   * Maps API response to data table form fields.
-   * @param {any} columns Data Table Columns.
-   * @param {string[]} dateTransformColumns Columns transformed with Date Utils.
-   * @param {any} dataTableEntryObject Additional data table details.
-   */
-  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 = this.settingsService.dateFormat;
-          return new DatepickerBase({
-            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 DatepickerBase({
-            controlName: column.columnName,
-            label: column.columnName,
-            value: '',
-            type: 'datetime-local',
-            required: (column.isColumnNullable) ? false : true
-          });
-        }
-      }
-    });
-  }
-
 }

src/app/organization/offices/view-office/datatable-tabs/multi-row/multi-row.component.ts

@@ -10,15 +10,12 @@ import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.co
 
 /** Custom Models */
 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 { DatepickerBase } from 'app/shared/form-dialog/formfield/model/datepicker-base';
 
 /** Custom Services */
 import { OrganizationService } from '../../../../organization.service';
 import { SettingsService } from 'app/settings/settings.service';
 import { Dates } from 'app/core/utils/dates';
+import { Datatables } from 'app/core/utils/datatables';
 
 /**
  * Office Multi Row Data Tables
@@ -59,7 +56,8 @@ export class MultiRowComponent implements OnInit, OnChanges {
               private dateUtils: Dates,
               private organizationService: OrganizationService,
               private settingsService: SettingsService,
-              private dialog: MatDialog) {
+              private dialog: MatDialog,
+              private datatables: Datatables) {
     this.officeId = this.route.parent.parent.snapshot.paramMap.get('id');
   }
 
@@ -91,58 +89,9 @@ export class MultiRowComponent implements OnInit, OnChanges {
     let dataTableEntryObject: any = { locale: this.settingsService.language.code };
     const dateTransformColumns: string[] = [];
     const columns = this.dataObject.columnHeaders.filter((column: any) => {
-      return ((column.columnName !== 'id') && (column.columnName !== 'office_id'));
-    });
-    const formfields: FormfieldBase[] = 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 = this.settingsService.dateFormat;
-          return new DatepickerBase({
-            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 DatepickerBase({
-            controlName: column.columnName,
-            label: column.columnName,
-            value: '',
-            type: 'datetime-local',
-            required: (column.isColumnNullable) ? false : true
-          });
-        }
-      }
+      return ((column.columnName !== 'id') && (column.columnName !== 'office_id') && (column.columnName !== 'created_at') && (column.columnName !== 'updated_at'));
     });
+    const formfields: FormfieldBase[] = this.datatables.getFormfields(columns, dateTransformColumns, dataTableEntryObject);
     const data = {
       title: 'Add ' + this.datatableName,
       formfields: formfields

src/app/organization/offices/view-office/datatable-tabs/single-row/single-row.component.ts

@@ -9,15 +9,12 @@ import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.co
 
 /** Custom Models */
 import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-base';
-import { InputBase } from 'app/shared/form-dialog/formfield/model/input-base';
-import { DatepickerBase } from 'app/shared/form-dialog/formfield/model/datepicker-base';
-import { SelectBase } from 'app/shared/form-dialog/formfield/model/select-base';
-import { CheckboxBase } from 'app/shared/form-dialog/formfield/model/checkbox-base';
 
 /** Custom Services */
 import { OrganizationService } from '../../../../organization.service';
 import { SettingsService } from 'app/settings/settings.service';
 import { Dates } from 'app/core/utils/dates';
+import { Datatables } from 'app/core/utils/datatables';
 
 /**
  * Offices Single Row Data Tables
@@ -49,7 +46,8 @@ export class SingleRowComponent implements OnInit {
               private dateUtils: Dates,
               private dialog: MatDialog,
               private organizationService: OrganizationService,
-              private settingsService: SettingsService ) {
+              private settingsService: SettingsService,
+              private datatables: Datatables) {
     this.officeId = this.route.parent.parent.snapshot.paramMap.get('id');
   }
 
@@ -70,9 +68,9 @@ export class SingleRowComponent implements OnInit {
     let dataTableEntryObject: any = { locale: this.settingsService.language.code };
     const dateTransformColumns: string[] = [];
     const columns = this.dataObject.columnHeaders.filter((column: any) => {
-      return ((column.columnName !== 'id') && (column.columnName !== 'office_id'));
+      return ((column.columnName !== 'id') && (column.columnName !== 'office_id') && (column.columnName !== 'created_at') && (column.columnName !== 'updated_at'));
     });
-    const formfields: FormfieldBase[] = this.getFormfields(columns, dateTransformColumns, dataTableEntryObject);
+    const formfields: FormfieldBase[] = this.datatables.getFormfields(columns, dateTransformColumns, dataTableEntryObject);
     const data = {
       title: 'Add ' + this.datatableName,
       formfields: formfields
@@ -102,7 +100,7 @@ export class SingleRowComponent implements OnInit {
     const columns = this.dataObject.columnHeaders.filter((column: any) => {
       return ((column.columnName !== 'id') && (column.columnName !== 'office_id'));
     });
-    let formfields: FormfieldBase[] = this.getFormfields(columns, dateTransformColumns, dataTableEntryObject);
+    let formfields: FormfieldBase[] = this.datatables.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;
@@ -147,63 +145,4 @@ export class SingleRowComponent implements OnInit {
     });
   }
 
-  /**
-   * Maps API response to data table form fields.
-   * @param {any} columns Data Table Columns.
-   * @param {string[]} dateTransformColumns Columns transformed with Date Utils.
-   * @param {any} dataTableEntryObject Additional data table details.
-   */
-  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 = this.settingsService.dateFormat;
-          return new DatepickerBase({
-            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 DatepickerBase({
-            controlName: column.columnName,
-            label: column.columnName,
-            value: '',
-            type: 'datetime-local',
-            required: (column.isColumnNullable) ? false : true
-          });
-        }
-      }
-    });
-  }
-
 }

src/app/savings/savings-account-view/datatable-tabs/multi-row/multi-row.component.ts

@@ -19,6 +19,7 @@ import { DatepickerBase } from 'app/shared/form-dialog/formfield/model/datepicke
 /** Custom Services */
 import { SavingsService } from '../../../savings.service';
 import { Dates } from 'app/core/utils/dates';
+import { Datatables } from 'app/core/utils/datatables';
 
 /**
  * Savings Account Multi Row Data Tables
@@ -54,12 +55,14 @@ export class MultiRowComponent implements OnInit, OnChanges {
    * @param {SavingsService} savingsService Savingss Service.
    * @param {MatDialog} dialog Mat Dialog.
    * @param {SettingsService} settingsService Setting service
+   * @param {Datatables} datatables Datatable utils
    */
   constructor(private route: ActivatedRoute,
               private dateUtils: Dates,
               private savingsService: SavingsService,
               private dialog: MatDialog,
-              private settingsService: SettingsService) {
+              private settingsService: SettingsService,
+              private datatables: Datatables) {
     this.savingAccountId = this.route.parent.parent.snapshot.paramMap.get('savingAccountId');
   }
 
@@ -93,56 +96,7 @@ export class MultiRowComponent implements OnInit, OnChanges {
     const columns = this.dataObject.columnHeaders.filter((column: any) => {
       return ((column.columnName !== 'id') && (column.columnName !== 'savings_account_id'));
     });
-    const formfields: FormfieldBase[] = 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 = this.settingsService.dateFormat;
-          return new DatepickerBase({
-            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 DatepickerBase({
-            controlName: column.columnName,
-            label: column.columnName,
-            value: '',
-            type: 'datetime-local',
-            required: (column.isColumnNullable) ? false : true
-          });
-        }
-      }
-    });
+    const formfields: FormfieldBase[] = this.datatables.getFormfields(columns, dateTransformColumns, dataTableEntryObject);
     const data = {
       title: 'Add ' + this.datatableName,
       formfields: formfields

src/app/savings/savings-account-view/datatable-tabs/single-row/single-row.component.ts

@@ -10,14 +10,11 @@ import { SettingsService } from 'app/settings/settings.service';
 
 /** Custom Models */
 import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-base';
-import { InputBase } from 'app/shared/form-dialog/formfield/model/input-base';
-import { DatepickerBase } from 'app/shared/form-dialog/formfield/model/datepicker-base';
-import { SelectBase } from 'app/shared/form-dialog/formfield/model/select-base';
-import { CheckboxBase } from 'app/shared/form-dialog/formfield/model/checkbox-base';
 
 /** Custom Services */
 import { SavingsService } from '../../../savings.service';
 import { Dates } from 'app/core/utils/dates';
+import { Datatables } from 'app/core/utils/datatables';
 
 
 /**
@@ -45,12 +42,14 @@ export class SingleRowComponent implements OnInit {
    * @param {SavingsService} savingsService Savingss Service.
    * @param {MatDialog} dialog Mat Dialog.
    * @param {SettingsService} settingsService Setting service
+   * @param {Datatables} datatables Datatable utils
    */
   constructor(private route: ActivatedRoute,
               private dateUtils: Dates,
               private dialog: MatDialog,
               private savingsService: SavingsService,
-              private settingsService: SettingsService) {
+              private settingsService: SettingsService,
+              private datatables: Datatables) {
     this.savingAccountId = this.route.parent.parent.snapshot.paramMap.get('savingAccountId');
   }
 
@@ -73,7 +72,7 @@ export class SingleRowComponent implements OnInit {
     const columns = this.dataObject.columnHeaders.filter((column: any) => {
       return ((column.columnName !== 'id') && (column.columnName !== 'savings_account_id'));
     });
-    const formfields: FormfieldBase[] = this.getFormfields(columns, dateTransformColumns, dataTableEntryObject);
+    const formfields: FormfieldBase[] = this.datatables.getFormfields(columns, dateTransformColumns, dataTableEntryObject);
     const data = {
       title: 'Add ' + this.datatableName,
       formfields: formfields
@@ -101,9 +100,9 @@ export class SingleRowComponent implements OnInit {
     let dataTableEntryObject: any = { locale: this.settingsService.language.code };
     const dateTransformColumns: string[] = [];
     const columns = this.dataObject.columnHeaders.filter((column: any) => {
-      return ((column.columnName !== 'id') && (column.columnName !== 'savings_account_id'));
+      return ((column.columnName !== 'id') && (column.columnName !== 'savings_account_id') && (column.columnName !== 'created_at') && (column.columnName !== 'updated_at'));
     });
-    let formfields: FormfieldBase[] = this.getFormfields(columns, dateTransformColumns, dataTableEntryObject);
+    let formfields: FormfieldBase[] = this.datatables.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;
@@ -148,63 +147,4 @@ export class SingleRowComponent implements OnInit {
     });
   }
 
-  /**
-   * Maps API response to data table form fields.
-   * @param {any} columns Data Table Columns.
-   * @param {string[]} dateTransformColumns Columns transformed with Date Utils.
-   * @param {any} dataTableEntryObject Additional data table details.
-   */
-  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 = this.settingsService.dateFormat;
-          return new DatepickerBase({
-            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 DatepickerBase({
-            controlName: column.columnName,
-            label: column.columnName,
-            value: '',
-            type: 'datetime-local',
-            required: (column.isColumnNullable) ? false : true
-          });
-        }
-      }
-    });
-  }
-
 }