feat: loans advanced search (fund-mapping) component (#1180)

Fixes: #1179

src/app/organization/fund-mapping/advance-search-template.resolver.ts

@@ -0,0 +1,30 @@
+/** Angular Imports */
+import { Injectable } from '@angular/core';
+import { Resolve } from '@angular/router';
+
+/** rxjs Imports */
+import { Observable } from 'rxjs';
+
+/** Custom Services */
+import { OrganizationService } from '../organization.service';
+
+/**
+ * Advance Search Template resolver.
+ */
+@Injectable()
+export class AdvanceSearchTemplateResolver implements Resolve<Object> {
+
+  /**
+   * @param {OrganizationService} organizationService Organization service.
+   */
+  constructor(private organizationService: OrganizationService) {}
+
+  /**
+   * Returns the Advance Search template.
+   * @returns {Observable<any>}
+   */
+  resolve(): Observable<any> {
+    return this.organizationService.getAdvanceSearchTemplate();
+  }
+
+}

src/app/organization/fund-mapping/fund-mapping.component.html

@@ -0,0 +1,223 @@
+<mat-card class="container" *ngIf="!isCollapsed">
+
+  <form [formGroup]="fundMappingForm" (ngSubmit)="submit()">
+
+    <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" fxLayoutAlign.gt-sm="start center">
+  
+      <mat-form-field fxFlex="48%">
+        <mat-label>Loan Status</mat-label>
+        <mat-select formControlName="loanStatus" multiple>
+          <mat-option value="all">All</mat-option>
+          <mat-option value="active">Active</mat-option>
+          <mat-option value="closed">Overpaid</mat-option>
+          <mat-option value="overpaid">Closed (obligations met)</mat-option>
+          <mat-option value="writeoff">Closed (written-off)</mat-option>
+        </mat-select>
+      </mat-form-field>
+
+      <span fxFlex="48%" fxHide.lt-md></span>
+
+      <mat-form-field fxFlex="48%">
+        <mat-label>Product</mat-label>
+        <mat-select formControlName="loanProducts" multiple>
+          <mat-option *ngFor="let product of advanceSearchTemplate.loanProducts" [value]="product.id">
+            {{ product.name }}
+          </mat-option>
+        </mat-select>
+      </mat-form-field>
+  
+      <mat-form-field fxFlex="48%">
+        <mat-label>Office</mat-label>
+        <mat-select formControlName="offices" multiple>
+          <mat-option *ngFor="let office of advanceSearchTemplate.offices" [value]="office.id">
+            {{ office.name }}
+          </mat-option>
+        </mat-select>
+      </mat-form-field>
+
+      <mat-form-field fxFlex="31%">
+        <mat-label>Date Type</mat-label>
+        <mat-select required formControlName="loanDateOption">
+          <mat-option value="approvalDate">Approval Date</mat-option>
+          <mat-option value="createdDate">Creation Date</mat-option>
+          <mat-option value="disbursalDate">Disbursement Date</mat-option>
+        </mat-select>
+      </mat-form-field>
+
+      <mat-form-field fxFlex="31%">
+        <mat-label>From Date</mat-label>
+        <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="fromDatePicker" 
+          required formControlName="loanFromDate" required>
+        <mat-datepicker-toggle matSuffix [for]="fromDatePicker"></mat-datepicker-toggle>
+        <mat-datepicker #fromDatePicker></mat-datepicker>
+        <mat-error *ngIf="fundMappingForm.controls.loanFromDate.hasError('required')">
+          From Date is <strong>required</strong>
+        </mat-error>
+      </mat-form-field>
+
+      <mat-form-field fxFlex="31%">
+        <mat-label>To Date</mat-label>
+        <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="toDatePicker" 
+          required formControlName="loanToDate" required>
+        <mat-datepicker-toggle matSuffix [for]="toDatePicker"></mat-datepicker-toggle>
+        <mat-datepicker #toDatePicker></mat-datepicker>
+        <mat-error *ngIf="fundMappingForm.controls.loanToDate.hasError('required')">
+          To Date is <strong>required</strong>
+        </mat-error>
+      </mat-form-field>
+  
+      <mat-checkbox fxFlex="73%" labelPosition="before" formControlName="includeOutStandingAmountPercentage" class="margin-b">
+        Loan Outstanding Percentage
+      </mat-checkbox>
+  
+      <div *ngIf="fundMappingForm.value.includeOutStandingAmountPercentage" fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
+
+        <mat-form-field *ngIf="fundMappingForm.contains('outStandingAmountPercentageCondition')" fxFlex="31%">
+          <mat-label>Comparison Condition</mat-label>
+          <mat-select required formControlName="outStandingAmountPercentageCondition">
+            <mat-option value="between">between</mat-option>
+            <mat-option value="<="><=</mat-option>
+            <mat-option value=">=">>=</mat-option>
+            <mat-option value="<"><</mat-option>
+            <mat-option value=">">></mat-option>
+            <mat-option value="=">=</mat-option>
+          </mat-select>
+          <mat-error *ngIf="fundMappingForm.controls.outStandingAmountPercentageCondition.hasError('required')">
+            Comparison Condition is <strong>required</strong>
+          </mat-error>
+        </mat-form-field>
+  
+        <mat-form-field *ngIf="fundMappingForm.contains('minOutStandingAmountPercentage')" fxFlex="31%">
+          <mat-label>Minimum Value</mat-label>
+          <input type="number" matInput required formControlName="minOutStandingAmountPercentage">
+          <mat-error *ngIf="fundMappingForm.controls.minOutStandingAmountPercentage.hasError('required')">
+            Minimum Value is <strong>required</strong>
+          </mat-error>
+        </mat-form-field>
+
+        <mat-form-field *ngIf="fundMappingForm.contains('outStandingAmountPercentage')" fxFlex="31%">
+          <mat-label>Comparison Value</mat-label>
+          <input type="number" matInput required formControlName="outStandingAmountPercentage">
+          <mat-error *ngIf="fundMappingForm.controls.outStandingAmountPercentage.hasError('required')">
+            Comparison Value is <strong>required</strong>
+          </mat-error>
+        </mat-form-field>
+  
+        <mat-form-field *ngIf="fundMappingForm.contains('maxOutStandingAmountPercentage')" fxFlex="31%">
+          <mat-label>Maximum Value</mat-label>
+          <input type="number" matInput required formControlName="maxOutStandingAmountPercentage">
+          <mat-error *ngIf="fundMappingForm.controls.maxOutStandingAmountPercentage.hasError('required')">
+            Maximum Value is <strong>required</strong>
+          </mat-error>
+        </mat-form-field>
+  
+      </div>
+  
+      <mat-checkbox fxFlex="73%" labelPosition="before" formControlName="includeOutstandingAmount" class="margin-b">
+        Loan Outstanding Amount
+      </mat-checkbox>
+  
+      <div *ngIf="fundMappingForm.value.includeOutstandingAmount" fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
+  
+        <mat-form-field *ngIf="fundMappingForm.contains('outstandingAmountCondition')" fxFlex="31%">
+          <mat-label>Comparison Condition</mat-label>
+          <mat-select required formControlName="outstandingAmountCondition">
+            <mat-option value="between">between</mat-option>
+            <mat-option value="<="><=</mat-option>
+            <mat-option value=">=">>=</mat-option>
+            <mat-option value="<"><</mat-option>
+            <mat-option value=">">></mat-option>
+            <mat-option value="=">=</mat-option>
+          </mat-select>
+          <mat-error *ngIf="fundMappingForm.controls.outstandingAmountCondition.hasError('required')">
+            Comparison Condition is <strong>required</strong>
+          </mat-error>
+        </mat-form-field>
+  
+        <mat-form-field *ngIf="fundMappingForm.contains('minOutstandingAmount')" fxFlex="31%">
+          <mat-label>Minimum Value</mat-label>
+          <input type="number" matInput required formControlName="minOutstandingAmount">
+          <mat-error *ngIf="fundMappingForm.controls.minOutstandingAmount.hasError('required')">
+            Minimum Value is <strong>required</strong>
+          </mat-error>
+        </mat-form-field>
+
+        <mat-form-field *ngIf="fundMappingForm.contains('outstandingAmount')" fxFlex="31%">
+          <mat-label>Comparison Value</mat-label>
+          <input type="number" matInput required formControlName="outstandingAmount">
+          <mat-error *ngIf="fundMappingForm.controls.outstandingAmount.hasError('required')">
+            Comparison Value is <strong>required</strong>
+          </mat-error>
+        </mat-form-field>
+  
+        <mat-form-field *ngIf="fundMappingForm.contains('maxOutstandingAmount')" fxFlex="31%">
+          <mat-label>Maximum Value</mat-label>
+          <input type="number" matInput required formControlName="maxOutstandingAmount">
+          <mat-error *ngIf="fundMappingForm.controls.maxOutstandingAmount.hasError('required')">
+            Maximum Value is <strong>required</strong>
+          </mat-error>
+        </mat-form-field>
+  
+      </div>
+
+    </div>
+
+    <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]="!fundMappingForm.valid">
+        <fa-icon icon="search"></fa-icon>&nbsp; Summary
+      </button>
+    </mat-card-actions>
+  
+  </form>  
+
+</mat-card>
+
+
+<div class="container" *ngIf="isCollapsed">
+
+  <mat-card>
+
+    <div class="m-b-20">
+      <button mat-raised-button color="primary" (click)="isCollapsed = false">
+        Parameters
+      </button>
+    </div>
+
+    <table class="mat-elevation-z1" mat-table [dataSource]="dataSource" matSort>
+
+      <ng-container matColumnDef="officeName">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> Office Name </th>
+        <td mat-cell *matCellDef="let loan"> {{ loan.officeName }}</td>
+      </ng-container>
+
+      <ng-container matColumnDef="productName">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> Product Name </th>
+        <td mat-cell *matCellDef="let loan"> {{ loan.loanProductName }}</td>
+      </ng-container>
+
+      <ng-container matColumnDef="count">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> Count </th>
+        <td mat-cell *matCellDef="let loan"> {{ loan.count }} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="outstanding">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> Outstanding </th>
+        <td mat-cell *matCellDef="let loan"> {{ loan.loanOutStanding }} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="percentage">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> Percentage </th>
+        <td mat-cell *matCellDef="let loan"> {{ loan.percentage }} </td>
+      </ng-container>
+
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+
+    </table>
+
+    <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
+
+  </mat-card>
+
+</div>

