feat(clients): upload document page

fixes: #265
This commit is contained in:
Jivjyot Singh
2019-12-01 23:20:51 +03:00
committed by Abhay Chawla
parent c2bd5d1444
commit 357b3731cc
7 changed files with 99 additions and 51 deletions
@@ -1,46 +1,47 @@
<div class="tab-container mat-typography">
<!-- Documents Table -->
<!-- Documents Table -->
<h3>Documents</h3>
<h3>Documents</h3>
<button mat-raised-button class="f-right" color="primary">
<fa-icon icon="plus"></fa-icon>&nbsp;&nbsp; Add
<button mat-raised-button class="f-right" color="primary" (click)="uploadDocument()">
<fa-icon icon="plus"></fa-icon>
&nbsp;&nbsp; Add
</button>
<table mat-table #documentsTable [dataSource]="clientDocuments" class="mat-elevation-z1">
<table mat-table #documentsTable [dataSource]="clientDocuments" class="mat-elevation-z1">
<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="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="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="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)">
<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,index)">
<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>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="documentsColumns"></tr>
<tr mat-row *matRowDef="let row; columns: documentsColumns;"></tr>
</table>
<tr mat-header-row *matHeaderRowDef="documentsColumns"></tr>
<tr mat-row *matRowDef="let row; columns: documentsColumns;"></tr>
</table>
</div>
@@ -5,6 +5,9 @@ import { MatDialog } from '@angular/material';
/** Custom Services */
import { ClientsService } from '../../clients.service';
/** Custom Components */
import { UploadDocumentDialogComponent } from '../upload-document-dialog/upload-document-dialog.component';
import { DeleteDialogComponent } from '../../../shared/delete-dialog/delete-dialog.component';
@@ -17,6 +20,7 @@ export class DocumentsTabComponent implements OnInit {
@ViewChild('documentsTable') documentsTable: MatTable<Element>;
documentsColumns: string[] = ['name', 'description', 'fileName', 'actions'];
clientDocuments: any;
clientId: string;
constructor(private route: ActivatedRoute,
@@ -24,7 +28,10 @@ export class DocumentsTabComponent implements OnInit {
public dialog: MatDialog) {
this.route.data.subscribe((data: { clientDocuments: any }) => {
this.clientDocuments = data.clientDocuments;
console.log(this.clientDocuments);
});
this.clientId = this.route.parent.snapshot.paramMap.get('clientId');
}
ngOnInit() {
@@ -38,10 +45,10 @@ export class DocumentsTabComponent implements OnInit {
}
deleteDocument(parentEntityId: string, documentId: string, index: number) {
const deleteFamilyMemberDialogRef = this.dialog.open(DeleteDialogComponent, {
const deleteDocumentDialogRef = this.dialog.open(DeleteDialogComponent, {
data: { deleteContext: `document id:${documentId}` }
});
deleteFamilyMemberDialogRef.afterClosed().subscribe((response: any) => {
deleteDocumentDialogRef.afterClosed().subscribe((response: any) => {
if (response.delete) {
this.clientService.deleteClientDocument(parentEntityId, documentId).subscribe(res => {
this.clientDocuments.splice(index, 1);
@@ -51,4 +58,31 @@ export class DocumentsTabComponent implements OnInit {
});
}
uploadDocument() {
const uploadDocumentDialogRef = this.dialog.open(UploadDocumentDialogComponent, {
data: { documentIdentifier: false }
});
uploadDocumentDialogRef.afterClosed().subscribe((dialogResponse: any) => {
console.log(dialogResponse);
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();
console.log('document Uploaded');
});
}
});
}
}