feat: add edit recurring deposit product (#1162)

Fixes: #468

src/app/products/products-routing.module.ts

@@ -76,6 +76,8 @@ import { ChargesTemplateResolver } from './charges/charges-template.resolver';
 import { TaxGroupResolver } from './manage-tax-groups/tax-group.resolver';
 import { DividendsResolver } from './share-products/dividends-share-product/dividends.resolver';
 import { RecurringDepositProductsTemplateResolver } from './recurring-deposit-products/recurring-deposit-products-template.resolver';
+import { EditRecurringDepositProductComponent } from './recurring-deposit-products/edit-recurring-deposit-product/edit-recurring-deposit-product.component';
+import { RecurringDepositProductAndTemplateResolver } from './recurring-deposit-products/edit-recurring-deposit-product/recurring-deposit-product-and-template.resolver';
 
 /** Products Routes */
 const routes: Routes = [
@@ -304,6 +306,14 @@ const routes: Routes = [
           path: 'recurring-deposit-products',
           data: { title:  extract('Recurring Deposit Products'), breadcrumb: 'Recurring Deposit Products' },
           children: [
+            {
+              path: 'create',
+              component: CreateRecurringDepositProductComponent,
+              data: { title: extract('Create Recurring Deposit Product'), breadcrumb: 'Create' },
+              resolve: {
+                recurringDepositProductsTemplate: RecurringDepositProductsTemplateResolver
+              }
+            },
             {
               path: '',
               component: RecurringDepositProductsComponent,
@@ -322,16 +332,16 @@ const routes: Routes = [
                     recurringDepositProduct: RecurringDepositProductResolver,
                     recurringDepositProductsTemplate: RecurringDepositProductsTemplateResolver
                   }
+                },
+                {
+                  path: 'edit',
+                  data: { title: extract('Edit Recurring Deposit Product'), breadcrumb: 'edit', routeParamBreadcrumb: false },
+                  component: EditRecurringDepositProductComponent,
+                  resolve: {
+                    recurringDepositProductAndTemplate: RecurringDepositProductAndTemplateResolver
+                  }
                 }
               ]
-            },
-            {
-              path: 'create',
-              component: CreateRecurringDepositProductComponent,
-              data: { title: extract('Create Recurring Deposit Product'), breadcrumb: 'Create' },
-              resolve: {
-                recurringDepositProductsTemplate: RecurringDepositProductsTemplateResolver
-              }
             }
           ]
         },
@@ -496,7 +506,8 @@ const routes: Routes = [
     EditTaxComponentComponent,
     TaxGroupResolver,
     DividendsResolver,
-    RecurringDepositProductsTemplateResolver
+    RecurringDepositProductsTemplateResolver,
+    RecurringDepositProductAndTemplateResolver
   ]
 })
 export class ProductsRoutingModule { }

src/app/products/products.module.ts

@@ -86,6 +86,7 @@ import { RecurringDepositProductInterestRateChartStepComponent } from './recurri
 import { RecurringDepositProductPreviewStepComponent } from './recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-preview-step/recurring-deposit-product-preview-step.component';
 import { RecurringDepositProductSettingsStepComponent } from './recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-settings-step/recurring-deposit-product-settings-step.component';
 import { RecurringDepositProductTermsStepComponent } from './recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-terms-step/recurring-deposit-product-terms-step.component';
