From 0cfc7af07a4015190e97a7c46d61f0abe168fd96 Mon Sep 17 00:00:00 2001 From: Muskan Khedia <36980003+muskankhedia@users.noreply.github.com> Date: Sat, 4 Jul 2020 10:48:40 +0530 Subject: [PATCH] feat: add recurring deposit account tab (charges) (#985) Fixes: #983 --- .../charges-tab/charges-tab.component.html | 101 ++++++++++++++++++ .../charges-tab/charges-tab.component.scss | 19 ++++ .../charges-tab/charges-tab.component.spec.ts | 25 +++++ .../charges-tab/charges-tab.component.ts | 81 ++++++++++++++ ...rring-deposits-account-view.component.html | 3 + .../recurring-deposits-routing.module.ts | 10 +- .../recurring-deposits.module.ts | 4 +- 7 files changed, 240 insertions(+), 3 deletions(-) create mode 100644 src/app/deposits/recurring-deposits/recurring-deposits-account-view/charges-tab/charges-tab.component.html create mode 100644 src/app/deposits/recurring-deposits/recurring-deposits-account-view/charges-tab/charges-tab.component.scss create mode 100644 src/app/deposits/recurring-deposits/recurring-deposits-account-view/charges-tab/charges-tab.component.spec.ts create mode 100644 src/app/deposits/recurring-deposits/recurring-deposits-account-view/charges-tab/charges-tab.component.ts diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-account-view/charges-tab/charges-tab.component.html b/src/app/deposits/recurring-deposits/recurring-deposits-account-view/charges-tab/charges-tab.component.html new file mode 100644 index 000000000..dac44911c --- /dev/null +++ b/src/app/deposits/recurring-deposits/recurring-deposits-account-view/charges-tab/charges-tab.component.html @@ -0,0 +1,101 @@ +
+ +
+
+

All Charges

+
+
+ +
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Name {{ charge.name }} Fee/Penalty {{ charge.penalty === true ? 'Penalty' : 'Fee' }} Payment Due At {{ charge.chargeTimeType.value }} Due As Of {{ charge.dueDate | date }} Repeats On (M/d) {{ charge.feeOnMonthDay ? charge.feeOnMonthDay.join('/') : '' }} Calculation Type {{charge.chargeCalculationType.value}} Due {{charge.currency.displaySymbol}} {{charge.amount}} Paid {{charge.currency.displaySymbol}} {{charge.amountPaid}} Waived {{charge.currency.displaySymbol}} {{charge.amountWaived}} Outstanding {{charge.currency.displaySymbol}} {{charge.amountOutstanding}} Actions + + + + + + + + + + + +
+ +
+ +
diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-account-view/charges-tab/charges-tab.component.scss b/src/app/deposits/recurring-deposits/recurring-deposits-account-view/charges-tab/charges-tab.component.scss new file mode 100644 index 000000000..aaafd7b18 --- /dev/null +++ b/src/app/deposits/recurring-deposits/recurring-deposits-account-view/charges-tab/charges-tab.component.scss @@ -0,0 +1,19 @@ +.tab-container { + padding: 1%; + margin: 1%; + h3 { + margin:1% auto; + } + .action-button { + margin-left: auto; + } + table { + width: 100%; + .account-action-button{ + min-width: 26px; + padding: 0 6px; + margin: 4px; + line-height: 25px; + } + } +} diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-account-view/charges-tab/charges-tab.component.spec.ts b/src/app/deposits/recurring-deposits/recurring-deposits-account-view/charges-tab/charges-tab.component.spec.ts new file mode 100644 index 000000000..1ef118215 --- /dev/null +++ b/src/app/deposits/recurring-deposits/recurring-deposits-account-view/charges-tab/charges-tab.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ChargesTabComponent } from './charges-tab.component'; + +describe('ChargesTabComponent', () => { + let component: ChargesTabComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ChargesTabComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ChargesTabComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-account-view/charges-tab/charges-tab.component.ts b/src/app/deposits/recurring-deposits/recurring-deposits-account-view/charges-tab/charges-tab.component.ts new file mode 100644 index 000000000..5ab80b8ee --- /dev/null +++ b/src/app/deposits/recurring-deposits/recurring-deposits-account-view/charges-tab/charges-tab.component.ts @@ -0,0 +1,81 @@ +/** Angular Imports */ +import { Component, OnInit, ViewChild } from '@angular/core'; +import { MatTableDataSource, MatTable } from '@angular/material'; +import { ActivatedRoute } from '@angular/router'; + +/** + * Charges Tab Component + */ +@Component({ + selector: 'mifosx-charges-tab', + templateUrl: './charges-tab.component.html', + styleUrls: ['./charges-tab.component.scss'] +}) +export class ChargesTabComponent implements OnInit { + + /** Fixed Deposits Account Data */ + recurringDepositsAccountData: any; + /** Charges Data */ + chargesData: any[]; + /** Data source for charges table. */ + dataSource: MatTableDataSource; + /** Toggles Charges Table */ + showInactiveCharges = false; + /** Columns to be displayed in charges table. */ + displayedColumns: string[] = [ + 'name', + 'feeOrPenalty', + 'paymentDueAt', + 'dueAsOf', + 'repeatsOn', + 'calculationType', + 'due', + 'paid', + 'waived', + 'outstanding', + 'actions' + ]; + + /** Charges Table Reference */ + @ViewChild('chargesTable') chargesTableRef: MatTable; + + /** + * Retrieves Fixed Deposits Account Data from `resolve`. + * @param {ActivatedRoute} route Activated Route. + */ + constructor(private route: ActivatedRoute) { + this.route.parent.data.subscribe((data: { recurringDepositsAccountData: any }) => { + this.recurringDepositsAccountData = data.recurringDepositsAccountData; + this.chargesData = this.recurringDepositsAccountData.charges; + }); + } + + ngOnInit() { + const activeCharges = this.chargesData ? this.chargesData.filter(charge => charge.isActive) : []; + this.dataSource = new MatTableDataSource(activeCharges); + } + + /** + * Toggles datasource for active/inactive charges. + */ + toggleCharges() { + this.showInactiveCharges = !this.showInactiveCharges; + if (!this.showInactiveCharges) { + const activeCharges = this.chargesData.filter(charge => charge.isActive); + this.dataSource.data = activeCharges; + } else { + const inActiveCharges = this.chargesData.filter(charge => !charge.isActive); + this.dataSource.data = inActiveCharges; + } + this.chargesTableRef.renderRows(); + } + + /** + * Checks if charge is recurring. + * @param {any} charge Charge + */ + isRecurringCharge(charge: any) { + return charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee' || charge.chargeTimeType.value === 'Weekly Fee'; + } + +} diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-account-view/recurring-deposits-account-view.component.html b/src/app/deposits/recurring-deposits/recurring-deposits-account-view/recurring-deposits-account-view.component.html index ce1f2e6e5..5a7c7bf50 100644 --- a/src/app/deposits/recurring-deposits/recurring-deposits-account-view/recurring-deposits-account-view.component.html +++ b/src/app/deposits/recurring-deposits/recurring-deposits-account-view/recurring-deposits-account-view.component.html @@ -207,6 +207,9 @@ Transactions + + Charges + diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-routing.module.ts b/src/app/deposits/recurring-deposits/recurring-deposits-routing.module.ts index 5da891e44..2dd0e2d6e 100644 --- a/src/app/deposits/recurring-deposits/recurring-deposits-routing.module.ts +++ b/src/app/deposits/recurring-deposits/recurring-deposits-routing.module.ts @@ -14,6 +14,7 @@ import { TransactionsTabComponent } from './recurring-deposits-account-view/tran import { RecurringDepositsAccountViewResolver } from './common-resolvers/recurring-deposits-account-view.resolver'; import { RecurringDepositsAccountDataResolver } from './common-resolvers/recurring-deposits-account-data.resolver'; import { StandingInstructionsTabComponent } from './recurring-deposits-account-view/standing-instructions-tab/standing-instructions-tab.component'; +import { ChargesTabComponent } from './recurring-deposits-account-view/charges-tab/charges-tab.component'; const routes: Routes = [ { @@ -31,7 +32,7 @@ const routes: Routes = [ { path: 'interest-rate-chart', component: InterestRateChartTabComponent, - data: { title: extract('Interest Rate Chart'), breadcrumb: 'Interest Rate Chart', routeParamBreadcrumb: false }, + data: { title: extract('Recurring Deposit Account Interest Rate Chart'), breadcrumb: 'Interest Rate Chart', routeParamBreadcrumb: false }, resolve: { recurringDepositsAccountData: RecurringDepositsAccountDataResolver } @@ -39,11 +40,16 @@ const routes: Routes = [ { path: 'transactions', component: TransactionsTabComponent, - data: { title: extract('Transactions'), breadcrumb: 'Transactions', routeParamBreadcrumb: false }, + data: { title: extract('Recurring Deposit Account Transactions'), breadcrumb: 'Transactions', routeParamBreadcrumb: false }, resolve: { recurringDepositsAccountData: RecurringDepositsAccountDataResolver } }, + { + path: 'charges', + component: ChargesTabComponent, + data: { title: extract('Recurring Deposit Account Charges'), breadcrumb: 'Charges', routeParamBreadcrumb: false } + }, { path: 'standing-instructions', component: StandingInstructionsTabComponent, diff --git a/src/app/deposits/recurring-deposits/recurring-deposits.module.ts b/src/app/deposits/recurring-deposits/recurring-deposits.module.ts index 912342b27..64b97c11b 100644 --- a/src/app/deposits/recurring-deposits/recurring-deposits.module.ts +++ b/src/app/deposits/recurring-deposits/recurring-deposits.module.ts @@ -13,6 +13,7 @@ import { RecurringDepositsAccountViewComponent } from './recurring-deposits-acco import { InterestRateChartTabComponent } from './recurring-deposits-account-view/interest-rate-chart-tab/interest-rate-chart-tab.component'; import { TransactionsTabComponent } from './recurring-deposits-account-view/transactions-tab/transactions-tab.component'; import { StandingInstructionsTabComponent } from './recurring-deposits-account-view/standing-instructions-tab/standing-instructions-tab.component'; +import { ChargesTabComponent } from './recurring-deposits-account-view/charges-tab/charges-tab.component'; /** * RecurringDeposits Module @@ -30,7 +31,8 @@ import { StandingInstructionsTabComponent } from './recurring-deposits-account-v RecurringDepositsAccountViewComponent, InterestRateChartTabComponent, TransactionsTabComponent, - StandingInstructionsTabComponent + StandingInstructionsTabComponent, + ChargesTabComponent ], providers: [DatePipe] })