feat: add view client charge overview (#681)

Fixes: #680
2020-05-24 22:21:04 +05:30
parent 314d0fa977
commit 7a5069e590
9 changed files with 184 additions and 5 deletions
@@ -0,0 +1,31 @@
+/** Angular Imports */
+import { Injectable } from '@angular/core';
+import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+
+/** rxjs Imports */
+import { Observable } from 'rxjs';
+
+/** Custom Services */
+import { ClientsService } from '../../clients.service';
+
+/**
+ * Client Charges data resolver.
+ */
+@Injectable()
+export class ClientChargeOverviewResolver implements Resolve<Object> {
+
+    /**
+     * @param {ClientsService} ClientsService Clients service.
+     */
+    constructor(private clientsService: ClientsService) { }
+
+    /**
+     * Returns the Client Charge data.
+     * @returns {Observable<any>}
+     */
+    resolve(route: ActivatedRouteSnapshot): Observable<any> {
+        const clientId = route.parent.params.clientId;
+        return this.clientsService.getAllClientCharges(clientId);
+    }
+
+}
@@ -0,0 +1,48 @@
+<div class="tab-container mat-typography">
+
+  <div style="margin-top: 5px;">
+
+    <h2> Charges Overview</h2>
+
+    <table mat-table [dataSource]="dataSource">
+  
+      <ng-container matColumnDef="name">
+        <th mat-header-cell *matHeaderCellDef> Name </th>
+        <td mat-cell *matCellDef="let chargeOverviewData"><i class="fa fa-stop"
+          [ngClass]="(!(chargeOverviewData.isWaived || chargeOverviewData.isPaid))|statusLookup"></i>
+          {{chargeOverviewData.name}} </td>
+      </ng-container>
+  
+      <ng-container matColumnDef="dueAsOf">
+        <th mat-header-cell *matHeaderCellDef> Due as of </th>
+        <td mat-cell *matCellDef="let chargeOverviewData"> {{chargeOverviewData.dueDate|date}} </td>
+      </ng-container>
+  
+      <ng-container matColumnDef="due">
+        <th mat-header-cell *matHeaderCellDef> Due </th>
+        <td mat-cell *matCellDef="let chargeOverviewData"> {{chargeOverviewData.amount}} </td>
+      </ng-container>
+  
+      <ng-container matColumnDef="paid">
+        <th mat-header-cell *matHeaderCellDef> Paid </th>
+        <td mat-cell *matCellDef="let chargeOverviewData"> {{chargeOverviewData.amountPaid}} </td>
+      </ng-container>
+  
+      <ng-container matColumnDef="waived">
+        <th mat-header-cell *matHeaderCellDef> Waived </th>
+        <td mat-cell *matCellDef="let chargeOverviewData"> {{chargeOverviewData.amountWaived}} </td>
+      </ng-container>
+  
+      <ng-container matColumnDef="outstanding">
+        <th mat-header-cell *matHeaderCellDef> Outstanding </th>
+        <td mat-cell *matCellDef="let chargeOverviewData"> {{chargeOverviewData.amountOutstanding}} </td>
+      </ng-container>
+  
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+      
+    </table>
+  
+    <mat-paginator [pageSizeOptions]="[10, 20, 25]" showFirstLastButtons></mat-paginator>
+
+</div>
@@ -0,0 +1,4 @@
+.tab-container {
+    padding: 1%;
+    margin: 1%;
+}
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ChargesOverviewComponent } from './charges-overview.component';
+
+describe('ChargesOverviewComponent', () => {
+  let component: ChargesOverviewComponent;
+  let fixture: ComponentFixture<ChargesOverviewComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ChargesOverviewComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ChargesOverviewComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,50 @@
+/** Angular Imports */
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { MatTableDataSource, MatPaginator, MatDialog } from '@angular/material';
+import { ActivatedRoute } from '@angular/router';
+
+/**
+ * Client Charge Overview component.
+ */
+@Component({
+  selector: 'mifosx-charges-overview',
+  templateUrl: './charges-overview.component.html',
+  styleUrls: ['./charges-overview.component.scss']
+})
+export class ChargesOverviewComponent implements OnInit {
+
+  /** Columns to be displayed in charge overview table. */
+  displayedColumns: string[] = ['name', 'dueAsOf', 'due', 'paid', 'waived', 'outstanding'];
+  /** Data source for charge overview table. */
+  dataSource: MatTableDataSource<any>;
+  /** Charge Overview data */
+  chargeOverviewData: any;
+
+  /** Paginator for charge overview table. */
+  @ViewChild(MatPaginator) paginator: MatPaginator;
+
+  /**
+   * Retrieves the charge overview data from `resolve`.
+   * @param {ActivatedRoute} route Activated Route.
+   * @param {MatDialog} dialog Dialog reference.
+   */
+  constructor(private route: ActivatedRoute,
+              public dialog: MatDialog) {
+      this.route.data.subscribe((data: { clientChargesData: any }) => {
+        this.chargeOverviewData = data.clientChargesData;
+    });
+  }
+
+  ngOnInit() {
+    this.setLoanClientChargeOverview();
+  }
+
+  /**
+   * Set Client Charge Overview.
+   */
+  setLoanClientChargeOverview() {
+    this.dataSource = new MatTableDataSource(this.chargeOverviewData.pageItems);
+    this.dataSource.paginator = this.paginator;
+  }
+
+}
@@ -15,7 +15,7 @@
  <!-- Upcoming Charges -->

  <h3>Upcoming Charges</h3>
-  <button mat-raised-button class="f-right" color="primary">Charges Overview</button>
+  <button mat-raised-button class="f-right" color="primary" [routerLink]="['../', 'chargeoverview']">Charges Overview</button>
  <table mat-table [dataSource]="upcomingCharges">

    <ng-container matColumnDef="Name">