From c40c1b0434afd9d91a9f2ddb51cb7a336cf8a554 Mon Sep 17 00:00:00 2001 From: Benura Abeywardena <43112139+BLasan@users.noreply.github.com> Date: Sun, 17 May 2020 12:43:10 +0530 Subject: [PATCH] feat: add edit charge component (#625) Fixes: #586 --- .../charges/charges-template.resolver.ts | 25 +++ .../edit-charge/edit-charge.component.html | 172 ++++++++++++++++++ .../edit-charge/edit-charge.component.scss | 0 .../edit-charge/edit-charge.component.spec.ts | 25 +++ .../edit-charge/edit-charge.component.ts | 148 +++++++++++++++ .../view-charge/view-charge.component.html | 10 +- src/app/products/products-routing.module.ts | 60 +++--- src/app/products/products.module.ts | 8 +- src/app/products/products.service.ts | 19 +- 9 files changed, 436 insertions(+), 31 deletions(-) create mode 100644 src/app/products/charges/charges-template.resolver.ts create mode 100644 src/app/products/charges/edit-charge/edit-charge.component.html create mode 100644 src/app/products/charges/edit-charge/edit-charge.component.scss create mode 100644 src/app/products/charges/edit-charge/edit-charge.component.spec.ts create mode 100644 src/app/products/charges/edit-charge/edit-charge.component.ts diff --git a/src/app/products/charges/charges-template.resolver.ts b/src/app/products/charges/charges-template.resolver.ts new file mode 100644 index 000000000..f8e8f769c --- /dev/null +++ b/src/app/products/charges/charges-template.resolver.ts @@ -0,0 +1,25 @@ +/** Angular Imports */ +import { Injectable } from '@angular/core'; +import { Resolve, ActivatedRoute, ActivatedRouteSnapshot } from '@angular/router'; + +/** rxjs Imports */ +import { Observable } from 'rxjs'; + +/** Custom Services */ +import { ProductsService } from '../products.service'; + +@Injectable() +export class ChargesTemplateResolver implements Resolve { + + constructor(private productsService: ProductsService) {} + + /** + * Returns the share products template data. + * @returns {Observable} + */ + resolve(route: ActivatedRouteSnapshot): Observable { + const savingProductId = route.paramMap.get('id'); + return this.productsService.getCharge(savingProductId, true); + } + +} diff --git a/src/app/products/charges/edit-charge/edit-charge.component.html b/src/app/products/charges/edit-charge/edit-charge.component.html new file mode 100644 index 000000000..61563f02b --- /dev/null +++ b/src/app/products/charges/edit-charge/edit-charge.component.html @@ -0,0 +1,172 @@ +
+ + + +
+ + + +
+ + + Charges applies to + + + {{ chargeAppliesTo.value }} + + + + +
+ +
+ + + Name + + + Name is required + + + + + Currency + + + {{ currency.name }} + + + + Currency Type is required + + + + + + Charge time type + + + {{ chargeTime.value }} + + + + Charge Time Type is required + + + + + + Charge calculation + + + {{ chargeCalculation.value }} + + + + Charge Calculation Type is required + + + + + Charge Payment By + + + {{ chargePaymentMode.value }} + + + + Charge Payment Mode is required + + + + + Amount + + + Amount is required + + + + + Income from charge + + + {{ income.name }} + + + + Income from charge is required + + + + + Tax Group + + + {{ taxGroup.name }} + + + + + + Select Option + + + + +
+ + Add Fee Frequency + +
+ + + Charge Frequency + + + {{ chargeFrequency.value }} + + + + Fee Frequency is required + + + + + Frequency Interval + + + Amount is required + + + + +
+ +
+
+ + Active + +
+ +
+ + Is Penalty + +
+ +
+ + + + + + + + +
+ + + +
diff --git a/src/app/products/charges/edit-charge/edit-charge.component.scss b/src/app/products/charges/edit-charge/edit-charge.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/app/products/charges/edit-charge/edit-charge.component.spec.ts b/src/app/products/charges/edit-charge/edit-charge.component.spec.ts new file mode 100644 index 000000000..cb4674637 --- /dev/null +++ b/src/app/products/charges/edit-charge/edit-charge.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { EditChargeComponent } from './edit-charge.component'; + +describe('EditChargeComponent', () => { + let component: EditChargeComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ EditChargeComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(EditChargeComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/products/charges/edit-charge/edit-charge.component.ts b/src/app/products/charges/edit-charge/edit-charge.component.ts new file mode 100644 index 000000000..bc2e32790 --- /dev/null +++ b/src/app/products/charges/edit-charge/edit-charge.component.ts @@ -0,0 +1,148 @@ +/** Angular Imports */ +import { Component, OnInit } from '@angular/core'; +import { FormGroup, FormBuilder, Validators } from '@angular/forms'; +import { ActivatedRoute, Router } from '@angular/router'; + +/** Custom Services */ +import { ProductsService } from 'app/products/products.service'; + +/** + * Edit Charge component. + */ +@Component({ + selector: 'mifosx-edit-charge', + templateUrl: './edit-charge.component.html', + styleUrls: ['./edit-charge.component.scss'] +}) +export class EditChargeComponent implements OnInit { + + /** Selected Data. */ + chargeData: any; + /** Charge form. */ + chargeForm: FormGroup; + /** Select Income. */ + selectedIncome: any; + /** Select Time Type. */ + selectedTime: any; + /** Select Currency Type. */ + selectedCurrency: any; + /** Select Calculation Type. */ + selectedCalculation: any; + /** Charge Time Type options. */ + chargeTimeTypeOptions: any; + /** Charge Calculation Type options. */ + chargeCalculationTypeOptions: any; + /** Show Penalty. */ + showPenalty = true; + /** Add Fee Frequency. */ + addFeeFrequency = true; + /** Show GL Accounts. */ + showGLAccount = false; + /** Charge Payment Mode. */ + chargePaymentMode = false; + /** Show Fee Options. */ + showFeeOptions = false; + + /** + * Retrieves the charge data from `resolve`. + * @param {ProductsService} productsService Products Service. + * @param {FormBuilder} formBuilder Form Builder. + * @param {ActivatedRoute} route Activated Route. + * @param {Router} router Router for navigation. + */ + constructor( + private productsService: ProductsService, + private formBuilder: FormBuilder, + private route: ActivatedRoute, + private router: Router, + ) { + this.route.data.subscribe((data: { chargesTemplate: any }) => { + this.chargeData = data.chargesTemplate; + }); + } + + ngOnInit() { + this.editChargeForm(); + } + + /** + * Edit Charge form. + */ + editChargeForm() { + this.chargeForm = this.formBuilder.group({ + 'name': [this.chargeData.name, Validators.required], + 'chargeAppliesTo': [{value: this.chargeData.chargeAppliesTo.id, disabled: true}, Validators.required], + 'currencyCode': [this.chargeData.currency.code, Validators.required], + 'amount': [this.chargeData.amount, Validators.required], + 'active': [this.chargeData.active], + 'penalty': [this.chargeData.penalty], + 'chargeTimeType': [this.chargeData.chargeTimeType.id, Validators.required], + 'chargeCalculationType': [this.chargeData.chargeCalculationType.id, Validators.required], + }); + switch (this.chargeData.chargeAppliesTo.value) { + case 'Loan': { + this.chargeTimeTypeOptions = this.chargeData.loanChargeTimeTypeOptions; + this.chargeCalculationTypeOptions = this.chargeData.loanChargeCalculationTypeOptions; + this.addFeeFrequency = true; + this.chargePaymentMode = true; + this.chargeForm.addControl('chargePaymentMode', this.formBuilder.control(this.chargeData.chargePaymentMode.id, Validators.required)); + break; + } + case 'Savings': { + this.chargeTimeTypeOptions = this.chargeData.savingsChargeTimeTypeOptions; + this.chargeCalculationTypeOptions = this.chargeData.savingsChargeCalculationTypeOptions; + this.addFeeFrequency = false; + break; + } + case 'Shares': { + this.chargeTimeTypeOptions = this.chargeData.shareChargeTimeTypeOptions; + this.chargeCalculationTypeOptions = this.chargeData.shareChargeCalculationTypeOptions; + this.addFeeFrequency = false; + this.showGLAccount = false; + this.showPenalty = false; + break; + } + default: { + this.chargeCalculationTypeOptions = this.chargeData.clientChargeCalculationTypeOptions; + this.chargeTimeTypeOptions = this.chargeData.clientChargeTimeTypeOptions; + this.showGLAccount = true; + this.addFeeFrequency = false; + this.chargeForm.addControl('incomeAccountId', this.formBuilder.control(this.chargeData.incomeOrLiabilityAccount.id, Validators.required)); + break; + } + } + if (this.chargeData.taxGroup) { + this.chargeForm.addControl('taxGroupId', this.formBuilder.control({value: this.chargeData.taxGroup.id, disabled: true}, Validators.required)); + } else { + this.chargeForm.addControl('taxGroupId', this.formBuilder.control({value: '?', disabled: true})); + } + } + + /** + * Get Add Fee Frequency value. + */ + getFeeFrequency(isChecked: boolean) { + this.showFeeOptions = isChecked; + if (isChecked) { + this.chargeForm.addControl('feeInterval', this.formBuilder.control('', Validators.required)); + this.chargeForm.addControl('feeFrequency', this.formBuilder.control('', Validators.required)); + } else { + this.chargeForm.removeControl('feeInterval'); + this.chargeForm.removeControl('feeFrequency'); + } + } + + /** + * Submits Edit Charge form. + */ + submit() { + const charges = this.chargeForm.value; + charges.locale = 'en'; + charges.chargePaymentMode = this.chargeData.chargePaymentMode.id; + this.productsService.updateCharge(this.chargeData.id.toString(), charges) + .subscribe((response: any) => { + this.router.navigate(['../'], { relativeTo: this.route }); + }); + } + +} diff --git a/src/app/products/charges/view-charge/view-charge.component.html b/src/app/products/charges/view-charge/view-charge.component.html index 071b72765..7cd64b74b 100644 --- a/src/app/products/charges/view-charge/view-charge.component.html +++ b/src/app/products/charges/view-charge/view-charge.component.html @@ -1,5 +1,5 @@
- @@ -81,19 +81,19 @@ {{ chargeData.active === true ? 'Yes' : 'No' }}
-
+
Fee Frequency
-
+
{{ chargeData.feeFrequency.value }}
-
+
Frequency Interval
-
+
{{ chargeData.feeInterval }}
diff --git a/src/app/products/products-routing.module.ts b/src/app/products/products-routing.module.ts index bb29ad00d..ed94bac8f 100644 --- a/src/app/products/products-routing.module.ts +++ b/src/app/products/products-routing.module.ts @@ -64,6 +64,8 @@ import { ManageTaxComponentsResolver } from './manage-tax-components/manage-tax- import { ManageTaxGroupsResolver } from './manage-tax-groups/manage-tax-groups.resolver'; import { TaxComponentResolver } from './manage-tax-components/tax-component.resolver'; import { TaxComponentTemplateResolver } from './manage-tax-components/tax-component-template.resolver'; +import { EditChargeComponent } from './charges/edit-charge/edit-charge.component'; +import { ChargesTemplateResolver } from './charges/charges-template.resolver'; /** Products Routes */ const routes: Routes = [ @@ -270,27 +272,6 @@ const routes: Routes = [ }, data: { title: extract('Recurring Deposit Products'), breadcrumb: 'Recurring Deposit Products' }, }, - { - path: 'charges', - data: { title: extract('Charges'), breadcrumb: 'Charges' }, - children: [ - { - path: '', - component: ChargesComponent, - resolve: { - charges: ChargesResolver - } - }, - { - path: ':id', - data: { title: extract('View Charge'), routeResolveBreadcrumb: ['charge', 'name'] }, - component: ViewChargeComponent, - resolve: { - charge: ChargeResolver - } - } - ] - }, { path: 'fixed-deposit-products', data: { title: extract('Fixed Deposit Products'), breadcrumb: 'Fixed Deposit Products' }, @@ -358,6 +339,42 @@ const routes: Routes = [ ] } ] + }, + + { + path: 'charges', + data: { title: extract('Charges'), breadcrumb: 'Charges' }, + children: [ + { + path: '', + component: ChargesComponent, + resolve: { + charges: ChargesResolver + } + }, + + { + path: ':id', + data: { title: extract('View Charges'), routeParamBreadcrumb: 'id' }, + children: [ + { + path: '', + component: ViewChargeComponent, + resolve: { + charge: ChargeResolver + } + }, + { + path: 'edit', + component: EditChargeComponent, + data: { title: extract('Edit Charge'), breadcrumb: 'Edit', routeParamBreadcrumb: false }, + resolve: { + chargesTemplate: ChargesTemplateResolver + } + }, + ] + }, + ] } ] } @@ -388,6 +405,7 @@ const routes: Routes = [ RecurringDepositProductsResolver, ChargesResolver, ChargeResolver, + ChargesTemplateResolver, FixedDepositProductsResolver, FixedDepositProductsTemplateResolver, ProductsMixResolver, diff --git a/src/app/products/products.module.ts b/src/app/products/products.module.ts index 10e433e47..f572a7780 100644 --- a/src/app/products/products.module.ts +++ b/src/app/products/products.module.ts @@ -1,6 +1,6 @@ /** Angular Imports */ import { NgModule } from '@angular/core'; -import { DatePipe } from '@angular/common'; +import { DatePipe, CommonModule } from '@angular/common'; /** Custom Modules */ import { SharedModule } from '../shared/shared.module'; @@ -69,6 +69,9 @@ import { EditFloatingRateComponent } from './floating-rates/edit-floating-rate/e import { FloatingRatePeriodDialogComponent } from './floating-rates/floating-rate-period-dialog/floating-rate-period-dialog.component'; import { CreateTaxComponentComponent } from './manage-tax-components/create-tax-component/create-tax-component.component'; import { EditTaxComponentComponent } from './manage-tax-components/edit-tax-component/edit-tax-component.component'; +import { EditChargeComponent } from './charges/edit-charge/edit-charge.component'; +import { MatFormFieldModule, MatSelectModule, MatOptionModule } from '@angular/material'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; /** * Products Module @@ -143,7 +146,8 @@ import { EditTaxComponentComponent } from './manage-tax-components/edit-tax-comp ManageTaxGroupsComponent, ViewTaxComponentComponent, CreateTaxComponentComponent, - EditTaxComponentComponent + EditTaxComponentComponent, + EditChargeComponent ], entryComponents: [ FloatingRatePeriodDialogComponent diff --git a/src/app/products/products.service.ts b/src/app/products/products.service.ts index 5d2b4d3cf..941badaa0 100644 --- a/src/app/products/products.service.ts +++ b/src/app/products/products.service.ts @@ -98,18 +98,31 @@ export class ProductsService { } /** - * @returns {Observable} Charges data + * @returns {Observable} Charges data. */ getCharges(): Observable { return this.http.get('/charges'); } + getChargesTemplate(): Observable { + return this.http.get('/charges/template'); + } + /** * @param {string} chargeId Charge ID of charge. * @returns {Observable} Charge. */ - getCharge(chargeId: string): Observable { - return this.http.get(`/charges/${chargeId}`); + getCharge(selectedCharge: string, template: boolean = false): Observable { + const httpParams = new HttpParams().set('template', template.toString()); + return this.http.get(`/charges/${selectedCharge}`, { params: httpParams }); + } + + /** + * @param chargeId Charge Id to be updated. + * @param charges Charge Data to be updated. + */ + updateCharge(chargeId: string, charges: any): Observable { + return this.http.put(`/charges/${chargeId}`, charges); } /**