feat: add recurring deposit actions (activate) (#1002)

Fixes: #1000

src/app/deposits/recurring-deposits/common-resolvers/recurring-deposit-account-actions.resolver.ts

@@ -0,0 +1,36 @@
+/** Angular Imports */
+import { Injectable } from '@angular/core';
+import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+
+/** rxjs Imports */
+import { Observable } from 'rxjs';
+
+/** Custom Services */
+import { SavingsService } from 'app/savings/savings.service';
+import { RecurringDepositsService } from '../recurring-deposits.service';
+
+/**
+ * Recurring Deposits Account Actions data resolver.
+ */
+@Injectable()
+export class RecurringDepositsAccountActionsResolver implements Resolve<Object> {
+
+  /**
+   * @param {SavingsService} SavingsService Savings service.
+   * @param {RecurringDepositsService} recurringDepositsService Recurring Deposits Service.
+   */
+  constructor(private savingsService: SavingsService,
+    private recurringDepositsService: RecurringDepositsService) { }
+
+  /**
+   * Returns the Recurring deposits account actions data.
+   * @param {ActivatedRouteSnapshot} route Route Snapshot
+   * @returns {Observable<any>}
+   */
+  resolve(route: ActivatedRouteSnapshot): Observable<any> {
+    const actionName = route.paramMap.get('name');
+    const recurringDepositAccountId = route.paramMap.get('recurringDepositAccountId') || route.parent.parent.paramMap.get('recurringDepositAccountId');
+    return undefined;
+  }
+
+}

src/app/deposits/recurring-deposits/recurring-deposits-account-actions/activate-recurring-deposits-account/activate-recurring-deposits-account.component.html

@@ -0,0 +1,31 @@
+<div class="container">
+
+  <mat-card>
+
+    <form [formGroup]="activateRecurringDepositsAccountForm" (ngSubmit)="submit()">
+
+      <mat-card-content>
+
+        <mat-form-field fxFlex>
+          <mat-label>Activated On Date</mat-label>
+          <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="activatedOnDatePicker" required
+            formControlName="activatedOnDate">
+          <mat-datepicker-toggle matSuffix [for]="activatedOnDatePicker"></mat-datepicker-toggle>
+          <mat-datepicker #activatedOnDatePicker></mat-datepicker>
+          <mat-error *ngIf="activateRecurringDepositsAccountForm.controls.activatedOnDate.hasError('required')">
+            Activated On Date is <strong>required</strong>
+          </mat-error>
+        </mat-form-field>
+
+      </mat-card-content>
+
+      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+        <button type="button" mat-raised-button [routerLink]="['../../']">Cancel</button>
+        <button mat-raised-button color="accent" [disabled]="!activateRecurringDepositsAccountForm.valid">Confirm</button>
+      </mat-card-actions>
+
+    </form>
+
+  </mat-card>
+
+</div>

src/app/deposits/recurring-deposits/recurring-deposits-account-actions/activate-recurring-deposits-account/activate-recurring-deposits-account.component.scss

@@ -0,0 +1,3 @@
+.container {
+  max-width: 37rem;
+}

src/app/deposits/recurring-deposits/recurring-deposits-account-actions/activate-recurring-deposits-account/activate-recurring-deposits-account.component.spec.ts

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

src/app/deposits/recurring-deposits/recurring-deposits-account-actions/activate-recurring-deposits-account/activate-recurring-deposits-account.component.ts

@@ -0,0 +1,81 @@
+/** Angular Imports */
+import { Component, OnInit } from '@angular/core';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { DatePipe } from '@angular/common';
+import { ActivatedRoute, Router } from '@angular/router';
+
+/** Custom Services */
+import { RecurringDepositsService } from '../../recurring-deposits.service';
+
+/**
+ * Activate Recurring Deposits Account Component
+ */
+@Component({
+  selector: 'mifosx-activate-recurring-deposits-account',
+  templateUrl: './activate-recurring-deposits-account.component.html',
+  styleUrls: ['./activate-recurring-deposits-account.component.scss']
+})
+export class ActivateRecurringDepositsAccountComponent implements OnInit {
+
+  /** Minimum date allowed. */
+  minDate = new Date(2000, 0, 1);
+  /** Maximum date allowed. */
+  maxDate = new Date();
+  /** Activate Recurring Deposits Account form. */
+  activateRecurringDepositsAccountForm: FormGroup;
+  /** Recurring Deposits Account Id */
+  accountId: any;
+
+  /**
+   * @param {FormBuilder} formBuilder Form Builder
+   * @param {recurringDepositsService} recurringDepositsService Recurring Deposits Service
+   * @param {DatePipe} datePipe Date Pipe
+   * @param {ActivatedRoute} route Activated Route
+   * @param {Router} router Router
+   */
+  constructor(private formBuilder: FormBuilder,
+    private recurringDepositsService: RecurringDepositsService,
+    private datePipe: DatePipe,
+    private route: ActivatedRoute,
+    private router: Router) {
+    this.accountId = this.route.parent.snapshot.params['recurringDepositAccountId'];
+  }
+
+  /**
+   * Creates the activate recurring deposits form.
+   */
+  ngOnInit() {
+    this.createActivateRecurringDepositsAccountForm();
+  }
+
+  /**
+   * Creates the activate recurring deposits account form.
+   */
+  createActivateRecurringDepositsAccountForm() {
+    this.activateRecurringDepositsAccountForm = this.formBuilder.group({
+      'activatedOnDate': ['', Validators.required]
+    });
+  }
+
+  /**
+   * Submits the form and activates the recurring deposit account,
+   * if successful redirects to the recurring deposit account.
+   */
+  submit() {
+    // TODO: Update once language and date settings are setup
+    const locale = 'en';
+    const dateFormat = 'dd MMMM yyyy';
+    const prevActivatedOnDate: Date = this.activateRecurringDepositsAccountForm.value.activatedOnDate;
+    this.activateRecurringDepositsAccountForm.patchValue({
+      activatedOnDate: this.datePipe.transform(prevActivatedOnDate, dateFormat),
+    });
+    const data = {
+      ...this.activateRecurringDepositsAccountForm.value,
+      dateFormat,
+      locale
+    };
+    this.recurringDepositsService.executeRecurringDepositsAccountCommand(this.accountId, 'activate', data).subscribe(() => {
+      this.router.navigate(['../../'], { relativeTo: this.route });
+    });
+  }
+}

src/app/deposits/recurring-deposits/recurring-deposits-account-actions/recurring-deposits-account-actions.component.html

@@ -0,0 +1 @@
+<mifosx-activate-recurring-deposits-account *ngIf="actions['Activate']"></mifosx-activate-recurring-deposits-account>

src/app/deposits/recurring-deposits/recurring-deposits-account-actions/recurring-deposits-account-actions.component.spec.ts

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

src/app/deposits/recurring-deposits/recurring-deposits-account-actions/recurring-deposits-account-actions.component.ts

@@ -0,0 +1,26 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'mifosx-recurring-deposits-account-actions',
+  templateUrl: './recurring-deposits-account-actions.component.html',
+  styleUrls: ['./recurring-deposits-account-actions.component.scss']
+})
+export class RecurringDepositsAccountActionsComponent {
+
+  /** Flag object to store possible actions and render appropriate UI to the user */
+  actions: {
+    'Activate': boolean
+  } = {
+      'Activate': false,
+    };
+
+  /**
+   * @param {ActivatedRoute} route Activated Route
+   */
+  constructor(private route: ActivatedRoute) {
+    const name = this.route.snapshot.params['name'];
+    this.actions[name] = true;
+  }
+
+}

