Documents and Notes for Clients, Loans and Clients (#1632)

Co-authored-by: Jose Alberto Hernandez <alberto@MacBook-Pro.local>

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

@@ -63,6 +63,14 @@
 
     </mat-step>
 
+    <mat-step *ngFor="let datatable of datatables">
+
+      <ng-template matStepLabel>{{datatable.registeredTableName}}</ng-template>
+
+      <mifosx-loans-account-datatable-step [datatableData]="datatable" #dtloan></mifosx-loans-account-datatable-step>
+
+    </mat-step>
+
     <mat-step state="preview" *ngIf="loansAccountFormValid" completed>
 
       <ng-template matStepLabel>PREVIEW</ng-template>

src/app/loans/create-loans-account/create-loans-account.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit, QueryList, ViewChild, ViewChildren } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 
 /** Custom Services */
@@ -12,6 +12,7 @@ import { LoansAccountDetailsStepComponent } from '../loans-account-stepper/loans
 import { LoansAccountTermsStepComponent } from '../loans-account-stepper/loans-account-terms-step/loans-account-terms-step.component';
 import { LoansAccountChargesStepComponent } from '../loans-account-stepper/loans-account-charges-step/loans-account-charges-step.component';
 import { Dates } from 'app/core/utils/dates';
+import { LoansAccountDatatableStepComponent } from '../loans-account-stepper/loans-account-datatable-step/loans-account-datatable-step.component';
 
 /**
  * Create loans account
@@ -27,6 +28,8 @@ export class CreateLoansAccountComponent implements OnInit {
   @ViewChild(LoansAccountDetailsStepComponent, { static: true }) loansAccountDetailsStep: LoansAccountDetailsStepComponent;
   @ViewChild(LoansAccountTermsStepComponent, { static: true }) loansAccountTermsStep: LoansAccountTermsStepComponent;
   @ViewChild(LoansAccountChargesStepComponent, { static: true }) loansAccountChargesStep: LoansAccountChargesStepComponent;
+  /** Get handle on dtloan tags in the template */
+  @ViewChildren('dtloan') clientDatatables: QueryList<LoansAccountDatatableStepComponent>;
 
   /** Loans Account Template */
   loansAccountTemplate: any;
