feat: add create standing instructions (#1142)

Fixes: #268

src/app/account-transfers/account-transfers-routing.module.ts

@@ -8,16 +8,26 @@ import { extract } from '../core/i18n/i18n.service';
 /** Custom Components */
 import { ViewStandingInstructionsComponent } from './view-standing-instructions/view-standing-instructions.component';
 import { EditStandingInstructionsComponent } from './edit-standing-instructions/edit-standing-instructions.component';
+import { CreateStandingInstructionsComponent } from './create-standing-instructions/create-standing-instructions.component';
 
 /** Custom Resolvers */
 import { ViewStandingInstructionsResolver } from './common-resolvers/view-standing-instructions.resolver';
 import { StandingInstructionsDataAndTemplateResolver } from './common-resolvers/standing-instructions-data-and-template.resolver';
+import { StandingInstructionsTemplateResolver } from './common-resolvers/standing-instructions-template.resolver';
 
 /** Loans Route. */
 const routes: Routes = [
   {
     path: '',
     children: [
+      {
+        path: 'create-standing-instructions',
+        data: { title: extract('Create Standing Instructions'), breadcrumb: 'Create Standing Instructions', routeParamBreadcrumb: 'Create Standing Instructions' },
+        component: CreateStandingInstructionsComponent,
+        resolve: {
+          standingIntructionsTemplate: StandingInstructionsTemplateResolver
+        }
+      },
       {
         path: ':standingInstructionsId',
         data: { title: extract('Standing Instructions'), routeParamBreadcrumb: 'standingInstructionsId' },
@@ -39,8 +49,9 @@ const routes: Routes = [
             },
           }
         ]
-      }]
-  }
+      }
+    ]
+  },
 ];
 @NgModule({
   imports: [RouterModule.forChild(routes)],
@@ -48,7 +59,8 @@ const routes: Routes = [
   declarations: [],
   providers: [
     ViewStandingInstructionsResolver,
-    StandingInstructionsDataAndTemplateResolver
+    StandingInstructionsDataAndTemplateResolver,
+    StandingInstructionsTemplateResolver
   ]
 })
 

src/app/account-transfers/account-transfers.module.ts

@@ -11,6 +11,7 @@ import { DirectivesModule } from '../directives/directives.module';
 /** Custom Components */
 import { ViewStandingInstructionsComponent } from './view-standing-instructions/view-standing-instructions.component';
 import { EditStandingInstructionsComponent } from './edit-standing-instructions/edit-standing-instructions.component';
+import { CreateStandingInstructionsComponent } from './create-standing-instructions/create-standing-instructions.component';
 
 /**
  * Account Transfers Module
@@ -21,7 +22,8 @@ import { EditStandingInstructionsComponent } from './edit-standing-instructions/
   imports: [SharedModule, PipesModule, DirectivesModule, AccountTransfersRoutingModule],
   declarations: [
     ViewStandingInstructionsComponent,
-    EditStandingInstructionsComponent
+    EditStandingInstructionsComponent,
+    CreateStandingInstructionsComponent
   ],
   providers: [DatePipe]
 })

src/app/account-transfers/account-transfers.service.ts

@@ -33,4 +33,22 @@ export class AccountTransfersService {
     return this.http.put(`/standinginstructions/${standinginstructionsId}`, data, { params: httpParams });
   }
 
+  getStandingInstructionsTemplate(clientId: any, officeId: any, accountTypeId: string, formValue?: any): Observable<any> {
+    let httpParams = new HttpParams().set('fromAccountType', accountTypeId)
+                                       .set('fromClientId', clientId)
+                                       .set('fromOfficeId', officeId);
+    if (formValue) {
+      const propNames = Object.getOwnPropertyNames(formValue);
+      for (let i = 0; i < propNames.length; i++) {
+        const propName = propNames[i];
+        httpParams = httpParams.set(propName, formValue[propName]);
+      }
+    }
+    return this.http.get(`/standinginstructions/template`, { params: httpParams });
+  }
+
+  createStandingInstructions(data: Object): Observable<any> {
+    return this.http.post(`/standinginstructions`, data);
+  }
+
 }

src/app/account-transfers/common-resolvers/standing-instructions-template.resolver.ts

@@ -0,0 +1,46 @@
+/** Angular Imports */
+import { Injectable } from '@angular/core';
+import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+
+/** rxjs Imports */
+import { Observable } from 'rxjs';
+
+/** Custom Services */
+import { AccountTransfersService } from '../account-transfers.service';
+
+/**
+ * View Standing Instructions resolver.
+ */
+@Injectable()
+export class StandingInstructionsTemplateResolver implements Resolve<Object> {
+
+    accountTypeId: string;
+
+    /**
+     * @param {accountTransfersService} AccountTransfersService Account Transfers service.
+     */
+    constructor(private accountTransfersService: AccountTransfersService) { }
+
+    /**
+     * Returns the Standing Instructions Data.
+     * @param {ActivatedRouteSnapshot} route Route Snapshot
+     * @returns {Observable<any>}
+     */
+    resolve(route: ActivatedRouteSnapshot): Observable<any> {
+        const officeId = route.queryParamMap.get('officeId');
+        const accountType = route.queryParamMap.get('accountType');
+        const clientId = route.parent.paramMap.get('clientId');
+        switch (accountType) {
+            case 'fromloans':
+                this.accountTypeId = '1';
+                break;
+            case 'fromsavings':
+                this.accountTypeId = '2';
+                break;
+            default:
+                this.accountTypeId = '0';
+        }
+        return this.accountTransfersService.getStandingInstructionsTemplate(clientId, officeId, this.accountTypeId);
+    }
+
+}

src/app/account-transfers/create-standing-instructions/create-standing-instructions.component.html

@@ -0,0 +1,244 @@
+<div class="container">
+
+  <mat-card>
+
+    <form [formGroup]="createStandingInstructionsForm">
+
+      <mat-card-content>
+
+        <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
+
+          <mat-form-field fxFlex="48%">
+            <mat-label>Name</mat-label>
+            <input matInput required formControlName="name">
+            <mat-error *ngIf="createStandingInstructionsForm.controls.name.hasError('required')">
+              Name is <strong>required</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field fxFlex="48%">
+            <mat-label>Applicant</mat-label>
+            <input matInput formControlName="applicant">
+          </mat-form-field>
+
+          <mat-form-field fxFlex="48%">
+            <mat-label>Type</mat-label>
+            <mat-select required formControlName="transferType" (selectionChange)="changeEvent()">
+              <mat-option *ngFor="let transferType of transferTypeData" [value]="transferType.id">
+                {{ transferType.value }}
+              </mat-option>
+            </mat-select>
+            <mat-error *ngIf="createStandingInstructionsForm.controls.transferType.hasError('required')">
+              Transfer Type is <strong>required</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field fxFlex="48%">
+            <mat-label>Priority</mat-label>
+            <mat-select required formControlName="priority">
+              <mat-option *ngFor="let priorityType of priorityTypeData" [value]="priorityType.id">
+                {{ priorityType.value }}
+              </mat-option>
+            </mat-select>
+            <mat-error *ngIf="createStandingInstructionsForm.controls.priority.hasError('required')">
+              Priority is <strong>required</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field fxFlex="48%">
+            <mat-label>Status</mat-label>
+            <mat-select required formControlName="status">
+              <mat-option *ngFor="let statusType of statusTypeData" [value]="statusType.id">
+                {{ statusType.value }}
+              </mat-option>
+            </mat-select>
+            <mat-error *ngIf="createStandingInstructionsForm.controls.status.hasError('required')">
+              Status is <strong>required</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field fxFlex="48%">
+            <mat-label>From Account Type</mat-label>
+            <mat-select required formControlName="fromAccountType" (selectionChange)="changeEvent()">
+              <mat-option *ngFor="let fromAccountType of fromAccountTypeData" [value]="fromAccountType.id">
+                {{ fromAccountType.value }}
+              </mat-option>
+            </mat-select>
+            <mat-error *ngIf="createStandingInstructionsForm.controls.fromAccountType.hasError('required')">
+              From Account Type is <strong>required</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field fxFlex="48%">
+            <mat-label>From Account</mat-label>
+            <mat-select required formControlName="fromAccountId" (selectionChange)="changeEvent()">
+              <mat-option *ngFor="let fromAccount of fromAccountData" [value]="fromAccount.id">
+                {{ fromAccount.productName }} - {{ fromAccount.accountNo }}
+              </mat-option>
+            </mat-select>
+            <mat-error *ngIf="createStandingInstructionsForm.controls.fromAccountId.hasError('required')">
+              From Account is <strong>required</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field fxFlex="48%">
+            <mat-label>Destination</mat-label>
+            <mat-select required formControlName="destination">
+              <mat-option *ngFor="let destinationType of destinationTypeData" [value]="destinationType.id">
+                {{ destinationType.value }}
+              </mat-option>
+            </mat-select>
+            <mat-error *ngIf="createStandingInstructionsForm.controls.destination.hasError('required')">
+              Destination is <strong>required</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field fxFlex="48%">
+            <mat-label>To Office</mat-label>
+            <mat-select required formControlName="toOfficeId" (selectionChange)="changeEvent()">
+              <mat-option *ngFor="let toOfficeType of toOfficeTypeData" [value]="toOfficeType.id">
+                {{ toOfficeType.name }}
+              </mat-option>
+            </mat-select>
+            <mat-error *ngIf="createStandingInstructionsForm.controls.toOfficeId.hasError('required')">
+              To Office is <strong>required</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field fxFlex="48%">
+            <mat-label>Beneficiary</mat-label>
+            <mat-select required formControlName="toClientId" (selectionChange)="changeEvent()">
+              <mat-option *ngFor="let toClientType of toClientTypeData" [value]="toClientType.id">
+                {{ toClientType.displayName }}
+              </mat-option>
+            </mat-select>
+            <mat-error *ngIf="createStandingInstructionsForm.controls.toClientId.hasError('required')">
+              Beneficiary is <strong>required</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field fxFlex="48%">
+            <mat-label>To Account Type</mat-label>
+            <mat-select required formControlName="toAccountType" (selectionChange)="changeEvent()">
+              <mat-option *ngFor="let toAccountType of toAccountTypeData" [value]="toAccountType.id">
+                {{ toAccountType.value }}
+              </mat-option>
+            </mat-select>
+            <mat-error *ngIf="createStandingInstructionsForm.controls.toAccountType.hasError('required')">
+              To Account Type is <strong>required</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field fxFlex="48%">
+            <mat-label>To Account</mat-label>
+            <mat-select required formControlName="toAccountId" (selectionChange)="changeEvent()">
+              <mat-option *ngFor="let toAccount of toAccountData" [value]="toAccount.id">
+                {{ toAccount.productName }} - {{ toAccount.accountNo }}
+              </mat-option>
+            </mat-select>
+            <mat-error *ngIf="createStandingInstructionsForm.controls.toAccountId.hasError('required')">
+              To Account is <strong>required</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field fxFlex="48%">
+            <mat-label>Standing Instruction Type</mat-label>
+            <mat-select formControlName="instructionType">
+              <mat-option *ngFor="let instructionsType of instructionTypeData" [value]="instructionsType.id">
+                {{ instructionsType.value }}
+              </mat-option>
+            </mat-select>
+            <mat-error *ngIf="createStandingInstructionsForm.controls.instructionType.hasError('required')">
+              Standing Instruction Type is <strong>required</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field fxFlex="48%">
+            <mat-label>Amount</mat-label>
+            <input type="number" matInput required formControlName="amount">
+            <mat-error *ngIf="createStandingInstructionsForm.controls.amount.hasError('required')">
+              Amount is <strong>required</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field fxFlex="48%">
+            <mat-label>Validity From</mat-label>
+            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="validFromDatePicker" required
+              formControlName="validFrom">
+            <mat-datepicker-toggle matSuffix [for]="validFromDatePicker"></mat-datepicker-toggle>
+            <mat-datepicker #validFromDatePicker></mat-datepicker>
+            <mat-error *ngIf="createStandingInstructionsForm.controls.validFrom.hasError('required')">
+              Valid From Date is <strong>required</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field fxFlex="48%">
+            <mat-label>Validity To</mat-label>
+            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="validTillDatePicker" required
+              formControlName="validTill">
+            <mat-datepicker-toggle matSuffix [for]="validTillDatePicker"></mat-datepicker-toggle>
+            <mat-datepicker #validTillDatePicker></mat-datepicker>
+            <mat-error *ngIf="createStandingInstructionsForm.controls.validTill.hasError('required')">
+              Valid Till Date is <strong>required</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field fxFlex="48%">
+            <mat-label>Recurrence Type</mat-label>
+            <mat-select required formControlName="recurrenceType">
+              <mat-option *ngFor="let recurrenceType of recurrenceTypeData" [value]="recurrenceType.id">
+                {{ recurrenceType.value }}
+              </mat-option>
+            </mat-select>
+            <mat-error *ngIf="createStandingInstructionsForm.controls.recurrenceType.hasError('required')">
+              Recurrence Type is <strong>required</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field fxFlex="48%">
+            <mat-label>Interval</mat-label>
+            <input type="number" matInput required formControlName="recurrenceInterval">
+            <mat-error *ngIf="createStandingInstructionsForm.controls.recurrenceInterval.hasError('required')">
+              Recurrence Interval is <strong>required</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field fxFlex="48%">
+            <mat-label>Recurrence Frequency</mat-label>
+            <mat-select required formControlName="recurrenceFrequency">
+              <mat-option *ngFor="let recurrenceFrequencyType of recurrenceFrequencyTypeData"
+                [value]="recurrenceFrequencyType.id">
+                {{ recurrenceFrequencyType.value }}
+              </mat-option>
+            </mat-select>
+            <mat-error *ngIf="createStandingInstructionsForm.controls.recurrenceFrequency.hasError('required')">
+              Recurrence Frequency is <strong>required</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field fxFlex="48%">
+            <mat-label>On Month Day</mat-label>
+            <input required matInput [min]="minDate" [max]="maxDate" [matDatepicker]="recurrenceOnMonthDayDatePicker"
+              formControlName="recurrenceOnMonthDay">
+            <mat-datepicker-toggle matSuffix [for]="recurrenceOnMonthDayDatePicker"></mat-datepicker-toggle>
+            <mat-datepicker #recurrenceOnMonthDayDatePicker></mat-datepicker>
+            <mat-error *ngIf="createStandingInstructionsForm.controls.recurrenceOnMonthDay.hasError('required')">
+              On Month Day is <strong>required</strong>
+            </mat-error>
+          </mat-form-field>
+
+        </div>
+
+      </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="primary" [disabled]="!createStandingInstructionsForm.valid"
+          (click)="submit()">Submit</button>
+      </mat-card-actions>
+
+    </form>
+
+  </mat-card>
+
+</div>

src/app/account-transfers/create-standing-instructions/create-standing-instructions.component.spec.ts

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

src/app/account-transfers/create-standing-instructions/create-standing-instructions.component.ts

@@ -0,0 +1,224 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { AccountTransfersService } from '../account-transfers.service';
+import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
+import { DatePipe } from '@angular/common';
+
+@Component({
+  selector: 'mifosx-create-standing-instructions',
+  templateUrl: './create-standing-instructions.component.html',
+  styleUrls: ['./create-standing-instructions.component.scss']
+})
+export class CreateStandingInstructionsComponent implements OnInit {
+
+  /** Standing Instructions Data */
+  standingIntructionsTemplate: any;
+  /** Minimum date allowed. */
+  minDate = new Date(2000, 0, 1);
+  /** Maximum date allowed. */
+  maxDate = new Date(2100, 0, 1);
+  /** Allow Client Edit */
+  allowclientedit = true;
+  /** Edit Standing Instructions form. */
+  createStandingInstructionsForm: FormGroup;
+  /** Priority Type Data */
+  priorityTypeData: any;
+  /** Status Type Data */
+  statusTypeData: any;
+  /** Instruction Type Data  */
+  instructionTypeData: any;
+  /** Recurrence Type Data */
+  recurrenceTypeData: any;
+  /** Recurrence Frequency Type Data */
+  recurrenceFrequencyTypeData: any;
+  /** Transfer Type Data */
+  transferTypeData: any;
+  /** From Account Type Data */
+  fromAccountTypeData: any;
+  /** From Account Data */
+  fromAccountData: any;
+  /** Destination Type Data */
+  destinationTypeData: { id: number; value: string; }[];
+  /** To Office Type Data */
+  toOfficeTypeData: any;
+  /** To Client Type Data */
+  toClientTypeData: any;
+  /** To Account Type Data */
+  toAccountTypeData: any;
+  /** To Account Data */
+  toAccountData: any;
+  /** Account Type Id */
+  accountTypeId: any;
+  /** Office Id */
+  officeId: any;
+  /** Account Type */
+  accountType: any;
+  /** Client Id */
+  clientId: any;
+
+  /**
+   * Retrieves the standing instructions template from `resolve`.
+   * @param {ActivatedRoute} route Activated Route.
+   * @param {FormBuilder} formBuilder Form Builder
+   * @param {Router} router Router
+   * @param {AccountTransfersService} accountTransfersService Account Transfers Service
+   * @param {DatePipe} datePipe Date Pipe
+   */
+  constructor(private formBuilder: FormBuilder,
+    private route: ActivatedRoute,
+    private router: Router,
+    private accountTransfersService: AccountTransfersService,
+    private datePipe: DatePipe) {
+    this.route.data.subscribe((data: { standingIntructionsTemplate: any }) => {
+      this.standingIntructionsTemplate = data.standingIntructionsTemplate;
+      this.setParams();
+      this.setOptions();
+    });
+  }
+  /** Sets the value from the URL */
+  setParams() {
+    this.officeId = this.route.snapshot.queryParams['officeId'];
+    this.accountType = this.route.snapshot.queryParams['accountType'];
+    this.clientId = this.route.parent.snapshot.params['clientId'];
+    switch (this.accountType) {
+      case 'fromloans':
+        this.accountTypeId = '1';
+        break;
+      case 'fromsavings':
+        this.accountTypeId = '2';
+        break;
+      default:
+        this.accountTypeId = '0';
+    }
+  }
+
+  /**
+   * Creates and sets the create standing instructions form.
+   */
+  ngOnInit() {
+    this.createCreateStandingInstructionsForm();
+    this.buildDependencies();
+    this.createStandingInstructionsForm.patchValue({
+      'applicant': this.standingIntructionsTemplate.fromClient.displayName
+    });
+  }
+
+  /**
+   * Creates the standing instruction form.
+   */
+  createCreateStandingInstructionsForm() {
+    this.createStandingInstructionsForm = this.formBuilder.group({
+      'name': ['', Validators.required],
+      'applicant': [{value: '', disabled: true}],
+      'transferType': ['', Validators.required],
+      'priority': ['', Validators.required],
+      'status': ['', Validators.required],
+      'fromAccountType': ['', Validators.required],
+      'fromAccountId': ['', Validators.required],
+      'destination': ['', Validators.required],
+      'toOfficeId': ['', Validators.required],
+      'toClientId': ['', Validators.required],
+      'toAccountType': ['', Validators.required],
+      'toAccountId': ['', Validators.required],
+      'instructionType': ['', Validators.required],
+      'amount': ['', Validators.required],
+      'validFrom': ['', Validators.required],
+      'validTill': ['', Validators.required],
+      'recurrenceType': ['', Validators.required],
+      'recurrenceInterval': ['', Validators.required],
+      'recurrenceFrequency': ['', Validators.required],
+      'recurrenceOnMonthDay': ['', Validators.required]
+    });
+  }
+
+  /** Sets options value */
+  setOptions() {
+    this.transferTypeData = this.standingIntructionsTemplate.transferTypeOptions;
+    this.priorityTypeData = this.standingIntructionsTemplate.priorityOptions;
+    this.statusTypeData = this.standingIntructionsTemplate.statusOptions;
+    this.fromAccountTypeData = this.standingIntructionsTemplate.fromAccountTypeOptions;
+    this.fromAccountData = this.standingIntructionsTemplate.fromAccountOptions;
+    this.destinationTypeData = [{ id: 1, value: 'own account' }, { id: 2, value: 'with in bank' }];
+    this.toOfficeTypeData = this.standingIntructionsTemplate.toOfficeOptions;
+    this.toClientTypeData = this.standingIntructionsTemplate.toClientOptions;
+    this.toAccountTypeData = this.standingIntructionsTemplate.toAccountTypeOptions;
+    this.toAccountData = this.standingIntructionsTemplate.toAccountOptions;
+    this.instructionTypeData = this.standingIntructionsTemplate.instructionTypeOptions;
+    this.recurrenceTypeData = this.standingIntructionsTemplate.recurrenceTypeOptions;
+    this.recurrenceFrequencyTypeData = this.standingIntructionsTemplate.recurrenceFrequencyOptions;
+  }
+
+  /**
+   * Changes the value on change of destination value
+   */
+  buildDependencies() {
+    this.createStandingInstructionsForm.get('destination').valueChanges.subscribe((destination: any) => {
+      if (destination === 1) {
+        this.allowclientedit = false;
+        this.createStandingInstructionsForm.patchValue({
+          'toOfficeId': this.officeId,
+          'toClientId': this.clientId
+        });
+        this.createStandingInstructionsForm.controls['toOfficeId'].disable();
+        this.createStandingInstructionsForm.controls['toClientId'].disable();
+        this.changeEvent();
+      } else {
+        this.allowclientedit = true;
+        this.createStandingInstructionsForm.patchValue({
+          'toOfficeId': '',
+          'toClientId': ''
+        });
+        this.createStandingInstructionsForm.controls['toOfficeId'].enable();
+        this.createStandingInstructionsForm.controls['toClientId'].enable();
+      }
+    });
+
+  }
+
+  /** Executes on change of various select options */
+  changeEvent() {
+    const formValue = this.refineObject(this.createStandingInstructionsForm.value);
+    this.accountTransfersService.getStandingInstructionsTemplate(this.clientId, this.officeId, this.accountTypeId, formValue).subscribe((response: any) => {
+      this.standingIntructionsTemplate = response;
+      this.setOptions();
+    });
+  }
+
+  /** Refine Object
+   * Removes the object param with null or '' values
+   */
+  refineObject(dataObj: Object) {
+    const propNames = Object.getOwnPropertyNames(dataObj);
+    for (let i = 0; i < propNames.length; i++) {
+      const propName = propNames[i];
+      if (dataObj[propName] === null || dataObj[propName] === undefined || dataObj[propName] === '') {
+        delete dataObj[propName];
+      }
+    }
+    return dataObj;
+  }
+
+  /**
+   * Submits the standing instructions form
+   */
+  submit() {
+    const dateFormat = 'dd MMMM yyyy';
+    const standingInstructionData = {
+      ... this.createStandingInstructionsForm.value,
+      dateFormat: dateFormat,
+      locale: 'en',
+      monthDayFormat: 'dd MMMM',
+      fromClientId: this.clientId,
+      fromOfficeId: this.officeId,
+      validFrom: this.datePipe.transform(this.createStandingInstructionsForm.value.validFrom, dateFormat),
+      validTill: this.datePipe.transform(this.createStandingInstructionsForm.value.validTill, dateFormat),
+      recurrenceOnMonthDay: this.datePipe.transform(this.createStandingInstructionsForm.value.recurrenceOnMonthDay, 'dd MMMM'),
+    };
+    delete standingInstructionData['destination'];
+    delete standingInstructionData['applicant'];
+    this.accountTransfersService.createStandingInstructions(standingInstructionData).subscribe((response: any) => {
+      this.router.navigate(['../../'], { relativeTo: this.route });
+    });
+  }
+
+}

src/app/account-transfers/edit-standing-instructions/edit-standing-instructions.component.html

@@ -94,7 +94,7 @@
 
           <mat-form-field fxFlex="48%">
             <mat-label>Amount</mat-label>
-            <input matInput formControlName="type">
+            <input matInput formControlName="amount">
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">

src/app/account-transfers/edit-standing-instructions/edit-standing-instructions.component.ts

@@ -86,7 +86,7 @@ export class EditStandingInstructionsComponent implements OnInit {
   }
 
   /**
-   * Creates the group form.
+   * Creates the standing instructions form.
    */
   createEditStandingInstructionsForm() {
     this.editStandingInstructionsForm = this.formBuilder.group({

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

@@ -229,6 +229,10 @@ const routes: Routes = [
             path: 'sharesaccounts',
             loadChildren: '../shares/shares.module#SharesModule'
           },
+          {
+            path: 'standing-instructions',
+            loadChildren: '../account-transfers/account-transfers.module#AccountTransfersModule'
+          },
         ]
       }
     ]

src/app/clients/clients-view/clients-view.component.html

@@ -37,6 +37,7 @@
       <button mat-raised-button>+ Deposit</button>
       <button mat-raised-button [matMenuTriggerFor]="More">More</button>
       <mat-menu #More="matMenu">
+        <button mat-menu-item (click)="doAction('Create Standing Instructions')">Create Standing Instructions</button>
         <button mat-menu-item [routerLink]="['sharesaccounts', 'create-shares-account']">New Share Account</button>
         <button mat-menu-item [routerLink]="['recurringdeposits', 'create-recurring-deposits-account']">New Recurring Deposit Account</button>
         <button mat-menu-item [routerLink]="['fixed-deposits-accounts', 'create-fixed-deposit-account']">New Fixed Deposits Account</button>

src/app/clients/clients-view/clients-view.component.ts

@@ -95,6 +95,10 @@ export class ClientsViewComponent implements OnInit {
       case 'Delete Image':
         this.deleteProfileImage();
         break;
+      case 'Create Standing Instructions':
+        const queryParams: any = { officeId: this.clientViewData.officeId, accountType: 'fromsavings' };
+        this.router.navigate(['standing-instructions/create-standing-instructions'], { relativeTo: this.route, queryParams: queryParams });
+        break;
     }
   }
 

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

