Fix to sort loan charges by due date (#1744)

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

src/app/loans/loans-view/charges-tab/charges-tab.component.html

@@ -88,6 +88,6 @@
     <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="select-row" [routerLink]="[row.id]"></tr>
   </table>
 
-  <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
+  <mat-paginator [pageSizeOptions]="[50, 100, 200]" showFirstLastButtons></mat-paginator>
 
 </div>

src/app/loans/loans-view/charges-tab/charges-tab.component.ts

@@ -4,7 +4,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { MatDialog } from '@angular/material/dialog';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
-import { MatTableDataSource, MatTable } from '@angular/material/table';
+import { MatTableDataSource } from '@angular/material/table';
 
 /** Custom Services */
 import { LoansService } from 'app/loans/loans.service';
@@ -65,6 +65,7 @@ export class ChargesTabComponent implements OnInit {
     this.status = this.loanDetails.status.value;
     let actionFlag;
     this.chargesData.forEach((element: any) => {
+      element.dueDate = this.dateUtils.parseDate(element.dueDate);
       if (element.paid || element.waived || element.chargeTimeType.value === 'Disbursement' || this.loanDetails.status.value !== 'Active') {
         actionFlag = true;
       } else {
@@ -72,6 +73,7 @@ export class ChargesTabComponent implements OnInit {
       }
       element.actionFlag = actionFlag;
     });
+    this.chargesData = this.chargesData.sort(function(a: any, b: any) { return b.dueDate - a.dueDate; } );
     this.dataSource = new MatTableDataSource(this.chargesData);
     this.dataSource.paginator = this.paginator;
     this.dataSource.sort = this.sort;