Datatables enhacements to support products (#1641)

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

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

@@ -1,7 +1,7 @@
 <div [formGroup]="form" fxFlexFill>
 
   <div *ngIf="formfield.controlType==='input' || formfield.controlType==='select'" fxFlexFill>
-    
+
     <mat-form-field fxFlexFill>
 
       <mat-label>{{ formfield.label }}</mat-label>
@@ -26,7 +26,7 @@
 
   <mat-form-field fxFlexFill *ngIf="formfield.controlType==='datepicker'" (click)="datePicker.open()">
     <mat-label>{{ formfield.label }}</mat-label>
-    <input matInput [matDatepicker]="datePicker" [min]="formfield.minDate" [max]="formfield.maxDate"  
+    <input matInput [matDatepicker]="datePicker" [min]="formfield.minDate" [max]="formfield.maxDate"
       [formControlName]="formfield.controlName" [required]="formfield.required">
     <mat-datepicker-toggle matSuffix [for]="datePicker"></mat-datepicker-toggle>
     <mat-datepicker #datePicker></mat-datepicker>
@@ -35,6 +35,17 @@
     </mat-error>
   </mat-form-field>
 
+  <mat-form-field fxFlexFill *ngIf="formfield.controlType==='datetimepicker'" (click)="datePicker.open()">
+    <mat-label>{{ formfield.label }}</mat-label>
+    <input matInput [ngxMatDatetimePicker]="datetimePicker" [min]="formfield.minDate" [max]="formfield.maxDate"
+      [formControlName]="formfield.controlName" [required]="formfield.required">
+    <mat-datepicker-toggle matSuffix [for]="datetimePicker"></mat-datepicker-toggle>
+    <ngx-mat-datetime-picker #datetimePicker [enableMeridian]="true"></ngx-mat-datetime-picker>
+    <mat-error *ngIf="form.controls[formfield.controlName].hasError('required')">
+      {{ formfield.label }} is <strong>required</strong>
+    </mat-error>
+  </mat-form-field>
+
   <mat-checkbox *ngIf="formfield.controlType==='checkbox'" labelPosition="before" [checked]="formfield.value"
     [formControlName]="formfield.controlName" [required]="formfield.required">
     {{ formfield.label }}

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

@@ -0,0 +1,15 @@
+import { FormfieldBase } from './formfield-base';
+
+export class DateTimepickerBase extends FormfieldBase {
+
+  controlType = 'datetimepicker';
+  minDate: Date;
+  maxDate: Date;
+
+  constructor(options: {} = {}) {
+    super(options);
+    this.minDate = options['minDate'] || new Date(2000, 0, 1);
+    this.maxDate = options['maxDate'] || new Date();
+  }
+
+}

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

@@ -3,7 +3,7 @@ export class FormfieldBase {
   controlType: string;
   controlName: string;
   label: string;
-  value: string;
+  value: any;
   required: boolean;
   order: number;
 
@@ -11,7 +11,7 @@ export class FormfieldBase {
               controlType?: string,
               controlName?: string,
               label?: string,
-              value?: string,
+              value?: any,
               required?: boolean,
               order?: number
     } = {}) {

src/app/shared/material.module.ts

@@ -38,6 +38,7 @@ import { MatTabsModule } from '@angular/material/tabs';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatTreeModule } from '@angular/material/tree';
+import { NgxMatDatetimePickerModule, NgxMatNativeDateModule, NgxMatTimepickerModule } from '@angular-material-components/datetime-picker';
 
 /**
  * Material Module
@@ -82,7 +83,10 @@ import { MatTreeModule } from '@angular/material/tree';
     MatToolbarModule,
     MatTooltipModule,
     MatTreeModule,
-    MatBadgeModule
+    MatBadgeModule,
+    NgxMatDatetimePickerModule,
+    NgxMatTimepickerModule,
+    NgxMatNativeDateModule
   ],
   providers: [
     {

src/app/shared/shared.module.ts

@@ -32,6 +32,9 @@ import { PipesModule } from 'app/pipes/pipes.module';
 import { EntityNotesTabComponent } from './tabs/entity-notes-tab/entity-notes-tab.component';
 import { EntityDocumentsTabComponent } from './tabs/entity-documents-tab/entity-documents-tab.component';
 import { DirectivesModule } from 'app/directives/directives.module';
+import { EntityDatatableTabComponent } from './tabs/entity-datatable-tab/entity-datatable-tab.component';
+import { DatatableSingleRowComponent } from './tabs/entity-datatable-tab/datatable-single-row/datatable-single-row.component';
+import { DatatableMultiRowComponent } from './tabs/entity-datatable-tab/datatable-multi-row/datatable-multi-row.component';
 
 /**
  * Shared Module
@@ -69,7 +72,10 @@ import { DirectivesModule } from 'app/directives/directives.module';
     TenantSelectorComponent,
     ExternalIdentifierComponent,
     EntityNotesTabComponent,
-    EntityDocumentsTabComponent
+    EntityDocumentsTabComponent,
+    EntityDatatableTabComponent,
+    DatatableSingleRowComponent,
+    DatatableMultiRowComponent
   ],
   exports: [
     FileUploadComponent,
@@ -89,7 +95,8 @@ import { DirectivesModule } from 'app/directives/directives.module';
     TenantSelectorComponent,
     ExternalIdentifierComponent,
     EntityNotesTabComponent,
-    EntityDocumentsTabComponent
+    EntityDocumentsTabComponent,
+    EntityDatatableTabComponent
   ]
 })
 export class SharedModule { }

src/app/shared/tabs/entity-datatable-tab/datatable-multi-row/datatable-multi-row.component.html

@@ -0,0 +1,33 @@
+<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/shared/tabs/entity-datatable-tab/datatable-multi-row/datatable-multi-row.component.scss

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

src/app/shared/tabs/entity-datatable-tab/datatable-multi-row/datatable-multi-row.component.spec.ts

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

src/app/shared/tabs/entity-datatable-tab/datatable-multi-row/datatable-multi-row.component.ts

@@ -0,0 +1,137 @@
+import { DecimalPipe } from '@angular/common';
+import { Component, Input, OnInit, ViewChild } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { MatTable } from '@angular/material/table';
+import { ActivatedRoute } from '@angular/router';
+import { Datatables } from 'app/core/utils/datatables';
+import { Dates } from 'app/core/utils/dates';
+import { DateFormatPipe } from 'app/pipes/date-format.pipe';
+import { DatetimeFormatPipe } from 'app/pipes/datetime-format.pipe';
+import { SettingsService } from 'app/settings/settings.service';
+import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.component';
+import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
+import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-base';
+import { SystemService } from 'app/system/system.service';
+
+@Component({
+  selector: 'mifosx-datatable-multi-row',
+  templateUrl: './datatable-multi-row.component.html',
+  styleUrls: ['./datatable-multi-row.component.scss']
+})
+export class DatatableMultiRowComponent implements OnInit {
+
+  /** Data Object */
+  @Input() dataObject: any;
+  @Input() entityId: string;
+  @Input() entityType: string;
+
+  /** Data Table Name */
+  datatableName: string;
+  /** Data Table Columns */
+  datatableColumns: string[] = [];
+  /** Data Table Data */
+  datatableData: any;
+
+  /** Toggle button visibility */
+  showDeleteBotton: boolean;
+
+  /** Data Table Reference */
+  @ViewChild('dataTable', { static: true }) dataTableRef: MatTable<Element>;
+
+  /**
+   * Fetches center Id from parent route params.
+   * @param {ActivatedRoute} route Activated Route.
+   * @param {Dates} dateUtils Date Utils.
+   * @param {SystemService} systemService system Service.
+   * @param {SettingsService} settingsService Settings Service.
+   * @param {MatDialog} dialog Mat Dialog.
+   * @param {Datatables} datatables Datatable utils
+   */
+  constructor(private route: ActivatedRoute,
+              private dateUtils: Dates,
+              private systemService: SystemService,
+              private settingsService: SettingsService,
+              private dialog: MatDialog,
+              private datatables: Datatables,
+              private dateFormat: DateFormatPipe,
+              private dateTimeFormat: DatetimeFormatPipe,
+              private numberFormat: DecimalPipe) { }
+
+  /**
+   * Fetches data table name from route params.
+   * subscription is required due to asynchronicity.
+   */
+  ngOnInit() {
+    this.route.params.subscribe((routeParams: any) => {
+      this.datatableName = routeParams.datatableName;
+    });
+    this.datatableColumns = this.dataObject.columnHeaders.map((columnHeader: any) => {
+      return columnHeader.columnName;
+    });
+    this.datatableData = this.dataObject.data;
+    this.showDeleteBotton = this.datatableData[0] ? true : false;
+  }
+
+  /**
+   * 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.datatables.filterSystemColumns(this.dataObject.columnHeaders);
+    const formfields: FormfieldBase[] = this.datatables.getFormfields(columns, dateTransformColumns, dataTableEntryObject);
+    const data = {
+      title: 'Add ' + this.datatableName + ' for ' + this.entityType,
+      formfields: formfields
+    };
+    const addDialogRef = this.dialog.open(FormDialogComponent, { data, width: '50rem' });
+    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.systemService.addEntityDatatableEntry(this.entityId, this.datatableName, dataTableEntryObject).subscribe(() => {
+          this.systemService.getEntityDatatable(this.entityId, 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.systemService.deleteDatatableContent(this.entityId, this.datatableName).subscribe(() => {
+          this.systemService.getEntityDatatable(this.entityId, 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/shared/tabs/entity-datatable-tab/datatable-single-row/datatable-single-row.component.html

@@ -0,0 +1,43 @@
+<div class="tab-container mat-typography">
+  <h3>{{datatableName}}</h3>
+  <div fxLayout="row" fxLayoutAlign="flex-end" class="m-b-20">
+    <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
+    </button>
+  </div>
+
+  <mat-divider></mat-divider>
+
+  <div class="m-t-10" *ngIf="dataObject.data.length > 0">
+
+    <div fxFlexFill *ngFor="let columnHeader of dataObject.columnHeaders;let i = index" [ngClass}="{{setAttributeClass(columnHeader.columnName)}}" >
+
+      <div fxFlex="45%" class="mat-body-strong left">
+        {{ getInputName(columnHeader.columnName) }}
+      </div>
+
+      <div fxFlex="50%" [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>
+
+  </div>
+
+</div>

src/app/shared/tabs/entity-datatable-tab/datatable-single-row/datatable-single-row.component.scss

@@ -0,0 +1,23 @@
+@import "assets/styles/helper";
+
+.tab-container {
+  padding: 1%;
+  margin: 1%;
+  .delete-button {
+      margin-left: 1%;
+  }
+}
+
+.table-name {
+  padding-left: 2%;
+}
+
+.table-data {
+  margin-top: 3px;
+}
+
+.system-defined {
+  margin-top: 3px;
+  color: $concrete !important;
+  font-weight: 100;
+}

src/app/shared/tabs/entity-datatable-tab/datatable-single-row/datatable-single-row.component.spec.ts

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

src/app/shared/tabs/entity-datatable-tab/datatable-single-row/datatable-single-row.component.ts

@@ -0,0 +1,137 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { ActivatedRoute } from '@angular/router';
+import { Datatables } from 'app/core/utils/datatables';
+import { Dates } from 'app/core/utils/dates';
+import { SettingsService } from 'app/settings/settings.service';
+import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.component';
+import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
+import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-base';
+import { SystemService } from 'app/system/system.service';
+import { TouchSequence } from 'selenium-webdriver';
+
+@Component({
+  selector: 'mifosx-datatable-single-row',
+  templateUrl: './datatable-single-row.component.html',
+  styleUrls: ['./datatable-single-row.component.scss']
+})
+export class DatatableSingleRowComponent implements OnInit {
+
+  @Input() dataObject: any;
+  @Input() entityId: string;
+  @Input() entityType: string;
+  datatableName: string;
+
+  /**
+   * @param {ActivatedRoute} route Activated Route.
+   * @param {Dates} dateUtils Date Utils.
+   * @param {SystemService} systemService System Service.
+   * @param {SettingsService} settingsService Settings Service
+   * @param {Datatables} datatables Datatable utils
+   */
+  constructor(private route: ActivatedRoute,
+    private dateUtils: Dates,
+    private dialog: MatDialog,
+    private settingsService: SettingsService,
+    private datatables: Datatables,
+    private systemService: SystemService) { }
+
+  ngOnInit() {
+    this.route.params.subscribe((routeParams: any) => {
+      this.datatableName = routeParams.datatableName;
+    });
+  }
+
+  add() {
+    let dataTableEntryObject: any = {
+      locale: this.settingsService.language.code
+    };
+    const dateTransformColumns: string[] = [];
+    const columns = this.datatables.filterSystemColumns(this.dataObject.columnHeaders);
+    const formfields: FormfieldBase[] = this.datatables.getFormfields(columns, dateTransformColumns, dataTableEntryObject);
+    const data = {
+      title: 'Add ' + this.datatableName + ' for ' + this.entityType,
+      formfields: formfields
+    };
+    const addDialogRef = this.dialog.open(FormDialogComponent, { data, width: '50rem' });
+    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.systemService.addEntityDatatableEntry(this.entityId, this.datatableName, dataTableEntryObject).subscribe(() => {
+          this.systemService.getEntityDatatable(this.entityId, this.datatableName).subscribe((dataObject: any) => {
+            this.dataObject = dataObject;
+          });
+        });
+      }
+    });
+  }
+
+  edit() {
+    let dataTableEntryObject: any = {
+      locale: this.settingsService.language.code
+    };
+    const dateTransformColumns: string[] = [];
+    const columns = this.datatables.filterSystemColumns(this.dataObject.columnHeaders);
+    let formfields: FormfieldBase[] = this.datatables.getFormfields(columns, dateTransformColumns, dataTableEntryObject);
+    formfields = formfields.map((formfield: FormfieldBase, index: number) => {
+      if (formfield.controlType === 'datepicker') {
+        formfield.value = (this.dataObject.data[0].row[columns[index].idx]) ? this.dateUtils.parseDate(this.dataObject.data[0].row[columns[index].idx]) : '';
+      } else if (formfield.controlType === 'datetimepicker') {
+        formfield.value = (this.dataObject.data[0].row[columns[index].idx]) ? this.dateUtils.parseDatetime(this.dataObject.data[0].row[columns[index].idx]) : '';
+      } else {
+        formfield.value = (this.dataObject.data[0].row[columns[index].idx]) ? this.dataObject.data[0].row[columns[index].idx] : '';
+      }
+      return formfield;
+    });
+    const data = {
+      title: 'Edit ' + this.datatableName + ' for ' + this.entityType,
+      formfields: formfields,
+      layout: {addButtonText: 'Save'}
+    };
+    const editDialogRef = this.dialog.open(FormDialogComponent, { data, width: '50rem' });
+    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.systemService.editEntityDatatableEntry(this.entityId, this.datatableName, dataTableEntryObject).subscribe(() => {
+          this.systemService.getEntityDatatable(this.entityId, this.datatableName).subscribe((dataObject: any) => {
+            this.dataObject = dataObject;
+          });
+        });
+      }
+    });
+  }
+
+  delete() {
+    const deleteDataTableDialogRef = this.dialog.open(DeleteDialogComponent, {
+      data: { deleteContext: ` the contents of ${this.datatableName}` }
+    });
+    deleteDataTableDialogRef.afterClosed().subscribe((response: any) => {
+      if (response.delete) {
+        this.systemService.deleteDatatableContent(this.entityId, this.datatableName)
+          .subscribe(() => {
+            this.systemService.getEntityDatatable(this.entityId, this.datatableName).subscribe((dataObject: any) => {
+              this.dataObject = dataObject;
+            });
+          });
+        }
+    });
+  }
+
+  setAttributeClass(attr: string): string {
+    if (this.datatables.isSystemDefined(attr)) {
+      return 'system-defined';
+    }
+    return 'table-data';
+  }
+
+  getInputName(attr: string): string {
+    return this.datatables.getName(attr);
+  }
+
+}

src/app/shared/tabs/entity-datatable-tab/entity-datatable-tab.component.html

@@ -0,0 +1,12 @@
+<div>
+  <mifosx-datatable-multi-row *ngIf="multiRowDatatableFlag"
+    [entityType]="entityType"
+    [entityId]="entityId"
+    [dataObject]="entityDatatable"
+  ></mifosx-datatable-multi-row>
+  <mifosx-datatable-single-row *ngIf="!multiRowDatatableFlag"
+    [entityType]="entityType"
+    [entityId]="entityId"
+    [dataObject]="entityDatatable"
+  ></mifosx-datatable-single-row>
+</div>

src/app/shared/tabs/entity-datatable-tab/entity-datatable-tab.component.spec.ts

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

src/app/shared/tabs/entity-datatable-tab/entity-datatable-tab.component.ts

@@ -0,0 +1,20 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'mifosx-entity-datatable-tab',
+  templateUrl: './entity-datatable-tab.component.html',
+  styleUrls: ['./entity-datatable-tab.component.scss']
+})
+export class EntityDatatableTabComponent implements OnInit {
+
+  @Input() multiRowDatatableFlag = false;
+  @Input() entityDatatable: any;
+  @Input() entityType: string;
+  @Input() entityId: string;
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}