From a13510dae13d2580138009f378bdfd66ed5ca2a4 Mon Sep 17 00:00:00 2001 From: Karan Takalkar Date: Fri, 17 Jul 2020 12:10:57 +0530 Subject: [PATCH] feat: upload and delete client image (#1122) Fixes: #1121 --- .../clients-view/clients-view.component.html | 2 + .../clients-view/clients-view.component.ts | 41 ++++++++++++++++++- .../upload-image-dialog.component.html | 12 ++++++ .../upload-image-dialog.component.scss | 0 .../upload-image-dialog.component.spec.ts | 25 +++++++++++ .../upload-image-dialog.component.ts | 33 +++++++++++++++ src/app/clients/clients.module.ts | 7 +++- src/app/clients/clients.service.ts | 13 +++++- 8 files changed, 129 insertions(+), 4 deletions(-) create mode 100644 src/app/clients/clients-view/custom-dialogs/upload-image-dialog/upload-image-dialog.component.html create mode 100644 src/app/clients/clients-view/custom-dialogs/upload-image-dialog/upload-image-dialog.component.scss create mode 100644 src/app/clients/clients-view/custom-dialogs/upload-image-dialog/upload-image-dialog.component.spec.ts create mode 100644 src/app/clients/clients-view/custom-dialogs/upload-image-dialog/upload-image-dialog.component.ts diff --git a/src/app/clients/clients-view/clients-view.component.html b/src/app/clients/clients-view/clients-view.component.html index 6c62633ed..674920155 100644 --- a/src/app/clients/clients-view/clients-view.component.html +++ b/src/app/clients/clients-view/clients-view.component.html @@ -50,6 +50,8 @@ + + diff --git a/src/app/clients/clients-view/clients-view.component.ts b/src/app/clients/clients-view/clients-view.component.ts index b13d226ea..2eb6d2744 100644 --- a/src/app/clients/clients-view/clients-view.component.ts +++ b/src/app/clients/clients-view/clients-view.component.ts @@ -10,6 +10,7 @@ import { UploadSignatureDialogComponent } from './custom-dialogs/upload-signatur import { ViewSignatureDialogComponent } from './custom-dialogs/view-signature-dialog/view-signature-dialog.component'; import { DeleteSignatureDialogComponent } from './custom-dialogs/delete-signature-dialog/delete-signature-dialog.component'; import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.component'; +import { UploadImageDialogComponent } from './custom-dialogs/upload-image-dialog/upload-image-dialog.component'; /** Custom Services */ import { ClientsService } from '../clients.service'; @@ -87,6 +88,12 @@ export class ClientsViewComponent implements OnInit { case 'Delete Signature': this.deleteSignature(); break; + case 'Upload Image': + this.uploadProfileImage(); + break; + case 'Delete Image': + this.deleteProfileImage(); + break; } } @@ -160,7 +167,7 @@ export class ClientsViewComponent implements OnInit { const uploadSignatureDialogRef = this.dialog.open(UploadSignatureDialogComponent); uploadSignatureDialogRef.afterClosed().subscribe((signature: File) => { if (signature) { - this.clientsService.uploadClientSignature(this.clientViewData.id, signature) + this.clientsService.uploadClientSignatureImage(this.clientViewData.id, signature) .subscribe(() => { this.reload(); }); @@ -189,4 +196,36 @@ export class ClientsViewComponent implements OnInit { }); } + /** + * Uploads the clients image. + */ + private uploadProfileImage() { + const uploadImageDialogRef = this.dialog.open(UploadImageDialogComponent); + uploadImageDialogRef.afterClosed().subscribe((image: File) => { + if (image) { + this.clientsService.uploadClientProfileImage(this.clientViewData.id, image) + .subscribe(() => { + this.reload(); + }); + } + }); + } + + /** + * Deletes the client image. + */ + private deleteProfileImage() { + const deleteClientImageDialogRef = this.dialog.open(DeleteDialogComponent, { + data: { deleteContext: `the profile image of ${this.clientViewData.displayName}` } + }); + deleteClientImageDialogRef.afterClosed().subscribe((response: any) => { + if (response.delete) { + this.clientsService.deleteClientProfileImage(this.clientViewData.id) + .subscribe(() => { + this.reload(); + }); + } + }); + } + } diff --git a/src/app/clients/clients-view/custom-dialogs/upload-image-dialog/upload-image-dialog.component.html b/src/app/clients/clients-view/custom-dialogs/upload-image-dialog/upload-image-dialog.component.html new file mode 100644 index 000000000..1232c8f26 --- /dev/null +++ b/src/app/clients/clients-view/custom-dialogs/upload-image-dialog/upload-image-dialog.component.html @@ -0,0 +1,12 @@ +

Upload Client Image

+ +
+ + + + + + + + +
\ No newline at end of file diff --git a/src/app/clients/clients-view/custom-dialogs/upload-image-dialog/upload-image-dialog.component.scss b/src/app/clients/clients-view/custom-dialogs/upload-image-dialog/upload-image-dialog.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/app/clients/clients-view/custom-dialogs/upload-image-dialog/upload-image-dialog.component.spec.ts b/src/app/clients/clients-view/custom-dialogs/upload-image-dialog/upload-image-dialog.component.spec.ts new file mode 100644 index 000000000..c6c50df9f --- /dev/null +++ b/src/app/clients/clients-view/custom-dialogs/upload-image-dialog/upload-image-dialog.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { UploadImageDialogComponent } from './upload-image-dialog.component'; + +describe('UploadImageDialogComponent', () => { + let component: UploadImageDialogComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ UploadImageDialogComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(UploadImageDialogComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/clients/clients-view/custom-dialogs/upload-image-dialog/upload-image-dialog.component.ts b/src/app/clients/clients-view/custom-dialogs/upload-image-dialog/upload-image-dialog.component.ts new file mode 100644 index 000000000..eb686eda9 --- /dev/null +++ b/src/app/clients/clients-view/custom-dialogs/upload-image-dialog/upload-image-dialog.component.ts @@ -0,0 +1,33 @@ +/** Angular Imports */ +import { Component } from '@angular/core'; +import { MatDialogRef } from '@angular/material'; + +/** + * Upload image dialog component. + */ +@Component({ + selector: 'mifosx-upload-image-dialog', + templateUrl: './upload-image-dialog.component.html', + styleUrls: ['./upload-image-dialog.component.scss'] +}) +export class UploadImageDialogComponent { + + /** Client Image */ + image: File; + + /** + * @param {MatDialogRef} dialogRef Component reference to dialog. + */ + constructor(public dialogRef: MatDialogRef) { } + + /** + * Sets file form control value. + * @param {any} $event file change event. + */ + onFileSelect($event: any) { + if ($event.target.files.length > 0) { + this.image = $event.target.files[0]; + } + } + +} diff --git a/src/app/clients/clients.module.ts b/src/app/clients/clients.module.ts index 4ffbd8823..85a78941b 100644 --- a/src/app/clients/clients.module.ts +++ b/src/app/clients/clients.module.ts @@ -47,6 +47,7 @@ import { ClientPayChargesComponent } from './clients-view/charges/client-pay-cha import { ViewSignatureDialogComponent } from './clients-view/custom-dialogs/view-signature-dialog/view-signature-dialog.component'; import { UploadSignatureDialogComponent } from './clients-view/custom-dialogs/upload-signature-dialog/upload-signature-dialog.component'; import { DeleteSignatureDialogComponent } from './clients-view/custom-dialogs/delete-signature-dialog/delete-signature-dialog.component'; +import { UploadImageDialogComponent } from './clients-view/custom-dialogs/upload-image-dialog/upload-image-dialog.component'; /** @@ -99,7 +100,8 @@ import { DeleteSignatureDialogComponent } from './clients-view/custom-dialogs/de ClientPayChargesComponent, ViewSignatureDialogComponent, UploadSignatureDialogComponent, - DeleteSignatureDialogComponent + DeleteSignatureDialogComponent, + UploadImageDialogComponent ], entryComponents: [ UploadDocumentDialogComponent, @@ -107,7 +109,8 @@ import { DeleteSignatureDialogComponent } from './clients-view/custom-dialogs/de UnassignStaffDialogComponent, ViewSignatureDialogComponent, UploadSignatureDialogComponent, - DeleteSignatureDialogComponent + DeleteSignatureDialogComponent, + UploadImageDialogComponent ], providers: [DatePipe] diff --git a/src/app/clients/clients.service.ts b/src/app/clients/clients.service.ts index 183b8f0b5..086de13a6 100644 --- a/src/app/clients/clients.service.ts +++ b/src/app/clients/clients.service.ts @@ -151,7 +151,18 @@ export class ClientsService { return this.http.skipErrorHandler().get(`/clients/${clientId}/images`, { params: httpParams, responseType: 'text' }); } - uploadClientSignature(clientId: string, signature: File) { + uploadClientProfileImage(clientId: string, image: File) { + const formData = new FormData(); + formData.append('file', image); + formData.append('filename', 'file'); + return this.http.post(`/clients/${clientId}/images`, formData); + } + + deleteClientProfileImage(clientId: string) { + return this.http.delete(`/clients/${clientId}/images`); + } + + uploadClientSignatureImage(clientId: string, signature: File) { const formData = new FormData(); formData.append('file', signature); formData.append('filename', signature.name);