feat: add edit saving product component (#457)

- Update saving product stepper components to support editing
- Add edit saving product component

Fixes: #453
This commit is contained in:
Abhay Chawla
2019-12-01 23:20:51 +03:00
parent f22be41f87
commit 9d0e7d3494
16 changed files with 365 additions and 13 deletions
@@ -17,6 +17,7 @@ import { EditLoanProductComponent } from './loan-products/edit-loan-product/edit
import { SavingProductsComponent } from './saving-products/saving-products.component';
import { CreateSavingProductComponent } from './saving-products/create-saving-product/create-saving-product.component';
import { ViewSavingProductComponent } from './saving-products/view-saving-product/view-saving-product.component';
import { EditSavingProductComponent } from './saving-products/edit-saving-product/edit-saving-product.component';
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';
@@ -32,6 +33,7 @@ import { LoanProductAndTemplateResolver } from './loan-products/edit-loan-produc
import { SavingProductsResolver } from './saving-products/saving-products.resolver';
import { SavingProductsTemplateResolver } from './saving-products/saving-products-template.resolver';
import { SavingProductResolver } from './saving-products/saving-product.resolver';
import { SavingProductAndTemplateResolver } from './saving-products/edit-saving-product/saving-product-and-template.resolver';
import { RecurringDepositProductsResolver } from './recurring-deposit-products/recurring-deposit-products.resolver';
import { ChargesResolver } from './charges/charges.resolver';
import { FixedDepositProductsResolver } from './fixed-deposit-products/fixed-deposit-products.resolver';
@@ -120,6 +122,14 @@ const routes: Routes = [
resolve: {
savingProduct: SavingProductResolver
}
},
{
path: 'edit',
component: EditSavingProductComponent,
data: { title: extract('Edit Saving Product'), breadcrumb: 'Edit', routeParamBreadcrumb: false },
resolve: {
savingProductAndTemplate: SavingProductAndTemplateResolver
}
}
]
}
@@ -196,6 +206,7 @@ const routes: Routes = [
SavingProductsResolver,
SavingProductsTemplateResolver,
SavingProductResolver,
SavingProductAndTemplateResolver,
RecurringDepositProductsResolver,
ChargesResolver,
FixedDepositProductsResolver,
+3 -1
View File
@@ -36,6 +36,7 @@ import { SavingProductAccountingStepComponent } from './saving-products/saving-p
import { SavingProductPreviewStepComponent } from './saving-products/saving-product-stepper/saving-product-preview-step/saving-product-preview-step.component';
import { CreateSavingProductComponent } from './saving-products/create-saving-product/create-saving-product.component';
import { ViewSavingProductComponent } from './saving-products/view-saving-product/view-saving-product.component';
import { EditSavingProductComponent } from './saving-products/edit-saving-product/edit-saving-product.component';
/**
* Products Module
@@ -76,7 +77,8 @@ import { ViewSavingProductComponent } from './saving-products/view-saving-produc
SavingProductAccountingStepComponent,
SavingProductPreviewStepComponent,
CreateSavingProductComponent,
ViewSavingProductComponent
ViewSavingProductComponent,
EditSavingProductComponent
],
entryComponents: [
],
+7 -2
View File
@@ -57,8 +57,13 @@ export class ProductsService {
return this.http.get('/savingsproducts/template');
}
getSavingProduct(savingProductId: string): Observable<any> {
return this.http.get(`/savingsproducts/${savingProductId}`);
getSavingProduct(savingProductId: string, template: boolean = false): Observable<any> {
const httpParams = new HttpParams().set('template', template.toString());
return this.http.get(`/savingsproducts/${savingProductId}`, { params: httpParams });
}
updateSavingProduct(savingProductId: string, savingProduct: any): Observable<any> {
return this.http.put(`/savingsproducts/${savingProductId}`, savingProduct);
}
/**
@@ -0,0 +1,99 @@
<div class="container">
<mat-horizontal-stepper class="mat-elevation-z8" labelPosition="bottom" #savingProductStepper>
<ng-template matStepperIcon="number">
<fa-icon icon="pencil-alt" size="sm"></fa-icon>
</ng-template>
<ng-template matStepperIcon="edit">
<fa-icon icon="pencil-alt" size="sm"></fa-icon>
</ng-template>
<ng-template matStepperIcon="done">
<fa-icon icon="check" size="sm"></fa-icon>
</ng-template>
<ng-template matStepperIcon="error">
<fa-icon icon="exclamation-triangle" size="lg"></fa-icon>
</ng-template>
<ng-template matStepperIcon="preview">
<fa-icon icon="eye" size="sm"></fa-icon>
</ng-template>
<mat-step [stepControl]="savingProductDetailsForm" completed>
<ng-template matStepLabel>DETAILS</ng-template>
<mifosx-saving-product-details-step [savingProductsTemplate]="savingProductAndTemplate"></mifosx-saving-product-details-step>
</mat-step>
<mat-step [stepControl]="savingProductCurrencyForm" completed>
<ng-template matStepLabel>CURRENCY</ng-template>
<mifosx-saving-product-currency-step [savingProductsTemplate]="savingProductAndTemplate"></mifosx-saving-product-currency-step>
</mat-step>
<mat-step [stepControl]="savingProductTermsForm" completed>
<ng-template matStepLabel>TERMS</ng-template>
<mifosx-saving-product-terms-step [savingProductsTemplate]="savingProductAndTemplate"></mifosx-saving-product-terms-step>
</mat-step>
<mat-step [stepControl]="savingProductSettingsForm" completed>
<ng-template matStepLabel>SETTINGS</ng-template>
<mifosx-saving-product-settings-step [savingProductsTemplate]="savingProductAndTemplate"></mifosx-saving-product-settings-step>
</mat-step>
<mat-step completed>
<ng-template matStepLabel>CHARGES</ng-template>
<mifosx-saving-product-charges-step
[savingProductsTemplate]="savingProductAndTemplate"
[currencyCode]="savingProductCurrencyForm.get('currencyCode')"
>
</mifosx-saving-product-charges-step>
</mat-step>
<mat-step [stepControl]="savingProductAccountingForm" completed>
<ng-template matStepLabel>ACCOUNTING</ng-template>
<mifosx-saving-product-accounting-step
[savingProductsTemplate]="savingProductAndTemplate"
[accountingRuleData]="accountingRuleData"
[isDormancyTrackingActive]="savingProductSettingsForm.get('isDormancyTrackingActive')"
[savingProductFormValid]="savingProductFormValidAndNotPristine"
>
</mifosx-saving-product-accounting-step>
</mat-step>
<mat-step state="preview" *ngIf="savingProductFormValidAndNotPristine" completed>
<ng-template matStepLabel>PREVIEW</ng-template>
<mifosx-saving-product-preview-step
[savingProductsTemplate]="savingProductAndTemplate"
[accountingRuleData]="accountingRuleData"
[savingProduct]="savingProduct"
(submit)="submit()"
>
</mifosx-saving-product-preview-step>
</mat-step>
</mat-horizontal-stepper>
</div>
@@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { EditSavingProductComponent } from './edit-saving-product.component';
describe('EditSavingProductComponent', () => {
let component: EditSavingProductComponent;
let fixture: ComponentFixture<EditSavingProductComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ EditSavingProductComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(EditSavingProductComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
@@ -0,0 +1,104 @@
import { Component, OnInit, ViewChild } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { SavingProductDetailsStepComponent } from '../saving-product-stepper/saving-product-details-step/saving-product-details-step.component';
import { SavingProductCurrencyStepComponent } from '../saving-product-stepper/saving-product-currency-step/saving-product-currency-step.component';
import { SavingProductTermsStepComponent } from '../saving-product-stepper/saving-product-terms-step/saving-product-terms-step.component';
import { SavingProductSettingsStepComponent } from '../saving-product-stepper/saving-product-settings-step/saving-product-settings-step.component';
import { SavingProductChargesStepComponent } from '../saving-product-stepper/saving-product-charges-step/saving-product-charges-step.component';
import { SavingProductAccountingStepComponent } from '../saving-product-stepper/saving-product-accounting-step/saving-product-accounting-step.component';
import { ProductsService } from 'app/products/products.service';
@Component({
selector: 'mifosx-edit-saving-product',
templateUrl: './edit-saving-product.component.html',
styleUrls: ['./edit-saving-product.component.scss']
})
export class EditSavingProductComponent implements OnInit {
@ViewChild(SavingProductDetailsStepComponent) savingProductDetailsStep: SavingProductDetailsStepComponent;
@ViewChild(SavingProductCurrencyStepComponent) savingProductCurrencyStep: SavingProductCurrencyStepComponent;
@ViewChild(SavingProductTermsStepComponent) savingProductTermsStep: SavingProductTermsStepComponent;
@ViewChild(SavingProductSettingsStepComponent) savingProductSettingsStep: SavingProductSettingsStepComponent;
@ViewChild(SavingProductChargesStepComponent) savingProductChargesStep: SavingProductChargesStepComponent;
@ViewChild(SavingProductAccountingStepComponent) savingProductAccountingStep: SavingProductAccountingStepComponent;
savingProductAndTemplate: any;
accountingRuleData = ['None', 'Cash'];
constructor(private route: ActivatedRoute,
private productsService: ProductsService,
private router: Router) {
this.route.data.subscribe((data: { savingProductAndTemplate: any }) => {
this.savingProductAndTemplate = data.savingProductAndTemplate;
});
}
ngOnInit() {
}
get savingProductDetailsForm() {
return this.savingProductDetailsStep.savingProductDetailsForm;
}
get savingProductCurrencyForm() {
return this.savingProductCurrencyStep.savingProductCurrencyForm;
}
get savingProductTermsForm() {
return this.savingProductTermsStep.savingProductTermsForm;
}
get savingProductSettingsForm() {
return this.savingProductSettingsStep.savingProductSettingsForm;
}
get savingProductAccountingForm() {
return this.savingProductAccountingStep.savingProductAccountingForm;
}
get savingProductFormValidAndNotPristine() {
return (
this.savingProductDetailsForm.valid &&
this.savingProductCurrencyForm.valid &&
this.savingProductTermsForm.valid &&
this.savingProductSettingsForm.valid &&
this.savingProductAccountingForm.valid &&
(
!this.savingProductDetailsForm.pristine ||
!this.savingProductCurrencyForm.pristine ||
!this.savingProductTermsForm.pristine ||
!this.savingProductSettingsForm.pristine ||
!this.savingProductChargesStep.pristine ||
!this.savingProductAccountingForm.pristine
)
);
}
get savingProduct() {
return {
...this.savingProductDetailsStep.savingProductDetails,
...this.savingProductCurrencyStep.savingProductCurrency,
...this.savingProductTermsStep.savingProductTerms,
...this.savingProductSettingsStep.savingProductSettings,
...this.savingProductChargesStep.savingProductCharges,
...this.savingProductAccountingStep.savingProductAccounting
};
}
submit() {
// TODO: Update once language and date settings are setup
const savingProduct = {
...this.savingProduct,
charges: this.savingProduct.charges.map((charge: any) => ({ id: charge.id })),
locale: 'en' // locale required for nominalAnnualInterestRate
};
delete savingProduct.advancedAccountingRules;
this.productsService.updateSavingProduct(this.savingProductAndTemplate.id, savingProduct)
.subscribe((response: any) => {
this.router.navigate(['../../', response.resourceId], { relativeTo: this.route });
});
}
}
@@ -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 '../../products.service';
/**
* Saving product and template data resolver.
*/
@Injectable()
export class SavingProductAndTemplateResolver implements Resolve<Object> {
/**
* @param {ProductsService} productsService Products service.
*/
constructor(private productsService: ProductsService) {}
/**
* Returns the saving product and template data.
* @returns {Observable<any>}
*/
resolve(route: ActivatedRouteSnapshot): Observable<any> {
const savingProductId = route.paramMap.get('id');
return this.productsService.getSavingProduct(savingProductId, true);
}
}
@@ -48,6 +48,36 @@ export class SavingProductAccountingStepComponent implements OnInit {
this.incomeAccountData = this.savingProductsTemplate.accountingMappingOptions.incomeAccountOptions || [];
this.expenseAccountData = this.savingProductsTemplate.accountingMappingOptions.expenseAccountOptions || [];
this.liabilityAccountData = this.savingProductsTemplate.accountingMappingOptions.liabilityAccountOptions || [];
this.savingProductAccountingForm.patchValue({
'accountingRule': this.savingProductsTemplate.accountingRule.id
});
if (this.savingProductsTemplate.accountingRule.id === 2) {
this.savingProductAccountingForm.patchValue({
'savingsReferenceAccountId': this.savingProductsTemplate.accountingMappings.savingsReferenceAccount.id,
'overdraftPortfolioControlId': this.savingProductsTemplate.accountingMappings.overdraftPortfolioControl.id,
'savingsControlAccountId': this.savingProductsTemplate.accountingMappings.savingsControlAccount.id,
'transfersInSuspenseAccountId': this.savingProductsTemplate.accountingMappings.transfersInSuspenseAccount.id,
'interestOnSavingsAccountId': this.savingProductsTemplate.accountingMappings.interestOnSavingsAccount.id,
'writeOffAccountId': this.savingProductsTemplate.accountingMappings.writeOffAccount.id,
'incomeFromFeeAccountId': this.savingProductsTemplate.accountingMappings.incomeFromFeeAccount.id,
'incomeFromPenaltyAccountId': this.savingProductsTemplate.accountingMappings.incomeFromPenaltyAccount.id,
'incomeFromInterestId': this.savingProductsTemplate.accountingMappings.incomeFromInterest.id,
'escheatLiabilityId': this.savingProductsTemplate.accountingMappings.escheatLiabilityAccount.id,
'advancedAccountingRules': (this.savingProductsTemplate.paymentChannelToFundSourceMappings || this.savingProductsTemplate.feeToIncomeAccountMappings || this.savingProductsTemplate.penaltyToIncomeAccountMappings) ? true : false
});
this.savingProductAccountingForm.setControl('paymentChannelToFundSourceMappings',
this.formBuilder.array((this.savingProductsTemplate.paymentChannelToFundSourceMappings || []).map((paymentFundSource: any) =>
({ paymentTypeId: paymentFundSource.paymentType.id, fundSourceAccountId: paymentFundSource.fundSourceAccount.id }))));
this.savingProductAccountingForm.setControl('feeToIncomeAccountMappings',
this.formBuilder.array((this.savingProductsTemplate.feeToIncomeAccountMappings || []).map((feesIncome: any) =>
({ chargeId: feesIncome.charge.id, incomeAccountId: feesIncome.incomeAccount.id }))));
this.savingProductAccountingForm.setControl('penaltyToIncomeAccountMappings',
this.formBuilder.array((this.savingProductsTemplate.penaltyToIncomeAccountMappings || []).map((penaltyIncome: any) =>
({ chargeId: penaltyIncome.charge.id, incomeAccountId: penaltyIncome.incomeAccount.id }))));
}
}
createsavingProductAccountingForm() {
@@ -124,12 +154,19 @@ export class SavingProductAccountingStepComponent implements OnInit {
return this.savingProductAccountingForm.get('penaltyToIncomeAccountMappings') as FormArray;
}
setSavingProductAccountingFormDirty() {
if (this.savingProductAccountingForm.pristine) {
this.savingProductAccountingForm.markAsDirty();
}
}
add(formType: string, formArray: FormArray) {
const data = { ...this.getData(formType), pristine: false };
const dialogRef = this.dialog.open(FormDialogComponent, { data });
dialogRef.afterClosed().subscribe((response: any) => {
if (response.data) {
formArray.push(response.data);
this.setSavingProductAccountingFormDirty();
}
});
}
@@ -140,6 +177,7 @@ export class SavingProductAccountingStepComponent implements OnInit {
dialogRef.afterClosed().subscribe((response: any) => {
if (response.data) {
formArray.at(index).patchValue(response.data.value);
this.setSavingProductAccountingFormDirty();
}
});
}
@@ -151,6 +189,7 @@ export class SavingProductAccountingStepComponent implements OnInit {
dialogRef.afterClosed().subscribe((response: any) => {
if (response.delete) {
formArray.removeAt(index);
this.setSavingProductAccountingFormDirty();
}
});
}
@@ -19,13 +19,16 @@ export class SavingProductChargesStepComponent implements OnInit {
chargesDataSource: {}[];
displayedColumns: string[] = ['name', 'chargeCalculationType', 'amount', 'chargeTimeType', 'action'];
pristine = true;
constructor(public dialog: MatDialog) {
}
ngOnInit() {
this.chargeData = this.savingProductsTemplate.chargeOptions;
this.chargesDataSource = [];
this.chargesDataSource = this.savingProductsTemplate.charges || [];
this.pristine = true;
this.currencyCode.valueChanges.subscribe(() => this.chargesDataSource = []);
}
@@ -33,6 +36,7 @@ export class SavingProductChargesStepComponent implements OnInit {
addCharge(charge: any) {
this.chargesDataSource = this.chargesDataSource.concat([charge.value]);
charge.value = '';
this.pristine = false;
}
deleteCharge(charge: any) {
@@ -43,6 +47,7 @@ export class SavingProductChargesStepComponent implements OnInit {
if (response.delete) {
this.chargesDataSource.splice(this.chargesDataSource.indexOf(charge), 1);
this.chargesDataSource = this.chargesDataSource.concat([]);
this.pristine = false;
}
});
}
@@ -22,8 +22,9 @@ export class SavingProductCurrencyStepComponent implements OnInit {
this.currencyData = this.savingProductsTemplate.currencyOptions;
this.savingProductCurrencyForm.patchValue({
'currencyCode': this.currencyData[0].code,
'digitsAfterDecimal': 2
'currencyCode': this.savingProductsTemplate.currency.code || this.currencyData[0].code,
'digitsAfterDecimal': this.savingProductsTemplate.currency.code ? this.savingProductsTemplate.currency.decimalPlaces : 2,
'inMultiplesOf': this.savingProductsTemplate.currency.inMultiplesOf
});
}
@@ -1,6 +1,6 @@
<form [formGroup]="savingProductDetailsForm">
<div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" fxLayoutAlign.gt-sm="start center">
<div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
<mat-form-field fxFlex="48%">
<mat-label>Product Name</mat-label>
@@ -1,4 +1,4 @@
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, Input } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
@Component({
@@ -8,6 +8,8 @@ import { FormGroup, FormBuilder, Validators } from '@angular/forms';
})
export class SavingProductDetailsStepComponent implements OnInit {
@Input() savingProductsTemplate: any;
savingProductDetailsForm: FormGroup;
constructor(private formBuilder: FormBuilder) {
@@ -15,6 +17,13 @@ export class SavingProductDetailsStepComponent implements OnInit {
}
ngOnInit() {
if (this.savingProductsTemplate) {
this.savingProductDetailsForm.patchValue({
'name': this.savingProductsTemplate.name,
'shortName': this.savingProductsTemplate.shortName,
'description': this.savingProductsTemplate.description
});
}
}
createSavingProductDetailsForm() {
@@ -23,6 +23,26 @@ export class SavingProductSettingsStepComponent implements OnInit {
ngOnInit() {
this.lockinPeriodFrequencyTypeData = this.savingProductsTemplate.lockinPeriodFrequencyTypeOptions;
this.taxGroupData = this.savingProductsTemplate.taxGroupOptions;
this.savingProductSettingsForm.patchValue({
'minRequiredOpeningBalance': this.savingProductsTemplate.minRequiredOpeningBalance,
'lockinPeriodFrequency': this.savingProductsTemplate.lockinPeriodFrequency,
'lockinPeriodFrequencyType': this.savingProductsTemplate.lockinPeriodFrequencyType && this.savingProductsTemplate.lockinPeriodFrequencyType.id,
'withdrawalFeeForTransfers': this.savingProductsTemplate.withdrawalFeeForTransfers,
'minBalanceForInterestCalculation': this.savingProductsTemplate.minBalanceForInterestCalculation,
'enforceMinRequiredBalance': this.savingProductsTemplate.enforceMinRequiredBalance,
'minRequiredBalance': this.savingProductsTemplate.minRequiredBalance,
'allowOverdraft': this.savingProductsTemplate.allowOverdraft,
'minOverdraftForInterestCalculation': this.savingProductsTemplate.minOverdraftForInterestCalculation,
'nominalAnnualInterestRateOverdraft': this.savingProductsTemplate.nominalAnnualInterestRateOverdraft,
'overdraftLimit': this.savingProductsTemplate.overdraftLimit,
'withHoldTax': this.savingProductsTemplate.withHoldTax,
'taxGroupId': this.savingProductsTemplate.taxGroup && this.savingProductsTemplate.taxGroup.id,
'isDormancyTrackingActive': this.savingProductsTemplate.isDormancyTrackingActive,
'daysToInactive': this.savingProductsTemplate.daysToInactive,
'daysToDormancy': this.savingProductsTemplate.daysToDormancy,
'daysToEscheat': this.savingProductsTemplate.daysToEscheat
});
}
createSavingProductSettingsForm() {
@@ -28,10 +28,11 @@ export class SavingProductTermsStepComponent implements OnInit {
this.interestCalculationDaysInYearTypeData = this.savingProductsTemplate.interestCalculationDaysInYearTypeOptions;
this.savingProductTermsForm.patchValue({
'interestCompoundingPeriodType': this.interestCompoundingPeriodTypeData[0].id,
'interestPostingPeriodType': this.interestPostingPeriodTypeData[0].id,
'interestCalculationType': this.interestCalculationTypeData[0].id,
'interestCalculationDaysInYearType': this.interestCalculationDaysInYearTypeData[0].id
'nominalAnnualInterestRate': this.savingProductsTemplate.nominalAnnualInterestRate,
'interestCompoundingPeriodType': this.savingProductsTemplate.interestCompoundingPeriodType.id,
'interestPostingPeriodType': this.savingProductsTemplate.interestPostingPeriodType.id,
'interestCalculationType': this.savingProductsTemplate.interestCalculationType.id,
'interestCalculationDaysInYearType': this.savingProductsTemplate.interestCalculationDaysInYearType.id
});
}
@@ -1,5 +1,5 @@
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
<button mat-raised-button color="primary">
<button mat-raised-button color="primary" [routerLink]="['edit']">
<fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
Edit
</button>