@@ -38,6 +41,7 @@ export class CreateLoansAccountComponent implements OnInit {
   multiDisburseLoan: any;
   /** Principal Amount */
   principal: any;
+  datatables: any = [];
 
   /**
    * Sets loans account create form.
@@ -81,6 +85,16 @@ export class CreateLoansAccountComponent implements OnInit {
     });
   }
 
+  setDatatables(): void {
+    this.datatables = [];
+
+    if (this.loansAccountTemplate.datatables) {
+      this.loansAccountTemplate.datatables.forEach((datatable: any) => {
+        this.datatables.push(datatable);
+      });
+    }
+  }
+
   /** Get Loans Account Details Form Data */
   get loansAccountDetailsForm() {
     return this.loansAccountDetailsStep.loansAccountDetailsForm;
@@ -124,6 +138,14 @@ export class CreateLoansAccountComponent implements OnInit {
     const payload = this.loansService.buildLoanRequestPayload(this.loansAccount, this.loansAccountTemplate,
       this.loansAccountProductTemplate.calendarOptions, locale, dateFormat);
 
+    if (this.loansAccountTemplate.datatables && this.loansAccountTemplate.datatables.length > 0) {
+      const datatables: any[] = [];
+      this.loansAccountTemplate.forEach((loanDatatable: LoansAccountDatatableStepComponent) => {
+        datatables.push(loanDatatable.payload);
+      });
+      payload['datatables'] = datatables;
+    }
+
     this.loansService.createLoansAccount(payload).subscribe((response: any) => {
       this.router.navigate(['../', response.resourceId, 'general'], { relativeTo: this.route });
     });

src/app/loans/loans-account-stepper/loans-account-datatable-step/loans-account-datatable-step.component.html

@@ -0,0 +1,51 @@
+<form [formGroup]="datatableForm">
+
+  <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
+
+    <div *ngFor="let datatableInput of datatableInputs" fxFlex="48%">
+      <mat-form-field fxFlex="100%" *ngIf="!isBoolean(datatableInput.columnDisplayType)">
+
+        <mat-label>{{getInputName(datatableInput)}}</mat-label>
+
+        <mat-select *ngIf="isDropdown(datatableInput.columnDisplayType)" formControlName="{{datatableInput.controlName}}">
+          <mat-option *ngFor="let code of datatableInput.columnValues" [value]="code.id">
+            {{ code.value }}
+          </mat-option>
+        </mat-select>
+
+        <input matInput type="number" *ngIf="isNumeric(datatableInput.columnDisplayType)"
+        formControlName="{{datatableInput.controlName}}">
+
+        <input matInput *ngIf="isString(datatableInput.columnDisplayType)"
+        formControlName="{{datatableInput.controlName}}">
+
+        <textarea matInput *ngIf="isText(datatableInput.columnDisplayType)"
+        formControlName="{{datatableInput.controlName}}"></textarea>
+
+        <span *ngIf="isDate(datatableInput.columnDisplayType)" (click)="datePicker.open()">
+          <input matInput [matDatepicker]="datePicker" formControlName="{{datatableInput.controlName}}" class="date-picker">
+          <mat-datepicker-toggle matSuffix [for]="datePicker"></mat-datepicker-toggle>
+          <mat-datepicker #datePicker></mat-datepicker>
+        </span>
+      </mat-form-field>
+
+      <mat-checkbox *ngIf="isBoolean(datatableInput.columnDisplayType)" formControlName="{{datatableInput.controlName}}"
+        labelPosition="before" class="margin-v">
+        {{getInputName(datatableInput)}}
+      </mat-checkbox>
+    </div>
+
+  </div>
+
+  <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
+    <button mat-raised-button matStepperPrevious disabled>
+      <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+      Previous
+    </button>
+    <button mat-raised-button matStepperNext>
+      Next&nbsp;&nbsp;
+      <fa-icon icon="arrow-right"></fa-icon>
+    </button>
+  </div>
+
+</form>

src/app/loans/loans-account-stepper/loans-account-datatable-step/loans-account-datatable-step.component.scss

@@ -0,0 +1,7 @@
+.date-picker {
+  width: 92%;
+}
+
+mat-checkbox {
+  margin-top: 30px;
+}

src/app/loans/loans-account-stepper/loans-account-datatable-step/loans-account-datatable-step.component.spec.ts

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

src/app/loans/loans-account-stepper/loans-account-datatable-step/loans-account-datatable-step.component.ts

@@ -0,0 +1,108 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { Dates } from 'app/core/utils/dates';
+import { SettingsService } from 'app/settings/settings.service';
+
+@Component({
+  selector: 'mifosx-loans-account-datatable-step',
+  templateUrl: './loans-account-datatable-step.component.html',
+  styleUrls: ['./loans-account-datatable-step.component.scss']
+})
+export class LoansAccountDatatableStepComponent implements OnInit {
+  /** Input Fields Data */
+  @Input() datatableData: any;
+  /** Create Input Form */
+  datatableForm: FormGroup;
+
+  datatableInputs: any = [];
+
+  constructor(private formBuilder: FormBuilder,
+    private settingsService: SettingsService,
+    private dateUtils: Dates) { }
+
+  ngOnInit(): void {
+    this.datatableInputs = this.datatableData.columnHeaderData.filter((column: any) => {
+      return ((column.columnName !== 'id') && (column.columnName !== 'loan_id') && (column.columnName !== 'created_at') && (column.columnName !== 'updated_at'));
+    });
+    const inputItems: any = {};
+    this.datatableInputs.forEach((input: any) => {
+      input.controlName = this.getInputName(input);
+      if (!input.isColumnNullable) {
+        if (this.isNumeric(input.columnDisplayType)) {
+          inputItems[input.controlName] = new FormControl(0, [Validators.required]);
+        } else {
+          inputItems[input.controlName] = new FormControl('', [Validators.required]);
+        }
+      } else {
+        inputItems[input.controlName] = new FormControl('');
+      }
+    });
+    this.datatableForm = this.formBuilder.group(inputItems);
+  }
+
+  getInputName(datatableInput: any): string {
+    if (datatableInput.columnName && datatableInput.columnName.includes('_cd_')) {
+      return datatableInput.columnName.split('_cd_')[0];
+    }
+    return datatableInput.columnName;
+  }
+
+  isNumeric(columnType: string) {
+    return this.isColumnType(columnType, 'INTEGER') || this.isColumnType(columnType, 'DECIMAL');
+  }
+
+  isDate(columnType: string) {
+    return this.isColumnType(columnType, 'DATE') || this.isColumnType(columnType, 'DATETIME');
+  }
+
+  isBoolean(columnType: string) {
+    return this.isColumnType(columnType, 'BOOLEAN');
+  }
+
+  isDropdown(columnType: string) {
+    return this.isColumnType(columnType, 'CODELOOKUP');
+  }
+
+  isString(columnType: string) {
+    return this.isColumnType(columnType, 'STRING');
+  }
+
+  isText(columnType: string) {
+    return this.isColumnType(columnType, 'TEXT');
+  }
+
+  isColumnType(columnType: string, expectedType: string) {
+    return (columnType === expectedType);
+  }
+
+  get payload(): any {
+    const dateFormat = this.settingsService.dateFormat;
+    const datatableDataValues = this.datatableForm.value;
+    const data = {
+      locale: this.settingsService.language.code
+    };
+    let existDate = false;
+    this.datatableInputs.forEach((input: any) => {
+      const controlName = this.getInputName(input);
+      if (this.isNumeric(input.columnDisplayType)) {
+        data[input.columnName] = datatableDataValues[controlName] * 1;
+      } else if (this.isDate(input.columnDisplayType)) {
+        data[input.columnName] = this.dateUtils.formatDate(datatableDataValues[controlName], dateFormat);
+        existDate = true;
+      } else {
+        data[input.columnName] = datatableDataValues[controlName];
+      }
+    });
+
+    if (existDate) {
+      data['dateFormat'] = dateFormat;
+    }
+
+    const payload = {
+      registeredTableName: this.datatableData.registeredTableName,
+      data: data
+    };
+    return payload;
+  }
+
+}

src/app/loans/loans-view/charges-tab/charges-tab.component.html

@@ -63,7 +63,7 @@
               <i class="fa fa-trash"></i>
             </button>
           </span>
-            <button class="account-action-button" mat-raised-button color="primary" matTooltip="Pay Charge" *ngIf="charge.chargePayable && status=='Active'"
+            <button class="account-action-button" mat-raised-button color="primary" matTooltip="Pay Charge" *ngIf="charge.chargePayable && !charge.paid && status=='Active'"
                (click)="routeEdit($event); payCharge(charge.id)">
               <i class="fa fa-dollar"></i>
             </button>

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

@@ -84,15 +84,8 @@ export class ChargesTabComponent implements OnInit {
    */
   payCharge(chargeId: any) {
     const formfields: FormfieldBase[] = [
-      new InputBase({
-        controlName: 'amount',
-        label: 'Amount',
-        value: '',
-        type: 'number',
-        required: true
-      }),
       new DatepickerBase({
-        controlName: 'dueDate',
+        controlName: 'transactionDate',
         label: 'Payment Date',
         value: '',
         type: 'date',
@@ -107,15 +100,15 @@ export class ChargesTabComponent implements OnInit {
     const payChargeDialogRef = this.dialog.open(FormDialogComponent, { data });
     payChargeDialogRef.afterClosed().subscribe((response: any) => {
       if (response.data) {
-        const locale = 'en';
+        const locale = this.settingsService.language.code;
         const dateFormat = this.settingsService.dateFormat;
+        const prevTransactionDate: Date = response.data.value.transactionDate;
         const dataObject = {
-          ...response.data.value,
-          dueDate: this.dateUtils.formatDate(response.data.value.dueDate, dateFormat),
+          transactionDate: this.dateUtils.formatDate(prevTransactionDate, dateFormat),
           dateFormat,
           locale
         };
-        this.loansService.executeLoansAccountChargesCommand(this.loanDetails.id, 'paycharge', dataObject, chargeId)
+        this.loansService.executeLoansAccountChargesCommand(this.loanDetails.id, 'pay', dataObject, chargeId)
           .subscribe(() => {
             this.reload();
           });

src/app/loans/loans-view/loan-documents-tab/loan-documents-tab.component.html

@@ -1,52 +1,7 @@
-<div class="tab-container mat-typography">
-
-  <h3>Documents</h3>
-
-  <button mat-raised-button class="f-right" color="primary" (click)="uploadDocument()"
-    *mifosxHasPermission="'CREATE_DOCUMENT'">
-    <fa-icon icon="plus" class="m-r-10"></fa-icon>Add
-  </button>
-
-  <table mat-table #documentsTable [dataSource]="dataSource" matSort>
-
-    <ng-container matColumnDef="name">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
-      <td mat-cell *matCellDef="let document"> {{ document.name }} </td>
-    </ng-container>
-
-    <ng-container matColumnDef="description">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Description </th>
-      <td mat-cell *matCellDef="let document"> {{ document.description }} </td>
-    </ng-container>
-
-    <ng-container matColumnDef="filename">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> File Name </th>
-      <td mat-cell *matCellDef="let document"> {{ document.fileName }} </td>
-    </ng-container>
-
-    <ng-container matColumnDef="actions">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Actions </th>
-      <td mat-cell *matCellDef="let document; let index">
-        <button class="document-action-button" mat-raised-button color="primary">
-          <fa-icon icon="cloud-download-alt"></fa-icon>
-        </button>
-
-        <button class="document-action-button" mat-raised-button color="primary" *ngIf="document.fileIsImage">
-          <i class="fa fa-eye"></i>
-        </button>
-
-        <button class="document-action-button" mat-raised-button color="warn"
-          (click)="deleteDocument(document.id, index)">
-          <fa-icon icon="times"></fa-icon>
-        </button>
-
-      </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>
-
-</div>
+<mifosx-entity-documents-tab [entityType]="entityType" [entityId]="entityId"
+  [entityDocuments]="entityDocuments"
+  [callbackUpload]="uploadDocument"
+  [callbackDownload]="downloadDocument"
+  [callbackDelete]="deleteDocument"
+>
+</mifosx-entity-documents-tab>

src/app/loans/loans-view/loan-documents-tab/loan-documents-tab.component.ts

@@ -1,19 +1,11 @@
 /** Angular Imports */
-import { Component, OnInit, ViewChild } from '@angular/core';
-import { MatDialog } from '@angular/material/dialog';
-import { MatPaginator } from '@angular/material/paginator';
-import { MatSort } from '@angular/material/sort';
-import { MatTableDataSource, MatTable } from '@angular/material/table';
+import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 
 /** Custom Services */
 import { environment } from 'environments/environment';
 import { LoansService } from 'app/loans/loans.service';
-
-/** Dialog Components */
-import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.component';
 import { SettingsService } from 'app/settings/settings.service';
-import { UploadDocumentDialogComponent } from 'app/clients/clients-view/custom-dialogs/upload-document-dialog/upload-document-dialog.component';
 
 /**
  * Overdue charges tab component
@@ -24,26 +16,12 @@ import { UploadDocumentDialogComponent } from 'app/clients/clients-view/custom-d
   styleUrls: ['./loan-documents-tab.component.scss']
 })
 export class LoanDocumentsTabComponent implements OnInit {
-  @ViewChild('documentsTable', { static: true }) documentsTable: MatTable<Element>;
 
   /** Stores the resolved loan documents data */
-  loanDocuments: any;
-  /** Stores the resolved loan details data */
-  loanDetailsData: any;
-  /** Status of the loan account */
-  status: any;
-  /** Choice */
-  choice: boolean;
-
-  /** Columns to be displayed in loan documents table. */
-  displayedColumns: string[] = ['name', 'description', 'filename', 'actions'];
-  /** Data source for loan documents table. */
-  dataSource: MatTableDataSource<any>;
-
-  /** Paginator for codes table. */
-  @ViewChild(MatPaginator) paginator: MatPaginator;
-  /** Sorter for codes table. */
-  @ViewChild(MatSort) sort: MatSort;
+  entityDocuments: any;
+  /** Loan account Id */
+  entityId: string;
+  entityType: string = 'loans';
 
   /**
    * Retrieves the loans data from `resolve`.
@@ -51,31 +29,19 @@ export class LoanDocumentsTabComponent implements OnInit {
    */
   constructor(private route: ActivatedRoute,
     private loansService: LoansService,
-    private settingsService: SettingsService,
-    public dialog: MatDialog) {
+    private settingsService: SettingsService) {
+      this.entityId = this.route.parent.snapshot.params['loanId'];
+
     this.route.data.subscribe((data: { loanDocuments: any }) => {
       this.getLoanDocumentsData(data.loanDocuments);
     });
-    this.route.parent.data.subscribe((data: { loanDetailsData: any }) => {
-      this.loanDetailsData = data.loanDetailsData;
-    });
   }
 
-  ngOnInit() {
-    this.status = this.loanDetailsData.status.value;
-    if (this.status === 'Submitted and pending approval' || this.status === 'Active' || this.status === 'Approved') {
-      this.choice = true;
-    }
-    this.dataSource = new MatTableDataSource(this.loanDocuments);
-    this.dataSource.paginator = this.paginator;
-    this.dataSource.sort = this.sort;
-  }
+  ngOnInit() { }
 
   getLoanDocumentsData(data: any) {
     data.forEach((ele: any) => {
-      let loandocs = {};
-      loandocs = this.settingsService.serverUrl + '/loans/' + ele.parentEntityId + '/documents/' + ele.id + '/attachment?tenantIdentifier=' + environment.fineractPlatformTenantId;
-      ele.docUrl = loandocs;
+      ele.docUrl = this.settingsService.serverUrl + '/loans/' + ele.parentEntityId + '/documents/' + ele.id + '/attachment?tenantIdentifier=' + environment.fineractPlatformTenantId;
       if (ele.fileName) {
         if (ele.fileName.toLowerCase().indexOf('.jpg') !== -1 || ele.fileName.toLowerCase().indexOf('.jpeg') !== -1 || ele.fileName.toLowerCase().indexOf('.png') !== -1) {
           ele.fileIsImage = true;
@@ -87,46 +53,22 @@ export class LoanDocumentsTabComponent implements OnInit {
         }
       }
     });
-    this.loanDocuments = data;
+    this.entityDocuments = data;
   }
 
-  uploadDocument() {
-    const uploadDocumentDialogRef = this.dialog.open(UploadDocumentDialogComponent, {
-      data: { documentIdentifier: false, entityType: 'Loan' }
-    });
-    uploadDocumentDialogRef.afterClosed().subscribe((dialogResponse: any) => {
-      if (dialogResponse) {
-        const formData: FormData = new FormData;
-        formData.append('name', dialogResponse.fileName);
-        formData.append('file', dialogResponse.file);
-        formData.append('description', dialogResponse.description);
-        this.loansService.loadLoanDocument(this.loanDetailsData.id, formData).subscribe((res: any) => {
-          this.loanDocuments.push({
-            id: res.resourceId,
-            parentEntityType: 'loans',
-            parentEntityId: this.loanDetailsData.id,
-            name: dialogResponse.fileName,
-            description: dialogResponse.description,
-            fileName: dialogResponse.file.name
-          });
-          this.documentsTable.renderRows();
-        });
-      }
+  downloadDocument(documentId: string) {
+    this.loansService.downloadLoanDocument(this.entityId, documentId).subscribe(res => {
+      const url = window.URL.createObjectURL(res);
+      window.open(url);
     });
   }
 
-  deleteDocument(documentId: any, index: any) {
-    const deleteDocumentDialogRef = this.dialog.open(DeleteDialogComponent, {
-      data: { deleteContext: `document id:${documentId}` }
-    });
-    deleteDocumentDialogRef.afterClosed().subscribe((response: any) => {
-      if (response.delete) {
-        this.loansService.deleteLoanDocument(this.loanDetailsData.id, documentId).subscribe((res: any) => {
-          this.loanDocuments.splice(index, 1);
-          this.documentsTable.renderRows();
-        });
-      }
-    });
+  uploadDocument(formData: FormData): any {
+    return this.loansService.loadLoanDocument(this.entityId, formData);
+  }
+
+  deleteDocument(documentId: any) {
+    this.loansService.deleteLoanDocument(this.entityId, documentId).subscribe((res: any) => {});
   }
 
 }

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

@@ -54,7 +54,7 @@ export class LoansViewComponent implements OnInit {
     this.recalculateInterest = this.loanDetailsData.recalculateInterest || true;
     this.status = this.loanDetailsData.status.value;
     if (this.loanDetailsData.status.active && this.loanDetailsData.multiDisburseLoan) {
-      if (this.loanDetailsData) {
+      if (this.loanDetailsData && this.loanDetailsData.transactions) {
         this.loanDetailsData.transactions.forEach((transaction: any) => {
           if (transaction.type.disbursement) {
             this.disburseTransactionNo++;

src/app/loans/loans-view/notes-tab/notes-tab.component.html

@@ -1,32 +1,7 @@
-<div class="tab-container mat-typography">
-  <h3>Notes</h3>
-  <div>
-    <form #formRef="ngForm" [formGroup]="noteForm" fxLayout="row" fxLayoutAlign="start baseline" fxLayoutGap="20px"
-      (ngSubmit)="submit()">
-      <mat-form-field fxFlex="calc(90%-20px)">
-        <textarea formControlName="note" matInput placeholder="Write a note ...."></textarea>
-      </mat-form-field>
-      <button mat-raised-button fxFlex color="primary" [disabled]="!noteForm.valid">
-        <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp; Add
-      </button>
-    </form>
-  </div>
-  <mat-list>
-    <mat-list-item *ngFor="let loanNote of loanNotes; let i=index;">
-      <fa-icon icon="sticky-note" matListIcon></fa-icon>
-      <h3 matLine>{{loanNote.note}} </h3>
-      <p matLine>
-        <span>Created by: {{loanNote.createdByUsername}}</span><br />
-        <span>Date: {{loanNote.createdOn  | dateFormat}}</span>
-      </p>
-      <div fxLayout="row" fxLayoutAlign="flex-start">
-        <button mat-button color="primary" (click)="editNote(loanNote.id,loanNote.note,i)">
-          <fa-icon icon="edit"></fa-icon>
-        </button>
-        <button mat-button color="warn" (click)="deleteNote(loanNote.id,i)">
-          <fa-icon icon="trash"></fa-icon>
-        </button>
-      </div>
-    </mat-list-item>
-  </mat-list>
-</div>
+<mifosx-entity-notes-tab [entityId]="entityId"
+  [entityNotes]="entityNotes"
+  [callbackAdd]="addNote"
+  [callbackEdit]="editNote"
+  [callbackDelete]="deleteNote"
+>
+</mifosx-entity-notes-tab>

src/app/loans/loans-view/notes-tab/notes-tab.component.scss

@@ -1,4 +0,0 @@
-.tab-container {
-  padding: 1%;
-  margin: 1%;
-}

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

@@ -1,11 +1,7 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { MatDialog } from '@angular/material/dialog';
-import { FormGroup, FormBuilder, Validators } from '@angular/forms';
 
 /** Custom Components */
-import { DeleteDialogComponent } from '../../../shared/delete-dialog/delete-dialog.component';
-import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
 
 /** Custom Services */
 import { LoansService } from '../../loans.service';
@@ -18,84 +14,44 @@ import { AuthenticationService } from '../../../core/authentication/authenticati
 })
 export class NotesTabComponent implements OnInit {
 
-  loanId: string;
+  entityId: string;
   username: string;
-  loanNotes: any;
-  noteForm: FormGroup;
-  @ViewChild('formRef', { static: true }) formRef: any;
-
+  entityNotes: any;
 
   constructor(private route: ActivatedRoute,
-    private formBuilder: FormBuilder,
     private loansService: LoansService,
-    private authenticationService: AuthenticationService,
-    private dialog: MatDialog) {
+    private authenticationService: AuthenticationService) {
     const savedCredentials = this.authenticationService.getCredentials();
     this.username = savedCredentials.username;
-    this.loanId = this.route.parent.snapshot.params['loanId'];
+    this.entityId = this.route.parent.snapshot.params['loanId'];
     this.route.data.subscribe((data: { loanNotes: any }) => {
-      this.loanNotes = data.loanNotes;
+      this.entityNotes = data.loanNotes;
     });
   }
 
-  ngOnInit() {
-    this.createNoteForm();
-  }
+  ngOnInit() { }
 
-  createNoteForm() {
-    this.noteForm = this.formBuilder.group({
-      'note': ['', Validators.required]
-    });
-  }
-
-  submit() {
-    this.loansService.createLoanNote(this.loanId, this.noteForm.value).subscribe((response: any) => {
-      this.loanNotes.push({
+  addNote(noteContent: any) {
+    this.loansService.createLoanNote(this.entityId, noteContent).subscribe((response: any) => {
+      this.entityNotes.push({
         id: response.resourceId,
         createdByUsername: this.username,
         createdOn: new Date(),
-        note: this.noteForm.value.note
+        note: noteContent.note
       });
-      this.formRef.resetForm();
     });
   }
 
-  editNote(noteId: string, noteContent: string, index: number) {
-    const editNoteDialogRef = this.dialog.open(FormDialogComponent, {
-      data: { formfields: [{
-                controlName: 'note',
-                required: true,
-                value: noteContent,
-                controlType: 'input',
-                label: 'Note'
-              }],
-              layout: {
-                columns: 1,
-                addButtonText: 'Confirm'
-              },
-              title: 'Edit Note'
-            }
-    });
-    editNoteDialogRef.afterClosed().subscribe((response: any) => {
-      if (response.data) {
-        this.loansService.editLoanNote(this.loanId, noteId, response.data.value).subscribe(() => {
-          this.loanNotes[index].note = response.data.value.note;
-        });
-      }
+  editNote(noteId: string, noteContent: any, index: number) {
+    this.loansService.editLoanNote(this.entityId, noteId, noteContent).subscribe(() => {
+      this.entityNotes[index].note = noteContent.note;
     });
   }
 
   deleteNote(noteId: string, index: number) {
-    const deleteNoteDialogRef = this.dialog.open(DeleteDialogComponent, {
-      data: { deleteContext: `Note id:${noteId}` }
-    });
-    deleteNoteDialogRef.afterClosed().subscribe((response: any) => {
-      if (response.delete) {
-        this.loansService.deleteLoanNote(this.loanId, noteId)
-          .subscribe(() => {
-            this.loanNotes.splice(index, 1);
-          });
-      }
+    this.loansService.deleteLoanNote(this.entityId, noteId)
+      .subscribe(() => {
+        this.entityNotes.splice(index, 1);
     });
   }
 

src/app/loans/loans-view/view-charge/view-charge.component.html

@@ -37,6 +37,8 @@
     <mat-card-content>
 
       <div fxLayout="row wrap" class="content">
+        <div fxFlex="100%" [ngClass]="loanChargeColor()">
+        </div>
 
         <div fxFlex="50%" class="mat-body-strong">
           Name

src/app/loans/loans-view/view-charge/view-charge.component.scss

@@ -1,6 +1,8 @@
+@import "assets/styles/helper";
+
 .container {
   max-width: 37rem;
-  
+
   .content {
     div {
       margin: 1rem 0;
@@ -8,3 +10,13 @@
     }
   }
 }
+
+.paid {
+  background-color: $status-active;
+  height: 4px;
+}
+
+.not-paid {
+  background-color: $status-active-overdue;
+  height: 4px;
+}

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

@@ -52,7 +52,7 @@ export class ViewChargeComponent {
               private settingsService: SettingsService) {
     this.route.data.subscribe((data: { loansAccountCharge: any, loanDetailsData: any }) => {
       this.chargeData = data.loansAccountCharge;
-      this.allowPayCharge = (this.chargeData.chargeTimeType.code === 'chargeTimeType.instalmentFee');
+      this.allowPayCharge = (this.chargeData.chargePayable && !this.chargeData.paid);
       this.allowWaive = !this.chargeData.chargeTimeType.waived;
       this.loansAccountData = data.loanDetailsData;
     });
@@ -72,7 +72,7 @@ export class ViewChargeComponent {
       })
     ];
     const data = {
-      title: 'Pay Charge',
+      title: `Pay Charge ${this.chargeData.id}`,
       layout: { addButtonText: 'Confirm' },
       formfields: formfields
     };
@@ -173,6 +173,10 @@ export class ViewChargeComponent {
     });
   }
 
+  loanChargeColor(): string {
+    return this.chargeData.paid ? 'paid' : 'not-paid';
+  }
+
   /**
    * Refetches data fot the component
    * TODO: Replace by a custom reload component instead of hard-coded back-routing.

src/app/loans/loans.module.ts

@@ -73,6 +73,7 @@ import { LoanDelinquencyTagsTabComponent } from './loans-view/loan-delinquency-t
 import { LoansAccountScheduleStepComponent } from './loans-account-stepper/loans-account-schedule-step/loans-account-schedule-step.component';
 import { EditRepaymentScheduleComponent } from './loans-view/loan-account-actions/edit-repayment-schedule/edit-repayment-schedule.component';
 import { DisburseToSavingsAccountComponent } from './loans-view/loan-account-actions/disburse-to-savings-account/disburse-to-savings-account.component';
+import { LoansAccountDatatableStepComponent } from './loans-account-stepper/loans-account-datatable-step/loans-account-datatable-step.component';
 
 /**
  * Loans Module
@@ -144,7 +145,8 @@ import { DisburseToSavingsAccountComponent } from './loans-view/loan-account-act
     LoanDelinquencyTagsTabComponent,
     LoansAccountScheduleStepComponent,
     EditRepaymentScheduleComponent,
-    DisburseToSavingsAccountComponent
+    DisburseToSavingsAccountComponent,
+    LoansAccountDatatableStepComponent
   ],
   providers: [ ],
 })

src/app/loans/loans.service.ts

@@ -322,6 +322,10 @@ export class LoansService {
     return this.http.get(`/loans/${loanId}/documents`);
   }
 
+  downloadLoanDocument(parentEntityId: string, documentId: string) {
+    return this.http.get(`/loans/${parentEntityId}/documents/${documentId}/attachment`, { responseType: 'blob' });
+  }
+
   deleteLoanDocument(loanId: any, documentId: any): Observable<any> {
     return this.http.delete(`/loans/${loanId}/documents/${documentId}`);
   }