src/app/deposits/recurring-deposits/recurring-deposits-account-view/recurring-deposits-account-view.component.html

@@ -39,15 +39,15 @@
     <mat-card-actions class="account-actions">
 
       <ng-container *ngFor="let button of buttonConfig.singleButtons">
-        <button mat-raised-button >
+        <button mat-raised-button (click)="doAction(button.name)">
           <i class="{{button.icon}}"></i> {{button.name}}</button>
       </ng-container>
-  
+
-      <ng-container *ngIf="buttonConfig.options.length > 0">
+      <ng-container *ngIf="buttonConfig.options.length">
         <button mat-raised-button [matMenuTriggerFor]="More">More</button>
         <mat-menu #More="matMenu">
         <span *ngFor="let option of buttonConfig.options">
-          <button mat-menu-item >{{option.name}}</button>
+          <button mat-menu-item (click)="doAction(option.name)">{{option.name}}</button>
         </span>
         </mat-menu>
       </ng-container>

src/app/deposits/recurring-deposits/recurring-deposits-account-view/recurring-deposits-account-view.component.ts

@@ -71,4 +71,16 @@ export class RecurringDepositsAccountViewComponent implements OnInit {
     }
   }
 
+  /**
+   * Performs action button/option action.
+   * @param {string} name action name.
+   */
+  doAction(name: string) {
+    switch (name) {
+      case 'Activate':
+        this.router.navigate([`actions/${name}`], { relativeTo: this.route });
+        break;
+    }
+  }
+
 }

