Documents and Notes for Clients, Loans and Clients (#1632)
Co-authored-by: Jose Alberto Hernandez <alberto@MacBook-Pro.local>
This commit is contained in:
José Alberto Hernández
co-authored by
Jose Alberto Hernandez
Jose Alberto Hernandez
parent
28d5d7595f
commit
cafe8fa73d
@@ -1,47 +1,7 @@
|
||||
<div class="tab-container mat-typography">
|
||||
|
||||
<!-- Documents Table -->
|
||||
|
||||
<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]="clientDocuments" matSort>
|
||||
|
||||
<ng-container matColumnDef="name">
|
||||
<th mat-header-cell *matHeaderCellDef> Name </th>
|
||||
<td mat-cell *matCellDef="let document"> {{document.name}} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="description">
|
||||
<th mat-header-cell *matHeaderCellDef> Description </th>
|
||||
<td mat-cell *matCellDef="let document"> {{document.description}} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="fileName">
|
||||
<th mat-header-cell *matHeaderCellDef> File Name </th>
|
||||
<td mat-cell *matCellDef="let document"> {{document.fileName}} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="actions">
|
||||
<th mat-header-cell *matHeaderCellDef> Actions </th>
|
||||
<td mat-cell *matCellDef="let document; let i = index">
|
||||
<button class="document-action-button" mat-raised-button color="primary"
|
||||
(click)="download(document.parentEntityId,document.id)">
|
||||
<fa-icon icon="cloud-download-alt"></fa-icon>
|
||||
</button>
|
||||
<button class="document-action-button" mat-raised-button color="warn"
|
||||
(click)="deleteDocument(document.parentEntityId,document.id,i)">
|
||||
<fa-icon icon="times"></fa-icon>
|
||||
</button>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="documentsColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: documentsColumns;"></tr>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
<mifosx-entity-documents-tab [entityType]="entityType" [entityId]="entityId"
|
||||
[entityDocuments]="entityDocuments"
|
||||
[callbackUpload]="uploadDocument"
|
||||
[callbackDownload]="downloadDocument"
|
||||
[callbackDelete]="deleteDocument"
|
||||
>
|
||||
</mifosx-entity-documents-tab>
|
||||
|
||||
@@ -1,84 +1,45 @@
|
||||
import { Component, OnInit, ViewChild } from '@angular/core';
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { ActivatedRoute } from '@angular/router';
|
||||
import { MatTable } from '@angular/material/table';
|
||||
import { MatDialog } from '@angular/material/dialog';
|
||||
|
||||
/** Custom Services */
|
||||
import { ClientsService } from '../../clients.service';
|
||||
|
||||
/** Custom Components */
|
||||
import { UploadDocumentDialogComponent } from '../custom-dialogs/upload-document-dialog/upload-document-dialog.component';
|
||||
import { DeleteDialogComponent } from '../../../shared/delete-dialog/delete-dialog.component';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'mifosx-documents-tab',
|
||||
templateUrl: './documents-tab.component.html',
|
||||
styleUrls: ['./documents-tab.component.scss']
|
||||
})
|
||||
export class DocumentsTabComponent implements OnInit {
|
||||
@ViewChild('documentsTable', { static: true }) documentsTable: MatTable<Element>;
|
||||
documentsColumns: string[] = ['name', 'description', 'fileName', 'actions'];
|
||||
clientDocuments: any;
|
||||
clientId: string;
|
||||
|
||||
entityDocuments: any;
|
||||
entityId: string;
|
||||
entityType: string = 'clients';
|
||||
|
||||
constructor(private route: ActivatedRoute,
|
||||
private clientService: ClientsService,
|
||||
private clientsService: ClientsService,
|
||||
public dialog: MatDialog) {
|
||||
this.route.data.subscribe((data: { clientDocuments: any }) => {
|
||||
this.clientDocuments = data.clientDocuments;
|
||||
this.entityDocuments = data.clientDocuments;
|
||||
});
|
||||
this.clientId = this.route.parent.snapshot.paramMap.get('clientId');
|
||||
this.entityId = this.route.parent.snapshot.paramMap.get('clientId');
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
download(parentEntityId: string, documentId: string) {
|
||||
this.clientService.downloadClientDocument(parentEntityId, documentId).subscribe(res => {
|
||||
downloadDocument(documentId: string) {
|
||||
this.clientsService.downloadClientDocument(this.entityId, documentId).subscribe(res => {
|
||||
const url = window.URL.createObjectURL(res);
|
||||
window.open(url);
|
||||
});
|
||||
}
|
||||
|
||||
deleteDocument(parentEntityId: string, documentId: string, index: number) {
|
||||
const deleteDocumentDialogRef = this.dialog.open(DeleteDialogComponent, {
|
||||
data: { deleteContext: `document id:${documentId}` }
|
||||
});
|
||||
deleteDocumentDialogRef.afterClosed().subscribe((response: any) => {
|
||||
if (response.delete) {
|
||||
this.clientService.deleteClientDocument(parentEntityId, documentId).subscribe(res => {
|
||||
this.clientDocuments.splice(index, 1);
|
||||
this.documentsTable.renderRows();
|
||||
});
|
||||
}
|
||||
});
|
||||
deleteDocument(documentId: string) {
|
||||
this.clientsService.deleteClientDocument(this.entityId, documentId).subscribe(res => {});
|
||||
}
|
||||
|
||||
uploadDocument() {
|
||||
const uploadDocumentDialogRef = this.dialog.open(UploadDocumentDialogComponent, {
|
||||
data: { documentIdentifier: false, entityType: 'Client' }
|
||||
});
|
||||
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.clientService.uploadClientDocument(this.clientId, formData).subscribe((res: any) => {
|
||||
this.clientDocuments.push({
|
||||
id: res.resourceId,
|
||||
parentEntityType: 'clients',
|
||||
parentEntityId: this.clientId,
|
||||
name: dialogResponse.fileName,
|
||||
description: dialogResponse.description,
|
||||
fileName: dialogResponse.file.name
|
||||
});
|
||||
this.documentsTable.renderRows();
|
||||
});
|
||||
}
|
||||
});
|
||||
uploadDocument(formData: FormData): any {
|
||||
return this.clientsService.uploadClientDocument(this.entityId, formData);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -1,43 +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" *mifosxHasPermission="'CREATE_CLIENTNOTE'">
|
||||
<fa-icon icon="plus"></fa-icon> Add
|
||||
</button>
|
||||
|
||||
</form>
|
||||
|
||||
</div>
|
||||
|
||||
<mat-list>
|
||||
|
||||
<mat-list-item *ngFor="let clientNote of clientNotes; let i=index;">
|
||||
<fa-icon icon="sticky-note" matListIcon></fa-icon>
|
||||
<h3 matLine>{{clientNote.note}} </h3>
|
||||
<p matLine>
|
||||
<span>Created by: {{clientNote.createdByUsername}}</span><br />
|
||||
<span>Date: {{clientNote.createdOn | dateFormat}}</span>
|
||||
</p>
|
||||
<div fxLayout="row" fxLayoutAlign="flex-start">
|
||||
<button mat-button color="primary" (click)="editNote(clientNote.id,clientNote.note,i)" *mifosxHasPermission="'CREATE_CLIENTNOTE'">
|
||||
<fa-icon icon="edit"></fa-icon>
|
||||
</button>
|
||||
<button mat-button color="warn" (click)="deleteNote(clientNote.id,i)" *mifosxHasPermission="'DELETE_CLIENTNOTE'">
|
||||
<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>
|
||||
|
||||
@@ -1,5 +0,0 @@
|
||||
.tab-container {
|
||||
padding: 1%;
|
||||
margin: 1%;
|
||||
|
||||
}
|
||||
|
||||
@@ -1,12 +1,8 @@
|
||||
/** Angular Imports */
|
||||
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 { EditNotesDialogComponent } from '../custom-dialogs/edit-notes-dialog/edit-notes-dialog.component';
|
||||
|
||||
/** Custom Services */
|
||||
import { ClientsService } from '../../clients.service';
|
||||
@@ -23,66 +19,39 @@ import { AuthenticationService } from 'app/core/authentication/authentication.se
|
||||
export class NotesTabComponent implements OnInit {
|
||||
|
||||
/** Client ID */
|
||||
clientId: string;
|
||||
entityId: string;
|
||||
/** Username */
|
||||
username: string;
|
||||
/** Client Notes */
|
||||
clientNotes: any;
|
||||
/** Note Form */
|
||||
noteForm: FormGroup;
|
||||
|
||||
/** Notes Form Reference */
|
||||
@ViewChild('formRef', { static: true }) formRef: any;
|
||||
entityNotes: any;
|
||||
|
||||
/**
|
||||
* @param {ActivatedRoute} route Activated Route
|
||||
* @param {FormBuilder} formBuilder Form Builder
|
||||
* @param {ClientsService} clientsService Clients Service
|
||||
* @param {AuthenticationService} authenticationService Authentication Service
|
||||
* @param {MatDialog} dialog Mat Dialog
|
||||
*/
|
||||
constructor(private route: ActivatedRoute,
|
||||
private formBuilder: FormBuilder,
|
||||
private clientsService: ClientsService,
|
||||
private authenticationService: AuthenticationService,
|
||||
public dialog: MatDialog) {
|
||||
private authenticationService: AuthenticationService) {
|
||||
const credentials = this.authenticationService.getCredentials();
|
||||
this.username = credentials.username;
|
||||
this.clientId = this.route.parent.snapshot.params['clientId'];
|
||||
this.entityId = this.route.parent.snapshot.params['clientId'];
|
||||
this.route.data.subscribe((data: { clientNotes: any }) => {
|
||||
this.clientNotes = data.clientNotes;
|
||||
this.entityNotes = data.clientNotes;
|
||||
});
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.createNoteForm();
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates the note form
|
||||
*/
|
||||
createNoteForm() {
|
||||
this.noteForm = this.formBuilder.group({
|
||||
'note': ['', Validators.required]
|
||||
});
|
||||
}
|
||||
ngOnInit() { }
|
||||
|
||||
/**
|
||||
* Edits a client note.
|
||||
* @param {string} noteId Note Id
|
||||
* @param {string} noteContent Note Content
|
||||
* @param {any} noteContent Note Content
|
||||
* @param {number} index Index
|
||||
*/
|
||||
editNote(noteId: string, noteContent: string, index: number) {
|
||||
const editNoteDialogRef = this.dialog.open(EditNotesDialogComponent, {
|
||||
data: { noteContent: noteContent }
|
||||
});
|
||||
editNoteDialogRef.afterClosed().subscribe((response: { editForm: any }) => {
|
||||
if (response.editForm) {
|
||||
this.clientsService.editClientNote(this.clientId, noteId, response.editForm.value).subscribe(() => {
|
||||
this.clientNotes[index].note = response.editForm.value.note;
|
||||
});
|
||||
}
|
||||
editNote(noteId: string, noteContent: any, index: number) {
|
||||
this.clientsService.editClientNote(this.entityId, noteId, noteContent).subscribe(() => {
|
||||
this.entityNotes[index].note = noteContent.note;
|
||||
});
|
||||
}
|
||||
|
||||
@@ -92,31 +61,23 @@ export class NotesTabComponent implements OnInit {
|
||||
* @param {number} index Index
|
||||
*/
|
||||
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.clientsService.deleteClientNote(this.clientId, noteId)
|
||||
.subscribe(() => {
|
||||
this.clientNotes.splice(index, 1);
|
||||
});
|
||||
}
|
||||
});
|
||||
this.clientsService.deleteClientNote(this.entityId, noteId)
|
||||
.subscribe(() => {
|
||||
this.entityNotes.splice(index, 1);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates a client note.
|
||||
*/
|
||||
submit() {
|
||||
this.clientsService.createClientNote(this.clientId, this.noteForm.value).subscribe((response: any) => {
|
||||
this.clientNotes.push({
|
||||
addNote(noteContent: any) {
|
||||
this.clientsService.createClientNote(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();
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@@ -27,19 +27,19 @@
|
||||
|
||||
<!-- Name Column -->
|
||||
<ng-container matColumnDef="name">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header="displayName"> Name </th>
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header="entityName"> Name </th>
|
||||
<td mat-cell *matCellDef="let row"> {{row.entityName}} </td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Account no Column -->
|
||||
<ng-container matColumnDef="clientNo">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header="accountNo"> Account No. </th>
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header="entityAccountNo"> Account No. </th>
|
||||
<td mat-cell *matCellDef="let row"> {{row.entityAccountNo}} </td>
|
||||
</ng-container>
|
||||
|
||||
<!-- External ID Column -->
|
||||
<ng-container matColumnDef="externalId">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header="externalId"> External Id </th>
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header="entityExternalId"> External Id </th>
|
||||
<td mat-cell *matCellDef="let row">
|
||||
<mifosx-external-identifier externalId="{{row.entityExternalId}}"></mifosx-external-identifier>
|
||||
</td>
|
||||
@@ -47,7 +47,7 @@
|
||||
|
||||
<!-- Status Column -->
|
||||
<ng-container matColumnDef="status">
|
||||
<th mat-header-cell *matHeaderCellDef> Status </th>
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header="entityStatus.value"> Status </th>
|
||||
<td mat-cell *matCellDef="let row">
|
||||
<div [ngClass]="row.entityStatus.code | statusLookup">
|
||||
<fa-icon icon="stop"></fa-icon>
|
||||
@@ -75,7 +75,7 @@
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<mat-paginator [pageSize]="50" [pageSizeOptions]="[10, 25, 50, 100]"
|
||||
<mat-paginator *ngIf="moreClientsToFilter" [pageSize]="50" [pageSizeOptions]="[10, 25, 50, 100]"
|
||||
showFirstLastButtons></mat-paginator>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -7,6 +7,7 @@ import { MatTableDataSource } from '@angular/material/table';
|
||||
|
||||
/** Custom Services */
|
||||
import { SearchService } from 'app/search/search.service';
|
||||
import { environment } from 'environments/environment';
|
||||
|
||||
@Component({
|
||||
selector: 'mifosx-clients',
|
||||
@@ -29,7 +30,9 @@ export class ClientsComponent implements OnInit {
|
||||
constructor(private searchService: SearchService) { }
|
||||
|
||||
ngOnInit() {
|
||||
this.getClients('');
|
||||
if (environment.preloadClients) {
|
||||
this.getClients('');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
Reference in New Issue
Block a user