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

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

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.