feat: add view client charges component (#688)

Fixes: #688

src/app/clients/clients-routing.module.ts

@@ -43,6 +43,8 @@ import { ChargesOverviewComponent } from './clients-view/charges-overview/charge
 import { ClientChargeOverviewResolver } from './clients-view/charges-overview/charge-overview.resolver';
 import { ClientActionsResolver } from './common-resolvers/client-actions.resolver';
 import { TakeSurveyResolver } from './common-resolvers/take-survey.resolver';
+import { ViewChargeComponent } from './clients-view/view-charge/view-charge.component';
+import { ClientChargeViewResolver } from './common-resolvers/client-charge-view.resolver';
 
 const routes: Routes = [
   Route.withShell([{
@@ -243,7 +245,8 @@ const routes: Routes = [
     ClientAddressTemplateResolver,
     ClientChargeOverviewResolver,
     ClientActionsResolver,
-    TakeSurveyResolver
+    TakeSurveyResolver,
+    ClientChargeViewResolver
   ]
 })
 export class ClientsRoutingModule { }

src/app/clients/clients-view/general-tab/general-tab.component.html

@@ -78,7 +78,7 @@
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="upcomingChargesColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: upcomingChargesColumns;"></tr>
+    <tr mat-row *matRowDef="let row; columns: upcomingChargesColumns;" [routerLink]="[routeToCharges,row.id]"></tr>
   </table>
 
 

src/app/clients/clients-view/general-tab/general-tab.component.scss

@@ -12,6 +12,9 @@
 
   table {
     width: 100%;
+    td:hover {
+      cursor: pointer;
+    }
     .account-action-button{
       min-width: 26px;
       padding: 0 6px;

src/app/clients/clients-view/general-tab/general-tab.component.ts

@@ -35,6 +35,8 @@ export class GeneralTabComponent {
   showClosedFixedAccounts = false;
 
   clientid: any;
+  /** Route to Charges */
+  routeToCharges: any;
 
   constructor(
     private route: ActivatedRoute,
@@ -48,6 +50,11 @@ export class GeneralTabComponent {
       this.upcomingCharges = data.clientChargesData.pageItems;
       this.clientSummary = data.clientSummary[0];
       this.clientid = this.route.parent.snapshot.params['clientId'];
+  });
+
+    /** Get Client Id and generate the route link. */
+    this.route.parent.params.subscribe((params: any) => {
+      this.routeToCharges = '../../' + params.clientId + '/charges';
     });
   }
 

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

@@ -0,0 +1,132 @@
+<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
+  <button mat-raised-button color="primary" [routerLink]="['../../','paycharge',chargeData.id]">
+    <fa-icon icon="dollar-sign"></fa-icon>&nbsp;&nbsp;
+    Pay
+  </button>
+  <button mat-raised-button color="primary" (click)="waiveCharge()">
+    <i class="fa fa-flag"></i>
+    Waive Charge
+  </button>
+  <button mat-raised-button color="primary" (click)="deleteCharge()">
+    <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;
+    Delete
+  </button>
+</div>
+
+<div class="container">
+
+  <mat-card>
+    
+    <mat-card-title> <i class="fa fa-stop" [ngClass]="(!(chargeData.isWaived || chargeData.isPaid))|statusLookup"></i> 
+      {{ chargeData.name }}
+    </mat-card-title>
+
+    <mat-divider></mat-divider>
+
+    <mat-card-content>
+
+      <div class="share-account-tables" fxLayout="row wrap" fxFlex="50%" class="p-t-20">
+
+        <table>
+
+          <tbody>
+
+            <tr>
+              <td> Currency </td>
+              <td> {{ chargeData.currency.name }} </td>
+            </tr>
+
+            <tr>
+              <td> Charge Time Type </td>
+              <td> {{ chargeData.chargeTimeType.value }} </td>
+            </tr>
+
+            <tr>
+              <td> Charge Calculation Type </td>
+              <td> {{ chargeData.chargeCalculationType.value }} </td>
+            </tr>
+
+            <tr>
+              <td> Due as of </td>
+              <td> {{ chargeData.dueDate | date }} </td>
+            </tr>
+
+            <tr>
+              <td> Due </td>
+              <td> {{ chargeData.amount }} </td>
+            </tr>
+
+            <tr>
+              <td> Paid </td>
+              <td> {{ chargeData.amountPaid }} </td>
+            </tr>
+
+            <tr>
+              <td> Waived </td>
+              <td> {{ chargeData.amountWaived }} </td>
+            </tr>
+            <tr>
+              <td> Outstanding </td>
+              <td> {{ chargeData.amountOutstanding }} </td>
+            </tr>
+
+          </tbody>
+
+        </table>
+
+      </div>
+
+    </mat-card-content>
+
+    <div fxLayout="row wrap" class="content" style="padding-top:10px">
+      <h1><b> Transactions </b></h1>
+
+      <table mat-table [dataSource]="chargeData.clientTransactionDatas" *ngIf="chargeData.clientTransactionDatas">
+
+        <ng-container matColumnDef="id">
+          <th mat-header-cell *matHeaderCellDef> ID </th>
+          <td mat-cell *matCellDef="let element" [ngClass]="{'strikeoff':element.reversed}"> {{element.id}} </td>
+        </ng-container>
+    
+        <ng-container matColumnDef="officeName">
+          <th mat-header-cell *matHeaderCellDef> Office Name </th>
+          <td mat-cell *matCellDef="let element" [ngClass]="{'strikeoff':element.reversed}"> {{element.officeName }} </td>
+        </ng-container>
+    
+        <ng-container matColumnDef="type">
+          <th mat-header-cell *matHeaderCellDef> Type </th>
+          <td mat-cell *matCellDef="let element" [ngClass]="{'strikeoff':element.reversed}"> {{element.type.value}} </td>
+        </ng-container>
+        <ng-container matColumnDef="transactionDate">
+          <th mat-header-cell *matHeaderCellDef> Transaction Date </th>
+          <td mat-cell *matCellDef="let element" [ngClass]="{'strikeoff':element.reversed}"> {{element.date | date}} </td>
+        </ng-container>
+    
+        <ng-container matColumnDef="amount">
+          <th mat-header-cell *matHeaderCellDef> Amount </th>
+          <td mat-cell *matCellDef="let element" [ngClass]="{'strikeoff':element.reversed}"> {{element.amount}} </td>
+        </ng-container>
+    
+        <ng-container matColumnDef="actions">
+          <th mat-header-cell *matHeaderCellDef> Actions </th>
+          <td mat-cell *matCellDef="let element" [ngClass]="{'strikeoff':element.reversed}"> 
+            <button mat-raised-button color="primary" (click)="undoTransaction(element.id)" class="delBtn">
+              <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;
+            </button> 
+          </td>
+        </ng-container>
+        
+        <tr mat-header-row *matHeaderRowDef="viewChargeTableColumns"></tr>
+        <tr mat-row *matRowDef="let row; columns: viewChargeTableColumns;"></tr>
+      </table>
+
+    </div>
+
+
+    <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+      <button type="button" mat-raised-button [routerLink]="['../../','general']">Back</button>
+    </mat-card-actions>
+
+  </mat-card>
+
+</div>

src/app/clients/clients-view/view-charge/view-charge.component.scss

@@ -0,0 +1,19 @@
+.delBtn{
+    width: 20px !important;
+    height: 25px;
+    min-width: 20px!important;
+    line-height: 0px;
+    padding-left: 10px;
+    padding-right: 25px;
+}
+
+.strikeoff {
+    color: red !important;
+    text-decoration: line-through;
+    text-decoration-style: double;
+}
+
+.share-account-tables {
+    display: flex;
+    justify-content: space-between;
+} 

src/app/clients/clients-view/view-charge/view-charge.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ViewChargeComponent } from './view-charge.component';
+
+describe('ViewChargeComponent', () => {
+  let component: ViewChargeComponent;
+  let fixture: ComponentFixture<ViewChargeComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ViewChargeComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ViewChargeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/clients/clients-view/view-charge/view-charge.component.ts

@@ -0,0 +1,78 @@
+/** Angular Imports */
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { DatePipe } from '@angular/common';
+import { ClientsService } from 'app/clients/clients.service';
+
+/**
+ * View Charge component.
+ */
+@Component({
+  selector: 'mifosx-view-charge',
+  templateUrl: './view-charge.component.html',
+  styleUrls: ['./view-charge.component.scss']
+})
+export class ViewChargeComponent implements OnInit {
+
+  /** Charge Data. */
+  chargeData: any;
+  /** Mat Table Column defs. */
+  viewChargeTableColumns: string[] = ['id', 'officeName', 'type', 'transactionDate', 'amount', 'actions'];
+
+  /**
+   * Retrieves the selected job data from `resolve`.
+   * @param {ActivatedRoute} route Activated Route.
+   * @param {Router} router Router for navigation.
+   */
+  constructor(private route: ActivatedRoute,
+              private router: Router,
+              private date: DatePipe,
+              private clientService: ClientsService) {
+    this.route.data.subscribe((data: { clientChargeData: any }) => {
+      this.chargeData = data.clientChargeData;
+    });
+   }
+
+  ngOnInit() {
+
+  }
+
+  /**
+   * Waive Charge.
+   */
+  waiveCharge() {
+    const waiveChargeObj = { clientId: this.chargeData.clientId, resourceType: this.chargeData.id};
+    this.clientService.waiveClientCharge(waiveChargeObj).subscribe(() => {
+      this.getChargeData();
+    });
+  }
+
+  /**
+   * Undo Transaction.
+   */
+  undoTransaction(transactionId: any) {
+    const transactionData = { clientId: this.chargeData.clientId.toString(), transactionId: transactionId};
+    this.clientService.undoTransaction(transactionData).subscribe(() => {
+      this.getChargeData();
+    });
+  }
+
+  /**
+   * Get Charge Data.
+   */
+  getChargeData() {
+    this.clientService.getSelectedChargeData(this.chargeData.clientId, this.chargeData.id).subscribe((data: any) => {
+      this.chargeData = data;
+    });
+  }
+
+  /**
+   * Delete Charge.
+   */
+  deleteCharge() {
+    this.clientService.deleteCharge(this.chargeData.clientId, this.chargeData.id).subscribe(() => {
+      this.router.navigate(['../../clients', this.chargeData.clientId, 'general']);
+    });
+  }
+
+}

src/app/clients/clients.module.ts

@@ -42,6 +42,7 @@ import { AcceptClientTransferComponent } from './clients-view/client-actions/acc
 import { ReactivateClientComponent } from './clients-view/client-actions/reactivate-client/reactivate-client.component';
 import { UndoClientRejectionComponent } from './clients-view/client-actions/undo-client-rejection/undo-client-rejection.component';
 import { AddClientChargeComponent } from './clients-view/client-actions/add-client-charge/add-client-charge.component';
+import { ViewChargeComponent } from './clients-view/view-charge/view-charge.component';
 
 
 /**
@@ -89,7 +90,8 @@ import { AddClientChargeComponent } from './clients-view/client-actions/add-clie
     AcceptClientTransferComponent,
     ReactivateClientComponent,
     UndoClientRejectionComponent,
-    AddClientChargeComponent
+    AddClientChargeComponent,
+    ViewChargeComponent
   ],
   entryComponents: [
     UploadDocumentDialogComponent,

src/app/clients/clients.service.ts

@@ -90,6 +90,14 @@ export class ClientsService {
     return this.http.get(`/clients/${clientId}/charges`, { params: httpParams });
   }
 
+  getSelectedChargeData(clientId: string, chargeId: string) {
+    const httpParams = new HttpParams().set('associations', 'all');
+    return this.http.get(`/clients/${clientId}/charges/${chargeId}`, { params: httpParams });
+  }
+
+  /**
+   * @param chargeData Charge Data to be waived.
+   */
   waiveClientCharge(chargeData: any) {
     const httpParams = new HttpParams().set('command', 'waive');
     return this.http.post(`/clients/${chargeData.clientId}/charges/${chargeData.resourceType}`, chargeData, { params: httpParams });
@@ -99,6 +107,21 @@ export class ClientsService {
     return this.http.get(`/clients/${clientId}/charges`);
   }
 
+  /**
+   * @param transactionData Transaction Data to be undone.
+   */
+  undoTransaction(transactionData: any) {
+    return this.http.post(`/clients/${transactionData.clientId}/transactions/${transactionData.transactionId}?command=undo`, transactionData);
+  }
+
+  /**
+   * @param clientId Client Id of the relevant charge.
+   * @param chargeId Charge Id to be deleted.
+   */
+  deleteCharge(clientId: string, chargeId: string) {
+    return this.http.delete(`/clients/${clientId}/charges/${chargeId}?associations=all`);
+  }
+
   getClientSummary(clientId: string) {
     const httpParams = new HttpParams().set('R_clientId', clientId)
       .set('genericResultSet', 'false');

src/app/clients/common-resolvers/client-charge-view.resolver.ts

@@ -0,0 +1,32 @@
+/** 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 Charge data resolver.
+ */
+@Injectable()
+export class ClientChargeViewResolver 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.paramMap.get('clientId');
+        const chargeId = route.paramMap.get('chargeId');
+        return this.clientsService.getSelectedChargeData(clientId, chargeId);
+    }
+
+}