feat: add edit recurring deposit account (#1023)

Fixes: #1017
This commit is contained in:
Muskan Khedia
2020-07-08 12:57:21 +05:30
committed by GitHub
parent 74b219fe00
commit fc2b352311
16 changed files with 438 additions and 18 deletions
@@ -0,0 +1,106 @@
<div class="container">
<mat-horizontal-stepper class="mat-elevation-z8" labelPosition="bottom" #recurringDepositAccountStepper>
<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]="recurringDepositAccountDetailsForm">
<ng-template matStepLabel>DETAILS</ng-template>
<mifosx-recurring-deposits-account-details-step
[recurringDepositsAccountTemplate]="recurringDepositsAccountAndTemplate"
(recurringDepositsAccountProductTemplate)="setTemplate($event)">
</mifosx-recurring-deposits-account-details-step>
</mat-step>
<mat-step [stepControl]="recurringDepositAccountCurrencyForm">
<ng-template matStepLabel>CURRENCY</ng-template>
<mifosx-recurring-deposits-account-currency-step
[recurringDepositsAccountTemplate]="recurringDepositsAccountAndTemplate"
[recurringDepositsAccountProductTemplate]="recurringDepositsAccountProductTemplate">
</mifosx-recurring-deposits-account-currency-step>
</mat-step>
<mat-step [stepControl]="recurringDepositAccountTermsForm">
<ng-template matStepLabel>TERMS</ng-template>
<mifosx-recurring-deposits-account-terms-step
[recurringDepositsAccountTemplate]="recurringDepositsAccountAndTemplate"
[recurringDepositsAccountProductTemplate]="recurringDepositsAccountProductTemplate">
</mifosx-recurring-deposits-account-terms-step>
</mat-step>
<mat-step [stepControl]="recurringDepositAccountSettingsForm">
<ng-template matStepLabel>SETTINGS</ng-template>
<mifosx-recurring-deposits-account-settings-step
[recurringDepositsAccountTemplate]="recurringDepositsAccountAndTemplate"
[recurringDepositsAccountProductTemplate]="recurringDepositsAccountProductTemplate">
</mifosx-recurring-deposits-account-settings-step>
</mat-step>
<mat-step>
<ng-template matStepLabel>INTEREST RATE CHART</ng-template>
<mifosx-recurring-deposits-account-interest-rate-chart-step
[recurringDepositsAccountTemplate]="recurringDepositsAccountAndTemplate"
[recurringDepositsAccountProductTemplate]="recurringDepositsAccountProductTemplate">
</mifosx-recurring-deposits-account-interest-rate-chart-step>
</mat-step>
<mat-step>
<ng-template matStepLabel>CHARGES</ng-template>
<mifosx-recurring-deposits-account-charges-step
[recurringDepositsAccountTemplate]="recurringDepositsAccountAndTemplate"
[recurringDepositsAccountProductTemplate]="recurringDepositsAccountProductTemplate"
[recurringDepositAccountFormValid]="recurringDepositAccountFormValidAndNotPristine"
[currencyCode]="recurringDepositAccountCurrencyForm.get('currencyCode')">
</mifosx-recurring-deposits-account-charges-step>
</mat-step>
<mat-step state="preview" *ngIf="recurringDepositAccountFormValidAndNotPristine" completed>
<ng-template matStepLabel>PREVIEW</ng-template>
<mifosx-recurring-deposits-account-preview-step
[recurringDepositsAccountTemplate]="recurringDepositsAccountAndTemplate"
[recurringDepositsAccountProductTemplate]="recurringDepositsAccountProductTemplate"
[recurringDepositAccountData]="recurringDepositAccountData" (submit)="submit()">
</mifosx-recurring-deposits-account-preview-step>
</mat-step>
</mat-horizontal-stepper>
</div>
@@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { EditRecurringDepositAccountComponent } from './edit-recurring-deposit-account.component';
describe('EditRecurringDepositAccountComponent', () => {
let component: EditRecurringDepositAccountComponent;
let fixture: ComponentFixture<EditRecurringDepositAccountComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ EditRecurringDepositAccountComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(EditRecurringDepositAccountComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
@@ -0,0 +1,146 @@
/** Angular Imports */
import { Component, OnInit, ViewChild } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { DatePipe } from '@angular/common';
/** Custom Services */
import { RecurringDepositsService } from '../recurring-deposits.service';
/** Step Components */
import { RecurringDepositsAccountDetailsStepComponent } from '../recurring-deposits-account-stepper/recurring-deposits-account-details-step/recurring-deposits-account-details-step.component';
import { RecurringDepositsAccountTermsStepComponent } from '../recurring-deposits-account-stepper/recurring-deposits-account-terms-step/recurring-deposits-account-terms-step.component';
import { RecurringDepositsAccountCurrencyStepComponent } from '../recurring-deposits-account-stepper/recurring-deposits-account-currency-step/recurring-deposits-account-currency-step.component';
import { RecurringDepositsAccountSettingsStepComponent } from '../recurring-deposits-account-stepper/recurring-deposits-account-settings-step/recurring-deposits-account-settings-step.component';
import { RecurringDepositsAccountChargesStepComponent } from '../recurring-deposits-account-stepper/recurring-deposits-account-charges-step/recurring-deposits-account-charges-step.component';
/**
* Edit new recurring deposit account
*/
@Component({
selector: 'mifosx-edit-recurring-deposit-account',
templateUrl: './edit-recurring-deposit-account.component.html',
styleUrls: ['./edit-recurring-deposit-account.component.scss']
})
export class EditRecurringDepositAccountComponent implements OnInit {
/** Imports all the step component */
@ViewChild(RecurringDepositsAccountDetailsStepComponent) recurringDepositsAccountDetailsStep: RecurringDepositsAccountDetailsStepComponent;
@ViewChild(RecurringDepositsAccountCurrencyStepComponent) recurringDepositAccountCurrencyStep: RecurringDepositsAccountCurrencyStepComponent;
@ViewChild(RecurringDepositsAccountTermsStepComponent) recurringDepositAccountTermsStep: RecurringDepositsAccountTermsStepComponent;
@ViewChild(RecurringDepositsAccountSettingsStepComponent) recurringDepositAccountSettingsStep: RecurringDepositsAccountSettingsStepComponent;
@ViewChild(RecurringDepositsAccountChargesStepComponent) recurringDepositAccountChargesStep: RecurringDepositsAccountChargesStepComponent;
/** Recurring Deposits Account And Template */
recurringDepositsAccountAndTemplate: any;
/** Recurring Deposit Account Product Template */
recurringDepositsAccountProductTemplate: any;
constructor(private route: ActivatedRoute,
private router: Router,
private datePipe: DatePipe,
private recurringDepositsService: RecurringDepositsService
) {
this.route.data.subscribe((data: { recurringDepositsAccountAndTemplate: any }) => {
this.recurringDepositsAccountAndTemplate = data.recurringDepositsAccountAndTemplate;
});
}
/**
* Sets recurring deposits account product template.
* @param {any} $event API response
*/
setTemplate($event: any) {
this.recurringDepositsAccountProductTemplate = $event;
}
ngOnInit() {
}
/** Get Recurring Deposit Account Details Form Data */
get recurringDepositAccountDetailsForm() {
return this.recurringDepositsAccountDetailsStep.recurringDepositAccountDetailsForm;
}
/** Get Recurring Deposit Account Currency Form Data */
get recurringDepositAccountCurrencyForm() {
return this.recurringDepositAccountCurrencyStep.recurringDepositAccountCurrencyForm;
}
/** Get Recurring Deposit Account Terms Form Data */
get recurringDepositAccountTermsForm() {
return this.recurringDepositAccountTermsStep.recurringDepositAccountTermsForm;
}
/** Get Recurring Deposit Account Settings Form Data */
get recurringDepositAccountSettingsForm() {
return this.recurringDepositAccountSettingsStep.recurringDepositAccountSettingsForm;
}
// Checks if stepper is valid and not pristine.
get recurringDepositAccountFormValidAndNotPristine() {
return (
this.recurringDepositAccountDetailsForm.valid &&
this.recurringDepositAccountTermsForm.valid &&
this.recurringDepositAccountSettingsForm.valid &&
(
!this.recurringDepositAccountDetailsForm.pristine ||
!this.recurringDepositAccountTermsForm.pristine ||
!this.recurringDepositAccountSettingsForm.pristine ||
!this.recurringDepositAccountChargesStep.pristine
)
);
}
/** Retrieves Data of all the forms */
get recurringDepositAccountData() {
return {
...this.recurringDepositsAccountDetailsStep.recurringDepositAccountDetails,
...this.recurringDepositAccountCurrencyStep.recurringDepositAccountCurrency,
...this.recurringDepositAccountTermsStep.recurringDepositAccountTerms,
...this.recurringDepositAccountSettingsStep.recurringDepositAccountSettings,
...this.recurringDepositAccountChargesStep.recurringDepositAccountCharges,
};
}
/** Retrieves Data of all forms except Currency to submit the data */
get recurringDepositAccount() {
return {
...this.recurringDepositsAccountDetailsStep.recurringDepositAccountDetails,
...this.recurringDepositAccountTermsStep.recurringDepositAccountTerms,
...this.recurringDepositAccountSettingsStep.recurringDepositAccountSettings,
...this.recurringDepositAccountChargesStep.recurringDepositAccountCharges,
};
}
/**
* Submits the recurring deposit form to create a new recurring deposit account
*/
submit() {
const locale = 'en';
const dateFormat = 'dd MMMM yyyy';
const monthDayFormat = 'dd MMMM';
const recurringDepositAccount = {
...this.recurringDepositAccount,
clientId: this.recurringDepositsAccountAndTemplate.clientId,
charges: this.recurringDepositAccount.charges.map((charge: any) => ({
chargeId: charge.id,
amount: charge.amount,
dueDate: charge.dueDate && this.datePipe.transform(charge.dueDate, dateFormat),
feeOnMonthDay: charge.feeOnMonthDay,
feeInterval: charge.feeInterval
})),
isCalendarInherited: this.recurringDepositAccount.recurringDepositAccount ? this.recurringDepositAccount.recurringDepositAccount : false,
submittedOnDate: this.datePipe.transform(this.recurringDepositAccount.submittedOnDate, dateFormat),
expectedFirstDepositOnDate: this.datePipe.transform(this.recurringDepositAccount.expectedFirstDepositOnDate, dateFormat),
dateFormat,
monthDayFormat,
locale
};
this.recurringDepositsService.updateRecurringDepositAccount(this.recurringDepositsAccountAndTemplate.id, recurringDepositAccount).subscribe((response: any) => {
this.router.navigate(['../'], { relativeTo: this.route });
});
}
}