src/app/organization/fund-mapping/fund-mapping.component.scss

@@ -0,0 +1,17 @@
+.container {
+
+  max-width: 73rem;
+
+  .margin-v {
+    margin: 1em 0;
+  }
+  
+  .margin-b {
+    margin: 0 0 1em 0;
+  }
+  
+  .margin-t {
+    margin-top: 1em;
+  }
+
+}

src/app/organization/fund-mapping/fund-mapping.component.spec.ts

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

src/app/organization/fund-mapping/fund-mapping.component.ts

@@ -0,0 +1,164 @@
+/** Angular Imports */
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { MatTableDataSource, MatPaginator, MatSort } from '@angular/material';
+import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
+import { ActivatedRoute } from '@angular/router';
+import { DatePipe } from '@angular/common';
+
+/** Custom Services */
+import { OrganizationService } from '../organization.service';
+
+/**
+ * Fund Mapping Component.
+ */
+@Component({
+  selector: 'mifosx-fund-mapping',
+  templateUrl: './fund-mapping.component.html',
+  styleUrls: ['./fund-mapping.component.scss']
+})
+export class FundMappingComponent implements OnInit {
+
+  /** Minimum Date allowed. */
+  minDate = new Date(2000, 0, 1);
+  /** Maximum Date allowed. */
+  maxDate = new Date();
+  /** Fund mapping form. */
+  fundMappingForm: FormGroup;
+  /** Advance Search Template */
+  advanceSearchTemplate: any;
+  /** Toggles b/w form and table */
+  isCollapsed = false;
+
+  /** Columns to be displayed in loans table. */
+  displayedColumns: string[] = ['officeName', 'productName', 'count', 'outstanding', 'percentage'];
+  /** Data source for loans table. */
+  dataSource: MatTableDataSource<any>;
+
+  /** Paginator for loans table. */
+  @ViewChild(MatPaginator) paginator: MatPaginator;
+  /** Sorter for loans table. */
+  @ViewChild(MatSort) sort: MatSort;
+
+  /**
+   * Retrieves the advance search template from `resolve`.
+   * @param {FormBuilder} formBuilder Form Builder.
+   * @param {OrganizationService} organizationService Organization Service.
+   * @param {Router} router Router for navigation.
+   * @param {DatePipe} datePipe Date Pipe to format date.
+   */
+  constructor(private formBuilder: FormBuilder,
+              private organizationService: OrganizationService,
+              private route: ActivatedRoute,
+              private datePipe: DatePipe) {
+    this.route.data.subscribe((data: { advanceSearchTemplate: any }) => {
+      this.advanceSearchTemplate = data.advanceSearchTemplate;
+    });
+  }
+
+  ngOnInit() {
+    this.createFundMappingForm();
+    this.buildDependencies();
+  }
+
+  /**
+   * Creates the Fund Mapping Form
+   */
+  createFundMappingForm() {
+    this.fundMappingForm = this.formBuilder.group({
+      'loanStatus': [''],
+      'loanProducts': [''],
+      'offices': [''],
+      'loanDateOption': ['', Validators.required],
+      'loanFromDate': ['', Validators.required],
+      'loanToDate': ['', Validators.required],
+      'includeOutStandingAmountPercentage': [false],
+      'includeOutstandingAmount': [false]
+    });
+  }
+
+  /**
+   * Sets conditional child controls.
+   */
+  buildDependencies() {
+    this.fundMappingForm.get('includeOutStandingAmountPercentage').valueChanges.subscribe((value: boolean) => {
+      if (value) {
+        this.fundMappingForm.addControl('outStandingAmountPercentageCondition', new FormControl('', Validators.required));
+        this.fundMappingForm.get('outStandingAmountPercentageCondition').valueChanges.subscribe((_value: string) => {
+          if (_value === 'between') {
+            this.fundMappingForm.addControl('minOutStandingAmountPercentage', new FormControl('', Validators.required));
+            this.fundMappingForm.addControl('maxOutStandingAmountPercentage', new FormControl('', Validators.required));
+            this.fundMappingForm.removeControl('outStandingAmountPercentage');
+          } else {
+            this.fundMappingForm.addControl('outStandingAmountPercentage', new FormControl('', Validators.required));
+            this.fundMappingForm.removeControl('minOutStandingAmountPercentage');
+            this.fundMappingForm.removeControl('maxOutStandingAmountPercentage');
+          }
+        });
+        this.fundMappingForm.get('outStandingAmountPercentageCondition').patchValue('between');
+      } else {
+        this.fundMappingForm.removeControl('outStandingAmountPercentageCondition');
+        this.fundMappingForm.removeControl('minOutStandingAmountPercentage');
+        this.fundMappingForm.removeControl('maxOutStandingAmountPercentage');
+        this.fundMappingForm.removeControl('outStandingAmountPercentage');
+      }
+    });
+    this.fundMappingForm.get('includeOutStandingAmountPercentage').patchValue(true);
+    this.fundMappingForm.get('includeOutstandingAmount').valueChanges.subscribe((value: boolean) => {
+      if (value) {
+        this.fundMappingForm.addControl('outstandingAmountCondition', new FormControl('', Validators.required));
+        this.fundMappingForm.get('outstandingAmountCondition').valueChanges.subscribe((_value: string) => {
+          if (_value === 'between') {
+            this.fundMappingForm.addControl('minOutstandingAmount', new FormControl('', Validators.required));
+            this.fundMappingForm.addControl('maxOutstandingAmount', new FormControl('', Validators.required));
+            this.fundMappingForm.removeControl('outstandingAmount');
+          } else {
+            this.fundMappingForm.addControl('outstandingAmount', new FormControl('', Validators.required));
+            this.fundMappingForm.removeControl('minOutstandingAmount');
+            this.fundMappingForm.removeControl('maxOutstandingAmount');
+          }
+        });
+        this.fundMappingForm.get('outstandingAmountCondition').patchValue('between');
+      } else {
+        this.fundMappingForm.removeControl('outstandingAmountCondition');
+        this.fundMappingForm.removeControl('minOutstandingAmount');
+        this.fundMappingForm.removeControl('maxOutstandingAmount');
+        this.fundMappingForm.removeControl('outstandingAmount');
+      }
+    });
+    this.fundMappingForm.get('includeOutstandingAmount').patchValue(true);
+  }
+
+  /**
+   * Initializes the data source, paginator and sorter for loans table.
+   * @param {any} data
+   */
+  setLoans(data: any) {
+    this.dataSource = new MatTableDataSource(data);
+    this.dataSource.paginator = this.paginator;
+    this.dataSource.sort = this.sort;
+  }
+
+  /**
+   * Searches standing loans.
+   */
+  submit() {
+    this.isCollapsed = true;
+    // TODO: Update once language and date settings are setup
+    const locale = 'en';
+    const dateFormat = 'yyyy-MM-dd';
+    this.fundMappingForm.patchValue({
+      'loanFromDate': this.datePipe.transform(this.fundMappingForm.value.loanFromDate, dateFormat),
+      'loanToDate': this.datePipe.transform(this.fundMappingForm.value.loanToDate, dateFormat)
+    });
+    const fundMapping = {
+      ...this.fundMappingForm.value,
+      entities: ['loans'],
+      dateFormat,
+      locale
+    };
+    this.organizationService.retrieveAdvanceSearchResults(fundMapping).subscribe((response: any) => {
+      this.setLoans(response);
+    });
+  }
+
+}

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

