feat: add edit standing instructions details (#1139)

Fixes: #1138

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

@@ -7,9 +7,11 @@ 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';
 
 /** Custom Resolvers */
 import { ViewStandingInstructionsResolver } from './common-resolvers/view-standing-instructions.resolver';
+import { StandingInstructionsDataAndTemplateResolver } from './common-resolvers/standing-instructions-data-and-template.resolver';
 
 /** Loans Route. */
 const routes: Routes = [
@@ -28,6 +30,14 @@ const routes: Routes = [
               standingInstructionsData: ViewStandingInstructionsResolver,
             },
           },
+          {
+            path: 'edit',
+            data: { title: extract('Edit Standing Instructions'), breadcrumb: 'edit', routeParamBreadcrumb: false },
+            component: EditStandingInstructionsComponent,
+            resolve: {
+              standingInstructionsDataAndTemplate: StandingInstructionsDataAndTemplateResolver,
+            },
+          }
         ]
       }]
   }
@@ -38,6 +48,7 @@ const routes: Routes = [
   declarations: [],
   providers: [
     ViewStandingInstructionsResolver,
+    StandingInstructionsDataAndTemplateResolver
   ]
 })
 

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

@@ -10,6 +10,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';
 
 /**
  * Account Transfers Module
@@ -19,7 +20,8 @@ import { ViewStandingInstructionsComponent } from './view-standing-instructions/
 @NgModule({
   imports: [SharedModule, PipesModule, DirectivesModule, AccountTransfersRoutingModule],
   declarations: [
-    ViewStandingInstructionsComponent
+    ViewStandingInstructionsComponent,
+    EditStandingInstructionsComponent
   ],
   providers: [DatePipe]
 })

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

@@ -23,4 +23,14 @@ export class AccountTransfersService {
     return this.http.get(`/standinginstructions/${standingInstructionsId}`);
   }
 
+  getStandingInstructionsDataAndTemplate(standingInstructionsId: any): Observable<any> {
+    const httpParams = new HttpParams().set('associations', 'template');
+    return this.http.get(`/standinginstructions/${standingInstructionsId}`, { params: httpParams });
+  }
+
+  updateStandingInstructionsData(standinginstructionsId: any, data: any): Observable<any> {
+    const httpParams = new HttpParams().set('command', 'update');
+    return this.http.put(`/standinginstructions/${standinginstructionsId}`, data, { params: httpParams });
+  }
+
 }

src/app/account-transfers/common-resolvers/standing-instructions-data-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 { AccountTransfersService } from '../account-transfers.service';
+
+/**
+ * View Standing Instructions resolver.
+ */
+@Injectable()
+export class StandingInstructionsDataAndTemplateResolver implements Resolve<Object> {
+
+    /**
+     * @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 standingInstructionsId = route.parent.paramMap.get('standingInstructionsId');
+        return this.accountTransfersService.getStandingInstructionsDataAndTemplate(standingInstructionsId);
+    }
+
+}

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

@@ -0,0 +1,170 @@
+<div class="container">
+
+  <mat-card>
+
+    <form [formGroup]="editStandingInstructionsForm">
+
+      <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 formControlName="name">
+          </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>
+            <input matInput formControlName="type">
+          </mat-form-field>
+
+          <mat-form-field fxFlex="48%">
+            <mat-label>From Account Type</mat-label>
+            <input matInput formControlName="fromAccountType">
+          </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="editStandingInstructionsForm.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="editStandingInstructionsForm.controls.status.hasError('required')">
+              Status is <strong>required</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field fxFlex="48%">
+            <mat-label>From Account</mat-label>
+            <input matInput formControlName="fromAccount">
+          </mat-form-field>
+
+          <mat-form-field fxFlex="48%">
+            <mat-label>Destination</mat-label>
+            <input matInput formControlName="destination">
+          </mat-form-field>
+
+          <mat-form-field fxFlex="48%">
+            <mat-label>To Office</mat-label>
+            <input matInput formControlName="toOffice">
+          </mat-form-field>
+
+          <mat-form-field fxFlex="48%">
+            <mat-label>Beneficiary</mat-label>
+            <input matInput formControlName="toClientId">
+          </mat-form-field>
+
+          <mat-form-field fxFlex="48%">
+            <mat-label>To Account Type</mat-label>
+            <input matInput formControlName="toAccountType">
+          </mat-form-field>
+
+          <mat-form-field fxFlex="48%">
+            <mat-label>To Account</mat-label>
+            <input matInput formControlName="toAccount">
+          </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-form-field>
+
+          <mat-form-field fxFlex="48%">
+            <mat-label>Amount</mat-label>
+            <input matInput formControlName="type">
+          </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="editStandingInstructionsForm.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="editStandingInstructionsForm.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="editStandingInstructionsForm.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 matInput formControlName="recurrenceInterval">
+          </mat-form-field>
+
+          <mat-form-field fxFlex="48%">
+            <mat-label>Recurrence Frequency</mat-label>
+            <mat-select formControlName="recurrenceFrequency">
+              <mat-option *ngFor="let recurrenceFrequencyType of recurrenceFrequencyTypeData"
+                [value]="recurrenceFrequencyType.id">
+                {{ recurrenceFrequencyType.value }}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+
+          <mat-form-field fxFlex="48%">
+            <mat-label>On Month Day</mat-label>
+            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="recurrenceOnMonthDayDatePicker"
+              formControlName="recurrenceOnMonthDay">
+            <mat-datepicker-toggle matSuffix [for]="recurrenceOnMonthDayDatePicker"></mat-datepicker-toggle>
+            <mat-datepicker #recurrenceOnMonthDayDatePicker></mat-datepicker>
+          </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]="!editStandingInstructionsForm.valid" (click)="submit()">Submit</button>
+      </mat-card-actions>
+
+    </form>
+
+  </mat-card>
+
+</div>

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

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

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

@@ -0,0 +1,149 @@
+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-edit-standing-instructions',
+  templateUrl: './edit-standing-instructions.component.html',
+  styleUrls: ['./edit-standing-instructions.component.scss']
+})
+export class EditStandingInstructionsComponent implements OnInit {
+
+  /** Standing Instructions Data */
+  standingInstructionsData: any;
+  /** Standing Instructions Id */
+  standingInstructionsId: any;
+  /** Allow Client Edit */
+  allowclientedit = false;
+  /** Edit Standing Instructions form. */
+  editStandingInstructionsForm: 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;
+  /** Minimum date allowed. */
+  minDate = new Date(2000, 0, 1);
+  /** Maximum date allowed. */
+  maxDate = new Date();
+
+  /**
+   * Retrieves the standing instructions data from `resolve`.
+   * @param {ActivatedRoute} route Activated Route.
+   */
+  constructor(private formBuilder: FormBuilder,
+    private route: ActivatedRoute,
+    private router: Router,
+    private accountTransfersService: AccountTransfersService,
+    private datePipe: DatePipe) {
+    this.route.data.subscribe((data: { standingInstructionsDataAndTemplate: any }) => {
+      this.standingInstructionsData = data.standingInstructionsDataAndTemplate;
+      this.standingInstructionsId = data.standingInstructionsDataAndTemplate.id;
+      if (this.standingInstructionsData.fromClient.id === this.standingInstructionsData.toClient.id) {
+        this.allowclientedit = false;
+      }
+      this.setOptions();
+    });
+  }
+
+  /**
+   * Creates and sets the edit standing instructions form.
+   */
+  ngOnInit() {
+    this.createEditStandingInstructionsForm();
+    const presentDate = new Date();
+    const n = presentDate.getFullYear();
+    this.standingInstructionsData.recurrenceOnMonthDay.push(n);
+    this.editStandingInstructionsForm.patchValue({
+      'name': this.standingInstructionsData.name,
+      'applicant': this.standingInstructionsData.fromClient.displayName,
+      'type': this.standingInstructionsData.transferType.value,
+      'priority': this.standingInstructionsData.priority.id,
+      'status': this.standingInstructionsData.status.id,
+      'fromAccountType': this.standingInstructionsData.fromAccountType.value,
+      'fromAccount': this.standingInstructionsData.fromAccount.productName,
+      'destination': this.allowclientedit ? 'Within Bank' : 'Own Account',
+      'toOffice': this.standingInstructionsData.toOffice.name,
+      'toClientId': this.standingInstructionsData.toClient.displayName,
+      'toAccountType': this.standingInstructionsData.toAccountType.value,
+      'toAccount': this.standingInstructionsData.toAccount.productName,
+      'instructionType': this.standingInstructionsData.instructionType.id,
+      'amount': this.standingInstructionsData.amount,
+      'validFrom': this.standingInstructionsData.validFrom && new Date(this.standingInstructionsData.validFrom),
+      'validTill': this.standingInstructionsData.validTill && new Date(this.standingInstructionsData.validTill),
+      'recurrenceType': this.standingInstructionsData.recurrenceType.id,
+      'recurrenceInterval': this.standingInstructionsData.recurrenceInterval,
+      'recurrenceFrequency': this.standingInstructionsData.recurrenceFrequency.id,
+      'recurrenceOnMonthDay': new Date(this.standingInstructionsData.recurrenceOnMonthDay)
+    });
+  }
+
+  /**
+   * Creates the group form.
+   */
+  createEditStandingInstructionsForm() {
+    this.editStandingInstructionsForm = this.formBuilder.group({
+      'name': [{value: '', disabled: true}],
+      'applicant': [{ value: '', disabled: true }],
+      'type': [{ value: '', disabled: true }],
+      'priority': ['', Validators.required],
+      'status': ['', Validators.required],
+      'fromAccountType': [{ value: '', disabled: true }],
+      'fromAccount': [{ value: '', disabled: true }],
+      'destination': [{ value: '', disabled: true }],
+      'toOffice': [{ value: '', disabled: true }],
+      'toClientId': [{ value: '', disabled: true }],
+      'toAccountType': [{ value: '', disabled: true }],
+      'toAccount': [{ value: '', disabled: true }],
+      'instructionType': '',
+      'amount': '',
+      'validFrom': ['', Validators.required],
+      'validTill': ['', Validators.required],
+      'recurrenceType': ['', Validators.required],
+      'recurrenceInterval': '',
+      'recurrenceFrequency': '',
+      'recurrenceOnMonthDay': ''
+    });
+  }
+
+  setOptions() {
+    this.priorityTypeData = this.standingInstructionsData.priorityOptions;
+    this.statusTypeData = this.standingInstructionsData.statusOptions;
+    this.instructionTypeData = this.standingInstructionsData.instructionTypeOptions;
+    this.recurrenceTypeData = this.standingInstructionsData.recurrenceTypeOptions;
+    this.recurrenceFrequencyTypeData = this.standingInstructionsData.recurrenceFrequencyOptions;
+  }
+
+  /**
+   * Submits the standing instructions form
+   */
+  submit() {
+    const dateFormat = 'dd MMMM yyyy';
+    const standingInstructionData = {
+      amount: this.editStandingInstructionsForm.value.amount,
+      dateFormat: dateFormat,
+      instructionType: this.editStandingInstructionsForm.value.instructionType,
+      locale: 'en',
+      monthDayFormat:	'dd MMMM',
+      priority: this.editStandingInstructionsForm.value.priority,
+      recurrenceFrequency:	this.editStandingInstructionsForm.value.recurrenceFrequency,
+      recurrenceInterval:	this.editStandingInstructionsForm.value.recurrenceInterval,
+      recurrenceOnMonthDay: this.datePipe.transform(this.editStandingInstructionsForm.value.recurrenceOnMonthDay, 'dd MMMM'),
+      recurrenceType:	this.editStandingInstructionsForm.value.recurrenceType,
+      status:	this.editStandingInstructionsForm.value.status,
+      validFrom: this.datePipe.transform(this.editStandingInstructionsForm.value.validFrom, dateFormat),
+      validTill: this.datePipe.transform(this.editStandingInstructionsForm.value.validTill, dateFormat)
+    };
+    this.accountTransfersService.updateStandingInstructionsData(this.standingInstructionsId, standingInstructionData).subscribe((response: any) => {
+      this.router.navigate(['../../'], { relativeTo: this.route });
+    });
+  }
+
+}

src/app/account-transfers/view-standing-instructions/view-standing-instructions.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>

src/app/deposits/recurring-deposits/recurring-deposits-account-view/standing-instructions-tab/standing-instructions-tab.component.html

@@ -47,7 +47,8 @@
         <td mat-cell *matCellDef="let instruction">
           <span *ngIf="instruction.status.value!=='Deleted'">
             <button class="account-action-button" mat-raised-button color="primary"
-              matTooltip="Edit Standing Instruction" *mifosxHasPermission="'UPDATE_STANDINGINSTRUCTION'">
+              matTooltip="Edit Standing Instruction" *mifosxHasPermission="'UPDATE_STANDINGINSTRUCTION'"
+              [routerLink]="['../', 'standing-instructions', instruction.id, 'edit']">
               <i class="fa fa-edit"></i>
             </button>
           </span>

src/app/loans/edit-loans-account/edit-loans-account.component.html

@@ -64,4 +64,4 @@
 
   </mat-horizontal-stepper>
 
-</div>
+</div>