feat(provisioning-entries): view entries

Add view provisioning entries component.

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

@@ -33,6 +33,7 @@ import { EditRuleComponent } from './accounting-rules/edit-rule/edit-rule.compon
 import { PeriodicAccrualsComponent } from './periodic-accruals/periodic-accruals.component';
 import { ProvisioningEntriesComponent } from './provisioning-entries/provisioning-entries.component';
 import { CreateProvisioningEntryComponent } from './provisioning-entries/create-provisioning-entry/create-provisioning-entry.component';
+import { ViewProvisioningEntryComponent } from './provisioning-entries/view-provisioning-entry/view-provisioning-entry.component';
 
 const routes: Routes = [
   Route.withShell([
@@ -221,6 +222,11 @@ const routes: Routes = [
               path: 'create',
               component: CreateProvisioningEntryComponent,
               data: { title: extract('Create Provisioning Entry'), breadcrumb: 'Create' }
+            },
+            {
+              path: 'view/:id',
+              component: ViewProvisioningEntryComponent,
+              data: { title: extract('View Provisioning Entry'), routeParamBreadcrumb: 'id' }
             }
           ]
         }

src/app/accounting/accounting.module.ts

@@ -31,6 +31,7 @@ import { EditRuleComponent } from './accounting-rules/edit-rule/edit-rule.compon
 import { PeriodicAccrualsComponent } from './periodic-accruals/periodic-accruals.component';
 import { ProvisioningEntriesComponent } from './provisioning-entries/provisioning-entries.component';
 import { CreateProvisioningEntryComponent } from './provisioning-entries/create-provisioning-entry/create-provisioning-entry.component';
+import { ViewProvisioningEntryComponent } from './provisioning-entries/view-provisioning-entry/view-provisioning-entry.component';
 
 @NgModule({
   imports: [
@@ -66,7 +67,8 @@ import { CreateProvisioningEntryComponent } from './provisioning-entries/create-
     EditRuleComponent,
     PeriodicAccrualsComponent,
     ProvisioningEntriesComponent,
-    CreateProvisioningEntryComponent
+    CreateProvisioningEntryComponent,
+    ViewProvisioningEntryComponent
   ],
   entryComponents: [
     RevertTransactionComponent,

src/app/accounting/accounting.service.ts

@@ -177,4 +177,21 @@ export class AccountingService {
     return this.http.post('/provisioningentries', provisioningEntry);
   }
 
+  getProvisioningEntry(provisioningEntryId: string) {
+    return this.http.get(`/provisioningentries/${provisioningEntryId}`);
+  }
+
+  getLoanProducts() {
+    return this.http.get('/loanproducts');
+  }
+
+  getProvisioningCategories() {
+    return this.http.get('/provisioningcategory');
+  }
+
+  getProvisioningEntryEntries(entryId: string) {
+    const httpParams = new HttpParams().set('entryId', entryId);
+    return this.http.get('/provisioningentries/entries', { params: httpParams });
+  }
+
 }

src/app/accounting/provisioning-entries/provisioning-entries.component.html

@@ -53,7 +53,7 @@
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="['/accounting/provisioning-entries/view', row.id]"></tr>
 
     </table>
 

src/app/accounting/provisioning-entries/view-provisioning-entry/view-provisioning-entry.component.html

@@ -0,0 +1,125 @@
+<div class="container" *ngIf="provisioningEntry">
+
+  <mat-card>
+
+    <mat-card-content>
+
+      <div fxLayout="row wrap" class="content" fxLayout.lt-md="column">
+
+        <div fxFlex="16%" class="header">
+          Created By
+        </div>
+
+        <div fxFlex="16%">
+          {{ provisioningEntry.createdUser }}
+        </div>
+
+        <div fxFlex="16%" class="header">
+          Created On
+        </div>
+
+        <div fxFlex="16%">
+          {{ provisioningEntry.createdDate }}
+        </div>
+
+        <div fxFlex="18%" class="header">
+          Amount to be Reserved
+        </div>
+
+        <div fxFlex="18%">
+          {{ provisioningEntry.reservedAmount }}
+        </div>
+
+      </div>
+
+    </mat-card-content>
+
+  </mat-card>
+
+</div>
+
+<!-- Search -->
+<div class="container m-t-20" fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
+
+  <mat-form-field fxFlex="31%">
+    <input matInput placeholder="Office Name" [formControl]="officeName" [matAutocomplete]="officeNameAutocomplete">
+  </mat-form-field>
+
+  <mat-form-field fxFlex="31%">
+    <input matInput placeholder="Loan Product" [formControl]="loanProduct" [matAutocomplete]="loanProductAutocomplete">
+  </mat-form-field>
+
+  <mat-form-field fxFlex="31%">
+    <input matInput placeholder="Provisioning Category" [formControl]="provisioningCategory" [matAutocomplete]="provisioningCategoryAutocomplete">
+  </mat-form-field>
+
+</div>
+
+<!-- Autocomplete data -->
+<mat-autocomplete autoActiveFirstOption #officeNameAutocomplete="matAutocomplete">
+  <mat-option *ngFor="let office of filteredOfficeData | async" [value]="office.name">
+    {{ office.name }}
+  </mat-option>
+</mat-autocomplete>
+
+<mat-autocomplete autoActiveFirstOption #loanProductAutocomplete="matAutocomplete">
+  <mat-option *ngFor="let loanProduct of filteredLoanProductData | async" [value]="loanProduct.name">
+    {{ loanProduct.name }}
+  </mat-option>
+</mat-autocomplete>
+
+<mat-autocomplete autoActiveFirstOption #provisioningCategoryAutocomplete="matAutocomplete">
+  <mat-option *ngFor="let provisioningCategory of filteredProvisioningCategoryData | async" [value]="provisioningCategory.categoryName">
+    {{ provisioningCategory.categoryName }}
+  </mat-option>
+</mat-autocomplete>
+
+<!--Table -->
+
+<div class="mat-elevation-z8 container">
+
+  <table 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 provisioningEntry"> {{ provisioningEntry.officeName }} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="productName">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> Product Name </th>
+      <td mat-cell *matCellDef="let provisioningEntry"> {{ provisioningEntry.productName }} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="currencyCode">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> Currency Code </th>
+      <td mat-cell *matCellDef="let provisioningEntry"> {{ provisioningEntry.currencyCode }} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="categoryName">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> Category Name </th>
+      <td mat-cell *matCellDef="let provisioningEntry"> {{ provisioningEntry.categoryName }} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="amountreserved">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> Provisioning Amount </th>
+      <td mat-cell *matCellDef="let provisioningEntry"> {{ provisioningEntry.amountreserved }} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="liabilityAccountName">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> Liability Account (CR) </th>
+      <td mat-cell *matCellDef="let provisioningEntry"> {{ provisioningEntry.liabilityAccountName }} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="expenseAccountName">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> Expense Account (DR) </th>
+      <td mat-cell *matCellDef="let provisioningEntry"> {{ provisioningEntry.expenseAccountName }} </td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="['/accounting/provisioning-entries/view', row.id]"></tr>
+
+  </table>
+
+  <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
+
+</div>

src/app/accounting/provisioning-entries/view-provisioning-entry/view-provisioning-entry.component.scss

@@ -0,0 +1,14 @@
+table {
+  width: 100%;
+}
+
+.content {
+  div {
+    margin: 1rem 0;
+    word-wrap: break-word;
+  }
+
+  .header {
+    font-weight: 500;
+  }
+}

src/app/accounting/provisioning-entries/view-provisioning-entry/view-provisioning-entry.component.spec.ts

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

src/app/accounting/provisioning-entries/view-provisioning-entry/view-provisioning-entry.component.ts

@@ -0,0 +1,162 @@
+import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { FormControl } from '@angular/forms';
+import { MatPaginator, MatSort, MatTableDataSource } from '@angular/material';
+
+import { startWith, map, debounceTime, distinctUntilChanged, tap } from 'rxjs/operators';
+
+import { AccountingService } from '../../accounting.service';
+
+@Component({
+  selector: 'mifosx-view-provisioning-entry',
+  templateUrl: './view-provisioning-entry.component.html',
+  styleUrls: ['./view-provisioning-entry.component.scss']
+})
+export class ViewProvisioningEntryComponent implements OnInit, AfterViewInit {
+
+  provisioningEntryId: string;
+  provisioningEntry: any;
+
+  displayedColumns: string[] = ['officeName', 'productName', 'currencyCode', 'categoryName', 'amountreserved', 'liabilityAccountName', 'expenseAccountName'];
+  dataSource: any;
+  filterValue: any = { officeName: '', productName: '', categoryName: '' };
+
+  @ViewChild(MatPaginator) paginator: MatPaginator;
+  @ViewChild(MatSort) sort: MatSort;
+
+  officeName = new FormControl();
+  officeData: any;
+  filteredOfficeData: any
+
+  loanProduct = new FormControl();
+  loanProductData: any;
+  filteredLoanProductData: any;
+
+  provisioningCategory = new FormControl();
+  provisioningCategoryData: any;
+  filteredProvisioningCategoryData: any;
+
+  constructor(private route: ActivatedRoute,
+              private accountingService: AccountingService) { }
+
+  ngOnInit() {
+    this.provisioningEntryId = this.route.snapshot.paramMap.get('id');
+    this.getProvisioningEntry();
+    this.getProvisioningEntryEntries();
+    this.getOffices();
+    this.getLoanProducts();
+    this.getProvisioningCategories();
+  }
+
+  ngAfterViewInit() {
+    this.officeName.valueChanges
+      .pipe(
+        map(value => value.toLowerCase()),
+        debounceTime(500),
+        distinctUntilChanged(),
+        tap((filterValue) => {
+          this.applyFilter(filterValue, 'officeName');
+        })
+      )
+      .subscribe();
+
+    this.loanProduct.valueChanges
+      .pipe(
+        map(value => value.toLowerCase()),
+        debounceTime(500),
+        distinctUntilChanged(),
+        tap((filterValue) => {
+          this.applyFilter(filterValue, 'productName');
+        })
+      )
+      .subscribe();
+
+    this.provisioningCategory.valueChanges
+      .pipe(
+        map(value => value.toLowerCase()),
+        debounceTime(500),
+        distinctUntilChanged(),
+        tap((filterValue) => {
+          this.applyFilter(filterValue, 'categoryName');
+        })
+      )
+      .subscribe();
+  }
+
+  filterPredicate(data: any, filterValue: any) {
+    return data.officeName.toLowerCase().indexOf(filterValue['officeName']) != -1
+      && data.productName.toLowerCase().indexOf(filterValue['productName']) != -1
+      && data.categoryName.toLowerCase().indexOf(filterValue['categoryName']) != -1;
+  }
+
+   applyFilter(filterValue: string, property: string) {
+    this.filterValue[property] = filterValue;
+    this.dataSource.filter = this.filterValue;
+  }
+
+  getProvisioningEntry() {
+    this.accountingService.getProvisioningEntry(this.provisioningEntryId)
+      .subscribe((provisioningEntry: any) => {
+        this.provisioningEntry = provisioningEntry;
+      });
+  }
+
+  getProvisioningEntryEntries() {
+    this.accountingService.getProvisioningEntryEntries(this.provisioningEntryId)
+      .subscribe((provisioningEntryEntries: any) => {
+        this.dataSource = new MatTableDataSource(provisioningEntryEntries.pageItems);
+        this.dataSource.paginator = this.paginator;
+        this.dataSource.sort = this.sort;
+        this.dataSource.filterPredicate = this.filterPredicate;
+      });
+  }
+
+  getOffices() {
+    this.accountingService.getOffices().subscribe(officeData => {
+      this.officeData = officeData;
+      this.filteredOfficeData = this.officeName.valueChanges
+      .pipe(
+        startWith(''),
+        map((office: any) => typeof office === 'string' ? office : office.name),
+        map((officeName: string) => officeName ? this.filterOfficeAutocompleteData(this.officeData, officeName) : this.officeData)
+      );
+    });
+  }
+
+  getLoanProducts() {
+    this.accountingService.getLoanProducts().subscribe(loanProductData => {
+      this.loanProductData = loanProductData;
+      this.filteredLoanProductData = this.loanProduct.valueChanges
+      .pipe(
+        startWith(''),
+        map((loanProduct: any) => typeof loanProduct === 'string' ? loanProduct : loanProduct.name),
+        map((loanProductName: string) => loanProductName ? this.filterLoanProductAutocompleteData(this.loanProductData, loanProductName) : this.loanProductData)
+      );
+    });
+  }
+
+  getProvisioningCategories() {
+    this.accountingService.getProvisioningCategories().subscribe(provisioningCategoryData => {
+      this.provisioningCategoryData = provisioningCategoryData;
+      this.filteredProvisioningCategoryData = this.provisioningCategory.valueChanges
+      .pipe(
+        startWith(''),
+        map((provisioningCategory: any) => typeof provisioningCategory === 'string' ? provisioningCategory : provisioningCategory.categoryName),
+        map((provisioningCategoryName: string) => provisioningCategoryName ? this.filterProvisioningCategoryAutocompleteData(this.provisioningCategoryData, provisioningCategoryName) : this.provisioningCategoryData)
+      );
+    });
+  }
+
+  private filterOfficeAutocompleteData(officeData: any, officeName: string): any {
+    return officeData.filter((office: any) => office.name.toLowerCase().includes(officeName.toLowerCase()));
+  }
+
+  private filterLoanProductAutocompleteData(loanProductData: any, loanProductName: string): any {
+    return loanProductData.filter((loanProduct: any) => loanProduct.name.toLowerCase().includes(loanProductName.toLocaleLowerCase()));
+  }
+
+  private filterProvisioningCategoryAutocompleteData(provisioningCategoryData: any, provisioningCategoryName: string): any {
+    return provisioningCategoryData.filter((provisioningCategory: any) => provisioningCategory.categoryName.toLowerCase().includes(provisioningCategoryName.toLocaleLowerCase()));
+  }
+
+}