@@ -60,6 +60,7 @@ import { CreateLoanProvisioningCriteriaComponent } from './loan-provisioning-cri
 import { BulkLoanReassignmnetComponent } from './bulk-loan-reassignmnet/bulk-loan-reassignmnet.component';
 import { EditLoanProvisioningCriteriaComponent } from './loan-provisioning-criteria/edit-loan-provisioning-criteria/edit-loan-provisioning-criteria.component';
 import { StandingInstructionsHistoryComponent } from './standing-instructions-history/standing-instructions-history.component';
+import { FundMappingComponent } from './fund-mapping/fund-mapping.component';
 
 /** Custom Resolvers */
 import { LoanProvisioningCriteriaResolver } from './loan-provisioning-criteria/common-resolvers/loan-provisioning-criteria.resolver';
@@ -99,6 +100,7 @@ import { EntityDataTableChecksTemplateResolver } from './entity-data-table-check
 import { LoanProvisioningCriteriaTemplateResolver } from './loan-provisioning-criteria/common-resolvers/loan-provisioning-criteria-template.resolver';
 import { LoanProvisioningCriteriaAndTemplateResolver } from './loan-provisioning-criteria/common-resolvers/loan-provisioning-criteria-and-template.resolver';
 import { StandingInstructionsTemplateResolver } from './standing-instructions-history/standing-instructions-template.resolver';
