diff options
Diffstat (limited to 'src/DevHive.Angular')
10 files changed, 115 insertions, 18 deletions
diff --git a/src/DevHive.Angular/src/app/components/comment/comment.component.html b/src/DevHive.Angular/src/app/components/comment/comment.component.html index 8908b25..718e25c 100644 --- a/src/DevHive.Angular/src/app/components/comment/comment.component.html +++ b/src/DevHive.Angular/src/app/components/comment/comment.component.html @@ -3,7 +3,7 @@ <div class="comment rounded-border" *ngIf="loaded"> <div class="content"> <div class="author" (click)="goToAuthorProfile()"> - <img class="round-image" [src]="user.imageUrl"> + <img class="round-image" [src]="user.profilePictureURL"> <div class="author-info"> <div class="name"> {{ user.firstName }} {{ user.lastName }} diff --git a/src/DevHive.Angular/src/app/components/feed/feed.component.html b/src/DevHive.Angular/src/app/components/feed/feed.component.html index 6d3da5f..c584055 100644 --- a/src/DevHive.Angular/src/app/components/feed/feed.component.html +++ b/src/DevHive.Angular/src/app/components/feed/feed.component.html @@ -3,7 +3,7 @@ <div id="feed-page" *ngIf="dataArrived"> <nav id="profile-bar" class="round-image rounded-border"> <div id="profile-info" (click)="goToProfile()"> - <img id="profile-bar-profile-pic" [src]="user.imageUrl" alt=""/> + <img id="profile-bar-profile-pic" class="round-image" [src]="user.profilePictureURL" alt=""/> <div id="profile-bar-name"> {{ user.firstName }} {{ user.lastName }} </div> @@ -17,7 +17,7 @@ <div id="feed-content"> <nav id="top-bar"> <div id="main-content"> - <img id="top-bar-profile-pic" class="round-image" [src]="user.imageUrl" alt="" (click)="goToProfile()"> + <img id="top-bar-profile-pic" class="round-image" [src]="user.profilePictureURL" alt="" (click)="goToProfile()"> <form id="create-post-form" class="rounded-border" [formGroup]="createPostFormGroup" (ngSubmit)="createPost()"> <div id="form-inputs"> <input id="top-bar-create-post" type="text" formControlName="newPostMessage" placeholder="What's on your mind?"/> 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 3991870..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 @@ -45,7 +45,12 @@ export class PostPageComponent implements OnInit { if (this.loggedIn) { this.editable = this.post.creatorUsername === this._tokenService.getUsernameFromSessionStorageToken(); } - this.loadFiles(); + if (this.post.fileURLs.length > 0) { + this.loadFiles(); + } + else { + this.dataArrived = true; + } }, (err: HttpErrorResponse) => { this._router.navigate(['/not-found']); @@ -103,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/post/post.component.html b/src/DevHive.Angular/src/app/components/post/post.component.html index 7347056..bc0d84a 100644 --- a/src/DevHive.Angular/src/app/components/post/post.component.html +++ b/src/DevHive.Angular/src/app/components/post/post.component.html @@ -3,7 +3,7 @@ <div class="post rounded-border" *ngIf="loaded"> <div class="content"> <div class="author" (click)="goToAuthorProfile()"> - <img class="round-image" [src]="user.imageUrl"> + <img class="round-image" [src]="user.profilePictureURL"> <div class="author-info"> <div class="name"> {{ user.firstName }} {{ user.lastName }} 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 @@ </nav> <hr> <div class="scroll-standalone"> - <form [formGroup]="updateUserFormGroup" (ngSubmit)="onSubmit()"> + <form id="update-profile-picture" [formGroup]="updateProfilePictureFormGroup" (ngSubmit)="updateProfilePicture()"> + <img id="profile-picture" class="round-image" [src]="user.profilePictureURL"> + <div id="submit-file"> + <div id="upload-file" class="submit-btn"> + <input type="file" formControlName="fileUpload" (change)="onFileUpload($event)"> + </div> + <button class="submit-btn" type="submit">Update profile picture</button> + </div> + </form> + <hr> + <form id="update-user" [formGroup]="updateUserFormGroup" (ngSubmit)="onSubmit()"> <div class="input-selection"> <input type="text" class="input-field" formControlName="firstName" required> <label class="input-field-label">First Name</label> 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/components/profile/profile.component.html b/src/DevHive.Angular/src/app/components/profile/profile.component.html index e2dacd1..03a36bf 100644 --- a/src/DevHive.Angular/src/app/components/profile/profile.component.html +++ b/src/DevHive.Angular/src/app/components/profile/profile.component.html @@ -10,7 +10,7 @@ <hr> <div class="scroll-standalone" (scroll)="onScroll($event)"> <div id="main-info" class="rounded-border"> - <img class="round-image" [src]="user.imageUrl" alt=""/> + <img class="round-image" [src]="user.profilePictureURL" alt=""/> <div id="other-main-info"> <div id="name"> {{ user.firstName }} {{ user.lastName }} 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<object> { + const userId = this._tokenService.getUserIdFromSessionStorageToken(); + const token = this._tokenService.getTokenFromSessionStorage(); + + return this.putProfilePictureRequest(userId, token, newPicture); + } + deleteUserFromSessionStorageRequest(): Observable<object> { 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<object> { + 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<object> { const options = { params: new HttpParams().set('Id', userId.toString()), diff --git a/src/DevHive.Angular/src/models/identity/user.ts b/src/DevHive.Angular/src/models/identity/user.ts index 020a403..e0038e0 100644 --- a/src/DevHive.Angular/src/models/identity/user.ts +++ b/src/DevHive.Angular/src/models/identity/user.ts @@ -10,19 +10,19 @@ export class User { private _firstName : string; private _userName : string; private _email: string; - private _imageUrl : string; + private _profilePictureURL : string; private _languages: Language[]; private _technologies: Technology[]; private _roles: Role[]; private _friends: Friend[]; - constructor(id: Guid, userName: string, firstName: string, lastName: string, email: string, imageUrl: string, languages: Language[], technologies: Technology[], roles: Role[], friends: Friend[]) { + constructor(id: Guid, userName: string, firstName: string, lastName: string, email: string, profilePictureURL: string, languages: Language[], technologies: Technology[], roles: Role[], friends: Friend[]) { this.id = id; this.userName = userName; this.firstName = firstName; this.lastName = lastName; this.email = email; - this.imageUrl = imageUrl; + this._profilePictureURL = profilePictureURL; this.languages = languages; this.technologies = technologies; this.roles = roles; @@ -63,11 +63,11 @@ export class User { this._email = v; } - public get imageUrl(): string { - return this._imageUrl; + public get profilePictureURL(): string { + return this._profilePictureURL; } - public set imageUrl(v: string) { - this._imageUrl = v; + public set profilePictureURL(v: string) { + this._profilePictureURL = v; } public get languages(): Language[] { |