@@ -211,7 +211,7 @@
           Charges
         </a>
         <ng-container *ngIf="recurringDepositsAccountData.clientId">
-          <a mat-tab-link [routerLink]="['./standing-instructions']" routerLinkActive #standingInstructions="routerLinkActive"
+          <a mat-tab-link [routerLink]="['./standing-instructions-tab']" routerLinkActive #standingInstructions="routerLinkActive"
             [active]="standingInstructions.isActive">
             Standing Instructions
           </a>

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

@@ -76,7 +76,7 @@ const routes: Routes = [
                 data: { title: extract('Recurring Deposit Account Charges'), breadcrumb: 'Charges', routeParamBreadcrumb: false }
               },
               {
-                path: 'standing-instructions',
+                path: 'standing-instructions-tab',
                 component: StandingInstructionsTabComponent,
                 data: { title: extract('Recurring Deposit Account Standing Instructions'), breadcrumb: 'Standing Instructions', routeParamBreadcrumb: false },
                 resolve: {
@@ -158,7 +158,6 @@ const routes: Routes = [
         children: [
           {
             path: 'standing-instructions',
-            data: { title: extract('Standing Instructions'), breadcrumb: 'standing-instructions', routeParamBreadcrumb: false },
             loadChildren: '../../account-transfers/account-transfers.module#AccountTransfersModule'
           },
         ]