From d4281628ea69158eb1bd14400aef52e2b6f51d96 Mon Sep 17 00:00:00 2001 From: Rishabh Verma Date: Sun, 12 Jan 2020 02:54:32 +0530 Subject: [PATCH] feat: add view charge component (#549) Fixes: #539 --- src/app/products/charges/charge.resolver.ts | 31 +++++ .../products/charges/charges.component.html | 2 +- .../view-charge/view-charge.component.html | 122 ++++++++++++++++++ .../view-charge/view-charge.component.scss | 10 ++ .../view-charge/view-charge.component.spec.ts | 25 ++++ .../view-charge/view-charge.component.ts | 61 +++++++++ src/app/products/products-routing.module.ts | 24 +++- src/app/products/products.module.ts | 2 + src/app/products/products.service.ts | 16 +++ 9 files changed, 288 insertions(+), 5 deletions(-) create mode 100644 src/app/products/charges/charge.resolver.ts create mode 100644 src/app/products/charges/view-charge/view-charge.component.html create mode 100644 src/app/products/charges/view-charge/view-charge.component.scss create mode 100644 src/app/products/charges/view-charge/view-charge.component.spec.ts create mode 100644 src/app/products/charges/view-charge/view-charge.component.ts diff --git a/src/app/products/charges/charge.resolver.ts b/src/app/products/charges/charge.resolver.ts new file mode 100644 index 000000000..ea6e601d7 --- /dev/null +++ b/src/app/products/charges/charge.resolver.ts @@ -0,0 +1,31 @@ +/** Angular Imports */ +import { Injectable } from '@angular/core'; +import { Resolve, ActivatedRouteSnapshot } from '@angular/router'; + +/** rxjs Imports */ +import { Observable } from 'rxjs'; + +/** Custom Services */ +import { ProductsService } from 'app/products/products.service'; + +/** + * Charge data resolver. + */ +@Injectable() +export class ChargeResolver implements Resolve { + + /** + * @param {productsService} productsService Products service. + */ + constructor(private productsService: ProductsService) {} + + /** + * Returns the charge data. + * @returns {Observable} + */ + resolve(route: ActivatedRouteSnapshot): Observable { + const chargeId = route.paramMap.get('id'); + return this.productsService.getCharge(chargeId); + } + +} diff --git a/src/app/products/charges/charges.component.html b/src/app/products/charges/charges.component.html index 23493cbca..4d956e081 100644 --- a/src/app/products/charges/charges.component.html +++ b/src/app/products/charges/charges.component.html @@ -46,7 +46,7 @@ - + diff --git a/src/app/products/charges/view-charge/view-charge.component.html b/src/app/products/charges/view-charge/view-charge.component.html new file mode 100644 index 000000000..071b72765 --- /dev/null +++ b/src/app/products/charges/view-charge/view-charge.component.html @@ -0,0 +1,122 @@ +
+ + +
+ +
+ + + + + +
+ +
+ Charge Type +
+ +
+ {{ chargeData.penalty === true ? 'Penalty' : 'Charge' }} +
+ +
+ Currency +
+ +
+ {{ chargeData.currency.name }} +
+ +
+ Amount +
+ +
+ {{ chargeData.amount }} +
+ +
+ Charge Time Type +
+ +
+ {{ chargeData.chargeTimeType.value }} +
+ +
+ Charge Applies to +
+ +
+ {{ chargeData.chargeAppliesTo.value }} +
+ +
+ Charge Calculation Type +
+ +
+ {{ chargeData.chargeCalculationType.value }} +
+ +
+ Charge Payment Mode +
+ +
+ {{ chargeData.chargePaymentMode.value }} +
+ +
+ Active +
+ +
+ {{ chargeData.active === true ? 'Yes' : 'No' }} +
+ +
+ Fee Frequency +
+ +
+ {{ chargeData.feeFrequency.value }} +
+ +
+ Frequency Interval +
+ +
+ {{ chargeData.feeInterval }} +
+ +
+ Income from Charges +
+ +
+ {{ chargeData.incomeOrLiabilityAccount.name + ' (' + chargeData.incomeOrLiabilityAccount.glCode + ')' }} +
+ +
+ Tax Group +
+ +
+ {{ chargeData.taxGroup.name }} +
+ +
+ + + + + +
diff --git a/src/app/products/charges/view-charge/view-charge.component.scss b/src/app/products/charges/view-charge/view-charge.component.scss new file mode 100644 index 000000000..56668f14f --- /dev/null +++ b/src/app/products/charges/view-charge/view-charge.component.scss @@ -0,0 +1,10 @@ +.container { + max-width: 37rem; + + .content { + div { + margin: 1rem 0; + word-wrap: break-word; + } + } +} diff --git a/src/app/products/charges/view-charge/view-charge.component.spec.ts b/src/app/products/charges/view-charge/view-charge.component.spec.ts new file mode 100644 index 000000000..6c6e3739c --- /dev/null +++ b/src/app/products/charges/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; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ViewChargeComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ViewChargeComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/products/charges/view-charge/view-charge.component.ts b/src/app/products/charges/view-charge/view-charge.component.ts new file mode 100644 index 000000000..e4758c9ce --- /dev/null +++ b/src/app/products/charges/view-charge/view-charge.component.ts @@ -0,0 +1,61 @@ +/** Angular Imports */ +import { Component, OnInit } from '@angular/core'; +import { ActivatedRoute, Router } from '@angular/router'; +import { MatDialog } from '@angular/material'; + +/** Custom Services */ +import { ProductsService } from 'app/products/products.service'; + +/** Custom Components */ +import { DeleteDialogComponent } from '../../../shared/delete-dialog/delete-dialog.component'; + +/** + * 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; + + /** + * Retrieves the charge data from `resolve`. + * @param {ProductsService} productsService Products Service. + * @param {ActivatedRoute} route Activated Route. + * @param {Router} router Router for navigation. + * @param {MatDialog} dialog Dialog reference. + */ + constructor(private productsService: ProductsService, + private route: ActivatedRoute, + private router: Router, + private dialog: MatDialog) { + this.route.data.subscribe((data: { charge: any }) => { + this.chargeData = data.charge; + }); + } + + ngOnInit() { + } + + /** + * Deletes the charge and redirects to charges. + */ + deleteCharge() { + const deleteChargeDialogRef = this.dialog.open(DeleteDialogComponent, { + data: { deleteContext: `charge ${this.chargeData.id}` } + }); + deleteChargeDialogRef.afterClosed().subscribe((response: any) => { + if (response.delete) { + this.productsService.deleteCharge(this.chargeData.id) + .subscribe(() => { + this.router.navigate(['/products/charges']); + }); + } + }); + } + +} diff --git a/src/app/products/products-routing.module.ts b/src/app/products/products-routing.module.ts index 4ade60964..343493828 100644 --- a/src/app/products/products-routing.module.ts +++ b/src/app/products/products-routing.module.ts @@ -25,6 +25,7 @@ import { EditShareProductComponent } from './share-products/edit-share-product/e import { ManageTaxConfigurationsComponent } from './manage-tax-configurations/manage-tax-configurations.component'; import { RecurringDepositProductsComponent } from './recurring-deposit-products/recurring-deposit-products.component'; import { ChargesComponent } from './charges/charges.component'; +import { ViewChargeComponent } from './charges/view-charge/view-charge.component'; import { FixedDepositProductsComponent } from './fixed-deposit-products/fixed-deposit-products.component'; import { CreateFixedDepositProductComponent } from './fixed-deposit-products/create-fixed-deposit-product/create-fixed-deposit-product.component'; import { ProductsMixComponent } from './products-mix/products-mix.component'; @@ -46,6 +47,7 @@ import { ShareProductResolver } from './share-products/share-product-resolver'; import { ShareProductAndTemplateResolver } from './share-products/edit-share-product/share-product-and-template.resolver'; import { RecurringDepositProductsResolver } from './recurring-deposit-products/recurring-deposit-products.resolver'; import { ChargesResolver } from './charges/charges.resolver'; +import { ChargeResolver } from './charges/charge.resolver'; import { FixedDepositProductsResolver } from './fixed-deposit-products/fixed-deposit-products.resolver'; import { FixedDepositProductsTemplateResolver } from './fixed-deposit-products/fixed-deposit-products-template.resolver'; import { ProductsMixResolver } from './products-mix/products-mix.resolver'; @@ -225,11 +227,24 @@ const routes: Routes = [ }, { path: 'charges', - component: ChargesComponent, - resolve: { - charges: ChargesResolver - }, 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', @@ -288,6 +303,7 @@ const routes: Routes = [ ShareProductAndTemplateResolver, RecurringDepositProductsResolver, ChargesResolver, + ChargeResolver, FixedDepositProductsResolver, FixedDepositProductsTemplateResolver, ProductsMixResolver, diff --git a/src/app/products/products.module.ts b/src/app/products/products.module.ts index 25da8b1f2..84147ac20 100644 --- a/src/app/products/products.module.ts +++ b/src/app/products/products.module.ts @@ -21,6 +21,7 @@ import { CreateLoanProductComponent } from './loan-products/create-loan-product/ import { ManageTaxConfigurationsComponent } from './manage-tax-configurations/manage-tax-configurations.component'; import { RecurringDepositProductsComponent } from './recurring-deposit-products/recurring-deposit-products.component'; import { ChargesComponent } from './charges/charges.component'; +import { ViewChargeComponent } from './charges/view-charge/view-charge.component'; import { FixedDepositProductsComponent } from './fixed-deposit-products/fixed-deposit-products.component'; import { ProductsMixComponent } from './products-mix/products-mix.component'; import { ManageTaxComponentsComponent } from './manage-tax-components/manage-tax-components.component'; @@ -86,6 +87,7 @@ import { ManageTaxGroupsComponent } from './manage-tax-groups/manage-tax-groups. ManageTaxConfigurationsComponent, RecurringDepositProductsComponent, ChargesComponent, + ViewChargeComponent, FixedDepositProductsComponent, ProductsMixComponent, ManageTaxComponentsComponent, diff --git a/src/app/products/products.service.ts b/src/app/products/products.service.ts index 375e64cf4..1be63caad 100644 --- a/src/app/products/products.service.ts +++ b/src/app/products/products.service.ts @@ -104,6 +104,22 @@ export class ProductsService { return this.http.get('/charges'); } + /** + * @param {string} chargeId Charge ID of charge. + * @returns {Observable} Charge. + */ + getCharge(chargeId: string): Observable { + return this.http.get(`/charges/${chargeId}`); + } + + /** + * @param {string} chargeId Charge ID of Charge to be deleted. + * @returns {Observable} + */ + deleteCharge(chargeId: string): Observable { + return this.http.delete(`/charges/${chargeId}`); + } + /** * @returns {Observable} Fixed deposit products data */