+import { EditRecurringDepositProductComponent } from './recurring-deposit-products/edit-recurring-deposit-product/edit-recurring-deposit-product.component';
 
 /**
  * Products Module
@@ -175,7 +176,8 @@ import { RecurringDepositProductTermsStepComponent } from './recurring-deposit-p
     RecurringDepositProductInterestRateChartStepComponent,
     RecurringDepositProductPreviewStepComponent,
     RecurringDepositProductSettingsStepComponent,
-    RecurringDepositProductTermsStepComponent
+    RecurringDepositProductTermsStepComponent,
+    EditRecurringDepositProductComponent
   ],
   entryComponents: [
     DepositProductIncentiveFormDialogComponent,

src/app/products/products.service.ts

@@ -277,8 +277,17 @@ export class ProductsService {
     return this.http.get(`/interestratecharts`, {params: httpParams});
   }
 
-  createRecurringDepositProduct(recurringDepositProduct: string): Observable<any> {
+  createRecurringDepositProduct(recurringDepositProduct: any): Observable<any> {
     return this.http.post('/recurringdepositproducts', recurringDepositProduct);
   }
 
+  getRecurringDepositProductAndTemplate(recurringDepositProductId: any) {
+    const httpParams = new HttpParams().set('template', 'true');
+    return this.http.get(`/recurringdepositproducts/${recurringDepositProductId}`, { params: httpParams });
+  }
+
+  updateRecurringDepositProduct(recurringDepositProductId: any, recurringDepositProduct: any): Observable<any> {
+    return this.http.put(`/recurringdepositproducts/${recurringDepositProductId}`, recurringDepositProduct);
+  }
+
 }

src/app/products/recurring-deposit-products/edit-recurring-deposit-product/edit-recurring-deposit-product.component.html

@@ -0,0 +1,112 @@
+<div class="container">
+
+  <mat-horizontal-stepper class="mat-elevation-z8" labelPosition="bottom" #recurringDepositProductStepper>
+
+    <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]="recurringDepositProductDetailsForm">
+
+      <ng-template matStepLabel>DETAILS</ng-template>
+
+      <mifosx-recurring-deposit-product-details-step
+      [recurringDepositProductsTemplate]="recurringDepositProductsTemplate">
+    </mifosx-recurring-deposit-product-details-step>
+
+    </mat-step>
+
+    <mat-step [stepControl]="recurringDepositProductCurrencyForm">
+
+      <ng-template matStepLabel>CURRENCY</ng-template>
+
+      <mifosx-recurring-deposit-product-currency-step
+        [recurringDepositProductsTemplate]="recurringDepositProductsTemplate">
+      </mifosx-recurring-deposit-product-currency-step>
+
+    </mat-step>
+
+    <mat-step [stepControl]="recurringDepositProductTermsForm">
+
+      <ng-template matStepLabel>TERMS</ng-template>
+
+      <mifosx-recurring-deposit-product-terms-step
+        [recurringDepositProductsTemplate]="recurringDepositProductsTemplate">
+      </mifosx-recurring-deposit-product-terms-step>
+
+    </mat-step>
+
+    <mat-step [stepControl]="recurringDepositProductSettingsForm">
+
+      <ng-template matStepLabel>SETTINGS</ng-template>
+
+      <mifosx-recurring-deposit-product-settings-step
+        [recurringDepositProductsTemplate]="recurringDepositProductsTemplate">
+      </mifosx-recurring-deposit-product-settings-step>
+
+    </mat-step>
+
+    <mat-step [stepControl]="recurringDepositProductInterestRateChartForm">
+
+      <ng-template matStepLabel>INTEREST RATE CHART</ng-template>
+
+      <mifosx-recurring-deposit-product-interest-rate-chart-step
+        [recurringDepositProductsTemplate]="recurringDepositProductsTemplate">
+      </mifosx-recurring-deposit-product-interest-rate-chart-step>
+
+    </mat-step>
+
+    <mat-step>
+
+      <ng-template matStepLabel>CHARGES</ng-template>
+
+      <mifosx-recurring-deposit-product-charges-step
+        [recurringDepositProductsTemplate]="recurringDepositProductsTemplate"
+        [currencyCode]="recurringDepositProductCurrencyForm.get('currencyCode')">
+      </mifosx-recurring-deposit-product-charges-step>
+
+    </mat-step>
+
+    <mat-step [stepControl]="recurringDepositProductAccountingForm">
+
+      <ng-template matStepLabel>ACCOUNTING</ng-template>
+
+      <mifosx-recurring-deposit-product-accounting-step
+        [recurringDepositProductsTemplate]="recurringDepositProductsTemplate" [accountingRuleData]="accountingRuleData"
+        [recurringDepositProductFormValid]="recurringDepositProductFormValidAndNotPrinstine">
+      </mifosx-recurring-deposit-product-accounting-step>
+
+    </mat-step>
+
+    <mat-step state="preview" *ngIf="recurringDepositProductFormValidAndNotPrinstine" completed>
+
+      <ng-template matStepLabel>PREVIEW</ng-template>
+
+      <mifosx-recurring-deposit-product-preview-step
+        [recurringDepositProductsTemplate]="recurringDepositProductsTemplate"
+        [chartSlabsDisplayedColumns]="recurringDepositProductInterestRateChartStep.chartSlabsDisplayedColumns"
+        [accountingRuleData]="accountingRuleData" [recurringDepositProduct]="recurringDepositProduct"
+        (submit)="submit()">
+      </mifosx-recurring-deposit-product-preview-step>
+
+    </mat-step>
+
+  </mat-horizontal-stepper>
+
+</div>

src/app/products/recurring-deposit-products/edit-recurring-deposit-product/edit-recurring-deposit-product.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EditRecurringDepositProductComponent } from './edit-recurring-deposit-product.component';
+
+describe('EditRecurringDepositProductComponent', () => {
+  let component: EditRecurringDepositProductComponent;
+  let fixture: ComponentFixture<EditRecurringDepositProductComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ EditRecurringDepositProductComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EditRecurringDepositProductComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/products/recurring-deposit-products/edit-recurring-deposit-product/edit-recurring-deposit-product.component.ts

@@ -0,0 +1,115 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+
+import { RecurringDepositProductDetailsStepComponent } from '../recurring-deposit-product-stepper/recurring-deposit-product-details-step/recurring-deposit-product-details-step.component';
+import { RecurringDepositProductCurrencyStepComponent } from '../recurring-deposit-product-stepper/recurring-deposit-product-currency-step/recurring-deposit-product-currency-step.component';
+import { RecurringDepositProductTermsStepComponent } from '../recurring-deposit-product-stepper/recurring-deposit-product-terms-step/recurring-deposit-product-terms-step.component';
+import { RecurringDepositProductSettingsStepComponent } from '../recurring-deposit-product-stepper/recurring-deposit-product-settings-step/recurring-deposit-product-settings-step.component';
+import { RecurringDepositProductInterestRateChartStepComponent } from '../recurring-deposit-product-stepper/recurring-deposit-product-interest-rate-chart-step/recurring-deposit-product-interest-rate-chart-step.component';
+import { RecurringDepositProductChargesStepComponent } from '../recurring-deposit-product-stepper/recurring-deposit-product-charges-step/recurring-deposit-product-charges-step.component';
+import { RecurringDepositProductAccountingStepComponent } from '../recurring-deposit-product-stepper/recurring-deposit-product-accounting-step/recurring-deposit-product-accounting-step.component';
+
+import { ProductsService } from 'app/products/products.service';
+
+@Component({
+  selector: 'mifosx-edit-recurring-deposit-product',
+  templateUrl: './edit-recurring-deposit-product.component.html',
+  styleUrls: ['./edit-recurring-deposit-product.component.scss']
+})
+export class EditRecurringDepositProductComponent implements OnInit {
+
+  @ViewChild(RecurringDepositProductDetailsStepComponent) recurringDepositProductDetailsStep: RecurringDepositProductDetailsStepComponent;
+  @ViewChild(RecurringDepositProductCurrencyStepComponent) recurringDepositProductCurrencyStep: RecurringDepositProductCurrencyStepComponent;
+  @ViewChild(RecurringDepositProductTermsStepComponent) recurringDepositProductTermsStep: RecurringDepositProductTermsStepComponent;
+  @ViewChild(RecurringDepositProductSettingsStepComponent) recurringDepositProductSettingsStep: RecurringDepositProductSettingsStepComponent;
+  @ViewChild(RecurringDepositProductInterestRateChartStepComponent) recurringDepositProductInterestRateChartStep: RecurringDepositProductInterestRateChartStepComponent;
+  @ViewChild(RecurringDepositProductChargesStepComponent) recurringDepositProductChargesStep: RecurringDepositProductChargesStepComponent;
+  @ViewChild(RecurringDepositProductAccountingStepComponent) recurringDepositProductAccountingStep: RecurringDepositProductAccountingStepComponent;
+
+  recurringDepositProductsTemplate: any;
+  accountingRuleData = ['None', 'Cash'];
+
+  constructor(private route: ActivatedRoute,
+    private productsService: ProductsService,
+    private router: Router) {
+    this.route.data.subscribe((data: { recurringDepositProductAndTemplate: any }) => {
+      this.recurringDepositProductsTemplate = data.recurringDepositProductAndTemplate;
+    });
+  }
+
+  ngOnInit() {
+  }
+
+  get recurringDepositProductDetailsForm() {
+    return this.recurringDepositProductDetailsStep.recurringDepositProductDetailsForm;
+  }
+
+  get recurringDepositProductCurrencyForm() {
+    return this.recurringDepositProductCurrencyStep.recurringDepositProductCurrencyForm;
+  }
+
+  get recurringDepositProductTermsForm() {
+    return this.recurringDepositProductTermsStep.recurringDepositProductTermsForm;
+  }
+
+  get recurringDepositProductSettingsForm() {
+    return this.recurringDepositProductSettingsStep.recurringDepositProductSettingsForm;
+  }
+
+  get recurringDepositProductInterestRateChartForm() {
+    return this.recurringDepositProductInterestRateChartStep.recurringDepositProductInterestRateChartForm;
+  }
+
+  get recurringDepositProductAccountingForm() {
+    return this.recurringDepositProductAccountingStep.recurringDepositProductAccountingForm;
+  }
+
+  get recurringDepositProductFormValidAndNotPrinstine() {
+    return (
+      this.recurringDepositProductDetailsForm.valid &&
+      this.recurringDepositProductCurrencyForm.valid &&
+      this.recurringDepositProductTermsForm.valid &&
+      this.recurringDepositProductSettingsForm.valid &&
+      this.recurringDepositProductInterestRateChartForm.valid &&
+      this.recurringDepositProductAccountingForm.valid &&
+      (
+        this.recurringDepositProductDetailsForm.pristine ||
+        this.recurringDepositProductCurrencyForm.pristine ||
+        this.recurringDepositProductTermsForm.pristine ||
+        this.recurringDepositProductSettingsForm.pristine ||
+        this.recurringDepositProductInterestRateChartForm.pristine ||
+        this.recurringDepositProductAccountingForm.pristine
+      )
+    );
+  }
+
+  get recurringDepositProduct() {
+    return {
+      ...this.recurringDepositProductDetailsStep.recurringDepositProductDetails,
+      ...this.recurringDepositProductCurrencyStep.recurringDepositProductCurrency,
+      ...this.recurringDepositProductTermsStep.recurringDepositProductTerms,
+      ...this.recurringDepositProductSettingsStep.recurringDepositProductSettings,
+      ...this.recurringDepositProductInterestRateChartStep.recurringDepositProductInterestRateChart,
+      ...this.recurringDepositProductChargesStep.recurringDepositProductCharges,
+      ...this.recurringDepositProductAccountingStep.recurringDepositProductAccounting
+    };
+  }
+
+  submit() {
+    // TODO: Update once language and date settings are setup
+    const recurringDepositProduct = {
+      ...this.recurringDepositProduct,
+      charges: this.recurringDepositProduct.charges.map((charge: any) => ({ id: charge.id })),
+      locale: 'en' // locale required for depositAmount
+    };
+    if (!recurringDepositProduct.description) {
+      recurringDepositProduct.description = '';
+    }
+    delete recurringDepositProduct.advancedAccountingRules;
+    this.productsService.updateRecurringDepositProduct(this.recurringDepositProductsTemplate.id, recurringDepositProduct)
+      .subscribe((response: any) => {
+        this.router.navigate(['../'], { relativeTo: this.route });
+      });
+  }
+
+}

src/app/products/recurring-deposit-products/edit-recurring-deposit-product/recurring-deposit-product-and-template.resolver.ts

@@ -0,0 +1,32 @@
+/** 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';
+
+/**
+ * Recurring Deposits Account Template resolver.
+ */
+@Injectable()
+export class RecurringDepositProductAndTemplateResolver implements Resolve<Object> {
+
+    /**
+     * @param {ProductsService} productsService Products service.
+     */
+    constructor(private productsService: ProductsService) { }
+
+    /**
+     * Returns the Recurring Deposits Product and Template.
+     * @param {ActivatedRouteSnapshot} route Route Snapshot
+     * @returns {Observable<any>}
+     */
+    resolve(route: ActivatedRouteSnapshot): Observable<any> {
+        const recurringDepositProductId = route.paramMap.get('id');
+        return this.productsService.getRecurringDepositProductAndTemplate(recurringDepositProductId);
+    }
+
+}

