feat: view bulk imports page (#637)

Fixes: #633

src/app/bulk-import/bulk-import-routing.module.ts

@@ -1,30 +0,0 @@
-/** Angular Imports */
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-
-/** Translation Imports */
-import { extract } from '../core/i18n/i18n.service';
-
-/** Custom Components */
-import { BulkImportComponent } from './bulk-import.component';
-
-/** Bulk Import Routes */
-const routes: Routes = [
-  {
-    path: '',
-    data: { title: extract('Bulk Import'), breadcrumb: 'Bulk Import' },
-    component: BulkImportComponent
-  }
-];
-
-/**
- * Bulk Import Routing Module
- *
- * Configures the bulk import routes.
- */
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule],
-  providers: [ ]
-})
-export class BulkImportRoutingModule { }

src/app/bulk-import/bulk-import.module.ts

@@ -1,25 +0,0 @@
-/** Angular Imports */
-import { NgModule } from '@angular/core';
-
-/** Custom Modules */
-import { SharedModule } from '../shared/shared.module';
-import { BulkImportRoutingModule } from './bulk-import-routing.module';
-
-/** Custom Components */
-import { BulkImportComponent } from './bulk-import.component';
-
-/**
- * Bulk Import Module
- *
- * All components related to bulk import functions should be declared here.
- */
-@NgModule({
-  imports: [
-    SharedModule,
-    BulkImportRoutingModule
-  ],
-  declarations: [
-    BulkImportComponent
-  ]
-})
-export class BulkImportModule { }

src/app/centers/centers.component.html

@@ -11,7 +11,7 @@
       </mat-checkbox>
     </div>
     <div class="action-button" fxLayoutGap="25px">
-      <button mat-raised-button color="primary">
+      <button mat-raised-button color="primary" [routerLink]="['../', 'organization', 'bulk-import', 'Centers']">
         <fa-icon icon="download"></fa-icon>&nbsp;&nbsp;Import Center
       </button>
       <button mat-raised-button color="primary" [routerLink]="['create']">

src/app/clients/clients.component.html

@@ -8,7 +8,7 @@
       </mat-checkbox>
     </div>
     <div class="action-button" fxLayoutGap="25px">
-      <button mat-raised-button color="primary" [routerLink]="['import']">
+      <button mat-raised-button color="primary" [routerLink]="['../', 'organization', 'bulk-import', 'Clients']">
         <fa-icon icon="download"></fa-icon>&nbsp;&nbsp;Import Client
       </button>
       <button mat-raised-button color="primary" [routerLink]="['create']">

src/app/groups/groups.component.html

@@ -7,6 +7,9 @@
       <mat-checkbox #showClosedGroups labelPosition="after" (change)="changeShowClosedGroups()">Show Closed Groups</mat-checkbox>
     </div>
     <div class="action-button" fxLayoutGap="25px">
+      <button mat-raised-button color="primary" [routerLink]="['../', 'organization', 'bulk-import', 'Groups']">
+        <fa-icon icon="download"></fa-icon>&nbsp;&nbsp;Import Group
+      </button>
       <button mat-raised-button color="primary" [routerLink]="['create']">
         <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;Create Group
       </button>

src/app/organization/bulk-import/bulk-import.component.html

@@ -8,56 +8,56 @@
 
         <mat-nav-list>
 
-          <mat-list-item>
+          <mat-list-item [routerLink]="['Offices']">
             <mat-icon matListIcon>
               <fa-icon icon="building" size="sm"></fa-icon>
             </mat-icon>
             <h4 matLine>Offices</h4>
           </mat-list-item>
 
-          <mat-list-item>
+          <mat-list-item [routerLink]="['Users']">
             <mat-icon matListIcon>
               <fa-icon icon="user" size="sm"></fa-icon>
             </mat-icon>
             <h4 matLine>Users</h4>
           </mat-list-item>
 
-          <mat-list-item >
+          <mat-list-item [routerLink]="['Groups']">
             <mat-icon matListIcon>
               <fa-icon icon="users" size="sm"></fa-icon>
             </mat-icon>
             <h4 matLine>Groups</h4>
           </mat-list-item>
 