+import { AdvanceSearchTemplateResolver } from './fund-mapping/advance-search-template.resolver';
 
 /** Organization Routes */
 const routes: Routes = [
@@ -329,6 +331,14 @@ const routes: Routes = [
             standingInstructionsTemplate: StandingInstructionsTemplateResolver
           }
         },
+        {
+          path: 'fund-mapping',
+          component: FundMappingComponent,
+          data: { title: extract('Advance Search'), breadcrumb: 'Advance Search' },
+          resolve: {
+            advanceSearchTemplate: AdvanceSearchTemplateResolver
+          }
+        },
         {
           path: 'adhoc-query',
           data: { title: extract('Adhoc Query'), breadcrumb: 'Adhoc Query' },
@@ -674,7 +684,8 @@ const routes: Routes = [
     LoanProvisioningCriteriasResolver,
     LoanProvisioningCriteriaTemplateResolver,
     LoanProvisioningCriteriaAndTemplateResolver,
-    StandingInstructionsTemplateResolver
+    StandingInstructionsTemplateResolver,
+    AdvanceSearchTemplateResolver
   ]
 })
 export class OrganizationRoutingModule { }

src/app/organization/organization.component.html

@@ -40,7 +40,7 @@
             <p matLine>View logged history of standing instructions</p>
           </mat-list-item>
 
