Datatables enhacements to support products (#1641)

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

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',
-      data: { title: extract('Loan View'), routeParamBreadcrumb: 'loanId' },
-      resolve: {
-        loanDetailsData: LoanDetailsResolver
-      },
-      children: [
-        {
-          path: '',
-          component: LoansViewComponent,
-          resolve: {
-            loanDetailsData: LoanDetailsResolver,
-            loanDatatables: LoanDatatablesResolver,
+        path: ':loanId',
+        component: LoansViewComponent,
+        data: { title: extract('Loan View'), routeParamBreadcrumb: 'loanId' },
+        resolve: {
+          loanDetailsData: LoanDetailsResolver,
+          loanDatatables: LoanDatatablesResolver
+        },
+        children: [
+          {
+            path: '',
+            redirectTo: 'general',
+            pathMatch: 'full'
           },
-          children: [
-            {
-              path: 'general',
-              component: GeneralTabComponent,
-              data: { title: extract('General'), breadcrumb: 'General', routeParamBreadcrumb: false }
-            },
-            {
-              path: 'accountdetail',
-              component: AccountDetailsComponent,
-              data: { title: extract('Account Detail'), breadcrumb: 'Account Detail', routeParamBreadcrumb: false }
-            },
-            {
-              path: 'original-schedule',
-              component: OriginalScheduleTabComponent,
-              data: { title: extract('Original Schedule'), breadcrumb: 'Original Schedule', routeParamBreadcrumb: false },
-            },
-            {
-              path: 'repayment-schedule',
-              component: RepaymentScheduleTabComponent,
-              data: { title: extract('Repayment Schedule'), breadcrumb: 'Repayment Schedule', routeParamBreadcrumb: false },
-            },
-            {
-              path: 'transactions',
-              data: { title: extract('Loans Account Transactions'), breadcrumb: 'Transactions', routeParamBreadcrumb: false },
-              children: [
-                {
-                  path: '',
-                  component: TransactionsTabComponent
+          {
+            path: 'general',
+            component: GeneralTabComponent,
+            data: { title: extract('General'), breadcrumb: 'General', routeParamBreadcrumb: false }
+          },
+          {
+            path: 'accountdetail',
+            component: AccountDetailsComponent,
+            data: { title: extract('Account Detail'), breadcrumb: 'Account Detail', routeParamBreadcrumb: false }
+          },
+          {
+            path: 'original-schedule',
+            component: OriginalScheduleTabComponent,
+            data: { title: extract('Original Schedule'), breadcrumb: 'Original Schedule', routeParamBreadcrumb: false },
+          },
+          {
+            path: 'repayment-schedule',
+            component: RepaymentScheduleTabComponent,
+            data: { title: extract('Repayment Schedule'), breadcrumb: 'Repayment Schedule', routeParamBreadcrumb: false },
+          },
+          {
+            path: 'transactions',
+            data: { title: extract('Loans Account Transactions'), breadcrumb: 'Transactions', routeParamBreadcrumb: false },
+            children: [
+              {
+                path: '',
+                component: TransactionsTabComponent
 
-                },
-                {
-                  path: 'export',
-                  component: ExportTransactionsComponent
-                }
-              ]
-            },
-            {
-              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: 'export',
+                component: ExportTransactionsComponent
               }
+            ]
+          },
+          {
+            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: '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
-          },
+        ]
+      },
+      {
+        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: '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>
-  <mifosx-multi-row *ngIf="multiRowDatatableFlag" [dataObject]="loanDatatable"></mifosx-multi-row>
-  <mifosx-single-row *ngIf="!multiRowDatatableFlag" [dataObject]="loanDatatable"></mifosx-single-row>
+<div class="tab-container mat-typography">
+  <mifosx-entity-datatable-tab
+    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 */
-    loanDatatable: any;
-    /** Multi Row Datatable Flag */
-    multiRowDatatableFlag: boolean;
+  entityId: string;
+  /** Loan Datatable */
+  entityDatatable: any;
+  /** Multi Row Datatable Flag */
+  multiRowDatatableFlag: boolean;
 
-    /**
-     * Fetches data table data from `resolve`
-     * @param {ActivatedRoute} route Activated Route.
-     */
-    constructor(private route: ActivatedRoute) {
-      this.route.data.subscribe((data: { loanDatatable: any }) => {
-        this.loanDatatable = data.loanDatatable;
-        this.multiRowDatatableFlag = this.loanDatatable.columnHeaders[0].columnName === 'id' ? true : false;
-      });
-    }
+  /**
+   * Fetches data table data from `resolve`
+   * @param {ActivatedRoute} route Activated Route.
+   */
+  constructor(private route: ActivatedRoute) {
+    this.entityId = this.route.parent.parent.snapshot.paramMap.get('loanId');
+
+    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,