-          <mat-list-item>
+          <mat-list-item [routerLink]="['Loan Accounts']">
             <mat-icon matListIcon>
               <fa-icon icon="money-bill-alt" size="sm"></fa-icon>
             </mat-icon>
             <h4 matLine>Loan Accounts</h4>
           </mat-list-item>
 
-          <mat-list-item>
+          <mat-list-item [routerLink]="['Savings Accounts']">
             <mat-icon matListIcon>
               <fa-icon icon="money-bill-alt" size="sm"></fa-icon>
             </mat-icon>
             <h4 matLine>Savings Accounts</h4>
           </mat-list-item>
 
-          <mat-list-item>
+          <mat-list-item [routerLink]="['Fixed Deposit Accounts']">
             <mat-icon matListIcon>
               <fa-icon icon="money-bill-alt" size="sm"></fa-icon>
             </mat-icon>
             <h4 matLine>Fixed Deposit Accounts</h4>
           </mat-list-item>
 
-          <mat-list-item>
+          <mat-list-item [routerLink]="['Chart of Accounts']">
             <mat-icon matListIcon>
               <fa-icon icon="money-bill-alt" size="sm"></fa-icon>
             </mat-icon>
             <h4 matLine>Chart of Accounts</h4>
           </mat-list-item>
 
-          <mat-list-item>
+          <mat-list-item [routerLink]="['Share Accounts']">
             <mat-icon matListIcon>
               <fa-icon icon="money-bill-alt" size="sm"></fa-icon>
             </mat-icon>
@@ -72,7 +72,7 @@
 
         <mat-nav-list>
 
-          <mat-list-item>
+          <mat-list-item [routerLink]="['Employees']">
             <mat-icon matListIcon>
               <fa-icon icon="user" size="sm"></fa-icon>
             </mat-icon>
@@ -80,56 +80,56 @@
           </mat-list-item>
 
 
-          <mat-list-item>
+          <mat-list-item [routerLink]="['Clients']">
             <mat-icon matListIcon>
               <fa-icon icon="user" size="sm"></fa-icon>
             </mat-icon>
             <h4 matLine>Clients</h4>
           </mat-list-item>
 
-          <mat-list-item>
+          <mat-list-item [routerLink]="['Centers']">
             <mat-icon matListIcon>
               <fa-icon icon="users" size="sm"></fa-icon>
             </mat-icon>
             <h4 matLine>Centers</h4>
           </mat-list-item>
 
-          <mat-list-item>
+          <mat-list-item [routerLink]="['Loan Repayments']">
             <mat-icon matListIcon>
               <fa-icon icon="chevron-right" size="sm"></fa-icon>
             </mat-icon>
             <h4 matLine>Loan Repayments</h4>
           </mat-list-item>
 
-          <mat-list-item >
+          <mat-list-item [routerLink]="['Savings Transactions']">
             <mat-icon matListIcon>
               <fa-icon icon="chevron-right" size="sm"></fa-icon>
             </mat-icon>
             <h4 matLine>Savings Transactions</h4>
           </mat-list-item>
 
-          <mat-list-item >
+          <mat-list-item [routerLink]="['Fixed Deposit Transactions']">
             <mat-icon matListIcon>
               <fa-icon icon="chevron-right" size="sm"></fa-icon>
             </mat-icon>
             <h4 matLine>Fixed Deposit Transactions</h4>
           </mat-list-item>
 
-          <mat-list-item>
+          <mat-list-item [routerLink]="['Recurring Deposit Transactions']">
             <mat-icon matListIcon>
               <fa-icon icon="chevron-right" size="sm"></fa-icon>
             </mat-icon>
             <h4 matLine>Recurring Deposit Transactions</h4>
           </mat-list-item>
 
-          <mat-list-item>
+          <mat-list-item [routerLink]="['Journal Entries']">
             <mat-icon matListIcon>
               <fa-icon icon="chevron-right" size="sm"></fa-icon>
             </mat-icon>
             <h4 matLine>Journal Entries</h4>
           </mat-list-item>
 
-          <mat-list-item >
+          <mat-list-item [routerLink]="['Guarantors']">
             <mat-icon matListIcon>
               <fa-icon icon="chevron-right" size="sm"></fa-icon>
             </mat-icon>

