Datatables enhacements to support products (#1641)

Co-authored-by: Jose Alberto Hernandez <alberto@MacBook-Pro.local>

package-lock.json

@@ -11,6 +11,7 @@
       "license": "MPL-2.0",
       "dependencies": {
         "@angular-devkit/schematics": "^14.0.4",
+        "@angular-material-components/datetime-picker": "^7.0.1",
         "@angular/animations": "^13.3.12",
         "@angular/cdk": "13.3.9",
         "@angular/common": "13.3.12",
@@ -486,6 +487,22 @@
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
       "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
     },
+    "node_modules/@angular-material-components/datetime-picker": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/@angular-material-components/datetime-picker/-/datetime-picker-7.0.1.tgz",
+      "integrity": "sha512-ukNFdmab++bPF35+56SXFkzWz7F2If3s/rRae37Yq3g7QWWh3kmS7KEbvtSIz000yj3/wGHDV1v9ChGiqsNsgA==",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/cdk": "^13.0.1",
+        "@angular/common": "^13.0.1",
+        "@angular/core": "^13.0.1",
+        "@angular/forms": "^13.0.1",
+        "@angular/material": "^13.0.1",
+        "@angular/platform-browser": "^13.0.1"
+      }
+    },
     "node_modules/@angular/animations": {
       "version": "13.3.12",
       "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-13.3.12.tgz",
@@ -21455,6 +21472,14 @@
         }
       }
     },
+    "@angular-material-components/datetime-picker": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/@angular-material-components/datetime-picker/-/datetime-picker-7.0.1.tgz",
+      "integrity": "sha512-ukNFdmab++bPF35+56SXFkzWz7F2If3s/rRae37Yq3g7QWWh3kmS7KEbvtSIz000yj3/wGHDV1v9ChGiqsNsgA==",
+      "requires": {
+        "tslib": "^2.3.0"
+      }
+    },
     "@angular/animations": {
       "version": "13.3.12",
       "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-13.3.12.tgz",

package.json

@@ -29,6 +29,7 @@
   },
   "dependencies": {
     "@angular-devkit/schematics": "^14.0.4",
+    "@angular-material-components/datetime-picker": "^7.0.1",
     "@angular/animations": "^13.3.12",
     "@angular/cdk": "13.3.9",
     "@angular/common": "13.3.12",

src/app/centers/centers-view/centers-view.component.html

@@ -3,17 +3,23 @@
     <mat-card-title-group class="header-title-group">
       <div class="profile-image-container">
         <div>
-          <img mat-card-md-image class="profile-image"
+          <img mat-card-md-image class="profile-image" src="assets/images/center_placeholder.png">
-            src='assets/images/center_placeholder.png'>
         </div>
       </div>
       <div class="mat-typography center-card-title">
         <mat-card-title>
-          <h3>
+          <h3 fxFlex="95%">
-            <i class="fa fa-stop" matTooltip= "{{ centerViewData.status.value }}"
+            <i class="fa fa-stop" matTooltip="{{ centerViewData.status.value }}"
-          [ngClass]="centerViewData.status.code |statusLookup"></i>
+              [ngClass]="centerViewData.status.code |statusLookup"></i>
-          Center Name : {{centerViewData.name}}
+            <b>Center Name :</b> {{centerViewData.name}}
           </h3>
+          <div fxFlex="5%" *ngIf="!(centerViewData.status.value==='Closed')">
+            <button mat-icon-button [matMenuTriggerFor]="centerMenu" aria-label="Center actions" yPosition="below">
+              <mat-icon matListIcon class="actions-menu">
+                <fa-icon icon="bars" size="sm"></fa-icon>
+              </mat-icon>
+            </button>
+          </div>
         </mat-card-title>
         <mat-card-subtitle>
           <div fxLayout="row" fxLayout.lt-md="column">
@@ -22,74 +28,85 @@
                 Account #:{{centerViewData.accountNo}} <br />
                 Office: {{centerViewData.officeName}} <br />
                 <span *ngIf="centerViewData.externalId">
-                  External Id: {{centerViewData.externalId}} <br/>
+                  External Id: {{centerViewData.externalId}} <br />
                 </span>
                 <span *ngIf="centerViewData.staffName">
-                  Staff: {{centerViewData.staffName}} <br/>
+                  Staff: {{centerViewData.staffName}} <br />
                 </span>
                 Activation Date :
-                {{(centerViewData.activationDate)?(centerViewData.activationDate  | dateFormat) :'Not Activated'}}<br />
+                {{(centerViewData.activationDate)?(centerViewData.activationDate | dateFormat) :'Not Activated'}}<br />
               </p>
             </div>
+            <div fxFlex="45%" class="center-meeting" fxLayoutAlign="start start">
+              <div *ngIf="centerViewData.collectionMeetingCalendar; else unassigned">
+                <p>
+                  Next Meeting on: {{centerViewData.collectionMeetingCalendar?.nextTenRecurringDates[0] | dateFormat}}
+                  <span *ngIf="editMeeting">
+                    <i class="fa fa-edit" (click)="doAction('Edit Meeting')"
+                      *mifosxHasPermission="'UPDATE_MEETING'"></i><br />
+                  </span>
+                  Meeting Frequency: {{centerViewData.collectionMeetingCalendar?.frequency.value | lowercase}}
+                </p>
+              </div>
+              <ng-template #unassigned>
+                <div>
+                  <p>
+                    Next Meeting on: Unassigned
+                    <i class="fa fa-calendar"></i><br />
+                    Meeting Frequency: N/A
+                  </p>
+                </div>
+              </ng-template>
+            </div>
           </div>
         </mat-card-subtitle>
       </div>
 
-      <div class="center-meeting" fxLayoutAlign="start start">
+      <mat-menu #centerMenu="matMenu">
-        <div *ngIf="centerViewData.collectionMeetingCalendar; else unassigned">
-          <p>
-             Next Meeting on: {{centerViewData.collectionMeetingCalendar?.nextTenRecurringDates[0]  | dateFormat}}
-             <span *ngIf="editMeeting">
-              <i class="fa fa-edit" (click)="doAction('Edit Meeting')" *mifosxHasPermission="'UPDATE_MEETING'"></i><br />
-             </span>
-             Meeting Frequency: {{centerViewData.collectionMeetingCalendar?.frequency.value | lowercase}}
-          </p>
-        </div>
-        <ng-template #unassigned>
-          <div>
-            <p>
-              Next Meeting on: Unassigned
-              <i class="fa fa-calendar"></i><br/>
-              Meeting Frequency: N/A
-          </p>
-        </div>
-        </ng-template>
-      </div>
 
-    </mat-card-title-group>
+        <span *ngIf="!(centerViewData.status.value=='Active')">
-    <mat-card-actions class="center-actions" *ngIf="!(centerViewData.status.value==='Closed')">
+          <button mat-menu-item *mifosxHasPermission="'ACTIVATE_CENTER'" (click)="doAction('Activate')"><i
-      <span *ngIf="!(centerViewData.status.value=='Active')">
+              class="fa fa-check-sign"></i> Activate </button>
-        <button mat-raised-button *mifosxHasPermission="'ACTIVATE_CENTER'" (click)="doAction('Activate')"><i class="fa fa-check-sign"></i> Activate </button>
-      </span>
-      <button mat-raised-button *mifosxHasPermission="'UPDATE_CENTER'" (click)="doAction('Edit')"><i class="fa fa-edit"></i> Edit </button>
-      <button mat-raised-button *mifosxHasPermission="'CREATE_GROUP'"><i class="fa fa-plus"></i> Add Group </button>
-      <button mat-raised-button *mifosxHasPermission="'ASSOCIATEGROUPS_CENTER'" (click)="doAction('Manage Groups')"> <i class="fa fa-edit"></i> Manage Groups </button>
-      <span  *ngIf="centerViewData.active">
-      <button mat-raised-button *mifosxHasPermission="'CREATE_SAVINGSACCOUNT'" [routerLink]="['savings-accounts', 'create']">
-        <i class="fa fa-file"></i> Centers Saving Application
-      </button>
-      </span>
-      <button mat-raised-button [matMenuTriggerFor]="More"> More </button>
-      <mat-menu #More="matMenu">
-        <span *ngIf="centerViewData.collectionMeetingCalendar">
-          <button mat-menu-item *mifosxHasPermission="'SAVEORUPDATEATTENDANCE_MEETING'" (click)="doAction('Attendance')"> Attendance </button>
         </span>
-        <span *ngIf="!(centerViewData.staffId)">
+        <button mat-menu-item *mifosxHasPermission="'UPDATE_CENTER'" (click)="doAction('Edit')"><i
-          <button mat-menu-item *mifosxHasPermission="'ASSIGNSTAFF_GROUP'" (click)="doAction('Assign Staff')"> Assign Staff </button>
+            class="fa fa-edit"></i> Edit </button>
+        <button mat-menu-item *mifosxHasPermission="'CREATE_GROUP'"><i class="fa fa-plus"></i> Add Group </button>
+        <button mat-menu-item *mifosxHasPermission="'ASSOCIATEGROUPS_CENTER'" (click)="doAction('Manage Groups')"> <i
+            class="fa fa-edit"></i> Manage Groups </button>
+        <span *ngIf="centerViewData.active">
+          <button mat-menu-item *mifosxHasPermission="'CREATE_SAVINGSACCOUNT'"
+            [routerLink]="['savings-accounts', 'create']">
+            <i class="fa fa-file"></i> Centers Saving Application
+          </button>
         </span>
-        <span *ngIf="centerViewData.staffId">
+        <button mat-menu-item [matMenuTriggerFor]="More"> More </button>
-          <button mat-menu-item *mifosxHasPermission="'UNASSIGNSTAFF_GROUP'" (click)="doAction('Unassign Staff')"> Unassign Staff </button>
+        <mat-menu #More="matMenu">
-        </span>
+          <span *ngIf="centerViewData.collectionMeetingCalendar">
-        <span *ngIf="centerViewData.status.value==='Active'">
+            <button mat-menu-item *mifosxHasPermission="'SAVEORUPDATEATTENDANCE_MEETING'"
-          <button mat-menu-item *mifosxHasPermission="'DELETE_CENTER'" (click)="doAction('Delete')"> Delete </button>
+              (click)="doAction('Attendance')"> Attendance </button>
-        </span>
+          </span>
-        <button mat-menu-item *mifosxHasPermission="'CLOSE_CENTER'" (click)="doAction('Close')"> Close </button>
+          <span *ngIf="!(centerViewData.staffId)">
-        <span *ngIf="centerViewData.status.value==='Active' && !(centerViewData.collectionMeetingCalendar)">
+            <button mat-menu-item *mifosxHasPermission="'ASSIGNSTAFF_GROUP'" (click)="doAction('Assign Staff')"> Assign
-          <button mat-menu-item *mifosxHasPermission="'CREATE_MEETING'" (click)="doAction('Attach Meeting')"> Attach Meeting </button>
+              Staff </button>
-        </span>
+          </span>
-        <button mat-menu-item *mifosxHasPermission="'READ_Staff Assignment History'" (click)="doAction('Staff Assignment History')"> Staff Assignment History </button>
+          <span *ngIf="centerViewData.staffId">
+            <button mat-menu-item *mifosxHasPermission="'UNASSIGNSTAFF_GROUP'" (click)="doAction('Unassign Staff')">
+              Unassign Staff </button>
+          </span>
+          <span *ngIf="centerViewData.status.value==='Active'">
+            <button mat-menu-item *mifosxHasPermission="'DELETE_CENTER'" (click)="doAction('Delete')"> Delete </button>
+          </span>
+          <button mat-menu-item *mifosxHasPermission="'CLOSE_CENTER'" (click)="doAction('Close')"> Close </button>
+          <span *ngIf="centerViewData.status.value==='Active' && !(centerViewData.collectionMeetingCalendar)">
+            <button mat-menu-item *mifosxHasPermission="'CREATE_MEETING'" (click)="doAction('Attach Meeting')"> Attach
+              Meeting </button>
+          </span>
+          <button mat-menu-item *mifosxHasPermission="'READ_Staff Assignment History'"
+            (click)="doAction('Staff Assignment History')"> Staff Assignment History </button>
+        </mat-menu>
       </mat-menu>
-    </mat-card-actions>
+    </mat-card-title-group>
+
   </mat-card-header>
   <mat-card-content>
     <nav mat-tab-nav-bar class="navigation-tabs">
@@ -97,13 +114,14 @@
         [active]="general.isActive">
         General
       </a>
-      <a mat-tab-link *mifosxHasPermission="'READ_GROUPNOTE'" [routerLink]="['./notes']" routerLinkActive #notes="routerLinkActive"
+      <a mat-tab-link *mifosxHasPermission="'READ_GROUPNOTE'" [routerLink]="['./notes']" routerLinkActive
-        [active]="notes.isActive">
+        #notes="routerLinkActive" [active]="notes.isActive">
         Notes
       </a>
       <span *ngFor="let centerDatatable of centerDatatables">
-        <a mat-tab-link *mifosxHasPermission="'READ_' + centerDatatable.registeredTableName" [routerLink]="['./datatables',centerDatatable.registeredTableName]"
+        <a mat-tab-link *mifosxHasPermission="'READ_' + centerDatatable.registeredTableName"
-          routerLinkActive #datatable="routerLinkActive" [active]="datatable.isActive">
+          [routerLink]="['./datatables',centerDatatable.registeredTableName]" routerLinkActive
+          #datatable="routerLinkActive" [active]="datatable.isActive">
           {{centerDatatable.registeredTableName}}
         </a>
       </span>

src/app/centers/centers-view/datatable-tab/datatable-tab.component.html

@@ -1,4 +1,9 @@
-<div>
+<div class="tab-container mat-typography">
-  <mifosx-multi-row *ngIf="multiRowDatatableFlag" [dataObject]="centerDatatable"></mifosx-multi-row>
+  <mifosx-entity-datatable-tab
-  <mifosx-single-row *ngIf="!multiRowDatatableFlag" [dataObject]="centerDatatable"></mifosx-single-row>
+    entityType="Center"
+    [entityId]="entityId"
+    [multiRowDatatableFlag]="multiRowDatatableFlag"
+    [entityDatatable]="entityDatatable"
+  >
+  </mifosx-entity-datatable-tab>
 </div>

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

@@ -1,4 +1,4 @@
-import { Component} from '@angular/core';
+import { Component } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 
 @Component({
@@ -7,21 +7,23 @@ import { ActivatedRoute } from '@angular/router';
   styleUrls: ['./datatable-tab.component.scss']
 })
 export class DatatableTabComponent {
+  entityId: string;
+  /** Center Datatable */
+  entityDatatable: any;
+  /** Multi Row Datatable Flag */
+  multiRowDatatableFlag: boolean;
 
-    /** Center Datatable */
+  /**
-    centerDatatable: any;
+   * Fetches data table data from `resolve`
-    /** Multi Row Datatable Flag */
+   * @param {ActivatedRoute} route Activated Route.
-    multiRowDatatableFlag: boolean;
+   */
+  constructor(private route: ActivatedRoute) {
+    this.entityId = this.route.parent.parent.snapshot.paramMap.get('centerId');
 
-    /**
+    this.route.data.subscribe((data: { centerDatatable: any }) => {
-     * Fetches data table data from `resolve`
+      this.entityDatatable = data.centerDatatable;
-     * @param {ActivatedRoute} route Activated Route.
+      this.multiRowDatatableFlag = this.entityDatatable.columnHeaders[0].columnName === 'id' ? true : false;
-     */
+    });
-    constructor(private route: ActivatedRoute) {
+  }
-      this.route.data.subscribe((data: { centerDatatable: any }) => {
-        this.centerDatatable = data.centerDatatable;
-        this.multiRowDatatableFlag = this.centerDatatable.columnHeaders[0].columnName === 'id' ? true : false;
-      });
-    }
 
 }

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

@@ -1,34 +0,0 @@
-<div class="tab-container mat-typography">
-
-  <div fxLayout="row" fxLayoutAlign="start">
-    <div class="m-b-10">
-      <h3>{{datatableName}}</h3>
-    </div>
-    <div class="action-button m-b-5" fxLayoutGap="10px">
-      <span *mifosxHasPermission="'CREATE_' + datatableName">
-        <button mat-raised-button color="primary" (click)="add()">
-          <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;Add
-        </button>
-      </span>
-      <span *mifosxHasPermission="'DELETE_' + datatableName">
-        <button class="delete-button" mat-raised-button color="warn" (click)="delete()" *ngIf="showDeleteBotton">
-          <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;Delete All
-        </button>
-      </span>
-    </div>
-  </div>
-
-
-  <table #dataTable mat-table [hidden]="!datatableData[0]" [dataSource]="datatableData" class="mat-elevation-z1 m-b-25">
-
-    <ng-container *ngFor="let datatableColumn of datatableColumns;let i = index" [matColumnDef]="datatableColumn">
-      <th mat-header-cell class="right" *matHeaderCellDef> {{datatableColumn}} </th>
-      <td mat-cell class="right" *matCellDef="let data">{{ formatValue(i, data.row[i]) }}</td>
-    </ng-container>
-
-    <tr mat-header-row *matHeaderRowDef="datatableColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: datatableColumns;"></tr>
-
-  </table>
-
-</div>

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

