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

Datatable views updates for display values with format (#1603)

Browse Source 
Co-authored-by: Jose Alberto Hernandez <alberto@MacBook-Pro.local>
This commit is contained in:
José Alberto Hernández
2022-12-19 23:09:09 -06:00
committed by GitHub
co-authored by Jose Alberto Hernandez
parent eae1b350b7
commit 7bbab6423e
23 changed files with 325 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/centers/centers-view/datatable-tab/multi-row/multi-row.component.html
+2 -2
View File
@@ -22,8 +22,8 @@
<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>
<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>
src/app/centers/centers-view/datatable-tab/multi-row/multi-row.component.ts
+19 -1
View File
@@ -16,6 +16,9 @@ import { CentersService } from '../../../centers.service';
import { SettingsService } from 'app/settings/settings.service';
import { Dates } from 'app/core/utils/dates';
import { Datatables } from 'app/core/utils/datatables';
import { DateFormatPipe } from 'app/pipes/date-format.pipe';
import { DatetimeFormatPipe } from 'app/pipes/datetime-format.pipe';
import { DecimalPipe } from '@angular/common';
/**
* Center Multi Row Data Tables
@@ -58,7 +61,10 @@ export class MultiRowComponent implements OnInit, OnChanges {
private centersService: CentersService,
private settingsService: SettingsService,
private dialog: MatDialog,
private datatables: Datatables) {
private datatables: Datatables,
private dateFormat: DateFormatPipe,
private dateTimeFormat: DatetimeFormatPipe,
private numberFormat: DecimalPipe) {
this.centerId = this.route.parent.parent.snapshot.paramMap.get('centerId');
}
@@ -134,4 +140,16 @@ export class MultiRowComponent implements OnInit, OnChanges {
});
}
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/centers/centers-view/datatable-tab/single-row/single-row.component.html
+31 -30
View File
@@ -1,41 +1,42 @@
<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>
<div>
<mat-divider></mat-divider>
<div fxLayout="column" fxFlex="50%" class="tableName">
<h3>{{datatableName}}</h3>
</div>
<ng-container *ngIf="dataObject.data.length > 0">
<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>
<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 *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 *ngSwitchCase="'DATETIME'">
{{dataObject.data[0].row[i] | datetimeFormat}}
</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 *ngSwitchCase="'INTEGER' || 'DECIMAL'">
{{dataObject.data[0].row[i] | number}}
</span>
<span *ngSwitchDefault>
{{dataObject.data[0].row[i]}}
</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>
</ng-container>
</div>
src/app/clients/clients-view/datatable-tab/multi-row/multi-row.component.html
+3 -3
View File
@@ -11,10 +11,10 @@
<table #dataTable mat-table [hidden]="!datatableData[0]" [dataSource]="datatableData">
<ng-container *ngFor="let datatableColumn of datatableColumns;let i = index" [matColumnDef]="datatableColumn">
<th mat-header-cell *matHeaderCellDef> {{datatableColumn}} </th>
<td mat-cell *matCellDef="let data"> {{data.row[i]}} </td>
<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>
</div>
src/app/clients/clients-view/datatable-tab/multi-row/multi-row.component.ts
+19 -1
View File
@@ -13,6 +13,9 @@ import { ClientsService } from '../../../clients.service';
import { SettingsService } from 'app/settings/settings.service';
import { Dates } from 'app/core/utils/dates';
import { Datatables } from 'app/core/utils/datatables';
import { DateFormatPipe } from 'app/pipes/date-format.pipe';
import { DatetimeFormatPipe } from 'app/pipes/datetime-format.pipe';
import { DecimalPipe } from '@angular/common';
@Component({
selector: 'mifosx-multi-row',
@@ -42,7 +45,10 @@ export class MultiRowComponent implements OnInit, OnChanges {
private clientsService: ClientsService,
private dialog: MatDialog,
private settingsService: SettingsService,
private datatables: Datatables) {
private datatables: Datatables,
private dateFormat: DateFormatPipe,
private dateTimeFormat: DatetimeFormatPipe,
private numberFormat: DecimalPipe) {
this.clientId = this.route.parent.parent.snapshot.paramMap.get('clientId');
}
@@ -109,4 +115,16 @@ export class MultiRowComponent implements OnInit, OnChanges {
});
}
formatValue(index: number, value: any): any {
const columnDisplayType = this.dataObject.columnHeaders[index].columnDisplayType;
if (columnDisplayType === 'DATE') {
return this.dateFormat.transform(value);
} else if (columnDisplayType === 'DATETIME') {
return this.dateTimeFormat.transform(value);
} else if (columnDisplayType === 'INTEGER' || columnDisplayType === 'DECIMAL') {
return this.numberFormat.transform(value);
}
return value;
}
}
src/app/clients/clients-view/datatable-tab/single-row/single-row.component.html
+7 -4
View File
@@ -2,16 +2,19 @@
<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"></fa-icon>&nbsp;&nbsp;Add
<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"></fa-icon>&nbsp;&nbsp;Edit
<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"></fa-icon>&nbsp;&nbsp;Delete All
<fa-icon icon="trash" class="m-r-10"></fa-icon>Delete All
</button>
</div>
<ng-container>
<mat-divider></mat-divider>
<ng-container *ngIf="dataObject.data.length > 0">
<div *ngFor="let columnHeader of dataObject.columnHeaders;let i = index" class="table-data">
src/app/groups/groups-view/datatable-tabs/multi-row/multi-row.component.html
+2 -2
View File
@@ -21,8 +21,8 @@
<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>
<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>
src/app/groups/groups-view/datatable-tabs/multi-row/multi-row.component.ts
+19 -1
View File
@@ -16,6 +16,9 @@ import { GroupsService } from '../../../groups.service';
import { SettingsService } from 'app/settings/settings.service';
import { Dates } from 'app/core/utils/dates';
import { Datatables } from 'app/core/utils/datatables';
import { DateFormatPipe } from 'app/pipes/date-format.pipe';
import { DatetimeFormatPipe } from 'app/pipes/datetime-format.pipe';
import { DecimalPipe } from '@angular/common';
/**
* Group Multi Row Data Tables
@@ -58,7 +61,10 @@ export class MultiRowComponent implements OnInit, OnChanges {
private groupsService: GroupsService,
private dialog: MatDialog,
private settingsService: SettingsService,
private datatables: Datatables) {
private datatables: Datatables,
private dateFormat: DateFormatPipe,
private dateTimeFormat: DatetimeFormatPipe,
private numberFormat: DecimalPipe) {
this.groupId = this.route.parent.parent.snapshot.paramMap.get('groupId');
}
@@ -134,4 +140,16 @@ export class MultiRowComponent implements OnInit, OnChanges {
});
}
formatValue(index: number, value: any): any {
const columnDisplayType = this.dataObject.columnHeaders[index].columnDisplayType;
if (columnDisplayType === 'DATE') {
return this.dateFormat.transform(value);
} else if (columnDisplayType === 'DATETIME') {
return this.dateTimeFormat.transform(value);
} else if (columnDisplayType === 'INTEGER' || columnDisplayType === 'DECIMAL') {
return this.numberFormat.transform(value);
}
return value;
}
}
src/app/groups/groups-view/datatable-tabs/single-row/single-row.component.html
+35 -22
View File
@@ -1,29 +1,42 @@
<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>
<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-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>
<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/multi-row/multi-row.component.html
+6 -6
View File
@@ -5,14 +5,14 @@
<h3>{{datatableName}}</h3>
</div>
<div class="action-button m-b-5" fxLayoutGap="10px">
<span *mifosxHasPermission="'CREATE_' + datatableName">
<span>
<button mat-raised-button color="primary" (click)="add()">
<fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;Add
<fa-icon icon="plus" class="m-r-10"></fa-icon>Add
</button>
</span>
<span *mifosxHasPermission="'DELETE_' + datatableName">
<span>
<button class="delete-button" mat-raised-button color="warn" (click)="delete()" *ngIf="showDeleteBotton">
<fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;Delete All
<fa-icon icon="trash" class="m-r-10"></fa-icon>Delete All
</button>
</span>
</div>
@@ -22,8 +22,8 @@
<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>
<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>
src/app/loans/loans-view/datatable-tab/multi-row/multi-row.component.ts
+19 -1
View File
@@ -16,6 +16,9 @@ import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-
import { LoansService } from '../../../loans.service';
import { Dates } from 'app/core/utils/dates';
import { Datatables } from 'app/core/utils/datatables';
import { DateFormatPipe } from 'app/pipes/date-format.pipe';
import { DatetimeFormatPipe } from 'app/pipes/datetime-format.pipe';
import { DecimalPipe, NumberFormatStyle } from '@angular/common';
/**
* Loan Multi Row Data Tables
@@ -58,7 +61,10 @@ export class MultiRowComponent implements OnInit, OnChanges {
private loansService: LoansService,
private dialog: MatDialog,
private settingsService: SettingsService,
private datatables: Datatables) {
private datatables: Datatables,
private dateFormat: DateFormatPipe,
private dateTimeFormat: DatetimeFormatPipe,
private numberFormat: DecimalPipe) {
this.loanId = this.route.parent.parent.snapshot.paramMap.get('loanId');
}
@@ -134,4 +140,16 @@ export class MultiRowComponent implements OnInit, OnChanges {
});
}
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/loans/loans-view/datatable-tab/single-row/single-row.component.html
+32 -15
View File
@@ -2,25 +2,25 @@
<div>
<div fxLayout="column" fxFlex="50%" class="tableName">
<div fxLayout="column" fxFlex="50%" class="table-name">
<h3>{{datatableName}}</h3>
</div>
<div fxLayout="column" fxFlex="50%" >
<div fxLayout="column" fxFlex="50%">
<div fxLayout="row" fxLayoutAlign="flex-end">
<span *mifosxHasPermission="'CREATE_' + datatableName">
<span>
<button mat-raised-button color="primary" (click)="add()" *ngIf="!dataObject.data[0]">
<fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;Add
<fa-icon icon="plus" class="m-r-10"></fa-icon>Add
</button>
</span>
<span *mifosxHasPermission="'UPDATE_' + datatableName">
<span>
<button mat-raised-button color="primary" (click)="edit()" *ngIf="dataObject.data[0]">
<fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;Edit
<fa-icon icon="edit" class="m-r-10"></fa-icon>Edit
</button>
</span>
<span *mifosxHasPermission="'DELETE_' + datatableName" class="delete-button">
<span class="delete-button">
<button mat-raised-button color="warn" (click)="delete()" *ngIf="dataObject.data[0]">
<fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;Delete
<fa-icon icon="trash" class="m-r-10"></fa-icon>Delete
</button>
</span>
</div>
@@ -30,12 +30,29 @@
<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>
<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 -1
View File
@@ -6,6 +6,6 @@
}
}
.tableName {
.table-name {
padding-left: 2%;
}
src/app/loans/loans-view/view-charge/view-charge.component.html
+12 -8
View File
@@ -4,14 +4,18 @@
<fa-icon icon="flag"></fa-icon>&nbsp;&nbsp;
Edit
</button>
<button mat-raised-button color="accent" *mifosxHasPermission="'PAY_SAVINGSACCOUNTCHARGE'" (click)="payCharge()">
<fa-icon icon="dollar-sign"></fa-icon>&nbsp;&nbsp;
Pay
</button>
<button mat-raised-button color="primary" *mifosxHasPermission="'WAIVE_SAVINGSACCOUNTCHARGE'" (click)="waiveCharge()">
<fa-icon icon="flag"></fa-icon>&nbsp;&nbsp;
Waive
</button>
<span *ngIf="allowPayCharge">
<button mat-raised-button color="accent" *mifosxHasPermission="'PAY_SAVINGSACCOUNTCHARGE'" (click)="payCharge()">
<fa-icon icon="dollar-sign"></fa-icon>&nbsp;&nbsp;
Pay
</button>
</span>
<span *ngIf="allowWaive">
<button mat-raised-button color="primary" *mifosxHasPermission="'WAIVE_SAVINGSACCOUNTCHARGE'" (click)="waiveCharge()">
<fa-icon icon="flag"></fa-icon>&nbsp;&nbsp;
Waive
</button>
</span>
</div>
<div *ngIf="loansAccountData.status.value === 'Submitted and pending approval'" fxLayout="row" fxLayoutAlign="end"
src/app/loans/loans-view/view-charge/view-charge.component.ts
+4
View File
@@ -32,6 +32,8 @@ export class ViewChargeComponent {
chargeData: any;
/** Loans Account Data */
loansAccountData: any;
allowPayCharge = true;
allowWaive = true;
/**
* Retrieves the Charge data from `resolve`.
@@ -50,6 +52,8 @@ export class ViewChargeComponent {
private settingsService: SettingsService) {
this.route.data.subscribe((data: { loansAccountCharge: any, loanDetailsData: any }) => {
this.chargeData = data.loansAccountCharge;
this.allowPayCharge = (this.chargeData.chargeTimeType.code === 'chargeTimeType.instalmentFee');
this.allowWaive = !this.chargeData.chargeTimeType.waived;
this.loansAccountData = data.loanDetailsData;
});
}
src/app/organization/offices/view-office/datatable-tabs/multi-row/multi-row.component.html
+2 -2
View File
@@ -21,8 +21,8 @@
<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>
<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>
src/app/organization/offices/view-office/datatable-tabs/multi-row/multi-row.component.ts
+19 -1
View File
@@ -16,6 +16,9 @@ import { OrganizationService } from '../../../../organization.service';
import { SettingsService } from 'app/settings/settings.service';
import { Dates } from 'app/core/utils/dates';
import { Datatables } from 'app/core/utils/datatables';
import { DateFormatPipe } from 'app/pipes/date-format.pipe';
import { DatetimeFormatPipe } from 'app/pipes/datetime-format.pipe';
import { DecimalPipe } from '@angular/common';
/**
* Office Multi Row Data Tables
@@ -57,7 +60,10 @@ export class MultiRowComponent implements OnInit, OnChanges {
private organizationService: OrganizationService,
private settingsService: SettingsService,
private dialog: MatDialog,
private datatables: Datatables) {
private datatables: Datatables,
private dateFormat: DateFormatPipe,
private dateTimeFormat: DatetimeFormatPipe,
private numberFormat: DecimalPipe) {
this.officeId = this.route.parent.parent.snapshot.paramMap.get('id');
}
@@ -133,4 +139,16 @@ export class MultiRowComponent implements OnInit, OnChanges {
});
}
formatValue(index: number, value: any): any {
const columnDisplayType = this.dataObject.columnHeaders[index].columnDisplayType;
if (columnDisplayType === 'DATE') {
return this.dateFormat.transform(value);
} else if (columnDisplayType === 'DATETIME') {
return this.dateTimeFormat.transform(value);
} else if (columnDisplayType === 'INTEGER' || columnDisplayType === 'DECIMAL') {
return this.numberFormat.transform(value);
}
return value;
}
}
src/app/organization/offices/view-office/datatable-tabs/single-row/single-row.component.html
+35 -22
View File
@@ -1,29 +1,42 @@
<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>
<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-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>
<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/pipes/date-format.pipe.ts
+1 -1
View File
@@ -10,7 +10,7 @@ export class DateFormatPipe implements PipeTransform {
constructor(private settingsService: SettingsService) {
}
transform(value: any, dateFormat: string): any {
transform(value: any, dateFormat?: string): any {
const defaultDateFormat = this.settingsService.dateFormat.replace('dd', 'DD');
if (typeof value === 'undefined') {
return '';
src/app/pipes/datetime-format.pipe.ts
+1 -1
View File
@@ -10,7 +10,7 @@ export class DatetimeFormatPipe implements PipeTransform {
constructor(private settingsService: SettingsService) {
}
transform(value: any, datetimeFormat: string): any {
transform(value: any, datetimeFormat?: string): any {
const defaultDateFormat = this.settingsService.dateFormat.replace('dd', 'DD');
if (typeof value === 'undefined') {
return '';
src/app/savings/savings-account-view/datatable-tabs/multi-row/multi-row.component.html
+2 -2
View File
@@ -21,8 +21,8 @@
<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>
<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>
src/app/savings/savings-account-view/datatable-tabs/multi-row/multi-row.component.ts
+19 -1
View File
@@ -20,6 +20,9 @@ import { DatepickerBase } from 'app/shared/form-dialog/formfield/model/datepicke
import { SavingsService } from '../../../savings.service';
import { Dates } from 'app/core/utils/dates';
import { Datatables } from 'app/core/utils/datatables';
import { DateFormatPipe } from 'app/pipes/date-format.pipe';
import { DatetimeFormatPipe } from 'app/pipes/datetime-format.pipe';
import { DecimalPipe } from '@angular/common';
/**
* Savings Account Multi Row Data Tables
@@ -62,7 +65,10 @@ export class MultiRowComponent implements OnInit, OnChanges {
private savingsService: SavingsService,
private dialog: MatDialog,
private settingsService: SettingsService,
private datatables: Datatables) {
private datatables: Datatables,
private dateFormat: DateFormatPipe,
private dateTimeFormat: DatetimeFormatPipe,
private numberFormat: DecimalPipe) {
this.savingAccountId = this.route.parent.parent.snapshot.paramMap.get('savingAccountId');
}
@@ -138,4 +144,16 @@ export class MultiRowComponent implements OnInit, OnChanges {
});
}
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/savings/savings-account-view/datatable-tabs/single-row/single-row.component.html
+35 -22
View File
@@ -1,29 +1,42 @@
<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>
<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-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>
<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>