src/app/organization/bulk-import/bulk-import.component.ts

@@ -11,9 +11,8 @@ import { Component, OnInit } from '@angular/core';
 })
 export class BulkImportComponent implements OnInit {
 
-  constructor() { }
+  constructor() {}
 
-  ngOnInit() {
-  }
+  ngOnInit() {}
 
 }

src/app/organization/bulk-import/bulk-import.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 { OrganizationService } from '../organization.service';
+
+/** Custom Imports */
+import { BulkImports } from './view-bulk-import/bulk-imports';
+
+/**
+ * Bulk Imports data resolver.
+ */
+@Injectable()
+export class BulkImportResolver implements Resolve<Object> {
+
+   bulkImportsArray = BulkImports;
+
+  /**
+   * @param {OrganizationService} organizationService Organization service.
+   */
+  constructor(private organizationService: OrganizationService) {
+  }
+
+  /**
+   * Gets bulk-import's entity name
+   * @param importName Bulk Import Name
+   */
+  getEntityName(importName: string) {
+    const bulkImport = this.bulkImportsArray.find((entry: any) => importName === entry.name);
+    return bulkImport.entityType;
+  }
+
+  /**
+   * Returns the imports data.
+   * @returns {Observable<any>}
+   */
+  resolve(route: ActivatedRouteSnapshot): Observable<any> {
+    const entity = this.getEntityName(route.params['import-name']);
+    return this.organizationService.getImports(entity);
+  }
+
+}

src/app/organization/bulk-import/view-bulk-import/bulk-imports.ts

@@ -0,0 +1,110 @@
+export const BulkImports = [
+    {
+      name: 'Offices',
+      entityType: 'offices',
+      urlSuffix: '/offices',
+      formFields: 0
+    },
+    {
+      name: 'Users',
+      entityType: 'users',
+      urlSuffix: '/users',
+      formFields: 2
+    },
+    {
+      name: 'Groups',
+      entityType: 'groups',
+      urlSuffix: '/groups',
+      formFields: 2
+    },
+    {
+      name: 'Centers',
+      entityType: 'centers',
+      urlSuffix: '/centers',
+      formFields: 2
+    },
+    {
+      name: 'Clients',
+      entityType: 'client',
+      urlSuffix: '/clients',
+      formFields: 3
+    },
+    {
+      name: 'Employees',
+      entityType: 'staff',
+      urlSuffix: '/staff',
+      formFields: 1
+    },
+    {
+      name: 'Guarantors',
+      entityType: 'guarantors',
+      urlSuffix: '/loans/1/guarantors',
+      formFields: 1
+    },
+    {
+      name: 'Journal Entries',
+      entityType: 'gljournalentries',
+      urlSuffix: '/journalentries',
+      formFields: 1
+    },
+    {
+      name: 'Loan Accounts',
+      entityType: 'loans',
+      urlSuffix: '/loans',
+      formFields: 2
+    },
+    {
+      name: 'Savings Accounts',
+      entityType: 'savingsaccount',
+      urlSuffix: '/savingsaccounts',
+      formFields: 2
+    },
+    {
+      name: 'Fixed Deposit Accounts',
+      entityType: 'fixeddepositaccounts',
+      urlSuffix: '/fixeddepositaccounts',
+      formFields: 2
+    },
+    {
+      name: 'Reccuring Deposit Accounts',
+      entityType: 'recurringdeposits',
+      urlSuffix: '/recurringdepositaccounts',
+      formFields: 2
+    },
+    {
+      name: 'Chart of Accounts',
+      entityType: 'chartofaccounts',
+      urlSuffix: '/glaccounts',
+      formFields: 2
+    },
+    {
+      name: 'Share Accounts',
+      entityType: 'shareaccounts',
+      urlSuffix: '/accounts/share',
+      formFields: 1
+    },
+    {
+      name: 'Loan Repayments',
+      entityType: 'loantransactions',
+      urlSuffix: '/loans/repayments',
+      formFields: 1
+    },
+    {
+      name: 'Savings Transactions',
+      entityType: 'savingstransactions',
+      urlSuffix: '/savingsaccounts/transactions',
+      formFields: 1
+    },
+    {
+      name: 'Fixed Deposit Transactions',
+      entityType: 'fixeddeposittransactions',
+      urlSuffix: '/fixeddepositaccounts/transaction',
+      formFields: 1
+    },
+    {
+      name: 'Recurring Deposit Transactions',
+      entityType: 'recurringdepositstransactions',
+      urlSuffix: '/recurringdepositaccounts/transactions',
+      formFields: 1
+    },
+  ];

