+106
@@ -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>
|
||||
+25
@@ -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();
|
||||
});
|
||||
});
|
||||
+146
@@ -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 });
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user