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

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

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

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

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

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

@@ -6,6 +6,6 @@
     }
 }
 
-.tableName {
+.table-name {
     padding-left: 2%;
 }

src/app/loans/loans-view/view-charge/view-charge.component.html

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

@@ -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;
     });
   }