src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-accounting-step/recurring-deposit-product-accounting-step.component.ts

@@ -46,6 +46,60 @@ export class RecurringDepositProductAccountingStepComponent implements OnInit {
     this.incomeAccountData = this.recurringDepositProductsTemplate.accountingMappingOptions.incomeAccountOptions || [];
     this.expenseAccountData = this.recurringDepositProductsTemplate.accountingMappingOptions.expenseAccountOptions || [];
     this.liabilityAccountData = this.recurringDepositProductsTemplate.accountingMappingOptions.liabilityAccountOptions || [];
+    if (!(this.recurringDepositProductsTemplate === undefined) && this.recurringDepositProductsTemplate.id) {
+      this.assignAccountingStepData();
+    }
+  }
+
+  assignAccountingStepData() {
+    if (this.recurringDepositProductsTemplate.accountingRule.id === 2) {
+      this.recurringDepositProductAccountingForm.patchValue({
+        'accountingRule': this.recurringDepositProductsTemplate.accountingRule.id
+      });
+      this.recurringDepositProductAccountingForm.patchValue({
+        'savingsReferenceAccountId': this.recurringDepositProductsTemplate.accountingMappings.savingsReferenceAccount.id,
+        'savingsControlAccountId': this.recurringDepositProductsTemplate.accountingMappings.savingsControlAccount.id,
+        'transfersInSuspenseAccountId': this.recurringDepositProductsTemplate.accountingMappings.transfersInSuspenseAccount.id,
+        'incomeFromFeeAccountId': this.recurringDepositProductsTemplate.accountingMappings.incomeFromFeeAccount.id,
+        'incomeFromPenaltyAccountId': this.recurringDepositProductsTemplate.accountingMappings.incomeFromPenaltyAccount.id,
+        'interestOnSavingsAccountId': this.recurringDepositProductsTemplate.accountingMappings.interestOnSavingsAccount.id
+      });
+      if (this.recurringDepositProductsTemplate.paymentChannelToFundSourceMappings || this.recurringDepositProductsTemplate.feeToIncomeAccountMappings || this.recurringDepositProductsTemplate.penaltyToIncomeAccountMappings) {
+        this.recurringDepositProductAccountingForm.patchValue({
+          'advancedAccountingRules': true
+        });
+      }
+      if (this.recurringDepositProductsTemplate.paymentChannelToFundSourceMappings) {
+        this.recurringDepositProductsTemplate.paymentChannelToFundSourceMappings.forEach((paymentChannelToFundSourceMapping: any) => {
+          const paymentChannelToFundSourceMappingData = this.formBuilder.group({
+            paymentTypeId: [paymentChannelToFundSourceMapping.paymentType.id, Validators.required],
+            fundSourceAccountId: [paymentChannelToFundSourceMapping.fundSourceAccount.id, Validators.required]
+          });
+          const formArray = this.recurringDepositProductAccountingForm.controls['paymentChannelToFundSourceMappings'] as FormArray;
+          formArray.push(paymentChannelToFundSourceMappingData);
+        });
+      }
+      if (this.recurringDepositProductsTemplate.feeToIncomeAccountMappings) {
+        this.recurringDepositProductsTemplate.feeToIncomeAccountMappings.forEach((feeToIncomeAccountMapping: any) => {
+          const feeToIncomeAccountMappingData = this.formBuilder.group({
+            chargeId: [feeToIncomeAccountMapping.charge.id, Validators.required],
+            incomeAccountId: [feeToIncomeAccountMapping.incomeAccount.id, Validators.required]
+          });
+          const formArray = this.recurringDepositProductAccountingForm.controls['feeToIncomeAccountMappings'] as FormArray;
+          formArray.push(feeToIncomeAccountMappingData);
+        });
+      }
+      if (this.recurringDepositProductsTemplate.penaltyToIncomeAccountMappings) {
+        this.recurringDepositProductsTemplate.penaltyToIncomeAccountMappings.forEach((penaltyToIncomeAccountMapping: any) => {
+          const penaltyToIncomeAccountMappingData = this.formBuilder.group({
+            chargeId: [penaltyToIncomeAccountMapping.charge.id, Validators.required],
+            incomeAccountId: [penaltyToIncomeAccountMapping.incomeAccount.id, Validators.required]
+          });
+          const formArray = this.recurringDepositProductAccountingForm.controls['penaltyToIncomeAccountMappings'] as FormArray;
+          formArray.push(penaltyToIncomeAccountMappingData);
+        });
+      }
+    }
   }
 
   createrecurringDepositProductAccountingForm() {

src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-charges-step/recurring-deposit-product-charges-step.component.ts

@@ -24,9 +24,11 @@ export class RecurringDepositProductChargesStepComponent implements OnInit {
 
   ngOnInit() {
     this.chargeData = this.recurringDepositProductsTemplate.chargeOptions;
-
-    this.chargesDataSource = [];
-
+    if (!(this.recurringDepositProductsTemplate === undefined) && this.recurringDepositProductsTemplate.id) {
+      this.chargesDataSource = this.recurringDepositProductsTemplate.charges;
+    } else {
+      this.chargesDataSource = [];
+    }
     this.currencyCode.valueChanges.subscribe(() => this.chargesDataSource = []);
   }
 

src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-currency-step/recurring-deposit-product-currency-step.component.ts

@@ -20,11 +20,19 @@ export class RecurringDepositProductCurrencyStepComponent implements OnInit {
 
   ngOnInit() {
     this.currencyData = this.recurringDepositProductsTemplate.currencyOptions;
+    if (!(this.recurringDepositProductsTemplate === undefined) && this.recurringDepositProductsTemplate.id) {
+      this.recurringDepositProductCurrencyForm.patchValue({
+        'currencyCode': this.recurringDepositProductsTemplate.currency.code,
+        'digitsAfterDecimal': this.recurringDepositProductsTemplate.currency.decimalPlaces,
+        'inMultiplesOf': this.recurringDepositProductsTemplate.currency.inMultiplesOf
+      });
+    } else {
+      this.recurringDepositProductCurrencyForm.patchValue({
+        'currencyCode': this.currencyData[0].code,
+        'digitsAfterDecimal': 2
+      });
+    }
 
-    this.recurringDepositProductCurrencyForm.patchValue({
-      'currencyCode': this.currencyData[0].code,
-      'digitsAfterDecimal': 2
-    });
   }
 
   createrecurringDepositProductCurrencyForm() {

src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-details-step/recurring-deposit-product-details-step.component.html

@@ -5,7 +5,7 @@
     <mat-form-field fxFlex="48%">
       <mat-label>Product Name</mat-label>
       <input matInput formControlName="name" required>
-      <mat-error>
+      <mat-error *ngIf="recurringDepositProductDetailsForm.controls.name.hasError('required')">
         Product Name is <strong>required</strong>
       </mat-error>
     </mat-form-field>
@@ -13,7 +13,7 @@
     <mat-form-field fxFlex="48%">
       <mat-label>Short Name</mat-label>
       <input matInput formControlName="shortName" maxlength="4" required>
-      <mat-error>
+      <mat-error *ngIf="recurringDepositProductDetailsForm.controls.shortName.hasError('required')">
         Short Name is <strong>required</strong>
       </mat-error>
     </mat-form-field>
@@ -21,6 +21,9 @@
     <mat-form-field fxFlex="98%">
       <mat-label>Description</mat-label>
       <textarea matInput formControlName="description"></textarea>
+      <mat-error *ngIf="recurringDepositProductDetailsForm.controls.description.hasError('required')">
+        Description is <strong>required</strong>
+      </mat-error>
     </mat-form-field>
 
   </div>

src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-details-step/recurring-deposit-product-details-step.component.ts

@@ -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 RecurringDepositProductDetailsStepComponent implements OnInit {
 
+  @Input() recurringDepositProductsTemplate: any;
+
   recurringDepositProductDetailsForm: FormGroup;
 
   constructor(private formBuilder: FormBuilder) {
@@ -15,13 +17,20 @@ export class RecurringDepositProductDetailsStepComponent implements OnInit {
   }
 
   ngOnInit() {
+    if (!(this.recurringDepositProductsTemplate === undefined) && this.recurringDepositProductsTemplate.id) {
+      this.recurringDepositProductDetailsForm.patchValue({
+        'name': this.recurringDepositProductsTemplate.name,
+        'shortName': this.recurringDepositProductsTemplate.shortName,
+        'description': this.recurringDepositProductsTemplate.description,
+      });
+    }
   }
 
   createrecurringDepositProductDetailsForm() {
     this.recurringDepositProductDetailsForm = this.formBuilder.group({
       'name': ['', Validators.required],
       'shortName': ['', Validators.required],
-      'description': ['']
+      'description': ['', Validators.required]
     });
   }
 

src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-interest-rate-chart-step/recurring-deposit-product-interest-rate-chart-step.component.ts

@@ -47,6 +47,8 @@ export class RecurringDepositProductInterestRateChartStepComponent implements On
   maxDate = new Date(new Date().setFullYear(new Date().getFullYear() + 10));
 
   expandChartSlabIndex: number[] = [];
+  chartDetailData: any = [];
+  chartsDetail: any[] = [];
 
   constructor(private formBuilder: FormBuilder,
     public dialog: MatDialog,
@@ -63,6 +65,131 @@ export class RecurringDepositProductInterestRateChartStepComponent implements On
     this.clientTypeData = this.recurringDepositProductsTemplate.chartTemplate.clientTypeOptions;
     this.clientClassificationData = this.recurringDepositProductsTemplate.chartTemplate.clientClassificationOptions;
     this.incentiveTypeData = this.recurringDepositProductsTemplate.chartTemplate.incentiveTypeOptions;
+
+    if (!(this.recurringDepositProductsTemplate === undefined) && this.recurringDepositProductsTemplate.id) {
+      this.assignFormData();
+    }
+  }
+
+  // Assign form the values for edit recurring Depoosit
+  assignFormData() {
+    this.addChart();
+    const isChartArray = Array.isArray(this.recurringDepositProductsTemplate.activeChart);
+    if (!isChartArray) {
+      this.chartDetailData.push(this.recurringDepositProductsTemplate.activeChart);
+    } else {
+      this.chartDetailData = this.recurringDepositProductsTemplate.activeChart;
+    }
+
+    // Build the array of Objects from the retrived value
+    this.getChartsDetailsData();
+
+    // Iterates for every chart in charts
+    this.charts.controls.forEach((chartDetailControl: FormGroup, i: number) => {
+
+      // Iterate for every chartSlab in chart
+      this.chartsDetail[i].chartSlabs.forEach((chartSlabDetail: any, j: number) => {
+
+        const chartSlabInfo = this.formBuilder.group({
+          amountRangeFrom: [chartSlabDetail.amountRangeFrom],
+          amountRangeTo: [chartSlabDetail.amountRangeTo],
+          annualInterestRate: [chartSlabDetail.annualInterestRate, Validators.required],
+          description: [chartSlabDetail.description, Validators.required],
+          fromPeriod: [chartSlabDetail.fromPeriod, Validators.required],
+          toPeriod: [chartSlabDetail.toPeriod],
+          periodType: [chartSlabDetail.periodType, Validators.required],
+          incentives: this.formBuilder.array([])
+        });
+        const formArray = chartDetailControl.controls['chartSlabs'] as FormArray;
+        formArray.push(chartSlabInfo);
+
+        // Iterate for every slab in chartSlab
+        const chartIncentiveControl = chartDetailControl.controls['chartSlabs']['controls'][j];
+
+        // Iterate to input all the incentive for particular chart slab
+        this.chartsDetail[i].chartSlabs[j].incentives.forEach((chartIncentiveDetail: any) => {
+          const incentiveInfo = this.formBuilder.group({
+            amount: [chartIncentiveDetail.amount, Validators.required],
+            attributeName: [chartIncentiveDetail.attributeName, Validators.required],
+            attribureValue: [chartIncentiveDetail.attribureValue, Validators.required],
+            conditionType: [chartIncentiveDetail.conditionType, Validators.required],
+            entityType: [chartIncentiveDetail.entityType, Validators.required],
+            incentiveType: [chartIncentiveDetail.incentiveType, Validators.required]
+          });
+          const newFormArray = chartIncentiveControl['controls']['incentives'] as FormArray;
+          newFormArray.push(incentiveInfo);
+        });
+
+      });
+
+    });
+  }
+
+  getChartsDetailsData() {
+    this.chartDetailData.forEach((chartData: any) => {
+      const chart = {
+        endDate: chartData.endDate ? new Date(chartData.endDate) : '',
+        fromDate: chartData.fromDate ? new Date(chartData.fromDate) : '',
+        isPrimaryGroupingByAmount: chartData.isPrimaryGroupingByAmount,
+        name: chartData.name,
+        chartSlabs: this.getChartSlabsData(chartData)
+      };
+      this.chartsDetail.push(chart);
+    });
+    this.recurringDepositProductInterestRateChartForm.patchValue({
+      'charts': this.chartsDetail
+    });
+  }
+
+  getChartSlabsData(chartData: any) {
+    const chartSlabs: any[] = [];
+    let chartSlabData: any[] = [];
+    const isChartSlabArray = Array.isArray(chartData.chartSlabs);
+    if (!isChartSlabArray) {
+      chartSlabData.push(chartData.chartSlabs);
+    } else {
+      chartSlabData = chartData.chartSlabs;
+    }
+
+    chartSlabData.forEach((eachChartSlabData: any) => {
+      const chartSlab = {
+        periodType: eachChartSlabData.periodType.id,
+        amountRangeFrom: eachChartSlabData.amountRangeFrom,
+        amountRangeTo: eachChartSlabData.amountRangeTo,
+        annualInterestRate: eachChartSlabData.annualInterestRate,
+        description: eachChartSlabData.description ? eachChartSlabData.description : '',
+        fromPeriod: eachChartSlabData.fromPeriod,
+        toPeriod: eachChartSlabData.toPeriod,
+        incentives: this.getIncentivesData(chartSlabData)
+      };
+      chartSlabs.push(chartSlab);
+    });
+    return chartSlabs;
+  }
+
+  getIncentivesData(chartSlabData: any) {
+    const incentives: any[] = [];
+    let incentiveDatas: any[] = [];
+    if (chartSlabData.incentives) {
+      const isChartIncentiveArray = Array.isArray(chartSlabData.incentives);
+      if (!isChartIncentiveArray) {
+        incentiveDatas.push(chartSlabData.incentives);
+      } else {
+        incentiveDatas = chartSlabData.incentives;
+      }
+      incentiveDatas.forEach((incentiveData: any) => {
+        const incentive = {
+          amount: incentiveData.amount,
+          attributeName: incentiveData.attributeName,
+          attributeValue: incentiveData.attributeValue,
+          conditionType: incentiveData.conditionType,
+          entityType: incentiveData.entityType,
+          incentiveType: incentiveData.incentiveType,
+        };
+        incentives.push(incentive);
+      });
+    }
+    return incentives;
   }
 
   createrecurringDepositProductInterestRateChartForm() {

src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-settings-step/recurring-deposit-product-settings-step.component.ts

@@ -27,6 +27,26 @@ export class RecurringDepositProductSettingsStepComponent implements OnInit {
     this.periodFrequencyTypeData = this.recurringDepositProductsTemplate.periodFrequencyTypeOptions.slice(0, -1);
     this.preClosurePenalInterestOnTypeData = this.recurringDepositProductsTemplate.preClosurePenalInterestOnTypeOptions;
     this.taxGroupData = this.recurringDepositProductsTemplate.taxGroupOptions;
+
+    if (!(this.recurringDepositProductsTemplate === undefined) && this.recurringDepositProductsTemplate.id) {
+      this.recurringDepositProductSettingsForm.patchValue({
+        'isMandatoryDeposit': this.recurringDepositProductsTemplate.isMandatoryDeposit,
+        'adjustAdvanceTowardsFuturePayments': this.recurringDepositProductsTemplate.adjustAdvanceTowardsFuturePayments,
+        'allowWithdrawal': this.recurringDepositProductsTemplate.allowWithdrawal,
+        'lockinPeriodFrequency': this.recurringDepositProductsTemplate.lockinPeriodFrequency,
+        'lockinPeriodFrequencyType': this.recurringDepositProductsTemplate.lockinPeriodFrequencyType ? this.recurringDepositProductsTemplate.lockinPeriodFrequencyType.id : '',
+        'minDepositTerm': this.recurringDepositProductsTemplate.minDepositTerm,
+        'minDepositTermTypeId': this.recurringDepositProductsTemplate.minDepositTermType ? this.recurringDepositProductsTemplate.minDepositTermType.id : '',
+        'inMultiplesOfDepositTerm': this.recurringDepositProductsTemplate.inMultiplesOfDepositTerm,
+        'inMultiplesOfDepositTermTypeId': this.recurringDepositProductsTemplate.inMultiplesOfDepositTermType ? this.recurringDepositProductsTemplate.inMultiplesOfDepositTerm.id : '',
+        'maxDepositTerm': this.recurringDepositProductsTemplate.maxDepositTerm,
+        'maxDepositTermTypeId': this.recurringDepositProductsTemplate.maxDepositTermType ? this.recurringDepositProductsTemplate.minDepositTermType.id : '',
+        'preClosurePenalApplicable': this.recurringDepositProductsTemplate.preClosurePenalApplicable,
+        'preClosurePenalInterest': this.recurringDepositProductsTemplate.preClosurePenalInterest,
+        'preClosurePenalInterestOnTypeId': this.recurringDepositProductsTemplate.preClosurePenalInterestOnType ? this.recurringDepositProductsTemplate.preClosurePenalInterestOnType.id : '',
+        'withHoldTax': this.recurringDepositProductsTemplate.withHoldTax
+      });
+    }
   }
 
   createrecurringDepositProductSettingsForm() {

src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-terms-step/recurring-deposit-product-terms-step.component.ts

@@ -26,7 +26,13 @@ export class RecurringDepositProductTermsStepComponent implements OnInit {
     this.interestPostingPeriodTypeData = this.recurringDepositProductsTemplate.interestPostingPeriodTypeOptions;
     this.interestCalculationTypeData = this.recurringDepositProductsTemplate.interestCalculationTypeOptions;
     this.interestCalculationDaysInYearTypeData = this.recurringDepositProductsTemplate.interestCalculationDaysInYearTypeOptions;
-
+    if (!(this.recurringDepositProductsTemplate === undefined) && this.recurringDepositProductsTemplate.id) {
+      this.recurringDepositProductTermsForm.patchValue({
+        'minDepositAmount': this.recurringDepositProductsTemplate.minDepositAmount,
+        'depositAmount': this.recurringDepositProductsTemplate.depositAmount,
+        'maxDepositAmount': this.recurringDepositProductsTemplate.maxDepositAmount,
+      });
+    }
     this.recurringDepositProductTermsForm.patchValue({
       'interestCompoundingPeriodType': this.recurringDepositProductsTemplate.interestCompoundingPeriodType.id,
       'interestPostingPeriodType': this.recurringDepositProductsTemplate.interestPostingPeriodType.id,

src/app/products/recurring-deposit-products/recurring-deposit-products.component.html

@@ -1,5 +1,5 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
-  <button mat-raised-button color="primary" [routerLink]="['create']" mifosxHasPermission='"CREATE_RECURRINGDEPOSITPRODUCT"'>
+  <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission='"CREATE_RECURRINGDEPOSITPRODUCT"'>
     <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
     Create Recurring Deposit Product
   </button>

src/app/products/recurring-deposit-products/view-recurring-deposit-product/view-recurring-deposit-product.component.html

@@ -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>
@@ -137,7 +137,7 @@
           <span fxFlex="60%">{{ recurringDepositProduct.taxGroup.name }}</span>
         </div>
 
-        <div fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column" >
+        <div *ngIf="recurringDepositProduct.activeChart" fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column" >
 
           <h3 class="mat-h3" fxFlexFill>Interest Rate Charts</h3>
       
@@ -298,8 +298,6 @@
               <tr mat-row *matRowDef="let row; columns: chartSlabsIncentivesDisplayedColumns;" class="incentives-row"></tr>
 
             </table>
-
-            <mat-divider [inset]="true"></mat-divider>
       
           </div>
       
@@ -380,8 +378,6 @@
           <div fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
             <span fxFlex="40%">Interest on savings:</span>
             <span fxFlex="60%">{{ recurringDepositProduct.accountingMappings.interestOnSavingsAccount.name }}</span>
-            <span fxFlex="40%">Write-off:</span>
-            <span fxFlex="60%">{{ recurringDepositProduct.accountingMappings.writeOffAccount.name }}</span>
           </div>
 
           <h4 fxFlexFill class="mat-h4">Income</h4>