src/app/organization/bulk-import/view-bulk-import/view-bulk-import.component.html

@@ -0,0 +1,150 @@
+<div class="container">
+
+  <div fxLayoutGap="2%" class="m-b-20">
+
+    <mat-card fxLayout="column" fxLayoutGap="2%" fxFlex="50%">
+
+      <h3><strong>{{bulkImport.name}} Template</strong></h3>
+  
+      <form [formGroup]="bulkImportForm">
+  
+        <mat-card-content>
+  
+          <div *ngIf="bulkImport.formFields >= 1">
+            <mat-form-field fxFlex>
+              <mat-label>Office</mat-label>
+              <mat-select required formControlName="officeId">
+                <mat-option *ngFor="let office of officeData" [value]="office.id">
+                {{ office.name }}
+                </mat-option>
+              </mat-select>
+            </mat-form-field>
+          </div>
+  
+          <div *ngIf="bulkImport.formFields >= 2">
+            <mat-form-field fxFlex>
+              <mat-label>Staff</mat-label>
+              <mat-select required formControlName="staffId">
+                <mat-option *ngFor="let staff of staffData" [value]="staff.id">
+                {{ staff.displayName }}
+                </mat-option>
+              </mat-select>
+            </mat-form-field>
+          </div>
+  
+          <div *ngIf="bulkImport.formFields === 3">
+            <mat-form-field fxFlex>
+              <mat-label>Legal Form</mat-label>
+              <mat-select required formControlName="legalForm">
+                <mat-option value="Entity">Entity</mat-option>
+                <mat-option value="Person">Person</mat-option>
+              </mat-select>
+            </mat-form-field>
+          </div>
+  
+        </mat-card-content>
+  
+      </form>
+      
+      <div fxFlex="13%">
+        <button mat-raised-button color="primary" (click)="downloadTemplate()">
+          <i class="fa fa-download"></i>&nbsp;&nbsp;Download
+        </button>
+      </div>
+  
+    </mat-card>
+  
+    <mat-card fxLayout="column" fxLayoutGap="2%" fxFlex="50%">
+  
+      <h3><strong>{{bulkImport.name}}</strong></h3>
+
+      <h4>Select Excel File</h4>
+
+      <mifosx-file-upload  flex="75%" (change)="onFileSelect($event)"></mifosx-file-upload>
+
+      <mat-hint *ngIf="bulkImport.name === 'Clients'">Please retain the value Entity/Person in the filename.</mat-hint>
+
+      <div fxFlex="13%">
+        <button mat-raised-button color="primary" [disabled]="!template" (click)="uploadTemplate()">
+          <i class="fa fa-upload"></i>&nbsp;&nbsp;Upload
+        </button>
+      </div>
+
+      <div *ngIf="bulkImport.formFields >= 2" fxFlex class="cover"></div>
+  
+    </mat-card>
+
+  </div>
+
+  <mat-card>
+
+    <div>
+      <h3 class="documents"><strong>Documents</strong></h3>
+    </div>
+
+    <div class="m-b-10" fxLayoutAlign="end">
+      <button  mat-raised-button color="primary" (click)="refreshDocuments()">
+        <i class="fa fa-repeat"></i>&nbsp;&nbsp;Refresh
+      </button>
+    </div>
+
+    <div class="imports-table mat-elevation-z1">
+
+      <table #importsTable mat-table [dataSource]="dataSource" matSort>
+
+        <ng-container matColumnDef="name">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
+          <td mat-cell *matCellDef="let import"> {{ import.name }} </td>
+        </ng-container>
+
+        <ng-container matColumnDef="importTime">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Import Time </th>
+          <td mat-cell *matCellDef="let import"> {{ import.importTime | date }} </td>
+        </ng-container>
+
+        <ng-container matColumnDef="endTime">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> End Time </th>
+          <td mat-cell *matCellDef="let import"> {{ import.endTime | date }} </td>
+        </ng-container>
+
+        <ng-container matColumnDef="completed">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Completed </th>
+          <td mat-cell *matCellDef="let import"> {{ import.completed }} </td>
+        </ng-container>
+
+        <ng-container matColumnDef="totalRecords">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Total Records </th>
+          <td mat-cell *matCellDef="let import"> {{ import.totalRecords }} </td>
+        </ng-container>
+
+        <ng-container matColumnDef="successCount">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Success Count </th>
+          <td mat-cell *matCellDef="let import"> {{ import.successCount }} </td>
+        </ng-container>
+
+        <ng-container matColumnDef="failureCount">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Failure Count </th>
+          <td mat-cell *matCellDef="let import"> {{ import.failureCount }} </td>
+        </ng-container>
+
+        <ng-container matColumnDef="download">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Download </th>
+          <td mat-cell *matCellDef="let import">
+            <button mat-icon-button (click)="downloadDocument(import.name, import.importId)">
+              <fa-icon icon="cloud-download-alt"></fa-icon>
+            </button>
+          </td>
+        </ng-container>
+
+        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+        <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="select-row"></tr>
+
+      </table>
+
+    </div>
+
+    <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
+
+  </mat-card>
+  
+</div>

