feat: add view client charges component (#688)

Fixes: #688

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']);
+    });
+  }
+
+}