src/app/deposits/recurring-deposits/recurring-deposits-routing.module.ts

@@ -9,16 +9,17 @@ import { extract } from '../../core/i18n/i18n.service';
 import { RecurringDepositsAccountViewComponent } from './recurring-deposits-account-view/recurring-deposits-account-view.component';
 import { InterestRateChartTabComponent } from './recurring-deposits-account-view/interest-rate-chart-tab/interest-rate-chart-tab.component';
 import { TransactionsTabComponent } from './recurring-deposits-account-view/transactions-tab/transactions-tab.component';
+import { StandingInstructionsTabComponent } from './recurring-deposits-account-view/standing-instructions-tab/standing-instructions-tab.component';
+import { ChargesTabComponent } from './recurring-deposits-account-view/charges-tab/charges-tab.component';
+import { DatatableTabsComponent } from './recurring-deposits-account-view/datatable-tabs/datatable-tabs.component';
+import { CreateRecurringDepositsAccountComponent } from './create-recurring-deposits-account/create-recurring-deposits-account.component';
+import { RecurringDepositsAccountActionsComponent } from './recurring-deposits-account-actions/recurring-deposits-account-actions.component';
 
 /** Custom Resolvers */
 import { RecurringDepositsAccountViewResolver } from './common-resolvers/recurring-deposits-account-view.resolver';
 import { RecurringDepositsAccountDataResolver } from './common-resolvers/recurring-deposits-account-data.resolver';
-import { StandingInstructionsTabComponent } from './recurring-deposits-account-view/standing-instructions-tab/standing-instructions-tab.component';
-import { ChargesTabComponent } from './recurring-deposits-account-view/charges-tab/charges-tab.component';
-import { DatatableTabsComponent } from './recurring-deposits-account-view/datatable-tabs/datatable-tabs.component';
 import { SavingsDatatableResolver } from 'app/savings/common-resolvers/savings-datatable.resolver';
 import { SavingsDatatablesResolver } from 'app/savings/common-resolvers/savings-datatables.resolver';
-import { CreateRecurringDepositsAccountComponent } from './create-recurring-deposits-account/create-recurring-deposits-account.component';
 import { RecurringDepositsAccountTemplateResolver } from './common-resolvers/recurring-deposits-account-template.resolver';
 
 const routes: Routes = [
@@ -37,53 +38,63 @@ const routes: Routes = [
       {
         path: ':recurringDepositAccountId',
         data: { title: extract('RecurringDeposit Account View'), routeParamBreadcrumb: 'recurringDepositAccountId' },
-        component: RecurringDepositsAccountViewComponent,
-        resolve: {
-          recurringDepositsAccountData: RecurringDepositsAccountViewResolver,
-          savingsDatatables: SavingsDatatablesResolver
-        },
         children: [
           {
-            path: 'interest-rate-chart',
+            path: '',
-            component: InterestRateChartTabComponent,
+            component: RecurringDepositsAccountViewComponent,
-            data: { title: extract('Recurring Deposit Account Interest Rate Chart'), breadcrumb: 'Interest Rate Chart', routeParamBreadcrumb: false },
             resolve: {
-              recurringDepositsAccountData: RecurringDepositsAccountDataResolver
+              recurringDepositsAccountData: RecurringDepositsAccountViewResolver,
-            }
+              savingsDatatables: SavingsDatatablesResolver
-          },
+            },
-          {
-            path: 'transactions',
-            component: TransactionsTabComponent,
-            data: { title: extract('Recurring Deposit Account Transactions'), breadcrumb: 'Transactions', routeParamBreadcrumb: false },
-            resolve: {
-              recurringDepositsAccountData: RecurringDepositsAccountDataResolver
-            }
-          },
-          {
-            path: 'charges',
-            component: ChargesTabComponent,
-            data: { title: extract('Recurring Deposit Account Charges'), breadcrumb: 'Charges', routeParamBreadcrumb: false }
-          },
-          {
-            path: 'standing-instructions',
-            component: StandingInstructionsTabComponent,
-            data: { title: extract('Recurring Deposit Account Standing Instructions'), breadcrumb: 'Standing Instructions', routeParamBreadcrumb: false },
-            resolve: {
-              recurringDepositsAccountData: RecurringDepositsAccountDataResolver
-            }
-          },
-          {
-            path: 'datatables',
             children: [
               {
-                path: ':datatableName',
+                path: 'interest-rate-chart',
-                component: DatatableTabsComponent,
+                component: InterestRateChartTabComponent,
-                data: { title: extract('View Data Table'), routeParamBreadcrumb: 'datatableName' },
+                data: { title: extract('Recurring Deposit Account Interest Rate Chart'), breadcrumb: 'Interest Rate Chart', routeParamBreadcrumb: false },
                 resolve: {
-                  savingsDatatable: SavingsDatatableResolver
+                  recurringDepositsAccountData: RecurringDepositsAccountDataResolver
                 }
-              }
+              },
+              {
+                path: 'transactions',
+                component: TransactionsTabComponent,
+                data: { title: extract('Recurring Deposit Account Transactions'), breadcrumb: 'Transactions', routeParamBreadcrumb: false },
+                resolve: {
+                  recurringDepositsAccountData: RecurringDepositsAccountDataResolver
+                }
+              },
+              {
+                path: 'charges',
+                component: ChargesTabComponent,
+                data: { title: extract('Recurring Deposit Account Charges'), breadcrumb: 'Charges', routeParamBreadcrumb: false }
+              },
+              {
+                path: 'standing-instructions',
+                component: StandingInstructionsTabComponent,
+                data: { title: extract('Recurring Deposit Account Standing Instructions'), breadcrumb: 'Standing Instructions', routeParamBreadcrumb: false },
+                resolve: {
+                  recurringDepositsAccountData: RecurringDepositsAccountDataResolver
+                }
+              },
+              {
+                path: 'datatables',
+                children: [
+                  {
+                    path: ':datatableName',
+                    component: DatatableTabsComponent,
+                    data: { title: extract('View Data Table'), routeParamBreadcrumb: 'datatableName' },
+                    resolve: {
+                      savingsDatatable: SavingsDatatableResolver
+                    }
+                  }
+                ]
+              },
             ]
+          },
+          {
+            path: 'actions/:name',
+            data: { title: extract('Recurring Deposits Account Actions'), routeParamBreadcrumb: 'name' },
+            component: RecurringDepositsAccountActionsComponent,
           }
         ]
       }