src/app/organization/bulk-import/view-bulk-import/view-bulk-import.component.scss

@@ -0,0 +1,17 @@
+.imports-table {
+    overflow: auto;
+}
+
+.documents {
+  margin: 0;
+}
+
+.cover {
+  background-color: #f2f2f2;
+  margin-top: 1%;
+}
+
+h4 {
+  font-weight: 400;
+  margin: 1% 0;
+}

src/app/organization/bulk-import/view-bulk-import/view-bulk-import.component.spec.ts

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

src/app/organization/bulk-import/view-bulk-import/view-bulk-import.component.ts

@@ -0,0 +1,191 @@
+/** Angular Imports */
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { MatPaginator, MatSort, MatTableDataSource, MatTable } from '@angular/material';
+import { FormGroup, FormBuilder} from '@angular/forms';
+
+/** Custom Imports */
+import { OrganizationService } from '../../organization.service';
+import { BulkImports } from './bulk-imports';
+
+/**
+ * View Bulk Imports Component
+ */
+@Component({
+  selector: 'mifosx-view-bulk-import',
+  templateUrl: './view-bulk-import.component.html',
+  styleUrls: ['./view-bulk-import.component.scss']
+})
+export class ViewBulkImportComponent implements OnInit {
+
+  /** offices Data */
+  officeData: any;
+  /** staff Data */
+  staffData: any;
+  /** Entity Template */
+  template: File;
+  /** imports Data */
+  importsData: any;
+  /** bulk-import form. */
+  bulkImportForm: FormGroup;
+  /** array of deined bulk-imports */
+  bulkImportsArray = BulkImports;
+  /** bulk-import which user navigated to */
+  bulkImport: any = {};
+  /** Data source for imports table. */
+  dataSource = new MatTableDataSource();
+  /** Columns to be displayed in imports table. */
+  displayedColumns: string[] =
+  [
+    'name',
+    'importTime',
+    'endTime',
+    'completed',
+    'totalRecords',
+    'successCount',
+    'failureCount',
+    'download'
+  ];
+
+  /** Paginator for imports table. */
+  @ViewChild(MatPaginator) paginator: MatPaginator;
+  /** Sorter for imports table. */
+  @ViewChild(MatSort) sort: MatSort;
+  /** Imports table reference */
+  @ViewChild('importsTable') importsTableRef: MatTable<Element>;
+
+  /**
+   * fetches offices and imports data from resolve
+   * @param {ActivatedRoute} route ActivatedRoute
+   * @param {FormBuilder} formBuilder FormBuilder
+   * @param {OrganizationService} organizationService OrganizationService
+   */
+  constructor(private route: ActivatedRoute,
+              private formBuilder: FormBuilder,
+              private organizationService: OrganizationService,
+              ) {
+    this.bulkImport.name = this.route.snapshot.params['import-name'];
+    this.route.data.subscribe( (data: any) => {
+      this.officeData = data.offices;
+      this.importsData = data.imports;
+    });
+  }
+
+  /**
+   * Gets bulk import's properties.
+   */
+  ngOnInit() {
+    this.bulkImport = this.bulkImportsArray.find( (entry) => entry.name === this.bulkImport.name);
+    this.createBulkImportForm();
+    this.buildDependencies();
+    this.setImports();
+  }
+
+  /**
+   * Creates the bulk import form.
+   */
+  createBulkImportForm() {
+    this.bulkImportForm = this.formBuilder.group({
+      'officeId': [''],
+      'staffId': [''],
+      'legalForm': [''],
+    });
+  }
+
+  /**
+   * Subscribe to value changes and fetches select options accordingly.
+   */
+  buildDependencies() {
+    this.bulkImportForm.get('officeId').valueChanges.subscribe((value: any) => {
+      if (this.bulkImport.formFields >= 2) {
+         this.organizationService.getStaff(value).subscribe( (data: any) => {
+          this.staffData = data;
+        });
+      }
+    });
+  }
+
+  /**
+   * Initializes the data source, paginator and sorter for imports table.
+   */
+  setImports() {
+    this.dataSource = new MatTableDataSource(this.importsData);
+    this.dataSource.paginator = this.paginator;
+    this.dataSource.sort = this.sort;
+  }
+
+  /**
+   * Gets bulk import's downloadable template from API.
+   */
+  downloadTemplate() {
+    const officeId = this.bulkImportForm.get('officeId').value;
+    const staffId = this.bulkImportForm.get('staffId').value;
+    let legalFormType = '';
+    /** Only for Client Bulk Imports */
+    switch (this.bulkImportForm.get('legalForm').value) {
+      case 'Person':
+          legalFormType = 'CLIENTS_PERSON';
+        break;
+      case 'Entity':
+          legalFormType = 'CLIENTS_ENTTTY';
+        break;
+    }
+    this.organizationService.getImportTemplate(this.bulkImport.urlSuffix, officeId, staffId, legalFormType).subscribe( (res: any) => {
+      const contentType = res.headers.get('Content-Type');
+      const blob = new Blob([res.body], { type: contentType });
+      const fileOfBlob = new File([blob], 'template.xls', { type: contentType });
+      window.open(window.URL.createObjectURL(fileOfBlob));
+    });
+  }
+
+  /**
+   * Sets file form control value.
+   * @param {any} $event file change event.
+   */
+  onFileSelect($event: any) {
+    if ($event.target.files.length > 0) {
+      this.template = $event.target.files[0];
+    }
+  }
+
+  /**
+   * Upload excel file containing bulk import data.
+   */
+  uploadTemplate() {
+    let legalFormType = '';
+    /** Only for Client Bulk Imports */
+    if (this.bulkImport.name === 'Clients') {
+      if (this.template.name.toLowerCase().includes('entity')) {
+        legalFormType = 'CLIENTS_ENTTTY';
+      } else if (this.template.name.toLowerCase().includes('person')) {
+        legalFormType = 'CLIENTS_PERSON';
+      }
+    }
+    this.organizationService.uploadImportDocument(this.template, this.bulkImport.urlSuffix, legalFormType).subscribe(() => {});
+  }
+
+  /**
+   * Reloads imports data table.
+   */
+  refreshDocuments() {
+    this.organizationService.getImports(this.bulkImport.entityType).subscribe( (data: any) => {
+      this.dataSource =  new MatTableDataSource(data);
+      this.importsTableRef.renderRows();
+    });
+  }
+
+  /**
+   * Download import document.
+   * @param {string} name Import Name
+   * @param {any} id ImportID
+   */
+  downloadDocument(name: string, id: any) {
+    this.organizationService.getImportDocument(id).subscribe( (res: any) => {
+      const contentType = res.headers.get('Content-Type');
+      const blob = new Blob([res.body], { type: contentType });
+      const fileOfBlob = new File([blob], name, { type: contentType });
+      window.open(window.URL.createObjectURL(fileOfBlob));
+    });
+  }
+
+}

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

