feat: add recurring deposit account (charges tab action) (#1041)

- add edit charge
- add delete charge
- add waive charge
- add pay charge

Fixed: #1040

src/app/deposits/recurring-deposits/recurring-deposits-account-view/charges-tab/charges-tab.component.html

@@ -4,10 +4,6 @@
     <div class="m-b-10">
       <h3>All Charges</h3>
     </div>
-    <div class="action-button m-b-20" *ngIf="this.chargesData">
-      <button mat-raised-button color="primary" (click)="toggleCharges()">
-        {{showInactiveCharges?'View Active Charges':'View Inactive Charges'}}</button>
-    </div>
   </div>
 
   <div class="mat-elevation-z1 m-b-25">
@@ -69,25 +65,26 @@
         <th mat-header-cell *matHeaderCellDef> Actions </th>
         <td mat-cell *matCellDef="let charge">
           <span *ngIf="recurringDepositsAccountData.status.value === 'Submitted and pending approval'">
-            <button class="account-action-button" mat-raised-button color="primary" matTooltip="Edit Charge">
+            <button class="account-action-button" mat-raised-button color="primary" matTooltip="Edit Charge"
+            *mifosxHasPermission="'UPDATE_SAVINGSACCOUNTCHARGE'" (click)="routeEdit($event); editCharge(charge)">
               <i class="fa fa-pencil"></i>
             </button>
-            <button class="account-action-button" mat-raised-button color="warn" matTooltip="Delete Charge">
+            <button class="account-action-button" mat-raised-button color="warn" matTooltip="Delete Charge"
+            *mifosxHasPermission="'DELETE_SAVINGSACCOUNTCHARGE'" (click)="routeEdit($event); deleteCharge(charge.id)">
               <i class="fa fa-trash"></i>
             </button>
           </span>
-          <span *ngIf="recurringDepositsAccountData.status.value === 'Active' && charge.amountOutstanding !== 0">
+          <span *ngIf="recurringDepositsAccountData.status.value !== 'Submitted and pending approval' && charge.amountOutstanding !== 0">
-            <button class="account-action-button" mat-raised-button color="primary" matTooltip="Pay Charge">
+            <span *ngIf="charge.chargeTimeType.value == 'Monthly Fee' || charge.chargeTimeType.value == 'Annual Fee'|| charge.chargeTimeType.value == 'Specified due date'"> 
-              <i class="fa fa-dollar"></i>
+              <button class="account-action-button" mat-raised-button color="primary" matTooltip="Pay Charge"
-            </button>
+              *mifosxHasPermission="'PAY_SAVINGSACCOUNTCHARGE'" (click)="routeEdit($event); payCharge(charge.id)">
-            <button class="account-action-button" mat-raised-button color="primary" matTooltip="Waive Charge">
+                <i class="fa fa-dollar"></i>
-              <i class="fa fa-flag"></i>
-            </button>
-            <ng-container *ngIf="isRecurringCharge(charge)">
-              <button class="account-action-button" mat-raised-button color="primary" matTooltip="Inactivate Charge">
-                <i class="fa fa-ban"></i>
               </button>
-            </ng-container>
+              <button class="account-action-button" mat-raised-button color="primary" matTooltip="Waive Charge"
+              *mifosxHasPermission="'WAIVE_SAVINGSACCOUNTCHARGE'" (click)="routeEdit($event); waiveCharge(charge.id)">
+                <i class="fa fa-flag"></i>
+              </button>
+            </span>
           </span>
         </td>
       </ng-container>

src/app/deposits/recurring-deposits/recurring-deposits-account-view/charges-tab/charges-tab.component.ts

@@ -1,7 +1,21 @@
 /** Angular Imports */
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { MatTableDataSource, MatTable } from '@angular/material';
+import { ActivatedRoute, Router } from '@angular/router';
-import { ActivatedRoute } from '@angular/router';
+import { MatDialog, MatTableDataSource, MatTable } from '@angular/material';
+import { DatePipe } from '@angular/common';
+
+/** Custom Services */
+import { SavingsService } from 'app/savings/savings.service';
+
+/** Custom Dialogs */
+import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
+import { RecurringDepositConfirmationDialogComponent } from '../custom-dialogs/recurring-deposit-confirmation-dialog/recurring-deposit-confirmation-dialog.component';
+import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.component';
+
+/** Custom Models */
+import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-base';
+import { InputBase } from 'app/shared/form-dialog/formfield/model/input-base';
+import { DatepickerBase } from 'app/shared/form-dialog/formfield/model/datepicker-base';
 
 /**
  * Charges Tab Component
@@ -43,8 +57,12 @@ export class ChargesTabComponent implements OnInit {
    * Retrieves Recurring Deposits Account Data from `resolve`.
    * @param {ActivatedRoute} route Activated Route.
    */
-  constructor(private route: ActivatedRoute) {
+  constructor(private route: ActivatedRoute,
-    this.route.parent.data.subscribe((data: { recurringDepositsAccountData: any }) => {
+              private savingsService: SavingsService,
+              private datePipe: DatePipe,
+              private router: Router,
+              public dialog: MatDialog) {
+      this.route.parent.data.subscribe((data: { recurringDepositsAccountData: any }) => {
       this.recurringDepositsAccountData = data.recurringDepositsAccountData;
       this.chargesData = this.recurringDepositsAccountData.charges;
     });
@@ -56,26 +74,138 @@ export class ChargesTabComponent implements OnInit {
   }
 
   /**
-   * Toggles datasource for active/inactive charges.
+   * Pays the charge.
+   * @param {any} chargeId Charge Id
    */
-  toggleCharges() {
+  payCharge(chargeId: any) {
-    this.showInactiveCharges = !this.showInactiveCharges;
+    const formfields: FormfieldBase[] = [
-    if (!this.showInactiveCharges) {
+      new InputBase({
-      const activeCharges = this.chargesData.filter(charge => charge.isActive);
+        controlName: 'amount',
-      this.dataSource.data = activeCharges;
+        label: 'Amount',
-    } else {
+        value: '',
-      const inActiveCharges = this.chargesData.filter(charge => !charge.isActive);
+        type: 'number',
-      this.dataSource.data = inActiveCharges;
+        required: true
-    }
+      }),
-    this.chargesTableRef.renderRows();
+      new DatepickerBase({
+        controlName: 'dueDate',
+        label: 'Payment Date',
+        value: '',
+        type: 'date',
+        required: true
+      })
+    ];
+    const data = {
+      title: `Pay Charge ${chargeId}`,
+      layout: { addButtonText: 'Confirm' },
+      formfields: formfields
+    };
+    const payChargeDialogRef = this.dialog.open(FormDialogComponent, { data });
+    payChargeDialogRef.afterClosed().subscribe((response: any) => {
+      if (response.data) {
+        const locale = 'en';
+        const dateFormat = 'dd MMMM yyyy';
+        const dataObject = {
+          ...response.data.value,
+          dueDate: this.datePipe.transform(response.data.value.dueDate, dateFormat),
+          dateFormat,
+          locale
+        };
+        this.savingsService.executeSavingsAccountChargesCommand(this.recurringDepositsAccountData.id, 'paycharge', dataObject, chargeId)
+          .subscribe(() => {
+            this.reload();
+          });
+      }
+    });
   }
 
   /**
-   * Checks if charge is recurring.
+   * Waive's the charge
+   * @param {any} chargeId Charge Id
+   */
+  waiveCharge(chargeId: any) {
+    const waiveChargeDialogRef = this.dialog.open(RecurringDepositConfirmationDialogComponent, { data: { heading: 'Waive Charge', dialogContext: `Are you sure you want to waive charge with id: ${chargeId}` } });
+    waiveChargeDialogRef.afterClosed().subscribe((response: any) => {
+      if (response.confirm) {
+        this.savingsService.executeSavingsAccountChargesCommand(this.recurringDepositsAccountData.id, 'waive', {}, chargeId)
+          .subscribe(() => {
+            this.reload();
+          });
+      }
+    });
+  }
+
+  /**
+   * Edits the charge
    * @param {any} charge Charge
    */
-  isRecurringCharge(charge: any) {
+  editCharge(charge: any) {
-    return charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee' || charge.chargeTimeType.value === 'Weekly Fee';
+    const formfields: FormfieldBase[] = [
+      new InputBase({
+        controlName: 'amount',
+        label: 'Amount',
+        value: charge.amount || charge.amountOrPercentage,
+        type: 'number',
+        required: true
+      })
+    ];
+    const data = {
+      title: `Edit Charge ${charge.id}`,
+      layout: { addButtonText: 'Confirm' },
+      formfields: formfields
+    };
+    const editChargeDialogRef = this.dialog.open(FormDialogComponent, { data });
+    editChargeDialogRef.afterClosed().subscribe((response: any) => {
+      if (response.data) {
+        const locale = 'en';
+        const dateFormat = 'dd MMMM yyyy';
+        const dataObject = {
+          ...response.data.value,
+          dateFormat,
+          locale
+        };
+        this.savingsService.editSavingsAccountCharge(this.recurringDepositsAccountData.id, dataObject, charge.id)
+          .subscribe(() => {
+            this.reload();
+          });
+      }
+    });
+  }
+
+  /**
+   * Deletes the charge
+   * @param {any} chargeId Charge Id
+   */
+  deleteCharge(chargeId: any) {
+    const deleteChargeDialogRef = this.dialog.open(DeleteDialogComponent, {
+      data: { deleteContext: `charge id:${chargeId}` }
+    });
+    deleteChargeDialogRef.afterClosed().subscribe((response: any) => {
+      if (response.delete) {
+        this.savingsService.deleteSavingsAccountCharge(this.recurringDepositsAccountData.id, chargeId)
+          .subscribe(() => {
+            this.reload();
+          });
+      }
+    });
+  }
+
+  /**
+   * Stops the propagation to view charge page.
+   * @param $event Mouse Event
+   */
+  routeEdit($event: MouseEvent) {
+    $event.stopPropagation();
+  }
+
+  /**
+   * Refetches data for the component
+   * TODO: Replace by a custom reload component instead of hard-coded back-routing.
+   */
+  private reload() {
+    const clientId = this.recurringDepositsAccountData.clientId;
+    const url: string = this.router.url;
+    this.router.navigateByUrl(`/clients/${clientId}/recurringdeposits`, { skipLocationChange: true })
+      .then(() => this.router.navigate([url]));
   }
 
 }