Datatables enhacements to support products (#1641)
Co-authored-by: Jose Alberto Hernandez <alberto@MacBook-Pro.local>
This commit is contained in:
José Alberto Hernández
co-authored by
Jose Alberto Hernandez
Jose Alberto Hernandez
parent
08a327fdbf
commit
f330e91aa4
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
@@ -1,11 +0,0 @@
|
||||
.tab-container {
|
||||
padding: 1%;
|
||||
margin: 1%;
|
||||
.delete-button {
|
||||
margin-left: 1%;
|
||||
}
|
||||
}
|
||||
|
||||
.table-name {
|
||||
padding-left: 2%;
|
||||
}
|
||||
@@ -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();
|
||||
});
|
||||
});
|
||||
@@ -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;
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user