@@ -49,6 +49,10 @@ import { EditCashierComponent } from './tellers/cashiers/edit-cashier/edit-cashi
 import { CreateCashierComponent } from './tellers/cashiers/create-cashier/create-cashier.component';
 import { EditHolidayComponent } from './holidays/edit-holiday/edit-holiday.component';
 import { EditAdhocQueryComponent } from './adhoc-query/edit-adhoc-query/edit-adhoc-query.component';
+import { EditOfficeComponent } from './offices/edit-office/edit-office.component';
+import { BulkImportComponent } from './bulk-import/bulk-import.component';
+import { ViewBulkImportComponent } from './bulk-import/view-bulk-import/view-bulk-import.component';
+import { ViewLoanProvisioningCriteriaComponent } from './loan-provisioning-criteria/view-loan-provisioning-criteria/view-loan-provisioning-criteria.component';
 
 /** Custom Resolvers */
 import { LoanProvisioningCriteriaResolver } from './loan-provisioning-criteria/loan-provisioning-criteria.resolver';
@@ -68,9 +72,7 @@ import { PasswordPreferencesTemplateResolver } from './password-preferences/pass
 import { EntityDataTableChecksResolver } from './entity-data-table-checks/entity-data-table-checks.resolver';
 import { WorkingDaysResolver } from './working-days/working-days.resolver';
 import { EditOfficeResolver } from './offices/common-resolvers/edit-office.resolver';