@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { MultiRowComponent } from './multi-row.component';
-
-describe('MultiRowComponent', () => {
-  let component: MultiRowComponent;
-  let fixture: ComponentFixture<MultiRowComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ MultiRowComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(MultiRowComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

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

@@ -1,42 +0,0 @@
-<div class="tab-container mat-typography">
-  <h3>{{datatableName}}</h3>
-  <div fxLayout="row" fxLayoutAlign="flex-end">
-    <button mat-raised-button color="primary" (click)="add()" *ngIf="!dataObject.data[0]">
-      <fa-icon icon="plus" class="m-r-10"></fa-icon>Add
-    </button>
-    <button mat-raised-button color="primary" (click)="edit()" *ngIf="dataObject.data[0]">
-      <fa-icon icon="edit" class="m-r-10"></fa-icon>Edit
-    </button>
-    <button class="delete-button" mat-raised-button color="warn" (click)="delete()" *ngIf="dataObject.data[0]">
-      <fa-icon icon="trash" class="m-r-10"></fa-icon>Delete All
-    </button>
-  </div>
-
-  <mat-divider></mat-divider>
-
-  <ng-container *ngIf="dataObject.data.length > 0">
-
-    <div *ngFor="let columnHeader of dataObject.columnHeaders;let i = index" class="table-data">
-
-      <div fxFlex="45%" class="mat-body-strong left">
-        {{columnHeader.columnName}}
-      </div>
-
-      <div fxFlex="45%" [ngSwitch]="columnHeader.columnDisplayType" class="right">
-        <span *ngSwitchCase="'DATE'">
-          {{dataObject.data[0].row[i] | dateFormat}}
-        </span>
-        <span *ngSwitchCase="'DATETIME'">
-          {{dataObject.data[0].row[i] | datetimeFormat}}
-        </span>
-        <span *ngSwitchCase="'INTEGER' || 'DECIMAL'">
-          {{dataObject.data[0].row[i] | number}}
-        </span>
-        <span *ngSwitchDefault>
-          {{dataObject.data[0].row[i]}}
-        </span>
-      </div>
-    </div>
-  </ng-container>
-
-</div>

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

@@ -1,11 +0,0 @@
-.tab-container {
-    padding: 1%;
-    margin: 1%;
-    .delete-button {
-        margin-left: 1%;
-    }
-}
-
-.tableName {
-    padding-left: 2%;
-}

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

@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { SingleRowComponent } from './single-row.component';
-
-describe('SingleRowComponent', () => {
-  let component: SingleRowComponent;
-  let fixture: ComponentFixture<SingleRowComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ SingleRowComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(SingleRowComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

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

@@ -1,149 +0,0 @@
-/** Angular Imports */
-import { Component, Input, OnInit } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import { MatDialog } from '@angular/material/dialog';
-
-/** Custom Components */
-import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
-import { DeleteDialogComponent } from '../../../../shared/delete-dialog/delete-dialog.component';
-
-/** Custom Models */
-import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-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
- */
-@Component({
-  selector: 'mifosx-single-row',
-  templateUrl: './single-row.component.html',
-  styleUrls: ['./single-row.component.scss']
-})
-export class SingleRowComponent implements OnInit {
-
-  /** Data Object */
-  @Input() dataObject: any;
-
-  /** Data Table Name */
-  datatableName: string;
-  /** Center Id */
-  centerId: string;
-
-  /**
-   * Fetches center Id from parent route params.
-   * @param {ActivatedRoute} route Activated Route.
-   * @param {Dates} dateUtils Date Utils.
-   * @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 datatables: Datatables) {
-    this.centerId = this.route.parent.parent.snapshot.paramMap.get('centerId');
-  }
-
-  /**
-   * Fetches data table name from route params.
-   * subscription is required due to asynchronicity.
-   */
-  ngOnInit() {
-    this.route.params.subscribe((routeParams: any) => {
-      this.datatableName = routeParams.datatableName;
-    });
-  }
-
-  /**
-   * Creates a new instance of the given single row data table.
-   */
-  add() {
-    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 !== 'center_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
-    };
-    const addDialogRef = this.dialog.open(FormDialogComponent, { data });
-    addDialogRef.afterClosed().subscribe((response: any) => {
-      if (response.data) {
-        dateTransformColumns.forEach((column) => {
-          response.data.value[column] = this.dateUtils.formatDate(response.data.value[column], dataTableEntryObject.dateFormat);
-        });
-        dataTableEntryObject = { ...response.data.value, ...dataTableEntryObject };
-        this.centersService.addCenterDatatableEntry(this.centerId, this.datatableName, dataTableEntryObject).subscribe(() => {
-          this.centersService.getCenterDatatable(this.centerId, this.datatableName).subscribe((dataObject: any) => {
-            this.dataObject = dataObject;
-          });
-        });
-      }
-    });
-  }
-
-  /**
-   * Edits the current instance of single row data table.
-   */
-  edit() {
-    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 !== 'center_id'));
-    });
-    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;
-    });
-    const data = {
-      title: 'Edit ' + this.datatableName,
-      layout: { addButtonText: 'Confirm' },
-      formfields: formfields
-    };
-    const editDialogRef = this.dialog.open(FormDialogComponent, { data });
-    editDialogRef.afterClosed().subscribe((response: any) => {
-      if (response.data) {
-        dateTransformColumns.forEach((column) => {
-          response.data.value[column] = this.dateUtils.formatDate(response.data.value[column], dataTableEntryObject.dateFormat);
-        });
-        dataTableEntryObject = { ...response.data.value, ...dataTableEntryObject };
-        this.centersService.editCenterDatatableEntry(this.centerId, this.datatableName, dataTableEntryObject).subscribe(() => {
-          this.centersService.getCenterDatatable(this.centerId, this.datatableName).subscribe((dataObject: any) => {
-            this.dataObject = dataObject;
-          });
-        });
-      }
-    });
-  }
-
-  /**
-   * Deletes the current instance of single row data table.
-   */
-  delete() {
-    const deleteDataTableDialogRef = this.dialog.open(DeleteDialogComponent, {
-      data: { deleteContext: `the contents of ${this.datatableName}` }
-    });
-    deleteDataTableDialogRef.afterClosed().subscribe((response: any) => {
-      if (response.delete) {
-        this.centersService.deleteDatatableContent(this.centerId, this.datatableName)
-          .subscribe(() => {
-            this.centersService.getCenterDatatable(this.centerId, this.datatableName).subscribe((dataObject: any) => {
-              this.dataObject = dataObject;
-            });
-          });
-      }
-    });
-  }
-
-}

src/app/centers/centers.module.ts

@@ -14,8 +14,6 @@ import { CentersViewComponent } from './centers-view/centers-view.component';
 import { GeneralTabComponent } from './centers-view/general-tab/general-tab.component';
 import { NotesTabComponent } from './centers-view/notes-tab/notes-tab.component';
 import { DatatableTabComponent } from './centers-view/datatable-tab/datatable-tab.component';
-import { MultiRowComponent } from './centers-view/datatable-tab/multi-row/multi-row.component';
-import { SingleRowComponent } from './centers-view/datatable-tab/single-row/single-row.component';
 import { CenterActionsComponent } from './centers-view/center-actions/center-actions.component';
 import { ActivateCenterComponent } from './centers-view/center-actions/activate-center/activate-center.component';
 import { CenterAssignStaffComponent } from './centers-view/center-actions/center-assign-staff/center-assign-staff.component';
@@ -47,8 +45,6 @@ import { EditCenterComponent } from './edit-center/edit-center.component';
     GeneralTabComponent,
     NotesTabComponent,
     DatatableTabComponent,
-    MultiRowComponent,
-    SingleRowComponent,
     CenterActionsComponent,
     ActivateCenterComponent,
     CenterAssignStaffComponent,

src/app/centers/edit-center/edit-center.component.html

@@ -4,58 +4,58 @@
 
     <form [formGroup]="editCenterForm" (ngSubmit)="submit()">
 
-	  <mat-card-content>
+      <mat-card-content>
 
-	    <div fxLayout="column">
+        <div fxLayout="column">
 
-		  <mat-form-field>
+          <mat-form-field>
-		    <mat-label>Name</mat-label>
+            <mat-label>Name</mat-label>
-			<input matInput required formControlName="name">
+            <input matInput required formControlName="name">
-			<mat-error *ngIf="editCenterForm.controls.name.hasError('required')">
+            <mat-error *ngIf="editCenterForm.controls.name.hasError('required')">
-			  Center Name is <strong>required</strong>
+              Center Name is <strong>required</strong>
-			</mat-error>
+            </mat-error>
-			<mat-error *ngIf="editCenterForm.controls.name.hasError('pattern')">
+            <mat-error *ngIf="editCenterForm.controls.name.hasError('pattern')">
-			  Center Name <strong>cannot</strong> begin with a special character or number
+              Center Name <strong>cannot</strong> begin with a special character or number
-			</mat-error>
+            </mat-error>
-			</mat-form-field>
+          </mat-form-field>
 
-			<mat-form-field>
+          <mat-form-field>
-			  <mat-label>Staff</mat-label>
+            <mat-label>Staff</mat-label>
-			  <mat-select formControlName="staffId">
+            <mat-select formControlName="staffId">
-				<mat-option *ngFor="let staff of staffs" [value]="staff.id">
+              <mat-option *ngFor="let staff of staffs" [value]="staff.id">
-				  {{ staff.displayName }}
+                {{ staff.displayName }}
-				</mat-option>
+              </mat-option>
-			  </mat-select>
+            </mat-select>
-			</mat-form-field>
+          </mat-form-field>
 
-			<mat-form-field>
+          <mat-form-field>
-			  <mat-label>External id</mat-label>
+            <mat-label>External id</mat-label>
-			  <input matInput formControlName="externalId">
+            <input matInput formControlName="externalId">
-			</mat-form-field>
+          </mat-form-field>
 
-			<ng-container *ngIf="centerData.status.value=='Pending'" (click)="activatedOnDatePicker.open()">
+          <ng-container *ngIf="centerData.status.value=='Pending'" (click)="activatedOnDatePicker.open()">
-			  <mat-form-field>
+            <mat-form-field>
-				<mat-label>Activation date</mat-label>
+              <mat-label>Activation date</mat-label>
-				<input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="activatedOnDatePicker" required
+              <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="activatedOnDatePicker" required
-				  formControlName="activationDate">
+                formControlName="activationDate">
-				<mat-datepicker-toggle matSuffix [for]="activatedOnDatePicker"></mat-datepicker-toggle>
+              <mat-datepicker-toggle matSuffix [for]="activatedOnDatePicker"></mat-datepicker-toggle>
-				<mat-datepicker #activatedOnDatePicker></mat-datepicker>
+              <mat-datepicker #activatedOnDatePicker></mat-datepicker>
-				<mat-error *ngIf="editCenterForm.controls.activationDate.hasError('required')">
+              <mat-error *ngIf="editCenterForm.controls.activationDate.hasError('required')">
-				  Activation Date is <strong>required</strong>
+                Activation Date is <strong>required</strong>
-				</mat-error>
+              </mat-error>
-			  </mat-form-field>
+            </mat-form-field>
-			</ng-container>
+          </ng-container>
 
-		</div>
+        </div>
 
-	  </mat-card-content>
+      </mat-card-content>
 
-	  <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-	    <button type="button" mat-raised-button [routerLink]="['../general']">Cancel</button>
+        <button type="button" mat-raised-button [routerLink]="['../general']">Cancel</button>
-	    <button mat-raised-button color="accent" [disabled]="!editCenterForm.valid">Confirm</button>
+        <button mat-raised-button color="primary" [disabled]="!editCenterForm.valid">Confirm</button>
-	  </mat-card-actions>
+      </mat-card-actions>
 
-	</form>
+    </form>
 
   </mat-card>
 

src/app/clients/client-stepper/client-datatable-step/client-datatable-step.component.ts

