From 5d0e9f2c19b68a73baeebf623980d458e3aab80c Mon Sep 17 00:00:00 2001 From: Syndamia Date: Wed, 3 Feb 2021 11:59:13 +0200 Subject: Implemented profile picture updating in profile settings --- .../components/post-page/post-page.component.ts | 1 - .../profile-settings.component.css | 35 ++++++++++++++++++++ .../profile-settings.component.html | 12 ++++++- .../profile-settings/profile-settings.component.ts | 37 ++++++++++++++++++++-- .../src/app/services/user.service.ts | 17 ++++++++++ 5 files changed, 97 insertions(+), 5 deletions(-) (limited to 'src') diff --git a/src/DevHive.Angular/src/app/components/post-page/post-page.component.ts b/src/DevHive.Angular/src/app/components/post-page/post-page.component.ts index 7402cc0..ef046e1 100644 --- a/src/DevHive.Angular/src/app/components/post-page/post-page.component.ts +++ b/src/DevHive.Angular/src/app/components/post-page/post-page.component.ts @@ -108,7 +108,6 @@ export class PostPageComponent implements OnInit { this.files = this.files.filter(x => x.name !== fileName); } - editPost(): void { if (this._tokenService.getTokenFromSessionStorage() === '') { this.toLogin(); diff --git a/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.css b/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.css index 716ffc9..27d1584 100644 --- a/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.css +++ b/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.css @@ -37,6 +37,41 @@ hr { /* Form */ +#update-profile-picture { + display: flex; + align-items: center; + justify-content: center; + padding: 0 .5em; +} + +#profile-picture { + width: 5em; + height: 5em; +} + +#submit-file { + display: flex; + flex-direction: column; + align-items: center; + padding: 1em; +} + +#upload-file:hover { + cursor: inherit; +} + +#upload-file > input:hover { + cursor: pointer; +} + +#upload-file > input::-webkit-file-upload-button { + visibility: hidden; +} + +#update-user { + margin-top: 1.1em; +} + .input-field { border-color: var(--focus-color) !important; caret-color: var(--focus-color); diff --git a/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.html b/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.html index f8493ab..d87c35c 100644 --- a/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.html +++ b/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.html @@ -7,7 +7,17 @@
-
+ + +
+
+ +
+ +
+
+
+
diff --git a/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.ts b/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.ts index 4a401ef..463b980 100644 --- a/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.ts +++ b/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.ts @@ -29,6 +29,8 @@ export class ProfileSettingsComponent implements OnInit { public showLanguages = false; public showTechnologies = false; public updateUserFormGroup: FormGroup; + public updateProfilePictureFormGroup: FormGroup; + public newProfilePicture: File; public user: User; public availableLanguages: Language[]; public availableTechnologies: Technology[]; @@ -44,6 +46,7 @@ export class ProfileSettingsComponent implements OnInit { this.user = this._userService.getDefaultUser(); this.availableLanguages = []; this.availableTechnologies = []; + this.newProfilePicture = new File([], ''); this._userService.getUserByUsernameRequest(this._urlUsername).subscribe( (res: object) => { @@ -76,7 +79,7 @@ export class ProfileSettingsComponent implements OnInit { Object.assign(userFromToken, tokenRes); if (userFromToken.userName === this._urlUsername) { - this.initForm(); + this.initForms(); this.dataArrived = true; } else { @@ -93,7 +96,7 @@ export class ProfileSettingsComponent implements OnInit { } } - private initForm(): void { + private initForms(): void { this.updateUserFormGroup = this._fb.group({ firstName: new FormControl(this.user.firstName, [ Validators.required, @@ -137,6 +140,10 @@ export class ProfileSettingsComponent implements OnInit { this.updateUserFormGroup.patchValue({ technologyInput : value }); }); + this.updateProfilePictureFormGroup = this._fb.group({ + fileUpload: new FormControl('') + }); + this.updateUserFormGroup.valueChanges.subscribe(() => { this._successBar?.hideMsg(); this._errorBar?.hideError(); @@ -161,6 +168,23 @@ export class ProfileSettingsComponent implements OnInit { }); } + onFileUpload(event: any): void { + this.newProfilePicture = event.target.files[0]; + } + + updateProfilePicture(): void { + if (this.newProfilePicture.size === 0) { + return; + } + + this._userService.putProfilePictureFromSessionStorageRequest(this.newProfilePicture).subscribe( + (result: object) => { + this.reloadPage(); + } + ); + this.dataArrived = false; + } + onSubmit(): void { this._successBar.hideMsg(); this._errorBar.hideError(); @@ -169,7 +193,7 @@ export class ProfileSettingsComponent implements OnInit { this.patchTechnologiesControl(); this._userService.putUserFromSessionStorageRequest(this.updateUserFormGroup, this.user.roles, this.user.friends).subscribe( - res => { + (result: object) => { this._successBar.showMsg('Profile updated successfully!'); }, (err: HttpErrorResponse) => { @@ -261,9 +285,16 @@ export class ProfileSettingsComponent implements OnInit { this._errorBar.showError(err); } ); + this.dataArrived = false; } else { this.deleteAccountConfirm = true; } } + + private reloadPage(): void { + this._router.routeReuseStrategy.shouldReuseRoute = () => false; + this._router.onSameUrlNavigation = 'reload'; + this._router.navigate([this._router.url]); + } } diff --git a/src/DevHive.Angular/src/app/services/user.service.ts b/src/DevHive.Angular/src/app/services/user.service.ts index 3bfc857..422d7db 100644 --- a/src/DevHive.Angular/src/app/services/user.service.ts +++ b/src/DevHive.Angular/src/app/services/user.service.ts @@ -36,6 +36,13 @@ export class UserService { return this.putUserRequest(userId, token, updateUserFormGroup, userRoles, userFriends); } + putProfilePictureFromSessionStorageRequest(newPicture: File): Observable { + const userId = this._tokenService.getUserIdFromSessionStorageToken(); + const token = this._tokenService.getTokenFromSessionStorage(); + + return this.putProfilePictureRequest(userId, token, newPicture); + } + deleteUserFromSessionStorageRequest(): Observable { const userId = this._tokenService.getUserIdFromSessionStorageToken(); const token = this._tokenService.getTokenFromSessionStorage(); @@ -98,6 +105,16 @@ export class UserService { return this._http.put(AppConstants.API_USER_URL, body, options); } + putProfilePictureRequest(userId: Guid, authToken: string, newPicture: File): Observable { + const form = new FormData(); + form.append('picture', newPicture); + const options = { + params: new HttpParams().set('UserId', userId.toString()), + headers: new HttpHeaders().set('Authorization', 'Bearer ' + authToken) + }; + return this._http.put(AppConstants.API_USER_URL + '/ProfilePicture', form, options); + } + deleteUserRequest(userId: Guid, authToken: string): Observable { const options = { params: new HttpParams().set('Id', userId.toString()), -- cgit v1.2.3