-import { EditOfficeComponent } from './offices/edit-office/edit-office.component';
 import { AdhocQueryTemplateResolver } from './adhoc-query/adhoc-query-template.resolver';
-import { ViewLoanProvisioningCriteriaComponent } from './loan-provisioning-criteria/view-loan-provisioning-criteria/view-loan-provisioning-criteria.component';
 import { LoanProvisioningCriteriasResolver } from './loan-provisioning-criteria/loan-provisioning-criterias.resolver';
 import { CashierResolver } from './tellers/common-resolvers/cashier.resolver';
 import { CashiersResolver } from './tellers/common-resolvers/cashiers.resolver';
@@ -84,6 +86,7 @@ import { CashierTransactionTemplateResolver } from './tellers/teller-transaction
 import { EditCashierResolver } from './tellers/common-resolvers/edit-cashier.resolver';
 import { HolidayTemplateResolver } from './holidays/holiday-template.resolver';
 import { AdhocQueryAndTemplateResolver } from './adhoc-query/common-resolvers/adhoc-query-and-template.resolver';
+import { BulkImportResolver } from './bulk-import/bulk-import.resolver';
 
 /** Organization Routes */
 const routes: Routes = [
@@ -107,7 +110,6 @@ const routes: Routes = [
                 loanProvisioningCriterias: LoanProvisioningCriteriasResolver
               }
             },
-
             {
               path: ':id',
               data: { title: extract('View Provisioning Criteria'), routeParamBreadcrumb: 'id' },
@@ -488,7 +490,22 @@ const routes: Routes = [
         },
         {
           path: 'bulk-import',
-          loadChildren: '../bulk-import/bulk-import.module#BulkImportModule'
+          data: { title: extract('Bulk Import'), breadcrumb: 'Bulk Import' },
+          children: [
+            {
+              path: '',
+              component: BulkImportComponent,
+            },
+            {
+              path: ':import-name',
+              component: ViewBulkImportComponent,
+              data: { title: extract('View Bulk Import'), routeParamBreadcrumb: 'import-name' },
+              resolve: {
+                offices: OfficesResolver,
+                imports: BulkImportResolver
+              }
+            }
+          ]
         },
         {
           path: 'holidays',
@@ -570,7 +587,8 @@ const routes: Routes = [
     CashierTransactionTemplateResolver,
     EditCashierResolver,
     HolidayResolver,
-    HolidayTemplateResolver
+    HolidayTemplateResolver,
+    BulkImportResolver
   ]
 })
 export class OrganizationRoutingModule { }

src/app/organization/organization.module.ts

