feat: add loan button (assign/change loan officer) (#867)

Fixes: #248

src/app/loans/loans-view/loan-account-actions/assign-loan-officer/assign-loan-officer.component.html

@@ -0,0 +1,42 @@
+<div class="container">
+
+  <form [formGroup]="assignOfficerForm" (ngSubmit)="submit()">
+
+    <mat-card-content>
+
+      <div fxLayout="column">
+
+        <mat-form-field>
+          <mat-label> To Loan Officer</mat-label>
+          <mat-select required formControlName="toLoanOfficerId">
+            <mat-option *ngFor="let loanOfficer of loanOfficers" [value]="loanOfficer.id">
+              {{ loanOfficer.displayName }}
+            </mat-option>
+          </mat-select>
+          <mat-error *ngIf="assignOfficerForm.controls.toLoanOfficerId.hasError('required')">
+            Loan Officer is <strong>required</strong>
+          </mat-error>
+        </mat-form-field>
+
+        <mat-form-field>
+          <mat-label>Assignment Date</mat-label>
+          <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="assignOnDatePicker" required formControlName="assignmentDate">
+          <mat-datepicker-toggle matSuffix [for]="assignOnDatePicker"></mat-datepicker-toggle>
+          <mat-datepicker #assignOnDatePicker></mat-datepicker>
+          <mat-error *ngIf="assignOfficerForm.controls.assignmentDate.hasError('required')">
+            Assignment Date <strong>is required</strong>
+          </mat-error>
+        </mat-form-field>
+
+      </div>
+
+      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+        <button type="button" mat-raised-button [routerLink]="['../general']">Cancel</button>
+        <button mat-raised-button color="primary" [disabled]="!assignOfficerForm.valid" *mifosxHasPermission="'BULKREASSIGN_LOAN'">Submit</button>
+      </mat-card-actions>
+
+    </mat-card-content>
+
+  </form>
+
+</div>

src/app/loans/loans-view/loan-account-actions/assign-loan-officer/assign-loan-officer.component.spec.ts

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

src/app/loans/loans-view/loan-account-actions/assign-loan-officer/assign-loan-officer.component.ts

@@ -0,0 +1,75 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { DatePipe } from '@angular/common';
+import { MatDialog } from '@angular/material';
+import { LoansService } from 'app/loans/loans.service';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+
+@Component({
+  selector: 'mifosx-assign-loan-officer',
+  templateUrl: './assign-loan-officer.component.html',
+  styleUrls: ['./assign-loan-officer.component.scss']
+})
+export class AssignLoanOfficerComponent implements OnInit {
+
+  @Input() dataObject: any;
+  /** Loan Id */
+  loanId: string;
+  loanOfficers: any[];
+  /** Minimum Date allowed. */
+  minDate = new Date(2000, 0, 1);
+  /** Maximum Date allowed. */
+  maxDate = new Date();
+  /** Assign loan Officer form. */
+  assignOfficerForm: FormGroup;
+
+  /**
+   * @param {FormBuilder} formBuilder Form Builder.
+   * @param {LoansService} systemService Loan Service.
+   * @param {ActivatedRoute} route Activated Route.
+   * @param {Router} router Router for navigation.
+   */
+  constructor(private formBuilder: FormBuilder,
+    private loanService: LoansService,
+    private route: ActivatedRoute,
+    private router: Router,
+    private datePipe: DatePipe) {
+      this.loanId = this.route.parent.snapshot.params['loanId'];
+    }
+
+  /**
+   * Creates the assign officer form.
+   */
+  ngOnInit() {
+    this.createassignOfficerForm();
+    this.loanOfficers = this.dataObject.loanOfficerOptions;
+  }
+
+  /**
+   * Creates the create close form.
+   */
+  createassignOfficerForm() {
+    this.assignOfficerForm = this.formBuilder.group({
+      'toLoanOfficerId': ['', Validators.required],
+      'assignmentDate': [new Date(), Validators.required]
+    });
+  }
+
+  submit() {
+    const assignmentDatee = this.assignOfficerForm.value.assignmentDate;
+    const dateFormat = 'yyyy-MM-dd';
+    this.assignOfficerForm.patchValue({
+      assignmentDate: this.datePipe.transform(assignmentDatee, dateFormat)
+    });
+    const assignForm = this.assignOfficerForm.value;
+    assignForm.locale = 'en';
+    assignForm.dateFormat = dateFormat;
+    assignForm.fromLoanOfficerId = this.dataObject.loanOfficerId || '';
+
+    this.loanService.loanActionButtons(this.loanId, assignForm, 'assignLoanOfficer')
+      .subscribe((response: any) => {
+        this.router.navigate([`../../${this.loanId}/general`], { relativeTo: this.route });
+    });
+  }
+
+}

src/app/loans/loans-view/loan-account-actions/loan-account-actions.component.html

@@ -2,5 +2,6 @@
   <mat-card>
     <mifosx-loans-account-close *ngIf="actions.close"></mifosx-loans-account-close>
     <mifosx-undo-approval *ngIf="actions.undo_approval"></mifosx-undo-approval>
+    <mifosx-assign-loan-officer *ngIf="actions.assign_loan_officer" [dataObject]="actionButtonData" ></mifosx-assign-loan-officer>
   </mat-card>
 </div>

src/app/loans/loans-view/loan-account-actions/loan-account-actions.component.ts

@@ -13,7 +13,14 @@ import { ActivatedRoute, Router } from '@angular/router';
 export class LoanAccountActionsComponent {
 
   /** flag object to store possible actions and render appropriate UI to the user */
-  actions: { close: boolean, undo_approval: boolean } = { close: false, undo_approval: false };
+  actions: { close: boolean,
+            undo_approval: boolean,
+            assign_loan_officer: boolean } = {
+              close: false,
+              undo_approval: false,
+              assign_loan_officer: false };
+  actionButtonData: any;
+  actionName: any;
 
   /**
    * @param router Router.
@@ -21,11 +28,16 @@ export class LoanAccountActionsComponent {
    */
   constructor(private router: Router,
     private route: ActivatedRoute) {
+      this.route.data.subscribe(( data: { actionButtonData: any }) => {
+        this.actionButtonData = data.actionButtonData;
+      });
+
     this.route.params.subscribe(params => {
-      if (params['action'].indexOf('-') > 0) {
-        this.actions[params['action'].replace('-', '_')] = true;
+      this.actionName = params['action'];
+      if (this.actionName === 'change-loan-officer') {
+        this.actionName = 'assign-loan-officer';
       }
-      this.actions[params['action']] = true;
+      this.actions[this.actionName.replace(/-/g, '_')] = true;
     });
   }
 

src/app/loans/loans-view/loan-account-actions/undo-approval/undo-approval.component.ts

@@ -37,7 +37,7 @@ export class UndoApprovalComponent implements OnInit {
    */
   submit() {
     const loanId = this.route.parent.snapshot.params['loanId'];
-    this.loanService.undoLoanApproval(loanId, {'note': this.note.value}).subscribe((response: any) => {
+    this.loanService.loanActionButtons(loanId, {'note': this.note.value}, 'undoapproval').subscribe((response: any) => {
       this.router.navigate(['../general'], {relativeTo: this.route});
     });
   }

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

@@ -111,7 +111,7 @@ export class LoansViewComponent implements OnInit {
   }
 
   loanAction(button: string) {
-    button = button.replace(' ', '-').toLowerCase();
+    button = button.replace(/\s/g, '-').toLowerCase();
     this.router.navigate([button], { relativeTo: this.route });
   }