-          <mat-list-item>
+          <mat-list-item [routerLink]="['fund-mapping']">
             <mat-icon matListIcon>
               <fa-icon icon="money-bill-alt" size="sm"></fa-icon>
             </mat-icon>

src/app/organization/organization.module.ts

@@ -67,6 +67,7 @@ import { BulkLoanReassignmnetComponent } from './bulk-loan-reassignmnet/bulk-loa
 import { CreateLoanProvisioningCriteriaComponent } from './loan-provisioning-criteria/create-loan-provisioning-criteria/create-loan-provisioning-criteria.component';
 import { EditLoanProvisioningCriteriaComponent } from './loan-provisioning-criteria/edit-loan-provisioning-criteria/edit-loan-provisioning-criteria.component';
 import { StandingInstructionsHistoryComponent } from './standing-instructions-history/standing-instructions-history.component';
+import { FundMappingComponent } from './fund-mapping/fund-mapping.component';
 
 /**
  * Organization Module
@@ -140,6 +141,7 @@ import { StandingInstructionsHistoryComponent } from './standing-instructions-hi
     CreateLoanProvisioningCriteriaComponent,
     EditLoanProvisioningCriteriaComponent,
     StandingInstructionsHistoryComponent,
+    FundMappingComponent,
   ]
 })
 export class OrganizationModule { }

src/app/organization/organization.service.ts

@@ -686,6 +686,20 @@ export class OrganizationService {
     return this.http.get('/imports', { params: httpParams } );
   }
 
+  /**
+   * @returns {Observable<any>}
+   */
+  getAdvanceSearchTemplate(): Observable<any> {
+    return this.http.get('/search/template');
+  }
+
+  /**
+   * @returns {Observable<any>}
+   */
+  retrieveAdvanceSearchResults(queryObject: any): Observable<any> {
+    return this.http.post('/search/advance', queryObject);
+  }
+
   /**
    * @returns {Observable<any>}
    */