@@ -52,6 +52,8 @@ import { EditCashierComponent } from './tellers/cashiers/edit-cashier/edit-cashi
 import { CreateCashierComponent } from './tellers/cashiers/create-cashier/create-cashier.component';
 import { EditHolidayComponent } from './holidays/edit-holiday/edit-holiday.component';
 import { EditAdhocQueryComponent } from './adhoc-query/edit-adhoc-query/edit-adhoc-query.component';
+import { BulkImportComponent } from './/bulk-import/bulk-import.component';
+import { ViewBulkImportComponent } from './bulk-import/view-bulk-import/view-bulk-import.component';
 
 /**
  * Organization Module
@@ -109,7 +111,9 @@ import { EditAdhocQueryComponent } from './adhoc-query/edit-adhoc-query/edit-adh
     EditCashierComponent,
     CreateCashierComponent,
     EditHolidayComponent,
-    EditAdhocQueryComponent
+    EditAdhocQueryComponent,
+    BulkImportComponent,
+    ViewBulkImportComponent
   ]
 })
 export class OrganizationModule { }

src/app/organization/organization.service.ts

@@ -562,4 +562,77 @@ export class OrganizationService {
     return this.http.put(`/funds/${fundId}`, fundData);
   }
 
+  /*
+   * @param {any} officeId ID of office to retrieve staff from.
+   * @returns {Observable<any>} Staff data.
+   */
+  getStaff(officeId: any): Observable<any> {
+    const httpParams = new HttpParams()
+      .set('officeId', officeId.toString());
+    return this.http.get('/staff', { params: httpParams });
+  }
+
+  /**
+   * @param {string} entity Entity to get imports data for.
+   * @returns {Observable<any>} Imports data.
+   */
+  getImports(entity: string): Observable<any> {
+    const httpParams = new HttpParams()
+      .set('entityType', entity);
+    return this.http.get('/imports', { params: httpParams } );
+  }
+
+  /**
+   * @param urlSuffix of Bulk-Import
+   * @param officeId Office ID for template retrieval
+   * @param staffId Staff ID for template retrieval
+   * @param legalFormType Legal Form type fortemplate retrieval
+   * @returns {Observable<any>} Import Template
+   */
+  getImportTemplate(urlSuffix: string, officeId: any, staffId: any, legalFormType: string): Observable<any> {
+    let httpParams = new HttpParams()
+      .set('tenantIdentifier', 'default')
+      .set('locale', 'en')
+      .set('dateFormat', 'dd MMMM yyyy');
+    if (officeId) {
+      httpParams = httpParams.set('officeId', officeId.toString());
+    }
+    if (staffId) {
+      httpParams = httpParams.set('staffId', staffId.toString());
+    }
+    if (legalFormType.length) {
+      httpParams = httpParams.set('legalFormType', legalFormType);
+    }
+    return this.http.get(`${urlSuffix}/downloadtemplate`, { params: httpParams, responseType: 'arraybuffer', observe: 'response'} );
+  }
+
+  /**
+   * @param {any} id Import ID for document retrieval
+   * @returns {Observable<any>} Import Document
+   */
+  getImportDocument(id: any): Observable<any> {
+    const httpParams = new HttpParams()
+      .set('importDocumentId', id)
+      .set('tenantIdentifier', 'default' );
+    return this.http.get('/imports/downloadOutputTemplate', { params: httpParams, responseType: 'arraybuffer', observe: 'response'});
+  }
+
+  /**
+   * @param {File} file File to be uploaded
+   * @param {string} urlSuffix URL suffix
+   * @param {string} legalFormType Legal Form type for file upload
+   * @returns {Observable<any>}
+   */
+  uploadImportDocument(file: File, urlSuffix: string, legalFormType: string): Observable<any> {
+    let httpParams = new HttpParams();
+    if (legalFormType.length) {
+      httpParams = httpParams.set('legalFormType', legalFormType);
+    }
+    const formData = new FormData();
+    formData.append('file', file);
+    formData.append('locale', 'en');
+    formData.append('datefFormat', 'dd MMMM yyyy');
+    return this.http.post(`${urlSuffix}/uploadtemplate`, formData , { params: httpParams } );
+  }
+
 }