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

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

src/app/clients/clients-view/datatable-tab/multi-row/multi-row.component.html

@@ -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

@@ -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

@@ -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">