CBSNexora/cbsnexora
4
0
Fork 0
Code Issues Pull Requests Actions 2 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/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>