CBSNexora/cbsnexora
4
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Datatables enhacements to support products (#1641)

Browse Source 
Co-authored-by: Jose Alberto Hernandez <alberto@MacBook-Pro.local>
This commit is contained in:
José Alberto Hernández
2023-01-13 02:07:51 -06:00
committed by GitHub
co-authored by Jose Alberto Hernandez
parent 08a327fdbf
commit f330e91aa4
161 changed files with 2985 additions and 4971 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/deposits/fixed-deposits/fixed-deposit-account-view/datatable-tabs/datatable-tabs.component.html
+8 -3
View File
@@ -1,4 +1,9 @@
<div>
<mifosx-multi-row *ngIf="multiRowDatatableFlag" [dataObject]="savingsDatatable"></mifosx-multi-row>
<mifosx-single-row *ngIf="!multiRowDatatableFlag" [dataObject]="savingsDatatable"></mifosx-single-row>
<div class="tab-container mat-typography">
<mifosx-entity-datatable-tab
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
+6 -4
View File
@@ -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.multiRowDatatableFlag = this.savingsDatatable.columnHeaders[0].columnName === 'id' ? true : false;
this.entityDatatable = data.savingsDatatable;
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
-33
View File
@@ -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
-10
View File
@@ -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
-25
View File
@@ -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
-187
View File
@@ -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
-29
View File
@@ -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
-7
View File
@@ -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
-25
View File
@@ -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
-210
View File
@@ -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
-4
View File
@@ -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
+9 -4
View File
@@ -1,4 +1,9 @@
<div>
<mifosx-multi-row *ngIf="multiRowDatatableFlag" [dataObject]="savingsDatatable"></mifosx-multi-row>
<mifosx-single-row *ngIf="!multiRowDatatableFlag" [dataObject]="savingsDatatable"></mifosx-single-row>
</div>
<div class="tab-container mat-typography">
<mifosx-entity-datatable-tab
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
+6 -4
View File
@@ -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.multiRowDatatableFlag = this.savingsDatatable.columnHeaders[0].columnName === 'id' ? true : false;
this.entityDatatable = data.savingsDatatable;
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
-33
View File
@@ -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
-10
View File
@@ -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
-25
View File
@@ -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
-184
View File
@@ -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
-41
View File
@@ -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
-11
View File
@@ -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
-25
View File
@@ -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
-210
View File
@@ -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
-4
View File
@@ -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,