src/app/deposits/recurring-deposits/recurring-deposits.module.ts

@@ -25,6 +25,8 @@ import { RecurringDepositsAccountSettingsStepComponent } from './recurring-depos
 import { RecurringDepositsAccountInterestRateChartStepComponent } from './recurring-deposits-account-stepper/recurring-deposits-account-interest-rate-chart-step/recurring-deposits-account-interest-rate-chart-step.component';
 import { RecurringDepositsAccountChargesStepComponent } from './recurring-deposits-account-stepper/recurring-deposits-account-charges-step/recurring-deposits-account-charges-step.component';
 import { RecurringDepositsAccountPreviewStepComponent } from './recurring-deposits-account-stepper/recurring-deposits-account-preview-step/recurring-deposits-account-preview-step.component';
+import { RecurringDepositsAccountActionsComponent } from './recurring-deposits-account-actions/recurring-deposits-account-actions.component';
+import { ActivateRecurringDepositsAccountComponent } from './recurring-deposits-account-actions/activate-recurring-deposits-account/activate-recurring-deposits-account.component';
 
 /**
  * RecurringDeposits Module
@@ -54,7 +56,9 @@ import { RecurringDepositsAccountPreviewStepComponent } from './recurring-deposi
     RecurringDepositsAccountSettingsStepComponent,
     RecurringDepositsAccountInterestRateChartStepComponent,
     RecurringDepositsAccountChargesStepComponent,
-    RecurringDepositsAccountPreviewStepComponent
+    RecurringDepositsAccountPreviewStepComponent,
+    RecurringDepositsAccountActionsComponent,
+    ActivateRecurringDepositsAccountComponent
   ],
   providers: [DatePipe]
 })

src/app/deposits/recurring-deposits/recurring-deposits.service.ts

@@ -64,4 +64,15 @@ export class RecurringDepositsService {
   createRecurringDepositAccount(recurringAccountData: any): Observable<any> {
     return this.http.post(`/recurringdepositaccounts`, recurringAccountData);
   }
+
+  /**
+   * @param {string} accountId Savings Account Id
+   * @param {string} command Command
+   * @param {any} data Data
+   * @returns {Observable<any>}
+   */
+  executeRecurringDepositsAccountCommand(accountId: string, command: string, data: any): Observable<any> {
+    const httpParams = new HttpParams().set('command', command);
+    return this.http.post(`/recurringdepositaccounts/${accountId}`, data, { params: httpParams });
+  }
 }