@@ -1,6 +1,6 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
-import { Dates } from 'app/core/utils/dates';
+import { Datatables } from 'app/core/utils/datatables';
 import { SettingsService } from 'app/settings/settings.service';
 
 @Component({
@@ -18,12 +18,10 @@ export class ClientDatatableStepComponent implements OnInit {
 
   constructor(private formBuilder: FormBuilder,
     private settingsService: SettingsService,
-    private dateUtils: Dates) { }
+    private datatableService: Datatables) { }
 
   ngOnInit(): void {
-    this.datatableInputs = this.datatableData.columnHeaderData.filter((column: any) => {
+    this.datatableInputs = this.datatableService.filterSystemColumns(this.datatableData.columnHeaderData);
-      return ((column.columnName !== 'id') && (column.columnName !== 'client_id') && (column.columnName !== 'created_at') && (column.columnName !== 'updated_at'));
-    });
     const inputItems: any = {};
     this.datatableInputs.forEach((input: any) => {
       input.controlName = this.getInputName(input);
@@ -41,68 +39,44 @@ export class ClientDatatableStepComponent implements OnInit {
   }
 
   getInputName(datatableInput: any): string {
-    if (datatableInput.columnName && datatableInput.columnName.includes('_cd_')) {
+    return this.datatableService.getInputName(datatableInput);
-      return datatableInput.columnName.split('_cd_')[0];
-    }
-    return datatableInput.columnName;
   }
 
   isNumeric(columnType: string) {
-    return this.isColumnType(columnType, 'INTEGER') || this.isColumnType(columnType, 'DECIMAL');
+    return this.datatableService.isNumeric(columnType);
   }
 
   isDate(columnType: string) {
-    return this.isColumnType(columnType, 'DATE') || this.isColumnType(columnType, 'DATETIME');
+    return this.datatableService.isDate(columnType);
   }
 
   isBoolean(columnType: string) {
-    return this.isColumnType(columnType, 'BOOLEAN');
+    return this.datatableService.isBoolean(columnType);
   }
 
   isDropdown(columnType: string) {
-    return this.isColumnType(columnType, 'CODELOOKUP');
+    return this.datatableService.isDropdown(columnType);
   }
 
   isString(columnType: string) {
-    return this.isColumnType(columnType, 'STRING');
+    return this.datatableService.isString(columnType);
   }
 
   isText(columnType: string) {
-    return this.isColumnType(columnType, 'TEXT');
+    return this.datatableService.isText(columnType);
-  }
-
-  isColumnType(columnType: string, expectedType: string) {
-    return (columnType === expectedType);
   }
 
   get payload(): any {
     const dateFormat = this.settingsService.dateFormat;
     const datatableDataValues = this.datatableForm.value;
-    const data = {
-      locale: this.settingsService.language.code
-    };
-    let existDate = false;
-    this.datatableInputs.forEach((input: any) => {
-      const controlName = this.getInputName(input);
-      if (this.isNumeric(input.columnDisplayType)) {
-        data[input.columnName] = datatableDataValues[controlName] * 1;
-      } else if (this.isDate(input.columnDisplayType)) {
-        data[input.columnName] = this.dateUtils.formatDate(datatableDataValues[controlName], dateFormat);
-        existDate = true;
-      } else {
-        data[input.columnName] = datatableDataValues[controlName];
-      }
-    });
 
-    if (existDate) {
+    const data = this.datatableService.buildPayload(this.datatableInputs, datatableDataValues, dateFormat,
-      data['dateFormat'] = dateFormat;
+      { locale: this.settingsService.language.code });
-    }
 
-    const payload = {
+    return {
       registeredTableName: this.datatableData.registeredTableName,
       data: data
     };
-    return payload;
   }
 
 }

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

@@ -1,4 +1,9 @@
-<div>
+<div class="tab-container mat-typography">
-  <mifosx-multi-row *ngIf="multiRowDatatableFlag" [dataObject]="clientDatatable"></mifosx-multi-row>
+  <mifosx-entity-datatable-tab
-  <mifosx-single-row *ngIf="!multiRowDatatableFlag" [dataObject]="clientDatatable"></mifosx-single-row>
+    entityType="Client"
+    [entityId]="entityId"
+    [multiRowDatatableFlag]="multiRowDatatableFlag"
+    [entityDatatable]="entityDatatable"
+  >
+  </mifosx-entity-datatable-tab>
 </div>

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

@@ -7,14 +7,17 @@ import { ActivatedRoute } from '@angular/router';
   styleUrls: ['./datatable-tab.component.scss']
 })
 export class DatatableTabComponent implements OnInit {
-  clientDatatable: any;
+  entityId: string;
+  entityDatatable: any;
   multiRowDatatableFlag: boolean;
-  constructor(private route: ActivatedRoute) {
-    this.route.data.subscribe((data: { clientDatatable: any }) => {
-      this.clientDatatable = data.clientDatatable;
-      this.multiRowDatatableFlag = this.clientDatatable.columnHeaders[0].columnName === 'id' ? true : false;
-    });
 
+  constructor(private route: ActivatedRoute) {
+    this.entityId = this.route.parent.parent.snapshot.paramMap.get('clientId');
+
+    this.route.data.subscribe((data: { clientDatatable: any }) => {
+      this.entityDatatable = data.clientDatatable;
+      this.multiRowDatatableFlag = this.entityDatatable.columnHeaders[0].columnName === 'id' ? true : false;
+    });
   }
 
   ngOnInit() {

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

@@ -1,20 +0,0 @@
-<div class="tab-container mat-typography">
-  <h3>{{datatableName}}</h3>
-  <div fxLayout="row" fxLayoutAlign="flex-end">
-    <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">
-
-    <ng-container *ngFor="let datatableColumn of datatableColumns;let i = index" [matColumnDef]="datatableColumn">
-      <th mat-header-cell class="right" *matHeaderCellDef> {{datatableColumn}} </th>
-      <td mat-cell class="right" *matCellDef="let data">{{ formatValue(i, data.row[i]) }}</td>
-    </ng-container>
-    <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.scss

@@ -1,8 +0,0 @@
-.tab-container {
-  padding: 1%;
-  margin: 1%;
-
-  table {
-    width: 100%;
-  }
-}

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

@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { MultiRowComponent } from './multi-row.component';
-
-describe('MultiRowComponent', () => {
-  let component: MultiRowComponent;
-  let fixture: ComponentFixture<MultiRowComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ MultiRowComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(MultiRowComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

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

@@ -1,130 +0,0 @@
-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/dialog';
-import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-base';
-
-/** 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';
-import { SettingsService } from 'app/settings/settings.service';
-import { Dates } from 'app/core/utils/dates';
-import { Datatables } from 'app/core/utils/datatables';
-import { DateFormatPipe } from 'app/pipes/date-format.pipe';
-import { DatetimeFormatPipe } from 'app/pipes/datetime-format.pipe';
-import { DecimalPipe } from '@angular/common';
-
-@Component({
-  selector: 'mifosx-multi-row',
-  templateUrl: './multi-row.component.html',
-  styleUrls: ['./multi-row.component.scss']
-})
-export class MultiRowComponent implements OnInit, OnChanges {
-  @ViewChild('dataTable', { static: true }) dataTableRef: MatTable<Element>;
-  @Input() dataObject: any;
-  datatableName: string;
-  datatableColumns: string[] = [];
-  datatableData: any;
-  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 datatables: Datatables,
-    private dateFormat: DateFormatPipe,
-    private dateTimeFormat: DatetimeFormatPipe,
-    private numberFormat: DecimalPipe) {
-    this.clientId = this.route.parent.parent.snapshot.paramMap.get('clientId');
-  }
-
-  ngOnInit() {
-    this.route.params.subscribe((routeParams: any) => {
-      this.datatableName = routeParams.datatableName;
-    });
-  }
-
-  ngOnChanges() {
-    this.datatableColumns = this.dataObject.columnHeaders.map((columnHeader: any) => {
-      return columnHeader.columnName;
-    });
-    this.datatableData = this.dataObject.data;
-    this.showDeleteBotton = this.datatableData[0] ? true : false;
-  }
-
-  add() {
-    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 !== 'client_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
-    };
-    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.dateUtils.formatDate(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.datatableData = dataObject.data;
-            this.dataTableRef.renderRows();
-          });
-        });
-      }
-    });
-  }
-
-  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();
-            });
-          });
-      }
-    });
-  }
-
-  formatValue(index: number, value: any): any {
-    const columnDisplayType = this.dataObject.columnHeaders[index].columnDisplayType;
-    if (columnDisplayType === 'DATE') {
-      return this.dateFormat.transform(value);
-    } else if (columnDisplayType === 'DATETIME') {
-      return this.dateTimeFormat.transform(value);
-    } else if (columnDisplayType === 'INTEGER' || columnDisplayType === 'DECIMAL') {
-      return this.numberFormat.transform(value);
-    }
-    return value;
-  }
-
-}

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

@@ -1,42 +0,0 @@
-<div class="tab-container mat-typography">
-  <h3>{{datatableName}}</h3>
-  <div fxLayout="row" fxLayoutAlign="flex-end">
-    <button mat-raised-button color="primary" (click)="add()" *ngIf="!dataObject.data[0]">
-      <fa-icon icon="plus" class="m-r-10"></fa-icon>Add
-    </button>
-    <button mat-raised-button color="primary" (click)="edit()" *ngIf="dataObject.data[0]">
-      <fa-icon icon="edit" class="m-r-10"></fa-icon>Edit
-    </button>
-    <button class="delete-button" mat-raised-button color="warn" (click)="delete()" *ngIf="dataObject.data[0]">
-      <fa-icon icon="trash" class="m-r-10"></fa-icon>Delete All
-    </button>
-  </div>
-
-  <mat-divider></mat-divider>
-
-  <ng-container *ngIf="dataObject.data.length > 0">
-
-    <div *ngFor="let columnHeader of dataObject.columnHeaders;let i = index" class="table-data">
-
-      <div fxFlex="45%" class="mat-body-strong left">
-        {{columnHeader.columnName}}
-      </div>
-
-      <div fxFlex="45%" [ngSwitch]="columnHeader.columnDisplayType" class="right">
-        <span *ngSwitchCase="'DATE'">
-          {{dataObject.data[0].row[i] | dateFormat}}
-        </span>
-        <span *ngSwitchCase="'DATETIME'">
-          {{dataObject.data[0].row[i] | datetimeFormat}}
-        </span>
-        <span *ngSwitchCase="'INTEGER' || 'DECIMAL'">
-          {{dataObject.data[0].row[i] | number}}
-        </span>
-        <span *ngSwitchDefault>
-          {{dataObject.data[0].row[i]}}
-        </span>
-      </div>
-    </div>
-  </ng-container>
-
-</div>

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

@@ -1,13 +0,0 @@
-.tab-container {
-  padding: 1%;
-  margin: 1%;
-
-  .delete-button {
-    margin-left: 1%;
-  }
-}
-
-.table-data {
-  margin-top: 20px;
-  align-items: center;
-}

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

@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { SingleRowComponent } from './single-row.component';
-
-describe('SingleRowComponent', () => {
-  let component: SingleRowComponent;
-  let fixture: ComponentFixture<SingleRowComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ SingleRowComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(SingleRowComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

src/app/clients/clients.module.ts

@@ -20,8 +20,6 @@ import { NotesTabComponent } from './clients-view/notes-tab/notes-tab.component'
 import { EditNotesDialogComponent } from './clients-view/custom-dialogs/edit-notes-dialog/edit-notes-dialog.component';
 import { DocumentsTabComponent } from './clients-view/documents-tab/documents-tab.component';
 import { DatatableTabComponent } from './clients-view/datatable-tab/datatable-tab.component';
-import { MultiRowComponent } from './clients-view/datatable-tab/multi-row/multi-row.component';
-import { SingleRowComponent } from './clients-view/datatable-tab/single-row/single-row.component';
 import { AddressTabComponent } from './clients-view/address-tab/address-tab.component';
 import { ChargesOverviewComponent } from './clients-view/charges/charges-overview/charges-overview.component';
 import { ClientActionsComponent } from './clients-view/client-actions/client-actions.component';
@@ -86,8 +84,6 @@ import { ClientDatatableStepComponent } from './client-stepper/client-datatable-
     EditNotesDialogComponent,
     DocumentsTabComponent,
     DatatableTabComponent,
-    MultiRowComponent,
-    SingleRowComponent,
     AddressTabComponent,
     ChargesOverviewComponent,
     ClientActionsComponent,

src/app/core/utils/datatables.ts

@@ -1,5 +1,8 @@
 import { Injectable } from '@angular/core';
+import { SettingsService } from 'app/settings/settings.service';
 import { CheckboxBase } from 'app/shared/form-dialog/formfield/model/checkbox-base';
+import { DatepickerBase } from 'app/shared/form-dialog/formfield/model/datepicker-base';
+import { DateTimepickerBase } from 'app/shared/form-dialog/formfield/model/datetimepicker-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';
@@ -9,7 +12,11 @@ import { Dates } from './dates';
 })
 export class Datatables {
 
-  constructor() { }
+  systemFields: string[] = ['id', 'created_at', 'updated_at', 'client_id', 'savings_account_id',
+    'loan_id', 'group_id', 'center_id', 'office_id', 'product_loan_id', 'savings_product_id'];
+
+  constructor(private dateUtils: Dates,
+    private settingsService: SettingsService) { }
 
   public getFormfields(columns: any, dateTransformColumns: string[], dataTableEntryObject: any) {
     return columns.map((column: any) => {
@@ -43,22 +50,22 @@ export class Datatables {
           if (!dataTableEntryObject.dateFormat) {
             dataTableEntryObject.dateFormat = Dates.DEFAULT_DATEFORMAT;
           }
-          return new InputBase({
+          return new DatepickerBase({
             controlName: column.columnName,
             label: column.columnName,
             value: '',
-            type: 'date',
+            maxDate: this.settingsService.maxAllowedDate,
             required: (column.isColumnNullable) ? false : true
           });
         }
         case 'DATETIME': {
           dateTransformColumns.push(column.columnName);
           dataTableEntryObject.dateFormat = Dates.DEFAULT_DATETIMEFORMAT;
-          return new InputBase({
+          return new DateTimepickerBase({
             controlName: column.columnName,
             label: column.columnName,
             value: '',
-            type: 'datetime-local',
+            maxDate: this.settingsService.maxAllowedDate,
             required: (column.isColumnNullable) ? false : true
           });
         }
@@ -66,4 +73,79 @@ export class Datatables {
     });
   }
 
+  public filterSystemColumns(columnHeaders: any): any {
+    return columnHeaders.filter((column: any, index: number) => {
+      if (!this.systemFields.includes(column.columnName)) {
+        column.idx = index;
+        return column;
+      }
+    });
+  }
+
+  public getInputName(datatableInput: any): string {
+    if (datatableInput.columnName && datatableInput.columnName.includes('_cd_')) {
+      return datatableInput.columnName.split('_cd_')[0];
+    }
+    return datatableInput.columnName;
+  }
+
+  public isNumeric(columnType: string): boolean {
+    return this.isColumnType(columnType, 'INTEGER') || this.isColumnType(columnType, 'DECIMAL');
+  }
+
+  public isDate(columnType: string): boolean {
+    return this.isColumnType(columnType, 'DATE') || this.isColumnType(columnType, 'DATETIME');
+  }
+
+  public isBoolean(columnType: string): boolean {
+    return this.isColumnType(columnType, 'BOOLEAN');
+  }
+
+  public isDropdown(columnType: string): boolean {
+    return this.isColumnType(columnType, 'CODELOOKUP');
+  }
+
+  public isString(columnType: string): boolean {
+    return this.isColumnType(columnType, 'STRING');
+  }
+
+  public isText(columnType: string): boolean {
+    return this.isColumnType(columnType, 'TEXT');
+  }
+
+  public isColumnType(columnType: string, expectedType: string): boolean {
+    return (columnType === expectedType);
+  }
+
+  public buildPayload(datatableInputs: any, datatableDataValues: any, dateFormat: string, output: any): any {
+    let existDate = false;
+    datatableInputs.forEach((input: any) => {
+      const controlName = this.getInputName(input);
+      if (this.isNumeric(input.columnDisplayType)) {
+        output[input.columnName] = datatableDataValues[controlName] * 1;
+      } else if (this.isDate(input.columnDisplayType)) {
+        output[input.columnName] = this.dateUtils.formatDate(datatableDataValues[controlName], dateFormat);
+        existDate = true;
+      } else {
+        output[input.columnName] = datatableDataValues[controlName];
+      }
+    });
+
+    if (existDate) {
+      output['dateFormat'] = dateFormat;
+    }
+    return output;
+  }
+
+  public isSystemDefined(attr: string): boolean {
+    return this.systemFields.includes(attr);
+  }
+
+  public getName(columnName: any): string {
+    if (columnName && columnName.includes('_cd_')) {
+      return columnName.split('_cd_')[0];
+    }
+    return columnName;
+  }
+
 }

src/app/core/utils/dates.ts

@@ -28,6 +28,10 @@ export class Dates {
     }
   }
 
+  public parseDatetime(value: any): Date {
+    return moment(value).toDate();
+  }
+
   public convertToDate(value: any, format: string): Date {
     return moment(value).toDate();
   }

src/app/deposits/fixed-deposits/fixed-deposit-account-view/datatable-tabs/datatable-tabs.component.html

@@ -1,4 +1,9 @@
-<div>
+<div class="tab-container mat-typography">
-  <mifosx-multi-row *ngIf="multiRowDatatableFlag" [dataObject]="savingsDatatable"></mifosx-multi-row>
+  <mifosx-entity-datatable-tab
-  <mifosx-single-row *ngIf="!multiRowDatatableFlag" [dataObject]="savingsDatatable"></mifosx-single-row>
+    entityType="Fixed Deposit"
+    [entityId]="entityId"
+    [multiRowDatatableFlag]="multiRowDatatableFlag"
+    [entityDatatable]="entityDatatable"
+  >
+  </mifosx-entity-datatable-tab>
 </div>

src/app/deposits/fixed-deposits/fixed-deposit-account-view/datatable-tabs/datatable-tabs.component.ts

@@ -11,9 +11,9 @@ import { ActivatedRoute } from '@angular/router';
   styleUrls: ['./datatable-tabs.component.scss']
 })
 export class DatatableTabsComponent {
-
+  entityId: string;
   /** Savings Datatable */
-  savingsDatatable: any;
+  entityDatatable: any;
   /** Multi Row Datatable Flag */
   multiRowDatatableFlag: boolean;
 
@@ -22,9 +22,11 @@ export class DatatableTabsComponent {
    * @param {ActivatedRoute} route Activated Route.
    */
   constructor(private route: ActivatedRoute) {
+    this.entityId = this.route.parent.parent.snapshot.paramMap.get('fixedDepositAccountId');
+
     this.route.data.subscribe((data: { savingsDatatable: any }) => {
-      this.savingsDatatable = data.savingsDatatable;
+      this.entityDatatable = data.savingsDatatable;
-      this.multiRowDatatableFlag = this.savingsDatatable.columnHeaders[0].columnName === 'id' ? true : false;
+      this.multiRowDatatableFlag = this.entityDatatable.columnHeaders[0].columnName === 'id' ? true : false;
     });
   }
 

src/app/deposits/fixed-deposits/fixed-deposit-account-view/datatable-tabs/multi-row/multi-row.component.html

@@ -1,33 +0,0 @@
-<div class="tab-container mat-typography">
-
-  <div fxLayout="row" fxLayoutAlign="start">
-    <div class="m-b-10">
-      <h3>{{datatableName}}</h3>
-    </div>
-    <div class="action-button m-b-5" fxLayoutGap="10px">
-      <span *mifosxHasPermission="'CREATE_' + datatableName">
-        <button mat-raised-button color="primary" (click)="add()">
-          <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;Add
-        </button>
-      </span>
-      <span *mifosxHasPermission="'DELETE_' + datatableName">
-        <button class="delete-button" mat-raised-button color="warn" (click)="delete()" *ngIf="showDeleteBotton">
-          <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;Delete All
-        </button>
-      </span>
-    </div>
-  </div>
-
-  <table #dataTable mat-table [hidden]="!datatableData[0]" [dataSource]="datatableData" class="mat-elevation-z1 m-b-25">
-
-    <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>
-
-</div>

src/app/deposits/fixed-deposits/fixed-deposit-account-view/datatable-tabs/multi-row/multi-row.component.scss

@@ -1,10 +0,0 @@
-.tab-container {
-  padding: 1%;
-  margin: 1%;
-  .action-button{
-    margin-left: auto;
-  }
-  table {
-    width: 100%;
-  }
-}

src/app/deposits/fixed-deposits/fixed-deposit-account-view/datatable-tabs/multi-row/multi-row.component.spec.ts

@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { MultiRowComponent } from './multi-row.component';
-
-describe('MultiRowComponent', () => {
-  let component: MultiRowComponent;
-  let fixture: ComponentFixture<MultiRowComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ MultiRowComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(MultiRowComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

src/app/deposits/fixed-deposits/fixed-deposit-account-view/datatable-tabs/multi-row/multi-row.component.ts

@@ -1,187 +0,0 @@
-/** Angular Imports */
-import { Component, OnChanges, OnInit, Input, ViewChild } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import { MatTable } from '@angular/material/table';
-import { MatDialog } from '@angular/material/dialog';
-
-/** Custom Dialogs */
-import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
-import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.component';
-
-/** 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 { SavingsService } from 'app/savings/savings.service';
-import { SettingsService } from 'app/settings/settings.service';
-import { Dates } from 'app/core/utils/dates';
-
-/**
- * Savings Account Multi Row Data Tables
- */
-@Component({
-  selector: 'mifosx-multi-row',
-  templateUrl: './multi-row.component.html',
-  styleUrls: ['./multi-row.component.scss']
-})
-export class MultiRowComponent implements OnInit, OnChanges {
-
-  /** Data Object */
-  @Input() dataObject: any;
-
-  /** Data Table Name */
-  datatableName: string;
-  /** Data Table Columns */
-  datatableColumns: string[] = [];
-  /** Data Table Data */
-  datatableData: any;
-  /** Account Id */
-  accountId: string;
-  /** Toggle button visibility */
-  showDeleteBotton: boolean;
-
-  /** Data Table Reference */
-  @ViewChild('dataTable', { static: true }) dataTableRef: MatTable<Element>;
-
-  /**
-   * Fetches savings account Id from parent route params.
-   * @param {ActivatedRoute} route Activated Route.
-   * @param {Dates} dateUtils Date Utils.
-   * @param {SavingsService} savingsService Savingss Service.
-   * @param {MatDialog} dialog Mat Dialog.
-   * @param {SettingsService} settingsService Settings Service.
-   */
-  constructor(private route: ActivatedRoute,
-              private dateUtils: Dates,
-              private savingsService: SavingsService,
-              private dialog: MatDialog,
-              private settingsService: SettingsService) {
-    this.accountId = this.route.parent.parent.snapshot.paramMap.get('fixedDepositAccountId');
-  }
-
-  /**
-   * Updates related variables on changes to dataObject.
-   */
-  ngOnChanges() {
-    this.datatableColumns = this.dataObject.columnHeaders.map((columnHeader: any) => {
-      return columnHeader.columnName;
-    });
-    this.datatableData = this.dataObject.data;
-    this.showDeleteBotton = this.datatableData[0] ? true : false;
-  }
-
-  /**
-   * Fetches data table name from route params.
-   * subscription is required due to asynchronicity.
-   */
-  ngOnInit() {
-    this.route.params.subscribe((routeParams: any) => {
-      this.datatableName = routeParams.datatableName;
-    });
-  }
-
-  /**
-   * Adds a new row to the given multi row data table.
-   */
-  add() {
-    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'));
-    });
-    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 data = {
-      title: 'Add ' + this.datatableName,
-      formfields: formfields
-    };
-    const addDialogRef = this.dialog.open(FormDialogComponent, { data });
-    addDialogRef.afterClosed().subscribe((response: any) => {
-      if (response.data) {
-        dateTransformColumns.forEach((column) => {
-          response.data.value[column] = this.dateUtils.formatDate(response.data.value[column], dataTableEntryObject.dateFormat);
-        });
-        dataTableEntryObject = { ...response.data.value, ...dataTableEntryObject };
-        this.savingsService.addSavingsDatatableEntry(this.accountId, this.datatableName, dataTableEntryObject).subscribe(() => {
-          this.savingsService.getSavingsDatatable(this.accountId, this.datatableName).subscribe((dataObject: any) => {
-            this.datatableData = dataObject.data;
-            this.dataTableRef.renderRows();
-          });
-        });
-      }
-    });
-  }
-
-  /**
-   * Deletes all rows of the given multi row data table.
-   */
-  delete() {
-    const deleteDataTableDialogRef = this.dialog.open(DeleteDialogComponent, {
-      data: { deleteContext: `the contents of ${this.datatableName}` }
-    });
-    deleteDataTableDialogRef.afterClosed().subscribe((response: any) => {
-      if (response.delete) {
-        this.savingsService.deleteDatatableContent(this.accountId, this.datatableName).subscribe(() => {
-          this.savingsService.getSavingsDatatable(this.accountId, this.datatableName).subscribe((dataObject: any) => {
-            this.datatableData = dataObject.data;
-            this.showDeleteBotton = false;
-            this.dataTableRef.renderRows();
-           });
-        });
-      }
-    });
-  }
-
-}

src/app/deposits/fixed-deposits/fixed-deposit-account-view/datatable-tabs/single-row/single-row.component.html

@@ -1,29 +0,0 @@
-<div class="tab-container mat-typography">
-
-  <h3>{{datatableName}}</h3>
-
-  <div fxLayout="row" fxLayoutAlign="flex-end">
-    <span *mifosxHasPermission="'CREATE_' + datatableName">
-      <button mat-raised-button color="primary" (click)="add()" *ngIf="!dataObject.data[0]">
-        <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;Add
-      </button>
-    </span>
-    <span *mifosxHasPermission="'UPDATE_' + datatableName">
-      <button mat-raised-button color="primary" (click)="edit()" *ngIf="dataObject.data[0]">
-        <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;Edit
-      </button>
-    </span>
-    <span *mifosxHasPermission="'DELETE_' + datatableName" class="delete-button">
-      <button mat-raised-button color="warn" (click)="delete()" *ngIf="dataObject.data[0]">
-        <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;Delete
-      </button>
-    </span>
-  </div>
-
-  <mat-list role="list" *ngIf="dataObject.data[0]">
-    <mat-list-item role="listitem" *ngFor="let columnHeader of dataObject.columnHeaders;let i = index">
-      {{columnHeader.columnName}} : {{dataObject.data[0].row[i]}}
-    </mat-list-item>
-  </mat-list>
-
-</div>

src/app/deposits/fixed-deposits/fixed-deposit-account-view/datatable-tabs/single-row/single-row.component.scss

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

src/app/deposits/fixed-deposits/fixed-deposit-account-view/datatable-tabs/single-row/single-row.component.spec.ts

@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { SingleRowComponent } from './single-row.component';
-
-describe('SingleRowComponent', () => {
-  let component: SingleRowComponent;
-  let fixture: ComponentFixture<SingleRowComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ SingleRowComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(SingleRowComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

src/app/deposits/fixed-deposits/fixed-deposit-account-view/datatable-tabs/single-row/single-row.component.ts

@@ -1,210 +0,0 @@
-/** Angular Imports */
-import { Component, Input, OnInit } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import { MatDialog } from '@angular/material/dialog';
-
-/** Custom Components */
-import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
-import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.component';
-
-/** 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 'app/savings/savings.service';
-import { SettingsService } from 'app/settings/settings.service';
-import { Dates } from 'app/core/utils/dates';
-
-
-/**
- * Savings Account Single Row Data Tables
- */
-@Component({
-  selector: 'mifosx-single-row',
-  templateUrl: './single-row.component.html',
-  styleUrls: ['./single-row.component.scss']
-})
-export class SingleRowComponent implements OnInit {
-
-  /** Data Object */
-  @Input() dataObject: any;
-
-  /** Data Table Name */
-  datatableName: string;
-  /** Account Id */
-  accountId: string;
-
-  /**
-   * Fetches savings account Id from parent route params.
-   * @param {ActivatedRoute} route Activated Route.
-   * @param {Dates} dateUtils Date Utils.
-   * @param {SavingsService} savingsService Savingss Service.
-   * @param {MatDialog} dialog Mat Dialog.
-   * @param {SettingsService} settingsService Settings Service.
-   */
-  constructor(private route: ActivatedRoute,
-              private dateUtils: Dates,
-              private dialog: MatDialog,
-              private savingsService: SavingsService,
-              private settingsService: SettingsService) {
-    this.accountId = this.route.parent.parent.snapshot.paramMap.get('fixedDepositAccountId');
-  }
-
-  /**
-   * Fetches data table name from route params.
-   * subscription is required due to asynchronicity.
-   */
-  ngOnInit() {
-    this.route.params.subscribe((routeParams: any) => {
-      this.datatableName = routeParams.datatableName;
-    });
-  }
-
-  /**
-   * Creates a new instance of the given single row data table.
-   */
-  add() {
-    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'));
-    });
-    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) {
-        dateTransformColumns.forEach((column) => {
-          response.data.value[column] = this.dateUtils.formatDate(response.data.value[column], dataTableEntryObject.dateFormat);
-        });
-        dataTableEntryObject = { ...response.data.value, ...dataTableEntryObject };
-        this.savingsService.addSavingsDatatableEntry(this.accountId, this.datatableName, dataTableEntryObject).subscribe(() => {
-          this.savingsService.getSavingsDatatable(this.accountId, this.datatableName).subscribe((dataObject: any) => {
-            this.dataObject = dataObject;
-          });
-        });
-      }
-    });
-  }
-
-  /**
-   * Edits the current instance of single row data table.
-   */
-  edit() {
-    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'));
-    });
-    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,
-      layout: { addButtonText: 'Confirm' },
-      formfields: formfields
-    };
-    const editDialogRef = this.dialog.open(FormDialogComponent, { data });
-    editDialogRef.afterClosed().subscribe((response: any) => {
-      if (response.data) {
-        dateTransformColumns.forEach((column) => {
-          response.data.value[column] = this.dateUtils.formatDate(response.data.value[column], dataTableEntryObject.dateFormat);
-        });
-        dataTableEntryObject = { ...response.data.value, ...dataTableEntryObject };
-        this.savingsService.editSavingsDatatableEntry(this.accountId, this.datatableName, dataTableEntryObject).subscribe(() => {
-          this.savingsService.getSavingsDatatable(this.accountId, this.datatableName).subscribe((dataObject: any) => {
-            this.dataObject = dataObject;
-          });
-        });
-      }
-    });
-  }
-
-  /**
-   * Deletes the current instance of single row data table.
-   */
-  delete() {
-    const deleteDataTableDialogRef = this.dialog.open(DeleteDialogComponent, {
-      data: { deleteContext: `the contents of ${this.datatableName}` }
-    });
-    deleteDataTableDialogRef.afterClosed().subscribe((response: any) => {
-      if (response.delete) {
-        this.savingsService.deleteDatatableContent(this.accountId, this.datatableName)
-          .subscribe(() => {
-            this.savingsService.getSavingsDatatable(this.accountId, this.datatableName).subscribe((dataObject: any) => {
-              this.dataObject = dataObject;
-            });
-          });
-      }
-    });
-  }
-
-  /**
-   * 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/deposits/fixed-deposits/fixed-deposits.module.ts

@@ -14,8 +14,6 @@ import { ChargesTabComponent } from './fixed-deposit-account-view/charges-tab/ch
 import { StandingInstructionsTabComponent } from './fixed-deposit-account-view/standing-instructions-tab/standing-instructions-tab.component';
 import { InterestRateChartTabComponent } from './fixed-deposit-account-view/interest-rate-chart-tab/interest-rate-chart-tab.component';
 import { DatatableTabsComponent } from './fixed-deposit-account-view/datatable-tabs/datatable-tabs.component';
-import { MultiRowComponent } from './fixed-deposit-account-view/datatable-tabs/multi-row/multi-row.component';
-import { SingleRowComponent } from './fixed-deposit-account-view/datatable-tabs/single-row/single-row.component';
 import { FixedDepositsAccountActionsComponent } from './fixed-deposits-account-actions/fixed-deposits-account-actions.component';
 import { ApproveFixedDepositsAccountComponent } from './fixed-deposits-account-actions/approve-fixed-deposits-account/approve-fixed-deposits-account.component';
 import { RejectFixedDepositsAccountComponent } from './fixed-deposits-account-actions/reject-fixed-deposits-account/reject-fixed-deposits-account.component';
@@ -54,8 +52,6 @@ import { EditFixedDepositAccountComponent } from './edit-fixed-deposit-account/e
     StandingInstructionsTabComponent,
     InterestRateChartTabComponent,
     DatatableTabsComponent,
-    MultiRowComponent,
-    SingleRowComponent,
     FixedDepositsAccountActionsComponent,
     ApproveFixedDepositsAccountComponent,
     RejectFixedDepositsAccountComponent,

src/app/deposits/recurring-deposits/recurring-deposits-account-view/datatable-tabs/datatable-tabs.component.html

@@ -1,4 +1,9 @@
-<div>
+<div class="tab-container mat-typography">
-  <mifosx-multi-row *ngIf="multiRowDatatableFlag" [dataObject]="savingsDatatable"></mifosx-multi-row>
+  <mifosx-entity-datatable-tab
-  <mifosx-single-row *ngIf="!multiRowDatatableFlag" [dataObject]="savingsDatatable"></mifosx-single-row>
+    entityType="Recurring Deposit"
+    [entityId]="entityId"
+    [multiRowDatatableFlag]="multiRowDatatableFlag"
+    [entityDatatable]="entityDatatable"
+  >
+  </mifosx-entity-datatable-tab>
 </div>

src/app/deposits/recurring-deposits/recurring-deposits-account-view/datatable-tabs/datatable-tabs.component.ts

@@ -11,9 +11,9 @@ import { ActivatedRoute } from '@angular/router';
   styleUrls: ['./datatable-tabs.component.scss']
 })
 export class DatatableTabsComponent {
-
+  entityId: string;
   /** Savings Datatable */
-  savingsDatatable: any;
+  entityDatatable: any;
   /** Multi Row Datatable Flag */
   multiRowDatatableFlag: boolean;
 
@@ -22,9 +22,11 @@ export class DatatableTabsComponent {
    * @param {ActivatedRoute} route Activated Route.
    */
   constructor(private route: ActivatedRoute) {
+    this.entityId = this.route.parent.parent.snapshot.paramMap.get('recurringDepositAccountId');
+
     this.route.data.subscribe((data: { savingsDatatable: any }) => {
-      this.savingsDatatable = data.savingsDatatable;
+      this.entityDatatable = data.savingsDatatable;
-      this.multiRowDatatableFlag = this.savingsDatatable.columnHeaders[0].columnName === 'id' ? true : false;
+      this.multiRowDatatableFlag = this.entityDatatable.columnHeaders[0].columnName === 'id' ? true : false;
     });
   }
 

src/app/deposits/recurring-deposits/recurring-deposits-account-view/datatable-tabs/multi-row/multi-row.component.html

@@ -1,33 +0,0 @@
-<div class="tab-container mat-typography">
-
-  <div fxLayout="row" fxLayoutAlign="start">
-    <div class="m-b-10">
-      <h3>{{datatableName}}</h3>
-    </div>
-    <div class="action-button m-b-5" fxLayoutGap="10px">
-      <span *mifosxHasPermission="'CREATE_' + datatableName">
-        <button mat-raised-button color="primary" (click)="add()">
-          <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;Add
-        </button>
-      </span>
-      <span *mifosxHasPermission="'DELETE_' + datatableName">
-        <button class="delete-button" mat-raised-button color="warn" (click)="delete()" *ngIf="showDeleteBotton">
-          <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;Delete All
-        </button>
-      </span>
-    </div>
-  </div>
-
-  <table #dataTable mat-table [hidden]="!datatableData[0]" [dataSource]="datatableData" class="mat-elevation-z1 m-b-25">
-
-    <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>
-
-</div>

src/app/deposits/recurring-deposits/recurring-deposits-account-view/datatable-tabs/multi-row/multi-row.component.scss

@@ -1,10 +0,0 @@
-.tab-container {
-  padding: 1%;
-  margin: 1%;
-  .action-button{
-    margin-left: auto;
-  }
-  table {
-    width: 100%;
-  }
-}

src/app/deposits/recurring-deposits/recurring-deposits-account-view/datatable-tabs/multi-row/multi-row.component.spec.ts

@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { MultiRowComponent } from './multi-row.component';
-
-describe('MultiRowComponent', () => {
-  let component: MultiRowComponent;
-  let fixture: ComponentFixture<MultiRowComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ MultiRowComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(MultiRowComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

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

@@ -1,184 +0,0 @@
-/** Angular Imports */
-import { Component, OnChanges, OnInit, Input, ViewChild } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import { MatTable } from '@angular/material/table';
-import { MatDialog } from '@angular/material/dialog';
-
-/** Custom Dialogs */
-import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
-import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.component';
-
-/** 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 { SavingsService } from 'app/savings/savings.service';
-import { Dates } from 'app/core/utils/dates';
-
-/**
- * Savings Account Multi Row Data Tables
- */
-@Component({
-  selector: 'mifosx-multi-row',
-  templateUrl: './multi-row.component.html',
-  styleUrls: ['./multi-row.component.scss']
-})
-export class MultiRowComponent implements OnInit, OnChanges {
-
-  /** Data Object */
-  @Input() dataObject: any;
-
-  /** Data Table Name */
-  datatableName: string;
-  /** Data Table Columns */
-  datatableColumns: string[] = [];
-  /** Data Table Data */
-  datatableData: any;
-  /** Account Id */
-  accountId: string;
-  /** Toggle button visibility */
-  showDeleteBotton: boolean;
-
-  /** Data Table Reference */
-  @ViewChild('dataTable', { static: true }) dataTableRef: MatTable<Element>;
-
-  /**
-   * Fetches savings account Id from parent route params.
-   * @param {ActivatedRoute} route Activated Route.
-   * @param {Dates} dateUtils Date Utils.
-   * @param {SavingsService} savingsService Savingss Service.
-   * @param {MatDialog} dialog Mat Dialog.
-   */
-  constructor(private route: ActivatedRoute,
-    private dateUtils: Dates,
-    private savingsService: SavingsService,
-    private dialog: MatDialog) {
-    this.accountId = this.route.parent.parent.snapshot.paramMap.get('recurringDepositAccountId');
-  }
-
-  /**
-   * Updates related variables on changes to dataObject.
-   */
-  ngOnChanges() {
-    this.datatableColumns = this.dataObject.columnHeaders.map((columnHeader: any) => {
-      return columnHeader.columnName;
-    });
-    this.datatableData = this.dataObject.data;
-    this.showDeleteBotton = this.datatableData[0] ? true : false;
-  }
-
-  /**
-   * Fetches data table name from route params.
-   * subscription is required due to asynchronicity.
-   */
-  ngOnInit() {
-    this.route.params.subscribe((routeParams: any) => {
-      this.datatableName = routeParams.datatableName;
-    });
-  }
-
-  /**
-   * Adds a new row to the given multi row data table.
-   */
-  add() {
-    let dataTableEntryObject: any = { locale: 'en' };
-    const dateTransformColumns: string[] = [];
-    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 = '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 data = {
-      title: 'Add ' + this.datatableName,
-      formfields: formfields
-    };
-    const addDialogRef = this.dialog.open(FormDialogComponent, { data });
-    addDialogRef.afterClosed().subscribe((response: any) => {
-      if (response.data) {
-        dateTransformColumns.forEach((column) => {
-          response.data.value[column] = this.dateUtils.formatDate(response.data.value[column], dataTableEntryObject.dateFormat);
-        });
-        dataTableEntryObject = { ...response.data.value, ...dataTableEntryObject };
-        this.savingsService.addSavingsDatatableEntry(this.accountId, this.datatableName, dataTableEntryObject).subscribe(() => {
-          this.savingsService.getSavingsDatatable(this.accountId, this.datatableName).subscribe((dataObject: any) => {
-            this.datatableData = dataObject.data;
-            this.dataTableRef.renderRows();
-          });
-        });
-      }
-    });
-  }
-
-  /**
-   * Deletes all rows of the given multi row data table.
-   */
-  delete() {
-    const deleteDataTableDialogRef = this.dialog.open(DeleteDialogComponent, {
-      data: { deleteContext: `the contents of ${this.datatableName}` }
-    });
-    deleteDataTableDialogRef.afterClosed().subscribe((response: any) => {
-      if (response.delete) {
-        this.savingsService.deleteDatatableContent(this.accountId, this.datatableName).subscribe(() => {
-          this.savingsService.getSavingsDatatable(this.accountId, this.datatableName).subscribe((dataObject: any) => {
-            this.datatableData = dataObject.data;
-            this.showDeleteBotton = false;
-            this.dataTableRef.renderRows();
-          });
-        });
-      }
-    });
-  }
-
-}

src/app/deposits/recurring-deposits/recurring-deposits-account-view/datatable-tabs/single-row/single-row.component.html

@@ -1,41 +0,0 @@
-<div class="tab-container mat-typography">
-
-  <div>
-
-    <div fxLayout="column" fxFlex="50%" class="tableName">
-      <h3>{{datatableName}}</h3>
-    </div>
-
-    <div fxLayout="column" fxFlex="50%">
-      <div fxLayout="row" fxLayoutAlign="flex-end">
-        <span *mifosxHasPermission="'CREATE_' + datatableName">
-          <button mat-raised-button color="primary" (click)="add()" *ngIf="!dataObject.data[0]">
-            <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;Add
-          </button>
-        </span>
-        <span *mifosxHasPermission="'UPDATE_' + datatableName">
-          <button mat-raised-button color="primary" (click)="edit()" *ngIf="dataObject.data[0]">
-            <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;Edit
-          </button>
-        </span>
-        <span *mifosxHasPermission="'DELETE_' + datatableName" class="delete-button">
-          <button mat-raised-button color="warn" (click)="delete()" *ngIf="dataObject.data[0]">
-            <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;Delete
-          </button>
-        </span>
-      </div>
-    </div>
-
-  </div>
-
-  <mat-divider></mat-divider>
-
-  <div>
-    <mat-list role="list" *ngIf="dataObject.data[0]">
-      <mat-list-item role="listitem" *ngFor="let columnHeader of dataObject.columnHeaders;let i = index">
-        {{columnHeader.columnName}} : {{dataObject.data[0].row[i]}}
-      </mat-list-item>
-    </mat-list>
-  </div>
-
-</div>

src/app/deposits/recurring-deposits/recurring-deposits-account-view/datatable-tabs/single-row/single-row.component.scss

@@ -1,11 +0,0 @@
-.tab-container {
-  padding: 1%;
-  margin: 1%;
-  .delete-button {
-    margin-left: 1%;
-  }
-}
-
-.tableName {
-    padding-left: 2%;
-}

src/app/deposits/recurring-deposits/recurring-deposits-account-view/datatable-tabs/single-row/single-row.component.spec.ts

@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { SingleRowComponent } from './single-row.component';
-
-describe('SingleRowComponent', () => {
-  let component: SingleRowComponent;
-  let fixture: ComponentFixture<SingleRowComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ SingleRowComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(SingleRowComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

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

@@ -1,210 +0,0 @@
-/** Angular Imports */
-import { Component, Input, OnInit } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import { MatDialog } from '@angular/material/dialog';
-
-/** Custom Components */
-import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
-import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.component';
-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 'app/savings/savings.service';
-import { Dates } from 'app/core/utils/dates';
-
-
-/**
- * Savings Account Single Row Data Tables
- */
-@Component({
-  selector: 'mifosx-single-row',
-  templateUrl: './single-row.component.html',
-  styleUrls: ['./single-row.component.scss']
-})
-export class SingleRowComponent implements OnInit {
-
-  /** Data Object */
-  @Input() dataObject: any;
-
-  /** Data Table Name */
-  datatableName: string;
-  /** Account Id */
-  accountId: string;
-
-  /**
-   * Fetches savings account Id from parent route params.
-   * @param {ActivatedRoute} route Activated Route.
-   * @param {Dates} dateUtils Date Utils.
-   * @param {SavingsService} savingsService Savingss Service.
-   * @param {MatDialog} dialog Mat Dialog.
-   * @param {SettingsService} settingsService Settings Service
-   */
-  constructor(private route: ActivatedRoute,
-    private dateUtils: Dates,
-    private dialog: MatDialog,
-    private savingsService: SavingsService,
-    private settingsService: SettingsService, ) {
-    this.accountId = this.route.parent.parent.snapshot.paramMap.get('recurringDepositAccountId');
-  }
-
-  /**
-   * Fetches data table name from route params.
-   * subscription is required due to asynchronicity.
-   */
-  ngOnInit() {
-    this.route.params.subscribe((routeParams: any) => {
-      this.datatableName = routeParams.datatableName;
-    });
-  }
-
-  /**
-   * Creates a new instance of the given single row data table.
-   */
-  add() {
-    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'));
-    });
-    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) {
-        dateTransformColumns.forEach((column) => {
-          response.data.value[column] = this.dateUtils.formatDate(response.data.value[column], dataTableEntryObject.dateFormat);
-        });
-        dataTableEntryObject = { ...response.data.value, ...dataTableEntryObject };
-        this.savingsService.addSavingsDatatableEntry(this.accountId, this.datatableName, dataTableEntryObject).subscribe(() => {
-          this.savingsService.getSavingsDatatable(this.accountId, this.datatableName).subscribe((dataObject: any) => {
-            this.dataObject = dataObject;
-          });
-        });
-      }
-    });
-  }
-
-  /**
-   * Edits the current instance of single row data table.
-   */
-  edit() {
-    let dataTableEntryObject: any = { locale: 'en' };
-    const dateTransformColumns: string[] = [];
-    const columns = this.dataObject.columnHeaders.filter((column: any) => {
-      return ((column.columnName !== 'id') && (column.columnName !== 'savings_account_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,
-      layout: { addButtonText: 'Confirm' },
-      formfields: formfields
-    };
-    const editDialogRef = this.dialog.open(FormDialogComponent, { data });
-    editDialogRef.afterClosed().subscribe((response: any) => {
-      if (response.data) {
-        dateTransformColumns.forEach((column) => {
-          response.data.value[column] = this.dateUtils.formatDate(response.data.value[column], dataTableEntryObject.dateFormat);
-        });
-        dataTableEntryObject = { ...response.data.value, ...dataTableEntryObject };
-        this.savingsService.editSavingsDatatableEntry(this.accountId, this.datatableName, dataTableEntryObject).subscribe(() => {
-          this.savingsService.getSavingsDatatable(this.accountId, this.datatableName).subscribe((dataObject: any) => {
-            this.dataObject = dataObject;
-          });
-        });
-      }
-    });
-  }
-
-  /**
-   * Deletes the current instance of single row data table.
-   */
-  delete() {
-    const deleteDataTableDialogRef = this.dialog.open(DeleteDialogComponent, {
-      data: { deleteContext: `the contents of ${this.datatableName}` }
-    });
-    deleteDataTableDialogRef.afterClosed().subscribe((response: any) => {
-      if (response.delete) {
-        this.savingsService.deleteDatatableContent(this.accountId, this.datatableName)
-          .subscribe(() => {
-            this.savingsService.getSavingsDatatable(this.accountId, this.datatableName).subscribe((dataObject: any) => {
-              this.dataObject = dataObject;
-            });
-          });
-      }
-    });
-  }
-
-  /**
-   * 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/deposits/recurring-deposits/recurring-deposits.module.ts

@@ -14,8 +14,6 @@ import { TransactionsTabComponent } from './recurring-deposits-account-view/tran
 import { StandingInstructionsTabComponent } from './recurring-deposits-account-view/standing-instructions-tab/standing-instructions-tab.component';
 import { ChargesTabComponent } from './recurring-deposits-account-view/charges-tab/charges-tab.component';
 import { DatatableTabsComponent } from './recurring-deposits-account-view/datatable-tabs/datatable-tabs.component';
-import { MultiRowComponent } from './recurring-deposits-account-view/datatable-tabs/multi-row/multi-row.component';
-import { SingleRowComponent } from './recurring-deposits-account-view/datatable-tabs/single-row/single-row.component';
 import { CreateRecurringDepositsAccountComponent } from './create-recurring-deposits-account/create-recurring-deposits-account.component';
 import { RecurringDepositsAccountDetailsStepComponent } from './recurring-deposits-account-stepper/recurring-deposits-account-details-step/recurring-deposits-account-details-step.component';
 import { RecurringDepositsAccountTermsStepComponent } from './recurring-deposits-account-stepper/recurring-deposits-account-terms-step/recurring-deposits-account-terms-step.component';
@@ -60,8 +58,6 @@ import { RecurringDepositConfirmationDialogComponent } from './recurring-deposit
     StandingInstructionsTabComponent,
     ChargesTabComponent,
     DatatableTabsComponent,
-    MultiRowComponent,
-    SingleRowComponent,
     CreateRecurringDepositsAccountComponent,
     RecurringDepositsAccountDetailsStepComponent,
     RecurringDepositsAccountTermsStepComponent,

src/app/groups/groups-view/datatable-tabs/datatable-tabs.component.html

@@ -1,4 +1,9 @@
-<div>
+<div class="tab-container mat-typography">
-  <mifosx-multi-row *ngIf="multiRowDatatableFlag" [dataObject]="groupDatatable"></mifosx-multi-row>
+  <mifosx-entity-datatable-tab
-  <mifosx-single-row *ngIf="!multiRowDatatableFlag" [dataObject]="groupDatatable"></mifosx-single-row>
+    entityType="Group"
+    [entityId]="entityId"
+    [multiRowDatatableFlag]="multiRowDatatableFlag"
+    [entityDatatable]="entityDatatable"
+  >
+  </mifosx-entity-datatable-tab>
 </div>

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

@@ -12,8 +12,9 @@ import { ActivatedRoute } from '@angular/router';
 })
 export class DatatableTabsComponent {
 
+  entityId: string;
   /** Group Datatable */
-  groupDatatable: any;
+  entityDatatable: any;
   /** Multi Row Datatable Flag */
   multiRowDatatableFlag: boolean;
 
@@ -22,9 +23,11 @@ export class DatatableTabsComponent {
    * @param {ActivatedRoute} route Activated Route.
    */
   constructor(private route: ActivatedRoute) {
+    this.entityId = this.route.parent.parent.snapshot.paramMap.get('groupId');
+
     this.route.data.subscribe((data: { groupDatatable: any }) => {
-      this.groupDatatable = data.groupDatatable;
+      this.entityDatatable = data.groupDatatable;
-      this.multiRowDatatableFlag = this.groupDatatable.columnHeaders[0].columnName === 'id' ? true : false;
+      this.multiRowDatatableFlag = this.entityDatatable.columnHeaders[0].columnName === 'id' ? true : false;
     });
   }
 

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

@@ -1,10 +0,0 @@
-.tab-container {
-  padding: 1%;
-  margin: 1%;
-  .action-button{
-    margin-left: auto;
-  }
-  table {
-    width: 100%;
-  }
-}

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

@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { MultiRowComponent } from './multi-row.component';
-
-describe('MultiRowComponent', () => {
-  let component: MultiRowComponent;
-  let fixture: ComponentFixture<MultiRowComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ MultiRowComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(MultiRowComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

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

@@ -1,155 +0,0 @@
-/** Angular Imports */
-import { Component, OnChanges, OnInit, Input, ViewChild } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import { MatTable } from '@angular/material/table';
-import { MatDialog } from '@angular/material/dialog';
-
-/** Custom Dialogs */
-import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
-import { DeleteDialogComponent } from '../../../../shared/delete-dialog/delete-dialog.component';
-
-/** Custom Models */
-import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-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';
-import { DateFormatPipe } from 'app/pipes/date-format.pipe';
-import { DatetimeFormatPipe } from 'app/pipes/datetime-format.pipe';
-import { DecimalPipe } from '@angular/common';
-
-/**
- * Group Multi Row Data Tables
- */
-@Component({
-  selector: 'mifosx-multi-row',
-  templateUrl: './multi-row.component.html',
-  styleUrls: ['./multi-row.component.scss']
-})
-export class MultiRowComponent implements OnInit, OnChanges {
-
-  /** Data Object */
-  @Input() dataObject: any;
-
-  /** Data Table Name */
-  datatableName: string;
-  /** Data Table Columns */
-  datatableColumns: string[] = [];
-  /** Data Table Data */
-  datatableData: any;
-  /** Group Id */
-  groupId: string;
-  /** Toggle button visibility */
-  showDeleteBotton: boolean;
-
-  /** Data Table Reference */
-  @ViewChild('dataTable', { static: true }) dataTableRef: MatTable<Element>;
-
-  /**
-   * Fetches group Id from parent route params.
-   * @param {ActivatedRoute} route Activated Route.
-   * @param {Dates} dateUtils Date Utils.
-   * @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 datatables: Datatables,
-              private dateFormat: DateFormatPipe,
-              private dateTimeFormat: DatetimeFormatPipe,
-              private numberFormat: DecimalPipe) {
-    this.groupId = this.route.parent.parent.snapshot.paramMap.get('groupId');
-  }
-
-  /**
-   * Updates related variables on changes to dataObject.
-   */
-  ngOnChanges() {
-    this.datatableColumns = this.dataObject.columnHeaders.map((columnHeader: any) => {
-      return columnHeader.columnName;
-    });
-    this.datatableData = this.dataObject.data;
-    this.showDeleteBotton = this.datatableData[0] ? true : false;
-  }
-
-  /**
-   * Fetches data table name from route params.
-   * subscription is required due to asynchronicity.
-   */
-  ngOnInit() {
-    this.route.params.subscribe((routeParams: any) => {
-      this.datatableName = routeParams.datatableName;
-    });
-  }
-
-  /**
-   * Adds a new row to the given multi row data table.
-   */
-  add() {
-    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'));
-    });
-    const formfields: FormfieldBase[] = this.datatables.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) {
-        dateTransformColumns.forEach((column) => {
-          response.data.value[column] = this.dateUtils.formatDate(response.data.value[column], dataTableEntryObject.dateFormat);
-        });
-        dataTableEntryObject = { ...response.data.value, ...dataTableEntryObject };
-        this.groupsService.addGroupDatatableEntry(this.groupId, this.datatableName, dataTableEntryObject).subscribe(() => {
-          this.groupsService.getGroupDatatable(this.groupId, this.datatableName).subscribe((dataObject: any) => {
-            this.datatableData = dataObject.data;
-            this.dataTableRef.renderRows();
-          });
-        });
-      }
-    });
-  }
-
-  /**
-   * Deletes all rows of the given multi row data table.
-   */
-  delete() {
-    const deleteDataTableDialogRef = this.dialog.open(DeleteDialogComponent, {
-      data: { deleteContext: `the contents of ${this.datatableName}` }
-    });
-    deleteDataTableDialogRef.afterClosed().subscribe((response: any) => {
-      if (response.delete) {
-        this.groupsService.deleteDatatableContent(this.groupId, this.datatableName).subscribe(() => {
-          this.groupsService.getGroupDatatable(this.groupId, this.datatableName).subscribe((dataObject: any) => {
-            this.datatableData = dataObject.data;
-            this.showDeleteBotton = false;
-            this.dataTableRef.renderRows();
-           });
-        });
-      }
-    });
-  }
-
-  formatValue(index: number, value: any): any {
-    const columnDisplayType = this.dataObject.columnHeaders[index].columnDisplayType;
-    if (columnDisplayType === 'DATE') {
-      return this.dateFormat.transform(value);
-    } else if (columnDisplayType === 'DATETIME') {
-      return this.dateTimeFormat.transform(value);
-    } else if (columnDisplayType === 'INTEGER' || columnDisplayType === 'DECIMAL') {
-      return this.numberFormat.transform(value);
-    }
-    return value;
-  }
-
-}

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

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

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

@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { SingleRowComponent } from './single-row.component';
-
-describe('SingleRowComponent', () => {
-  let component: SingleRowComponent;
-  let fixture: ComponentFixture<SingleRowComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ SingleRowComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(SingleRowComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

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

@@ -1,149 +0,0 @@
-/** Angular Imports */
-import { Component, Input, OnInit } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import { MatDialog } from '@angular/material/dialog';
-
-/** Custom Components */
-import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
-import { DeleteDialogComponent } from '../../../../shared/delete-dialog/delete-dialog.component';
-
-/** Custom Models */
-import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-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
- */
-@Component({
-  selector: 'mifosx-single-row',
-  templateUrl: './single-row.component.html',
-  styleUrls: ['./single-row.component.scss']
-})
-export class SingleRowComponent implements OnInit {
-
-  /** Data Object */
-  @Input() dataObject: any;
-
-  /** Data Table Name */
-  datatableName: string;
-  /** Group Id */
-  groupId: string;
-
-  /**
-   * Fetches group Id from parent route params.
-   * @param {ActivatedRoute} route Activated Route.
-   * @param {Dates} dateUtils Date Utils.
-   * @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 datatables: Datatables) {
-    this.groupId = this.route.parent.parent.snapshot.paramMap.get('groupId');
-  }
-
-  /**
-   * Fetches data table name from route params.
-   * subscription is required due to asynchronicity.
-   */
-  ngOnInit() {
-    this.route.params.subscribe((routeParams: any) => {
-      this.datatableName = routeParams.datatableName;
-    });
-  }
-
-  /**
-   * Creates a new instance of the given single row data table.
-   */
-  add() {
-    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') && (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
-    };
-    const addDialogRef = this.dialog.open(FormDialogComponent, { data });
-    addDialogRef.afterClosed().subscribe((response: any) => {
-      if (response.data) {
-        dateTransformColumns.forEach((column) => {
-          response.data.value[column] = this.dateUtils.formatDate(response.data.value[column], dataTableEntryObject.dateFormat);
-        });
-        dataTableEntryObject = { ...response.data.value, ...dataTableEntryObject };
-        this.groupsService.addGroupDatatableEntry(this.groupId, this.datatableName, dataTableEntryObject).subscribe(() => {
-          this.groupsService.getGroupDatatable(this.groupId, this.datatableName).subscribe((dataObject: any) => {
-            this.dataObject = dataObject;
-          });
-        });
-      }
-    });
-  }
-
-  /**
-   * Edits the current instance of single row data table.
-   */
-  edit() {
-    let dataTableEntryObject: any = { locale: 'en' };
-    const dateTransformColumns: string[] = [];
-    const columns = this.dataObject.columnHeaders.filter((column: any) => {
-      return ((column.columnName !== 'id') && (column.columnName !== 'group_id'));
-    });
-    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;
-    });
-    const data = {
-      title: 'Edit ' + this.datatableName,
-      layout: { addButtonText: 'Confirm' },
-      formfields: formfields
-    };
-    const editDialogRef = this.dialog.open(FormDialogComponent, { data });
-    editDialogRef.afterClosed().subscribe((response: any) => {
-      if (response.data) {
-        dateTransformColumns.forEach((column) => {
-          response.data.value[column] = this.dateUtils.formatDate(response.data.value[column], dataTableEntryObject.dateFormat);
-        });
-        dataTableEntryObject = { ...response.data.value, ...dataTableEntryObject };
-        this.groupsService.editGroupDatatableEntry(this.groupId, this.datatableName, dataTableEntryObject).subscribe(() => {
-          this.groupsService.getGroupDatatable(this.groupId, this.datatableName).subscribe((dataObject: any) => {
-            this.dataObject = dataObject;
-          });
-        });
-      }
-    });
-  }
-
-  /**
-   * Deletes the current instance of single row data table.
-   */
-  delete() {
-    const deleteDataTableDialogRef = this.dialog.open(DeleteDialogComponent, {
-      data: { deleteContext: `the contents of ${this.datatableName}` }
-    });
-    deleteDataTableDialogRef.afterClosed().subscribe((response: any) => {
-      if (response.delete) {
-        this.groupsService.deleteDatatableContent(this.groupId, this.datatableName)
-          .subscribe(() => {
-            this.groupsService.getGroupDatatable(this.groupId, this.datatableName).subscribe((dataObject: any) => {
-              this.dataObject = dataObject;
-            });
-          });
-      }
-    });
-  }
-
-}

src/app/groups/groups.module.ts

@@ -15,8 +15,6 @@ import { NotesTabComponent } from './groups-view/notes-tab/notes-tab.component';
 import { CommitteeTabComponent } from './groups-view/committee-tab/committee-tab.component';
 import { CreateGroupComponent } from './create-group/create-group.component';
 import { DatatableTabsComponent } from './groups-view/datatable-tabs/datatable-tabs.component';
-import { SingleRowComponent } from './groups-view/datatable-tabs/single-row/single-row.component';
-import { MultiRowComponent } from './groups-view/datatable-tabs/multi-row/multi-row.component';
 import { AddRoleComponent } from './groups-view/add-role/add-role.component';
 import { UnassignRoleDialogComponent } from './groups-view/custom-dialogs/unassign-role-dialog/unassign-role-dialog.component';
 import { GroupActionsComponent } from './groups-view/group-actions/group-actions.component';
@@ -52,8 +50,6 @@ import { GroupTransferClientsComponent } from './groups-view/group-actions/group
     CommitteeTabComponent,
     CreateGroupComponent,
     DatatableTabsComponent,
-    SingleRowComponent,
-    MultiRowComponent,
     AddRoleComponent,
     UnassignRoleDialogComponent,
     GroupActionsComponent,

src/app/loans/loans-routing.module.ts

@@ -53,7 +53,6 @@ import { GLIMLoanTemplateResolver } from './common-resolvers/glim-loan-template.
 import { GroupViewResolver } from 'app/groups/common-resolvers/group-view.resolver';
 import { LoanDelinquencyTagsResolver } from './common-resolvers/loan-delinquency-tags.resolver';
 import { LoanDelinquencyTagsTabComponent } from './loans-view/loan-delinquency-tags-tab/loan-delinquency-tags-tab.component';
-import { RescheduleLoanComponent } from 'app/tasks/checker-inbox-and-tasks-tabs/reschedule-loan/reschedule-loan.component';
 import { LoanReschedulesResolver } from './common-resolvers/loan-reschedules.resolver';
 import { RescheduleLoanTabComponent } from './loans-view/reschedule-loan-tab/reschedule-loan-tab.component';
 
@@ -72,248 +71,246 @@ const routes: Routes = [
         }
       },
       {
-      path: ':loanId',
+        path: ':loanId',
-      data: { title: extract('Loan View'), routeParamBreadcrumb: 'loanId' },
+        component: LoansViewComponent,
-      resolve: {
+        data: { title: extract('Loan View'), routeParamBreadcrumb: 'loanId' },
-        loanDetailsData: LoanDetailsResolver
+        resolve: {
-      },
+          loanDetailsData: LoanDetailsResolver,
-      children: [
+          loanDatatables: LoanDatatablesResolver
-        {
+        },
-          path: '',
+        children: [
-          component: LoansViewComponent,
+          {
-          resolve: {
+            path: '',
-            loanDetailsData: LoanDetailsResolver,
+            redirectTo: 'general',
-            loanDatatables: LoanDatatablesResolver,
+            pathMatch: 'full'
           },
-          children: [
+          {
-            {
+            path: 'general',
-              path: 'general',
+            component: GeneralTabComponent,
-              component: GeneralTabComponent,
+            data: { title: extract('General'), breadcrumb: 'General', routeParamBreadcrumb: false }
-              data: { title: extract('General'), breadcrumb: 'General', routeParamBreadcrumb: false }
+          },
-            },
+          {
-            {
+            path: 'accountdetail',
-              path: 'accountdetail',
+            component: AccountDetailsComponent,
-              component: AccountDetailsComponent,
+            data: { title: extract('Account Detail'), breadcrumb: 'Account Detail', routeParamBreadcrumb: false }
-              data: { title: extract('Account Detail'), breadcrumb: 'Account Detail', routeParamBreadcrumb: false }
+          },
-            },
+          {
-            {
+            path: 'original-schedule',
-              path: 'original-schedule',
+            component: OriginalScheduleTabComponent,
-              component: OriginalScheduleTabComponent,
+            data: { title: extract('Original Schedule'), breadcrumb: 'Original Schedule', routeParamBreadcrumb: false },
-              data: { title: extract('Original Schedule'), breadcrumb: 'Original Schedule', routeParamBreadcrumb: false },
+          },
-            },
+          {
-            {
+            path: 'repayment-schedule',
-              path: 'repayment-schedule',
+            component: RepaymentScheduleTabComponent,
-              component: RepaymentScheduleTabComponent,
+            data: { title: extract('Repayment Schedule'), breadcrumb: 'Repayment Schedule', routeParamBreadcrumb: false },
-              data: { title: extract('Repayment Schedule'), breadcrumb: 'Repayment Schedule', routeParamBreadcrumb: false },
+          },
-            },
+          {
-            {
+            path: 'transactions',
-              path: 'transactions',
+            data: { title: extract('Loans Account Transactions'), breadcrumb: 'Transactions', routeParamBreadcrumb: false },
-              data: { title: extract('Loans Account Transactions'), breadcrumb: 'Transactions', routeParamBreadcrumb: false },
+            children: [
-              children: [
+              {
-                {
+                path: '',
-                  path: '',
+                component: TransactionsTabComponent
-                  component: TransactionsTabComponent
 
-                },
-                {
-                  path: 'export',
-                  component: ExportTransactionsComponent
-                }
-              ]
-            },
-            {
-              path: 'delinquencytags',
-              data: { title: extract('Loans Delinquency Tags'), breadcrumb: 'Delinquency Tags', routeParamBreadcrumb: false },
-              resolve: {
-                loanDelinquencyTagsData: LoanDelinquencyTagsResolver
               },
-              children: [
+              {
-                {
+                path: 'export',
-                  path: '',
+                component: ExportTransactionsComponent
-                  component: LoanDelinquencyTagsTabComponent
-                },
-              ]
-            },
-            {
-              path: 'loan-reschedules',
-              data: {},
-              resolve: {
-                loanRescheduleData: LoanReschedulesResolver
-              },
-              children: [
-                {
-                  path: '',
-                  component: RescheduleLoanTabComponent
-                }
-              ]
-            },
-            {
-              path: 'loan-collateral',
-              component: LoanCollateralTabComponent,
-              data: { title: extract('Loan Collateral Details'), breadcrumb: 'Loan Collateral Details', routeParamBreadcrumb: false },
-            },
-            {
-              path: 'loan-tranche-details',
-              component: LoanTrancheDetailsComponent,
-              data: { title: extract('Loan Tranche Details'), breadcrumb: 'Loan Tranche Details', routeParamBreadcrumb: false },
-            },
-            {
-              path: 'overdue-charges',
-              component: OverdueChargesTabComponent,
-              data: { title: extract('Overdue Charges'), breadcrumb: 'Overdue Charges', routeParamBreadcrumb: false }
-            },
-            {
-              path: 'floating-interest-rates',
-              component: FloatingInterestRatesComponent,
-              data: { title: extract('Floating Interest Rates'), breadcrumb: 'Floating Interest Rates', routeParamBreadcrumb: false },
-            },
-            {
-              path: 'charges',
-              data: { title: extract('Loans Account Charges'), breadcrumb: 'Charges', routeParamBreadcrumb: false },
-              component: ChargesTabComponent,
-            },
-            {
-              path: 'loan-documents',
-              component: LoanDocumentsTabComponent,
-              data: { title: extract('Loan Documents'), breadcrumb: 'Loan Documents', routeParamBreadcrumb: false },
-              resolve: {
-                loanDocuments: LoanDocumentsResolver
-              },
-            },
-            {
-              path: 'notes',
-              component: NotesTabComponent,
-              data: { title: extract('Notes'), breadcrumb: 'Notes', routeParamBreadcrumb: false },
-              resolve: {
-                loanNotes: LoanNotesResolver
-              },
-            },
-            {
-              path: 'standing-instruction',
-              component: StandingInstructionsTabComponent,
-              data: { title: extract('Standing Instructions'), breadcrumb: 'Standing Instructions', routeParamBreadcrumb: false }
-            },
-            {
-              path: 'datatables',
-              children: [{
-                path: ':datatableName',
-                component: DatatableTabComponent,
-                data: { title: extract('Data Table View'), routeParamBreadcrumb: 'datatableName' },
-                resolve: {
-                  loanDatatable: LoanDatatableResolver
-                }
-              }]
-            },
-          ],
-        },
-        {
-          path: 'transactions',
-          data: { title: extract('Loans Account Transactions'), breadcrumb: 'Transactions', routeParamBreadcrumb: false },
-          resolve: {
-            loanDetailsAssociationData: LoanDetailsResolver
-          },
-          children: [
-            {
-              path: '',
-              redirectTo: '../transactions', pathMatch: 'prefix'
-            },
-            {
-              path: ':id',
-              data: { routeParamBreadcrumb: 'id' },
-              children: [
-                {
-                  path: '',
-                  component: ViewTransactionComponent,
-                  resolve: {
-                    loansAccountTransaction: LoansAccountTransactionResolver
-                  }
-                },
-                {
-                  path: 'edit',
-                  component: EditTransactionComponent,
-                  data: { breadcrumb: 'Edit', routeParamBreadcrumb: false },
-                  resolve: {
-                    loansAccountTransactionTemplate: LoansAccountTransactionTemplateResolver
-                  }
-                },
-                {
-                  path: 'reciept',
-                  component: ViewRecieptComponent,
-                  data: { breadcrumb: 'Reciept', routeParamBreadcrumb: false },
-                  resolve: {
-                    loansTransactionReciept: LoansTransactionRecieptResolver
-                  }
-                }
-              ]
-            }
-          ]
-        },
-        {
-          path: 'charges',
-          data: { title: extract('Loans Account Charges'), breadcrumb: 'Charges', routeParamBreadcrumb: false },
-          children: [
-            {
-              path: '',
-              redirectTo: '../charges', pathMatch: 'prefix'
-            },
-            {
-              path: ':id',
-              data: { routeParamBreadcrumb: 'id' },
-              component: ViewChargeComponent,
-              resolve: {
-                loansAccountCharge: LoansAccountChargeResolver,
-                loanDetailsData: LoanDetailsResolver
               }
+            ]
+          },
+          {
+            path: 'delinquencytags',
+            data: { title: extract('Loans Delinquency Tags'), breadcrumb: 'Delinquency Tags', routeParamBreadcrumb: false },
+            resolve: {
+              loanDelinquencyTagsData: LoanDelinquencyTagsResolver
+            },
+            children: [
+              {
+                path: '',
+                component: LoanDelinquencyTagsTabComponent
+              },
+            ]
+          },
+          {
+            path: 'loan-reschedules',
+            data: {},
+            resolve: {
+              loanRescheduleData: LoanReschedulesResolver
+            },
+            children: [
+              {
+                path: '',
+                component: RescheduleLoanTabComponent
+              }
+            ]
+          },
+          {
+            path: 'loan-collateral',
+            component: LoanCollateralTabComponent,
+            data: { title: extract('Loan Collateral Details'), breadcrumb: 'Loan Collateral Details', routeParamBreadcrumb: false },
+          },
+          {
+            path: 'loan-tranche-details',
+            component: LoanTrancheDetailsComponent,
+            data: { title: extract('Loan Tranche Details'), breadcrumb: 'Loan Tranche Details', routeParamBreadcrumb: false },
+          },
+          {
+            path: 'overdue-charges',
+            component: OverdueChargesTabComponent,
+            data: { title: extract('Overdue Charges'), breadcrumb: 'Overdue Charges', routeParamBreadcrumb: false }
+          },
+          {
+            path: 'floating-interest-rates',
+            component: FloatingInterestRatesComponent,
+            data: { title: extract('Floating Interest Rates'), breadcrumb: 'Floating Interest Rates', routeParamBreadcrumb: false },
+          },
+          {
+            path: 'charges',
+            data: { title: extract('Loans Account Charges'), breadcrumb: 'Charges', routeParamBreadcrumb: false },
+            component: ChargesTabComponent,
+          },
+          {
+            path: 'loan-documents',
+            component: LoanDocumentsTabComponent,
+            data: { title: extract('Loan Documents'), breadcrumb: 'Loan Documents', routeParamBreadcrumb: false },
+            resolve: {
+              loanDocuments: LoanDocumentsResolver
+            },
+          },
+          {
+            path: 'notes',
+            component: NotesTabComponent,
+            data: { title: extract('Notes'), breadcrumb: 'Notes', routeParamBreadcrumb: false },
+            resolve: {
+              loanNotes: LoanNotesResolver
+            },
+          },
+          {
+            path: 'standing-instruction',
+            component: StandingInstructionsTabComponent,
+            data: { title: extract('Standing Instructions'), breadcrumb: 'Standing Instructions', routeParamBreadcrumb: false }
+          },
+          {
+            path: 'datatables',
+            children: [{
+              path: ':datatableName',
+              component: DatatableTabComponent,
+              data: { title: extract('Data Table View'), routeParamBreadcrumb: 'datatableName' },
+              resolve: {
+                loanDatatable: LoanDatatableResolver
+              }
+            }]
+          },
+        ],
+      },
+      {
+        path: 'transactions',
+        data: { title: extract('Loans Account Transactions'), breadcrumb: 'Transactions', routeParamBreadcrumb: false },
+        resolve: {
+          loanDetailsAssociationData: LoanDetailsResolver
+        },
+        children: [
+          {
+            path: '',
+            redirectTo: '../transactions', pathMatch: 'prefix'
+          },
+          {
+            path: ':id',
+            data: { routeParamBreadcrumb: 'id' },
+            children: [
+              {
+                path: '',
+                component: ViewTransactionComponent,
+                resolve: {
+                  loansAccountTransaction: LoansAccountTransactionResolver
+                }
+              },
+              {
+                path: 'edit',
+                component: EditTransactionComponent,
+                data: { breadcrumb: 'Edit', routeParamBreadcrumb: false },
+                resolve: {
+                  loansAccountTransactionTemplate: LoansAccountTransactionTemplateResolver
+                }
+              },
+              {
+                path: 'reciept',
+                component: ViewRecieptComponent,
+                data: { breadcrumb: 'Reciept', routeParamBreadcrumb: false },
+                resolve: {
+                  loansTransactionReciept: LoansTransactionRecieptResolver
+                }
+              }
+            ]
+          }
+        ]
+      },
+      {
+        path: 'charges',
+        data: { title: extract('Loans Account Charges'), breadcrumb: 'Charges', routeParamBreadcrumb: false },
+        children: [
+          {
+            path: '',
+            redirectTo: '../charges', pathMatch: 'prefix'
+          },
+          {
+            path: ':id',
+            data: { routeParamBreadcrumb: 'id' },
+            component: ViewChargeComponent,
+            resolve: {
+              loansAccountCharge: LoansAccountChargeResolver,
+              loanDetailsData: LoanDetailsResolver
             }
-          ]
-        },
-        {
-          path: 'actions/:action',
-          component: LoanAccountActionsComponent,
-          data: { title: extract('Loan Account Actions'), breadcrumb: 'action', routeParamBreadcrumb: 'action' },
-          resolve: {
-            actionButtonData: LoanActionButtonResolver
           }
-        },
+        ]
-        {
+      },
-          path: 'transfer-funds',
+      {
-          loadChildren: () => import('../account-transfers/account-transfers.module').then(m => m.AccountTransfersModule)
+        path: 'actions/:action',
-        },
+        component: LoanAccountActionsComponent,
-        {
+        data: { title: extract('Loan Account Actions'), breadcrumb: 'action', routeParamBreadcrumb: 'action' },
-          path: 'edit-loans-account',
+        resolve: {
-          data: { title: extract('Modify Loans Account'), breadcrumb: 'Modify Loans Account', routeParamBreadcrumb: 'Edit' },
+          actionButtonData: LoanActionButtonResolver
-          component: EditLoansAccountComponent,
-          resolve: {
-            loansAccountAndTemplate: LoansAccountAndTemplateResolver
-          }
-        },
-      ]
-    },
-    {
-      path: 'glim-account',
-      children: [
-        {
-          path: 'create',
-          data: { title: extract('Create GLIM Application'), breadcrumb: 'Create GLIM Application'},
-          component: CreateGlimAccountComponent,
-          resolve: {
-            loansAccountTemplate: GLIMLoanTemplateResolver,
-            gsimData: GSIMAccountsResolver,
-            groupsData: GroupViewResolver,
-          },
-        },
-        {
-          path: ':glimId',
-          data: { title: extract('GSIM Account View'), routeParamBreadcrumb: 'savingAccountId'},
-          component: GlimAccountComponent,
-          resolve: {
-            glimData: GLIMViewResolver,
-            groupsData: GroupAccountsResolver
-          },
         }
-      ]
+      },
-    }]
+      {
+        path: 'transfer-funds',
+        loadChildren: () => import('../account-transfers/account-transfers.module').then(m => m.AccountTransfersModule)
+      },
+      {
+        path: 'edit-loans-account',
+        data: { title: extract('Modify Loans Account'), breadcrumb: 'Modify Loans Account', routeParamBreadcrumb: 'Edit' },
+        component: EditLoansAccountComponent,
+        resolve: {
+          loansAccountAndTemplate: LoansAccountAndTemplateResolver
+        }
+      },
+    ]
   },
+  {
+    path: 'glim-account',
+    children: [
+      {
+        path: 'create',
+        data: { title: extract('Create GLIM Application'), breadcrumb: 'Create GLIM Application' },
+        component: CreateGlimAccountComponent,
+        resolve: {
+          loansAccountTemplate: GLIMLoanTemplateResolver,
+          gsimData: GSIMAccountsResolver,
+          groupsData: GroupViewResolver,
+        },
+      },
+      {
+        path: ':glimId',
+        data: { title: extract('GSIM Account View'), routeParamBreadcrumb: 'savingAccountId' },
+        component: GlimAccountComponent,
+        resolve: {
+          glimData: GLIMViewResolver,
+          groupsData: GroupAccountsResolver
+        },
+      }
+    ]
+  }
 ];
 @NgModule({
   imports: [RouterModule.forChild(routes)],

src/app/loans/loans-view/datatable-tab/datatable-tab.component.html

@@ -1,4 +1,9 @@
-<div>
+<div class="tab-container mat-typography">
-  <mifosx-multi-row *ngIf="multiRowDatatableFlag" [dataObject]="loanDatatable"></mifosx-multi-row>
+  <mifosx-entity-datatable-tab
-  <mifosx-single-row *ngIf="!multiRowDatatableFlag" [dataObject]="loanDatatable"></mifosx-single-row>
+    entityType="Loan Account"
+    [entityId]="entityId"
+    [multiRowDatatableFlag]="multiRowDatatableFlag"
+    [entityDatatable]="entityDatatable"
+  >
+  </mifosx-entity-datatable-tab>
 </div>

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

@@ -8,20 +8,23 @@ import { ActivatedRoute } from '@angular/router';
 })
 export class DatatableTabComponent {
 
-    /** Loan Datatable */
+  entityId: string;
-    loanDatatable: any;
+  /** Loan Datatable */
-    /** Multi Row Datatable Flag */
+  entityDatatable: any;
-    multiRowDatatableFlag: boolean;
+  /** Multi Row Datatable Flag */
+  multiRowDatatableFlag: boolean;
 
-    /**
+  /**
-     * Fetches data table data from `resolve`
+   * Fetches data table data from `resolve`
-     * @param {ActivatedRoute} route Activated Route.
+   * @param {ActivatedRoute} route Activated Route.
-     */
+   */
-    constructor(private route: ActivatedRoute) {
+  constructor(private route: ActivatedRoute) {
-      this.route.data.subscribe((data: { loanDatatable: any }) => {
+    this.entityId = this.route.parent.parent.snapshot.paramMap.get('loanId');
-        this.loanDatatable = data.loanDatatable;
+
-        this.multiRowDatatableFlag = this.loanDatatable.columnHeaders[0].columnName === 'id' ? true : false;
+    this.route.data.subscribe((data: { loanDatatable: any }) => {
-      });
+      this.entityDatatable = data.loanDatatable;
-    }
+      this.multiRowDatatableFlag = this.entityDatatable.columnHeaders[0].columnName === 'id' ? true : false;
+    });
+  }
 
 }

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

@@ -1,42 +0,0 @@
-<div class="tab-container mat-typography">
-  <h3>{{datatableName}}</h3>
-  <div fxLayout="row" fxLayoutAlign="flex-end">
-    <button mat-raised-button color="primary" (click)="add()" *ngIf="!dataObject.data[0]">
-      <fa-icon icon="plus" class="m-r-10"></fa-icon>Add
-    </button>
-    <button mat-raised-button color="primary" (click)="edit()" *ngIf="dataObject.data[0]">
-      <fa-icon icon="edit" class="m-r-10"></fa-icon>Edit
-    </button>
-    <button class="delete-button" mat-raised-button color="warn" (click)="delete()" *ngIf="dataObject.data[0]">
-      <fa-icon icon="trash" class="m-r-10"></fa-icon>Delete All
-    </button>
-  </div>
-
-  <mat-divider></mat-divider>
-
-  <ng-container *ngIf="dataObject.data.length > 0">
-
-    <div *ngFor="let columnHeader of dataObject.columnHeaders;let i = index" class="table-data">
-
-      <div fxFlex="45%" class="mat-body-strong left">
-        {{columnHeader.columnName}}
-      </div>
-
-      <div fxFlex="45%" [ngSwitch]="columnHeader.columnDisplayType" class="right">
-        <span *ngSwitchCase="'DATE'">
-          {{dataObject.data[0].row[i] | dateFormat}}
-        </span>
-        <span *ngSwitchCase="'DATETIME'">
-          {{dataObject.data[0].row[i] | datetimeFormat}}
-        </span>
-        <span *ngSwitchCase="'INTEGER' || 'DECIMAL'">
-          {{dataObject.data[0].row[i] | number}}
-        </span>
-        <span *ngSwitchDefault>
-          {{dataObject.data[0].row[i]}}
-        </span>
-      </div>
-    </div>
-  </ng-container>
-
-</div>

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

@@ -1,11 +0,0 @@
-.tab-container {
-    padding: 1%;
-    margin: 1%;
-    .delete-button {
-        margin-left: 1%;
-    }
-}
-
-.table-name {
-    padding-left: 2%;
-}

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

@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { SingleRowComponent } from './single-row.component';
-
-describe('SingleRowComponent', () => {
-  let component: SingleRowComponent;
-  let fixture: ComponentFixture<SingleRowComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ SingleRowComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(SingleRowComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

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

@@ -1,147 +0,0 @@
-/** Angular Imports */
-import { Component, Input, OnInit } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import { MatDialog } from '@angular/material/dialog';
-
-/** Custom Components */
-import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
-import { DeleteDialogComponent } from '../../../../shared/delete-dialog/delete-dialog.component';
-import { SettingsService } from 'app/settings/settings.service';
-
-/** Custom Models */
-import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-base';
-
-/** Custom Services */
-import { LoansService } from '../../../loans.service';
-import { Dates } from 'app/core/utils/dates';
-import { Datatables } from 'app/core/utils/datatables';
-
-
-@Component({
-  selector: 'mifosx-single-row',
-  templateUrl: './single-row.component.html',
-  styleUrls: ['./single-row.component.scss']
-})
-export class SingleRowComponent implements OnInit {
-
-  /** Data Object */
-  @Input() dataObject: any;
-
-  /** Data Table Name */
-  datatableName: string;
-  /** Loan Id */
-  loanId: string;
-
-  /**
-   * Fetches loan Id from parent route params.
-   * @param {ActivatedRoute} route Activated Route.
-   * @param {Dates} dateUtils Date Utils.
-   * @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 datatables: Datatables) {
-    this.loanId = this.route.parent.parent.snapshot.paramMap.get('loanId');
-  }
-
-  /**
-   * Fetches data table name from route params.
-   * subscription is required due to asynchronicity.
-   */
-  ngOnInit() {
-    this.route.params.subscribe((routeParams: any) => {
-      this.datatableName = routeParams.datatableName;
-    });
-  }
-
-  /**
-   * Creates a new instance of the given single row data table.
-   */
-  add() {
-    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[] = this.datatables.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) {
-        dateTransformColumns.forEach((column) => {
-          response.data.value[column] = this.dateUtils.formatDate(response.data.value[column], dataTableEntryObject.dateFormat);
-        });
-        dataTableEntryObject = { ...response.data.value, ...dataTableEntryObject };
-        this.loansService.addLoanDatatableEntry(this.loanId, this.datatableName, dataTableEntryObject).subscribe(() => {
-          this.loansService.getLoanDatatable(this.loanId, this.datatableName).subscribe((dataObject: any) => {
-            this.dataObject = dataObject;
-          });
-        });
-      }
-    });
-  }
-
-  /**
-   * Edits the current instance of single row data table.
-   */
-  edit() {
-    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'));
-    });
-    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;
-    });
-    const data = {
-      title: 'Edit ' + this.datatableName,
-      layout: { addButtonText: 'Confirm' },
-      formfields: formfields
-    };
-    const editDialogRef = this.dialog.open(FormDialogComponent, { data });
-    editDialogRef.afterClosed().subscribe((response: any) => {
-      if (response.data) {
-        dateTransformColumns.forEach((column) => {
-          response.data.value[column] = this.dateUtils.formatDate(response.data.value[column], dataTableEntryObject.dateFormat);
-        });
-        dataTableEntryObject = { ...response.data.value, ...dataTableEntryObject };
-        this.loansService.editLoanDatatableEntry(this.loanId, this.datatableName, dataTableEntryObject).subscribe(() => {
-          this.loansService.getLoanDatatable(this.loanId, this.datatableName).subscribe((dataObject: any) => {
-            this.dataObject = dataObject;
-          });
-        });
-      }
-    });
-  }
-
-  /**
-   * Deletes the current instance of single row data table.
-   */
-  delete() {
-    const deleteDataTableDialogRef = this.dialog.open(DeleteDialogComponent, {
-      data: { deleteContext: `the contents of ${this.datatableName}` }
-    });
-    deleteDataTableDialogRef.afterClosed().subscribe((response: any) => {
-      if (response.delete) {
-        this.loansService.deleteDatatableContent(this.loanId, this.datatableName)
-          .subscribe(() => {
-            this.loansService.getLoanDatatable(this.loanId, this.datatableName).subscribe((dataObject: any) => {
-              this.dataObject = dataObject;
-            });
-          });
-      }
-    });
-  }
-
-}

src/app/loans/loans.module.ts

@@ -21,8 +21,6 @@ import { LoanAccountActionsComponent } from './loans-view/loan-account-actions/l
 import { LoansAccountCloseComponent } from './loans-view/loan-account-actions/loans-account-close/loans-account-close.component';
 import { TransactionsTabComponent } from './loans-view/transactions-tab/transactions-tab.component';
 import { DatatableTabComponent } from './loans-view/datatable-tab/datatable-tab.component';
-import { MultiRowComponent } from './loans-view/datatable-tab/multi-row/multi-row.component';
-import { SingleRowComponent } from './loans-view/datatable-tab/single-row/single-row.component';
 import { UndoApprovalComponent } from './loans-view/loan-account-actions/undo-approval/undo-approval.component';
 import { AssignLoanOfficerComponent } from './loans-view/loan-account-actions/assign-loan-officer/assign-loan-officer.component';
 import { ForeclosureComponent } from './loans-view/loan-account-actions/foreclosure/foreclosure.component';
@@ -97,8 +95,6 @@ import { RescheduleLoanTabComponent } from './loans-view/reschedule-loan-tab/res
     LoansAccountCloseComponent,
     TransactionsTabComponent,
     DatatableTabComponent,
-    MultiRowComponent,
-    SingleRowComponent,
     UndoApprovalComponent,
     AssignLoanOfficerComponent,
     ForeclosureComponent,

src/app/organization/offices/common-resolvers/edit-office.resolver.ts

@@ -24,7 +24,7 @@ export class EditOfficeResolver implements Resolve<Object> {
    * @returns {Observable<any>}
    */
   resolve(route: ActivatedRouteSnapshot): Observable<any> {
-    const officeId = route.paramMap.get('id');
+    const officeId = route.paramMap.get('officeId');
     return this.organizationService.getOffice(officeId, true);
   }
 

src/app/organization/offices/common-resolvers/office-datatable.resolver.ts

@@ -1,13 +1,11 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
 import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+import { SystemService } from 'app/system/system.service';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
 
-/** Custom Services */
-import { OrganizationService } from '../../organization.service';
-
 /**
  * Office Datatable data resolver.
  */
@@ -15,18 +13,18 @@ import { OrganizationService } from '../../organization.service';
 export class OfficeDatatableResolver implements Resolve<Object> {
 
   /**
-   * @param {OrganizationService} OrganizationService Organization service.
+   * @param {SystemService} systemService Products service.
    */
-  constructor(private organizationService: OrganizationService) { }
+  constructor(private systemService: SystemService) { }
 
   /**
    * Returns the Office's Datatable data.
    * @returns {Observable<any>}
    */
   resolve(route: ActivatedRouteSnapshot): Observable<any> {
-    const officeId = route.parent.parent.paramMap.get('id');
+    const officeId = route.parent.parent.paramMap.get('officeId');
     const datatableName = route.paramMap.get('datatableName');
-    return this.organizationService.getOfficeDatatable(officeId, datatableName);
+    return this.systemService.getEntityDatatable(officeId, datatableName);
   }
 
 }

src/app/organization/offices/common-resolvers/office-datatables.resolver.ts

@@ -1,13 +1,11 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
 import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+import { SystemService } from 'app/system/system.service';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
 
-/** Custom Services */
-import { OrganizationService } from '../../organization.service';
-
 /**
  * Office Datatables data resolver.
  */
@@ -15,16 +13,16 @@ import { OrganizationService } from '../../organization.service';
 export class OfficeDatatablesResolver implements Resolve<Object> {
 
   /**
-   * @param {organizationService} OrganizationService Organization service.
+   * @param {SystemService} systemService Products service.
    */
-  constructor(private organizationService: OrganizationService) { }
+  constructor(private systemService: SystemService) { }
 
   /**
-   * Returns the Office's Datatables data.
+   * Returns the loan product data.
    * @returns {Observable<any>}
    */
-  resolve(): Observable<any> {
+  resolve(route: ActivatedRouteSnapshot): Observable<any> {
-    return this.organizationService.getOfficeDatatables();
+    return this.systemService.getEntityDatatables('m_office');
   }
 
 }

src/app/organization/offices/common-resolvers/office.resolver.ts

@@ -24,7 +24,7 @@ export class OfficeResolver implements Resolve<Object> {
    * @returns {Observable<any>}
    */
   resolve(route: ActivatedRouteSnapshot): Observable<any> {
-    const officeId = route.paramMap.get('id');
+    const officeId = route.parent.paramMap.get('officeId');
     return this.organizationService.getOffice(officeId);
   }
 

src/app/organization/offices/view-office/datatable-tabs/datatable-tabs.component.html

@@ -1,4 +1,9 @@
-<div>
+<div class="tab-container mat-typography">
-  <mifosx-multi-row *ngIf="multiRowDatatableFlag" [dataObject]="officeDatatable"></mifosx-multi-row>
+  <mifosx-entity-datatable-tab
-  <mifosx-single-row *ngIf="!multiRowDatatableFlag" [dataObject]="officeDatatable"></mifosx-single-row>
+    entityType="Office"
+    [entityId]="entityId"
+    [multiRowDatatableFlag]="multiRowDatatableFlag"
+    [entityDatatable]="entityDatatable"
+  >
+  </mifosx-entity-datatable-tab>
 </div>

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

@@ -11,9 +11,9 @@ import { ActivatedRoute } from '@angular/router';
   styleUrls: ['./datatable-tabs.component.scss']
 })
 export class DatatableTabsComponent {
-
+  entityId: string;
   /** Office Datatable */
-  officeDatatable: any;
+  entityDatatable: any;
   /** Multi Row Datatable Flag */
   multiRowDatatableFlag: boolean;
 
@@ -22,9 +22,11 @@ export class DatatableTabsComponent {
    * @param {ActivatedRoute} route Activated Route.
    */
   constructor(private route: ActivatedRoute) {
+    this.entityId = this.route.parent.parent.snapshot.paramMap.get('officeId');
+
     this.route.data.subscribe((data: { officeDatatable: any }) => {
-      this.officeDatatable = data.officeDatatable;
+      this.entityDatatable = data.officeDatatable;
-      this.multiRowDatatableFlag = this.officeDatatable.columnHeaders[0].columnName === 'id' ? true : false;
+      this.multiRowDatatableFlag = this.entityDatatable.columnHeaders[0].columnName === 'id' ? true : false;
     });
   }
 

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

@@ -1,33 +0,0 @@
-<div class="tab-container mat-typography">
-
-  <div fxLayout="row" fxLayoutAlign="start">
-    <div class="m-b-10">
-      <h3>{{datatableName}}</h3>
-    </div>
-    <div class="action-button m-b-5" fxLayoutGap="10px">
-      <span *mifosxHasPermission="'CREATE_' + datatableName">
-        <button mat-raised-button color="primary" (click)="add()">
-          <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;Add
-        </button>
-      </span>
-      <span *mifosxHasPermission="'DELETE_' + datatableName">
-        <button class="delete-button" mat-raised-button color="warn" (click)="delete()" *ngIf="showDeleteBotton">
-          <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;Delete All
-        </button>
-      </span>
-    </div>
-  </div>
-
-  <table #dataTable mat-table [hidden]="!datatableData[0]" [dataSource]="datatableData" class="mat-elevation-z1 m-b-25">
-
-    <ng-container *ngFor="let datatableColumn of datatableColumns;let i = index" [matColumnDef]="datatableColumn">
-      <th mat-header-cell class="right" *matHeaderCellDef> {{datatableColumn}} </th>
-      <td mat-cell class="right" *matCellDef="let data">{{ formatValue(i, data.row[i]) }}</td>
-    </ng-container>
-
-    <tr mat-header-row *matHeaderRowDef="datatableColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: datatableColumns;"></tr>
-
-  </table>
-
-</div>

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

@@ -1,10 +0,0 @@
-.tab-container {
-  padding: 1%;
-  margin: 1%;
-  .action-button{
-    margin-left: auto;
-  }
-  table {
-    width: 100%;
-  }
-}

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

@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { MultiRowComponent } from './multi-row.component';
-
-describe('MultiRowComponent', () => {
-  let component: MultiRowComponent;
-  let fixture: ComponentFixture<MultiRowComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ MultiRowComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(MultiRowComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

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

@@ -1,154 +0,0 @@
-/** Angular Imports */
-import { Component, OnChanges, OnInit, Input, ViewChild } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import { MatTable } from '@angular/material/table';
-import { MatDialog } from '@angular/material/dialog';
-
-/** Custom Dialogs */
-import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
-import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.component';
-
-/** Custom Models */
-import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-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';
-import { DateFormatPipe } from 'app/pipes/date-format.pipe';
-import { DatetimeFormatPipe } from 'app/pipes/datetime-format.pipe';
-import { DecimalPipe } from '@angular/common';
-
-/**
- * Office Multi Row Data Tables
- */
-@Component({
-  selector: 'mifosx-multi-row',
-  templateUrl: './multi-row.component.html',
-  styleUrls: ['./multi-row.component.scss']
-})
-export class MultiRowComponent implements OnInit, OnChanges {
-
-  /** Data Object */
-  @Input() dataObject: any;
-
-  /** Data Table Name */
-  datatableName: string;
-  /** Data Table Columns */
-  datatableColumns: string[] = [];
-  /** Data Table Data */
-  datatableData: any;
-  /** Office Id */
-  officeId: string;
-  /** Toggle button visibility */
-  showDeleteBotton: boolean;
-
-  /** Data Table Reference */
-  @ViewChild('dataTable', { static: true }) dataTableRef: MatTable<Element>;
-
-  /**
-   * Fetches office Id from parent route params.
-   * @param {ActivatedRoute} route Activated Route.
-   * @param {Dates} dateUtils Date Utils.
-   * @param {OrganizationService} organizationService Organization Service.
-   * @param {SettingsService} settingsService Settings Service.
-   * @param {MatDialog} dialog Mat Dialog.
-   */
-  constructor(private route: ActivatedRoute,
-              private dateUtils: Dates,
-              private organizationService: OrganizationService,
-              private settingsService: SettingsService,
-              private dialog: MatDialog,
-              private datatables: Datatables,
-              private dateFormat: DateFormatPipe,
-              private dateTimeFormat: DatetimeFormatPipe,
-              private numberFormat: DecimalPipe) {
-    this.officeId = this.route.parent.parent.snapshot.paramMap.get('id');
-  }
-
-  /**
-   * Updates related variables on changes to dataObject.
-   */
-  ngOnChanges() {
-    this.datatableColumns = this.dataObject.columnHeaders.map((columnHeader: any) => {
-      return columnHeader.columnName;
-    });
-    this.datatableData = this.dataObject.data;
-    this.showDeleteBotton = this.datatableData[0] ? true : false;
-  }
-
-  /**
-   * Fetches data table name from route params.
-   * subscription is required due to asynchronicity.
-   */
-  ngOnInit() {
-    this.route.params.subscribe((routeParams: any) => {
-      this.datatableName = routeParams.datatableName;
-    });
-  }
-
-  /**
-   * Adds a new row to the given multi row data table.
-   */
-  add() {
-    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') && (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
-    };
-    const addDialogRef = this.dialog.open(FormDialogComponent, { data });
-    addDialogRef.afterClosed().subscribe((response: any) => {
-      if (response.data) {
-        dateTransformColumns.forEach((column) => {
-          response.data.value[column] = this.dateUtils.formatDate(response.data.value[column], dataTableEntryObject.dateFormat);
-        });
-        dataTableEntryObject = { ...response.data.value, ...dataTableEntryObject };
-        this.organizationService.addOfficeDatatableEntry(this.officeId, this.datatableName, dataTableEntryObject).subscribe(() => {
-          this.organizationService.getOfficeDatatable(this.officeId, this.datatableName).subscribe((dataObject: any) => {
-            this.datatableData = dataObject.data;
-            this.dataTableRef.renderRows();
-          });
-        });
-      }
-    });
-  }
-
-  /**
-   * Deletes all rows of the given multi row data table.
-   */
-  delete() {
-    const deleteDataTableDialogRef = this.dialog.open(DeleteDialogComponent, {
-      data: { deleteContext: `the contents of ${this.datatableName}` }
-    });
-    deleteDataTableDialogRef.afterClosed().subscribe((response: any) => {
-      if (response.delete) {
-        this.organizationService.deleteDatatableContent(this.officeId, this.datatableName).subscribe(() => {
-          this.organizationService.getOfficeDatatable(this.officeId, this.datatableName).subscribe((dataObject: any) => {
-            this.datatableData = dataObject.data;
-            this.showDeleteBotton = false;
-            this.dataTableRef.renderRows();
-           });
-        });
-      }
-    });
-  }
-
-  formatValue(index: number, value: any): any {
-    const columnDisplayType = this.dataObject.columnHeaders[index].columnDisplayType;
-    if (columnDisplayType === 'DATE') {
-      return this.dateFormat.transform(value);
-    } else if (columnDisplayType === 'DATETIME') {
-      return this.dateTimeFormat.transform(value);
-    } else if (columnDisplayType === 'INTEGER' || columnDisplayType === 'DECIMAL') {
-      return this.numberFormat.transform(value);
-    }
-    return value;
-  }
-
-}

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

@@ -1,42 +0,0 @@
-<div class="tab-container mat-typography">
-  <h3>{{datatableName}}</h3>
-  <div fxLayout="row" fxLayoutAlign="flex-end">
-    <button mat-raised-button color="primary" (click)="add()" *ngIf="!dataObject.data[0]">
-      <fa-icon icon="plus" class="m-r-10"></fa-icon>Add
-    </button>
-    <button mat-raised-button color="primary" (click)="edit()" *ngIf="dataObject.data[0]">
-      <fa-icon icon="edit" class="m-r-10"></fa-icon>Edit
-    </button>
-    <button class="delete-button" mat-raised-button color="warn" (click)="delete()" *ngIf="dataObject.data[0]">
-      <fa-icon icon="trash" class="m-r-10"></fa-icon>Delete All
-    </button>
-  </div>
-
-  <mat-divider></mat-divider>
-
-  <ng-container *ngIf="dataObject.data.length > 0">
-
-    <div *ngFor="let columnHeader of dataObject.columnHeaders;let i = index" class="table-data">
-
-      <div fxFlex="45%" class="mat-body-strong left">
-        {{columnHeader.columnName}}
-      </div>
-
-      <div fxFlex="45%" [ngSwitch]="columnHeader.columnDisplayType" class="right">
-        <span *ngSwitchCase="'DATE'">
-          {{dataObject.data[0].row[i] | dateFormat}}
-        </span>
-        <span *ngSwitchCase="'DATETIME'">
-          {{dataObject.data[0].row[i] | datetimeFormat}}
-        </span>
-        <span *ngSwitchCase="'INTEGER' || 'DECIMAL'">
-          {{dataObject.data[0].row[i] | number}}
-        </span>
-        <span *ngSwitchDefault>
-          {{dataObject.data[0].row[i]}}
-        </span>
-      </div>
-    </div>
-  </ng-container>
-
-</div>

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

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

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

@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { SingleRowComponent } from './single-row.component';
-
-describe('SingleRowComponent', () => {
-  let component: SingleRowComponent;
-  let fixture: ComponentFixture<SingleRowComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ SingleRowComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(SingleRowComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

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

@@ -1,148 +0,0 @@
-/** Angular Imports */
-import { Component, Input, OnInit } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import { MatDialog } from '@angular/material/dialog';
-
-/** Custom Components */
-import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
-import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.component';
-
-/** Custom Models */
-import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-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
- */
-@Component({
-  selector: 'mifosx-single-row',
-  templateUrl: './single-row.component.html',
-  styleUrls: ['./single-row.component.scss']
-})
-export class SingleRowComponent implements OnInit {
-
-  /** Data Object */
-  @Input() dataObject: any;
-
-  /** Data Table Name */
-  datatableName: string;
-  /** Office Id */
-  officeId: string;
-
-  /**
-   * Fetches office Id from parent route params.
-   * @param {ActivatedRoute} route Activated Route.
-   * @param {Dates} dateUtils Date Utils.
-   * @param {OrganizationService} organizationService Organization Service.
-   * @param {SettingsService} settingsService Settings Service.
-   * @param {MatDialog} dialog Mat Dialog.
-   */
-  constructor(private route: ActivatedRoute,
-              private dateUtils: Dates,
-              private dialog: MatDialog,
-              private organizationService: OrganizationService,
-              private settingsService: SettingsService,
-              private datatables: Datatables) {
-    this.officeId = this.route.parent.parent.snapshot.paramMap.get('id');
-  }
-
-  /**
-   * Fetches data table name from route params.
-   * subscription is required due to asynchronicity.
-   */
-  ngOnInit() {
-    this.route.params.subscribe((routeParams: any) => {
-      this.datatableName = routeParams.datatableName;
-    });
-  }
-
-  /**
-   * Creates a new instance of the given single row data table.
-   */
-  add() {
-    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') && (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
-    };
-    const addDialogRef = this.dialog.open(FormDialogComponent, { data });
-    addDialogRef.afterClosed().subscribe((response: any) => {
-      if (response.data) {
-        dateTransformColumns.forEach((column) => {
-          response.data.value[column] = this.dateUtils.formatDate(response.data.value[column], dataTableEntryObject.dateFormat);
-        });
-        dataTableEntryObject = { ...response.data.value, ...dataTableEntryObject };
-        this.organizationService.addOfficeDatatableEntry(this.officeId, this.datatableName, dataTableEntryObject).subscribe(() => {
-          this.organizationService.getOfficeDatatable(this.officeId, this.datatableName).subscribe((dataObject: any) => {
-            this.dataObject = dataObject;
-          });
-        });
-      }
-    });
-  }
-
-  /**
-   * Edits the current instance of single row data table.
-   */
-  edit() {
-    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'));
-    });
-    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;
-    });
-    const data = {
-      title: 'Edit ' + this.datatableName,
-      layout: { addButtonText: 'Confirm' },
-      formfields: formfields
-    };
-    const editDialogRef = this.dialog.open(FormDialogComponent, { data });
-    editDialogRef.afterClosed().subscribe((response: any) => {
-      if (response.data) {
-        dateTransformColumns.forEach((column) => {
-          response.data.value[column] = this.dateUtils.formatDate(response.data.value[column], dataTableEntryObject.dateFormat);
-        });
-        dataTableEntryObject = { ...response.data.value, ...dataTableEntryObject };
-        this.organizationService.editOfficeDatatableEntry(this.officeId, this.datatableName, dataTableEntryObject).subscribe(() => {
-          this.organizationService.getOfficeDatatable(this.officeId, this.datatableName).subscribe((dataObject: any) => {
-            this.dataObject = dataObject;
-          });
-        });
-      }
-    });
-  }
-
-  /**
-   * Deletes the current instance of single row data table.
-   */
-  delete() {
-    const deleteDataTableDialogRef = this.dialog.open(DeleteDialogComponent, {
-      data: { deleteContext: `the contents of ${this.datatableName}` }
-    });
-    deleteDataTableDialogRef.afterClosed().subscribe((response: any) => {
-      if (response.delete) {
-        this.organizationService.deleteDatatableContent(this.officeId, this.datatableName)
-          .subscribe(() => {
-            this.organizationService.getOfficeDatatable(this.officeId, this.datatableName).subscribe((dataObject: any) => {
-              this.dataObject = dataObject;
-            });
-          });
-      }
-    });
-  }
-
-}

src/app/organization/offices/view-office/general-tab/general-tab.component.html

@@ -1,23 +1,42 @@
+
 <div class="tab-container mat-typography">
+  <div fxLayoutAlign="flex-end" class="action-button m-b-20">
+    <span *mifosxHasPermission="'UPDATE_OFFICE'">
+      <button mat-raised-button color="primary" [routerLink]="['edit']">
+        <fa-icon icon="edit" class="m-r-10"></fa-icon>Edit
+      </button>
+    </span>
+  </div>
 
-  <mat-list>
+  <div fxLayout="row wrap" fxLayout.lt-md="column">
 
-    <mat-list-item>
+    <div fxFlex="45%" class="mat-body-strong left">
-      Parent Office : {{ officeData.parentName ? officeData.parentName : 'N/A' }}
+      Parent Office
-    </mat-list-item>
+    </div>
+    <div fxFlex="50%" class="right">
+      {{ officeData.parentName ? officeData.parentName : 'N/A' }}
+    </div>
 
-    <mat-list-item>
+    <div fxFlex="45%" class="mat-body-strong left">
-      Opened On : {{ officeData.openingDate ? (officeData.openingDate  | dateFormat) : 'Unassigned' }}
+      Opened On
-    </mat-list-item>
+    </div>
+    <div fxFlex="50%" class="right">
+      {{ officeData.openingDate ? (officeData.openingDate  | dateFormat) : 'Unassigned' }}
+    </div>
 
-    <mat-list-item>
+    <div fxFlex="45%" class="mat-body-strong left">
-      Name Decorated : {{ officeData.nameDecorated ? officeData.nameDecorated : 'Unassigned' }}
+      Name Decorated
-    </mat-list-item>
+    </div>
+    <div fxFlex="50%" class="right">
+      {{ officeData.nameDecorated ? officeData.nameDecorated : 'Unassigned' }}
+    </div>
 
-    <mat-list-item>
+    <div fxFlex="45%" class="mat-body-strong left">
-      External Id : {{ officeData.externalId ? officeData.externalId : 'Unassigned' }}
+      External Id
-    </mat-list-item>
+    </div>
-    
+    <div fxFlex="50%" class="right">
-  </mat-list>
+      {{ officeData.externalId ? officeData.externalId : 'Unassigned' }}
+    </div>
+  </div>
 
 </div>

src/app/organization/offices/view-office/general-tab/general-tab.component.scss

@@ -1,4 +1,15 @@
 .tab-container {
   padding: 1%;
   margin: 1%;
+  .delete-button {
+      margin-left: 1%;
+  }
+}
+
+.table-name {
+  padding-left: 2%;
+}
+
+.table-data {
+  margin-top: 3px;
 }

src/app/organization/offices/view-office/general-tab/general-tab.component.ts

@@ -20,7 +20,7 @@ export class GeneralTabComponent {
    * @param {ActivatedRoute} route Activated Route
    */
   constructor(private route: ActivatedRoute) {
-    this.route.parent.data.subscribe((data: { office: any }) => {
+    this.route.data.subscribe((data: { office: any }) => {
       this.officeData = data.office;
     });
   }

src/app/organization/offices/view-office/view-office.component.html

@@ -1,13 +1,5 @@
 <div class="container">
 
-  <div fxLayoutAlign="flex-end" class="action-button m-b-20">
-    <span *mifosxHasPermission="'UPDATE_OFFICE'">
-      <button mat-raised-button color="primary" [routerLink]="['edit']">
-        <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;Edit Office
-      </button>
-    </span>
-  </div>
-
   <mat-card class="office-card">
 
     <mat-card-content>

src/app/organization/organization-routing.module.ts

@@ -175,38 +175,38 @@ const routes: Routes = [
               }
             },
             {
-              path: ':id',
+              path: ':officeId',
-              data: { title: extract('View Office'), routeResolveBreadcrumb: ['office', 'name'] },
+              data: { title: extract('View Office'), breadcrumb: 'officeId', routeParamBreadcrumb: 'officeId' },
               component: ViewOfficeComponent,
               resolve: {
                  officeDatatables: OfficeDatatablesResolver,
-                 office: OfficeResolver
               },
               children: [
+                {
+                  path: '',
+                  redirectTo: 'general',
+                  pathMatch: 'full'
+                },
                 {
                   path: 'general',
                   component: GeneralTabComponent,
-                  data: { title: extract('General') },
+                  data: { title: extract('General'), breadcrumb: 'General', routeParamBreadcrumb: false },
+                  resolve: {
+                    office: OfficeResolver
+                  }
                 },
                 {
                   path: 'datatables',
-                  children: [
+                  children: [{
-                    {
                       path: ':datatableName',
                       component: DatatableTabsComponent,
-                      data: { title: extract('View Data Table') },
+                      data: { title: extract('Data Table View'), routeParamBreadcrumb: 'datatableName' },
                       resolve: {
                         officeDatatable: OfficeDatatableResolver
                       }
                     }
                   ]
-                }
+                },
-              ]
-            },
-            {
-              path: ':id',
-              data: { title: extract('View Office'), routeParamBreadcrumb: 'id' },
-              children: [
                 {
                   path: 'edit',
                   component: EditOfficeComponent,
@@ -217,7 +217,6 @@ const routes: Routes = [
                 }
               ]
             }
-
           ]
         },
         {

src/app/organization/organization.module.ts

@@ -39,8 +39,6 @@ import { ViewHolidaysComponent } from './holidays/view-holidays/view-holidays.co
 import { ViewOfficeComponent } from './offices/view-office/view-office.component';
 import { GeneralTabComponent } from './offices/view-office/general-tab/general-tab.component';
 import { DatatableTabsComponent } from './offices/view-office/datatable-tabs/datatable-tabs.component';
-import { SingleRowComponent } from './offices/view-office/datatable-tabs/single-row/single-row.component';
-import { MultiRowComponent } from './offices/view-office/datatable-tabs/multi-row/multi-row.component';
 import { ViewCampaignComponent } from './sms-campaigns/view-campaign/view-campaign.component';
 import { ManageFundsComponent } from './manage-funds/manage-funds.component';
 import { ManageCurrenciesComponent } from './currencies/manage-currencies/manage-currencies.component';
@@ -122,8 +120,6 @@ import { CreateHoliday } from './holidays/create-holiday/create-holiday.service'
     ViewOfficeComponent,
     GeneralTabComponent,
     DatatableTabsComponent,
-    SingleRowComponent,
-    MultiRowComponent,
     ViewCampaignComponent,
     ManageFundsComponent,
     ManageCurrenciesComponent,

src/app/products/loan-products/create-loan-product/create-loan-product.component.html

@@ -84,6 +84,14 @@
 
     </mat-step>
 
+    <mat-step *ngFor="let datatable of datatables">
+
+      <ng-template matStepLabel>{{datatable.registeredTableName}}</ng-template>
+
+      <mifosx-loan-product-datatable-step [datatableData]="datatable" #dtloanproduct></mifosx-loan-product-datatable-step>
+
+    </mat-step>
+
     <mat-step state="preview" *ngIf="loanProductFormValid" completed>
 
       <ng-template matStepLabel>PREVIEW</ng-template>

src/app/products/loan-products/create-loan-product/create-loan-product.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit, QueryList, ViewChild, ViewChildren } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 
 /** Custom Components */
@@ -13,6 +13,7 @@ import { LoanProductAccountingStepComponent } from '../loan-product-stepper/loan
 /** Custom Services */
 import { ProductsService } from 'app/products/products.service';
 import { SettingsService } from 'app/settings/settings.service';
+import { LoanProductDatatableStepComponent } from '../loan-product-stepper/loan-product-datatable-step/loan-product-datatable-step.component';
 
 @Component({
   selector: 'mifosx-create-loan-product',
@@ -27,6 +28,10 @@ export class CreateLoanProductComponent implements OnInit {
   @ViewChild(LoanProductSettingsStepComponent, { static: true }) loanProductSettingsStep: LoanProductSettingsStepComponent;
   @ViewChild(LoanProductChargesStepComponent, { static: true }) loanProductChargesStep: LoanProductChargesStepComponent;
   @ViewChild(LoanProductAccountingStepComponent, { static: true }) loanProductAccountingStep: LoanProductAccountingStepComponent;
+  /** Get handle on dtloanproduct tags in the template */
+  @ViewChildren('dtloanproduct') loanProductDatatables: QueryList<LoanProductDatatableStepComponent>;
+
+  datatables: any = [];
 
   loanProductsTemplate: any;
   accountingRuleData = ['None', 'Cash', 'Accrual (periodic)', 'Accrual (upfront)'];
@@ -42,8 +47,10 @@ export class CreateLoanProductComponent implements OnInit {
               private productsService: ProductsService,
               private settingsService: SettingsService,
               private router: Router) {
-    this.route.data.subscribe((data: { loanProductsTemplate: any }) => {
+    this.route.data.subscribe((data: { loanProductsTemplate: any, loanProductDatatables: any }) => {
       this.loanProductsTemplate = data.loanProductsTemplate;
+      // this.datatables = data.loanProductDatatables;
+      this.datatables = [];
       const assetAccountData = this.loanProductsTemplate.accountingMappingOptions.assetAccountOptions || [];
       const liabilityAccountData = this.loanProductsTemplate.accountingMappingOptions.liabilityAccountOptions || [];
       this.loanProductsTemplate.accountingMappingOptions.assetAndLiabilityAccountOptions = assetAccountData.concat(liabilityAccountData);
@@ -74,13 +81,21 @@ export class CreateLoanProductComponent implements OnInit {
   }
 
   get loanProductFormValid() {
-    return (
+    let areValids = (
       this.loanProductDetailsForm.valid &&
       this.loanProductCurrencyForm.valid &&
       this.loanProductTermsForm.valid &&
       this.loanProductSettingsForm.valid &&
       this.loanProductAccountingForm.valid
     );
+
+    if (this.datatables.length > 0 && this.loanProductDatatables) {
+      this.loanProductDatatables.forEach((loanProductDatatable: LoanProductDatatableStepComponent) => {
+        areValids = areValids && loanProductDatatable.datatableForm.valid;
+      });
+    }
+
+    return areValids;
   }
 
   get loanProduct() {
@@ -95,7 +110,6 @@ export class CreateLoanProductComponent implements OnInit {
   }
 
   submit() {
-    // TODO: Update once language and date settings are setup
     const dateFormat = this.settingsService.dateFormat;
     const loanProduct = {
       ...this.loanProduct,
@@ -105,6 +119,16 @@ export class CreateLoanProductComponent implements OnInit {
     };
     delete loanProduct.allowAttributeConfiguration;
     delete loanProduct.advancedAccountingRules;
+
+    if (this.datatables.length > 0) {
+      const datatables: any[] = [];
+      this.loanProductDatatables.forEach((loanProductDatatable: LoanProductDatatableStepComponent) => {
+        datatables.push(loanProductDatatable.payload);
+      });
+      loanProduct['datatables'] = datatables;
+    }
+
+
     this.productsService.createLoanProduct(loanProduct)
       .subscribe((response: any) => {
         this.router.navigate(['../', response.resourceId], { relativeTo: this.route });

src/app/products/loan-products/edit-loan-product/loan-product-and-template.resolver.ts

@@ -24,7 +24,7 @@ export class LoanProductAndTemplateResolver implements Resolve<Object> {
    * @returns {Observable<any>}
    */
   resolve(route: ActivatedRouteSnapshot): Observable<any> {
-    const loanProductId = route.paramMap.get('id');
+    const loanProductId = route.paramMap.get('productId');
     return this.productsService.getLoanProduct(loanProductId, true);
   }
 

src/app/products/loan-products/loan-product-datatable.resolver.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { LoanProductDatatableResolver } from './loan-product-datatable.resolver';
+
+describe('LoanProductDatatableResolver', () => {
+  let resolver: LoanProductDatatableResolver;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    resolver = TestBed.inject(LoanProductDatatableResolver);
+  });
+
+  it('should be created', () => {
+    expect(resolver).toBeTruthy();
+  });
+});

src/app/products/loan-products/loan-product-datatable.resolver.ts

@@ -0,0 +1,26 @@
+import { Injectable } from '@angular/core';
+import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+import { SystemService } from 'app/system/system.service';
+import { Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class LoanProductDatatableResolver implements Resolve<boolean> {
+
+  /**
+   * @param {SystemService} systemService Products service.
+   */
+  constructor(private systemService: SystemService) { }
+
+  /**
+   * Returns the loan product data.
+   * @returns {Observable<any>}
+   */
+  resolve(route: ActivatedRouteSnapshot): Observable<any> {
+    const productId = route.parent.parent.paramMap.get('productId');
+    const datatableName = route.paramMap.get('datatableName');
+    return this.systemService.getEntityDatatable(productId, datatableName);
+  }
+
+}

src/app/products/loan-products/loan-product-datatables.resolver.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { LoanProductDatatablesResolver } from './loan-product-datatables.resolver';
+
+describe('LoanProductDatatablesResolver', () => {
+  let resolver: LoanProductDatatablesResolver;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    resolver = TestBed.inject(LoanProductDatatablesResolver);
+  });
+
+  it('should be created', () => {
+    expect(resolver).toBeTruthy();
+  });
+});

src/app/products/loan-products/loan-product-datatables.resolver.ts

@@ -0,0 +1,23 @@
+import { Injectable } from '@angular/core';
+import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+import { SystemService } from 'app/system/system.service';
+import { Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class LoanProductDatatablesResolver implements Resolve<boolean> {
+
+  /**
+   * @param {SystemService} systemService Products service.
+   */
+  constructor(private systemService: SystemService) { }
+
+  /**
+   * Returns the loan product data.
+   * @returns {Observable<any>}
+   */
+  resolve(route: ActivatedRouteSnapshot): Observable<any> {
+    return this.systemService.getEntityDatatables('m_product_loan');
+  }
+}

src/app/products/loan-products/loan-product-stepper/loan-product-datatable-step/loan-product-datatable-step.component.html

@@ -0,0 +1,51 @@
+<form [formGroup]="datatableForm">
+
+  <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
+
+    <div *ngFor="let datatableInput of datatableInputs" fxFlex="48%">
+      <mat-form-field fxFlex="100%" *ngIf="!isBoolean(datatableInput.columnDisplayType)">
+
+        <mat-label>{{getInputName(datatableInput)}}</mat-label>
+
+        <mat-select *ngIf="isDropdown(datatableInput.columnDisplayType)" formControlName="{{datatableInput.controlName}}">
+          <mat-option *ngFor="let code of datatableInput.columnValues" [value]="code.id">
+            {{ code.value }}
+          </mat-option>
+        </mat-select>
+
+        <input matInput type="number" *ngIf="isNumeric(datatableInput.columnDisplayType)"
+        formControlName="{{datatableInput.controlName}}">
+
+        <input matInput *ngIf="isString(datatableInput.columnDisplayType)"
+        formControlName="{{datatableInput.controlName}}">
+
+        <textarea matInput *ngIf="isText(datatableInput.columnDisplayType)"
+        formControlName="{{datatableInput.controlName}}"></textarea>
+
+        <span *ngIf="isDate(datatableInput.columnDisplayType)" (click)="datePicker.open()">
+          <input matInput [matDatepicker]="datePicker" formControlName="{{datatableInput.controlName}}" class="date-picker">
+          <mat-datepicker-toggle matSuffix [for]="datePicker"></mat-datepicker-toggle>
+          <mat-datepicker #datePicker></mat-datepicker>
+        </span>
+      </mat-form-field>
+
+      <mat-checkbox *ngIf="isBoolean(datatableInput.columnDisplayType)" formControlName="{{datatableInput.controlName}}"
+        labelPosition="before" class="margin-v">
+        {{getInputName(datatableInput)}}
+      </mat-checkbox>
+    </div>
+
+  </div>
+
+  <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
+    <button mat-raised-button matStepperPrevious disabled>
+      <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+      Previous
+    </button>
+    <button mat-raised-button matStepperNext>
+      Next&nbsp;&nbsp;
+      <fa-icon icon="arrow-right"></fa-icon>
+    </button>
+  </div>
+
+</form>

src/app/products/loan-products/loan-product-stepper/loan-product-datatable-step/loan-product-datatable-step.component.scss

@@ -0,0 +1,7 @@
+.date-picker {
+  width: 92%;
+}
+
+mat-checkbox {
+  margin-top: 30px;
+}

src/app/products/loan-products/loan-product-stepper/loan-product-datatable-step/loan-product-datatable-step.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoanProductDatatableStepComponent } from './loan-product-datatable-step.component';
+
+describe('LoanProductDatatableStepComponent', () => {
+  let component: LoanProductDatatableStepComponent;
+  let fixture: ComponentFixture<LoanProductDatatableStepComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ LoanProductDatatableStepComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LoanProductDatatableStepComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/products/loan-products/loan-product-stepper/loan-product-datatable-step/loan-product-datatable-step.component.ts

@@ -0,0 +1,82 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { Datatables } from 'app/core/utils/datatables';
+import { SettingsService } from 'app/settings/settings.service';
+
+@Component({
+  selector: 'mifosx-loan-product-datatable-step',
+  templateUrl: './loan-product-datatable-step.component.html',
+  styleUrls: ['./loan-product-datatable-step.component.scss']
+})
+export class LoanProductDatatableStepComponent implements OnInit {
+  /** Input Fields Data */
+  @Input() datatableData: any;
+  /** Create Input Form */
+  datatableForm: FormGroup;
+
+  datatableInputs: any = [];
+
+  constructor(private formBuilder: FormBuilder,
+    private settingsService: SettingsService,
+    private datatableService: Datatables) { }
+
+  ngOnInit(): void {
+    this.datatableInputs = this.datatableService.filterSystemColumns(this.datatableData.columnHeaderData);
+    const inputItems: any = {};
+    this.datatableInputs.forEach((input: any) => {
+      input.controlName = this.getInputName(input);
+      if (!input.isColumnNullable) {
+        if (this.isNumeric(input.columnDisplayType)) {
+          inputItems[input.controlName] = new FormControl(0, [Validators.required]);
+        } else {
+          inputItems[input.controlName] = new FormControl('', [Validators.required]);
+        }
+      } else {
+        inputItems[input.controlName] = new FormControl('');
+      }
+    });
+    this.datatableForm = this.formBuilder.group(inputItems);
+  }
+
+  getInputName(datatableInput: any): string {
+    return this.datatableService.getInputName(datatableInput);
+  }
+
+  isNumeric(columnType: string) {
+    return this.datatableService.isNumeric(columnType);
+  }
+
+  isDate(columnType: string) {
+    return this.datatableService.isDate(columnType);
+  }
+
+  isBoolean(columnType: string) {
+    return this.datatableService.isBoolean(columnType);
+  }
+
+  isDropdown(columnType: string) {
+    return this.datatableService.isDropdown(columnType);
+  }
+
+  isString(columnType: string) {
+    return this.datatableService.isString(columnType);
+  }
+
+  isText(columnType: string) {
+    return this.datatableService.isText(columnType);
+  }
+
+  get payload(): any {
+    const dateFormat = this.settingsService.dateFormat;
+    const datatableDataValues = this.datatableForm.value;
+
+    const data = this.datatableService.buildPayload(this.datatableInputs, datatableDataValues, dateFormat,
+      { locale: this.settingsService.language.code });
+
+    return {
+      registeredTableName: this.datatableData.registeredTableName,
+      data: data
+    };
+  }
+
+}

src/app/products/loan-products/loan-product-stepper/loan-product-settings-step/loan-product-settings-step.component.ts

@@ -84,8 +84,7 @@ export class LoanProductSettingsStepComponent implements OnInit {
       'holdGuaranteeFunds': this.loanProductsTemplate.holdGuaranteeFunds,
       'multiDisburseLoan': this.loanProductsTemplate.multiDisburseLoan,
       'maxTrancheCount': this.loanProductsTemplate.maxTrancheCount,
-      'outstandingLoanBalance': this.loanProductsTemplate.outstandingLoanBalance,
+      'outstandingLoanBalance': this.loanProductsTemplate.outstandingLoanBalance
-      'delinquencyBucketId': this.loanProductsTemplate.delinquencyBucket.id
     });
 
     if (this.loanProductsTemplate.isInterestRecalculationEnabled) {

src/app/products/loan-products/loan-product.resolver.ts

@@ -24,8 +24,8 @@ export class LoanProductResolver implements Resolve<Object> {
    * @returns {Observable<any>}
    */
   resolve(route: ActivatedRouteSnapshot): Observable<any> {
-    const id = route.paramMap.get('id');
+    const productId = route.parent.paramMap.get('productId');
-    return this.productsService.getLoanProduct(id);
+    return this.productsService.getLoanProduct(productId);
   }
 
 }

src/app/products/loan-products/view-loan-product/datatable-tab/datatable-tab.component.html

@@ -0,0 +1,9 @@
+<div class="tab-container mat-typography">
+  <mifosx-entity-datatable-tab
+    entityType="Loan Product"
+    [entityId]="entityId"
+    [multiRowDatatableFlag]="multiRowDatatableFlag"
+    [entityDatatable]="entityDatatable"
+  >
+  </mifosx-entity-datatable-tab>
+</div>