diff options
Diffstat (limited to 'src/app/components/profile-settings/profile-settings.component.ts')
| -rw-r--r-- | src/app/components/profile-settings/profile-settings.component.ts | 204 |
1 files changed, 127 insertions, 77 deletions
diff --git a/src/app/components/profile-settings/profile-settings.component.ts b/src/app/components/profile-settings/profile-settings.component.ts index a484665..3d6e491 100644 --- a/src/app/components/profile-settings/profile-settings.component.ts +++ b/src/app/components/profile-settings/profile-settings.component.ts @@ -6,14 +6,15 @@ import { Router } from '@angular/router'; import { LanguageService } from 'src/app/services/language.service'; import { UserService } from 'src/app/services/user.service'; import { TechnologyService } from 'src/app/services/technology.service'; -import { User } from 'src/models/identity/user'; +import { User } from 'src/models/identity/user.model'; import { ErrorBarComponent } from '../error-bar/error-bar.component'; import { SuccessBarComponent } from '../success-bar/success-bar.component'; -import { Language } from 'src/models/language'; -import { Technology } from 'src/models/technology'; +import { Language } from 'src/models/language.model'; +import { Technology } from 'src/models/technology.model'; import { TokenService } from 'src/app/services/token.service'; import { Title } from '@angular/platform-browser'; import { AppConstants } from 'src/app/app-constants.module'; +import { ProfilePictureService } from 'src/app/services/profile-picture.service'; @Component({ selector: 'app-profile-settings', @@ -34,10 +35,13 @@ export class ProfileSettingsComponent implements OnInit { public updateProfilePictureFormGroup: FormGroup; public newProfilePicture: File; public user: User; + public chosenLanguages: Language[]; + public chosenTechnologies: Technology[]; public availableLanguages: Language[]; public availableTechnologies: Technology[]; + public showCurrentPassword = false; - constructor(private _titleService: Title, private _router: Router, private _userService: UserService, private _languageService: LanguageService, private _technologyService: TechnologyService, private _tokenService: TokenService, private _fb: FormBuilder, private _location: Location) { + constructor(private _titleService: Title, private _router: Router, private _userService: UserService, private _profilePictureService: ProfilePictureService, private _languageService: LanguageService, private _technologyService: TechnologyService, private _tokenService: TokenService, private _fb: FormBuilder, private _location: Location) { this._titleService.setTitle(this._title); } @@ -50,38 +54,40 @@ export class ProfileSettingsComponent implements OnInit { this.availableTechnologies = []; this.newProfilePicture = new File([], ''); - this._userService.getUserByUsernameRequest(this._urlUsername).subscribe( - (res: object) => { + // Initializing forms with blank (default) values + this.updateUserFormGroup = this._fb.group({ + firstName: new FormControl(''), + lastName: new FormControl(''), + username: new FormControl(''), + email: new FormControl(''), + password: new FormControl(''), + }); + this.updateProfilePictureFormGroup = this._fb.group({ + fileUpload: new FormControl('') + }); + + this._userService.getUserByUsernameRequest(this._urlUsername).subscribe({ + next: (res: object) => { Object.assign(this.user, res); this.isAdminUser = this.user.roles.map(x => x.name).includes(AppConstants.ADMIN_ROLE_NAME); this.finishUserLoading(); }, - (err: HttpErrorResponse) => { + error: () => { this._router.navigate(['/not-found']); } - ); - - this._languageService.getAllLanguagesWithSessionStorageRequest().subscribe( - (result: object) => { - this.availableLanguages = result as Language[]; - } - ); - this._technologyService.getAllTechnologiesWithSessionStorageRequest().subscribe( - (result: object) => { - this.availableTechnologies = result as Technology[]; - } - ); - } + }); + } private finishUserLoading(): void { if (sessionStorage.getItem('UserCred')) { const userFromToken: User = this._userService.getDefaultUser(); - this._userService.getUserFromSessionStorageRequest().subscribe( - (tokenRes: object) => { + this._userService.getUserFromSessionStorageRequest().subscribe({ + next: (tokenRes: object) => { Object.assign(userFromToken, tokenRes); if (userFromToken.userName === this._urlUsername) { + this.loadUserSecondaryInfo(); this.initForms(); this.dataArrived = true; } @@ -89,16 +95,53 @@ export class ProfileSettingsComponent implements OnInit { this.goToProfile(); } }, - (err: HttpErrorResponse) => { + error: () => { this.logout(); } - ); + }); } else { this.goToProfile(); } } + private loadUserSecondaryInfo(): void { + // Load languages and tehnologies of user + this._languageService.getFullLanguagesFromIncomplete(this.user.languages).then( + (result) => { + this.chosenLanguages = result as Language[]; + this.loadAvailableLanguages(); + } + ); + + this._technologyService.getFullTechnologiesFromIncomplete(this.user.technologies).then( + (result) => { + this.chosenTechnologies = result as Technology[]; + this.loadAvailableTechnologies(); + } + ); + } + + private loadAvailableLanguages(): void { + this._languageService.getAllLanguagesWithSessionStorageRequest().subscribe({ + next: (result: object) => { + const allAvailable = result as Language[]; + // Remove the chosen languages from all of the avaiable ones + this.availableLanguages = allAvailable.filter(a => !this.user.languages.some(l => l.name === a.name)); + } + }); + } + + private loadAvailableTechnologies(): void { + this._technologyService.getAllTechnologiesWithSessionStorageRequest().subscribe({ + next: (result: object) => { + const allAvailable = result as Technology[]; + // Remove the chosen technologies from all of the avaiable ones + this.availableTechnologies = allAvailable.filter(a => !this.user.technologies.some(t => t.name === a.name)); + } + }); + } + private initForms(): void { this.updateUserFormGroup = this._fb.group({ firstName: new FormControl(this.user.firstName, [ @@ -122,52 +165,17 @@ export class ProfileSettingsComponent implements OnInit { Validators.minLength(3), Validators.pattern('.*[0-9].*') // Check if password contains atleast one number ]), - - // For language we have two different controls, - // the first one is used for input, the other one for sending data - // because if we edit the control for input, - // we're also gonna change the input field in the HTML - languageInput: new FormControl(''), // The one for input - languages: new FormControl(''), // The one that is sent - - // For technologies it's the same as it is with languages - technologyInput: new FormControl(''), - technologies: new FormControl('') - }); - - this.getLanguagesForShowing().then(value => { - this.updateUserFormGroup.patchValue({ languageInput : value }); - }); - - this.getTechnologiesForShowing().then(value => { - this.updateUserFormGroup.patchValue({ technologyInput : value }); }); this.updateProfilePictureFormGroup = this._fb.group({ fileUpload: new FormControl('') }); - this.updateUserFormGroup.valueChanges.subscribe(() => { - this._successBar?.hideMsg(); - this._errorBar?.hideError(); - }); - } - - private getLanguagesForShowing(): Promise<string> { - return new Promise(resolve => { - this._languageService.getFullLanguagesFromIncomplete(this.user.languages).then(value => { - this.user.languages = value; - resolve(value.map(x => x.name).join(' ')); - }); - }); - } - - private getTechnologiesForShowing(): Promise<string> { - return new Promise(resolve => { - this._technologyService.getFullTechnologiesFromIncomplete(this.user.technologies).then(value => { - this.user.technologies = value; - resolve(value.map(x => x.name).join(' ')); - }); + this.updateUserFormGroup.valueChanges.subscribe({ + next: () => { + this._successBar?.hideMsg(); + this._errorBar?.hideError(); + } }); } @@ -180,11 +188,11 @@ export class ProfileSettingsComponent implements OnInit { return; } - this._userService.putProfilePictureFromSessionStorageRequest(this.newProfilePicture).subscribe( - (result: object) => { + this._profilePictureService.putPictureWithSessionStorageRequest(this.newProfilePicture).subscribe({ + next: () => { this.reloadPage(); } - ); + }); this.dataArrived = false; } @@ -195,14 +203,20 @@ export class ProfileSettingsComponent implements OnInit { this.patchLanguagesControl(); this.patchTechnologiesControl(); - this._userService.putUserFromSessionStorageRequest(this.updateUserFormGroup, this.user.roles, this.user.friends).subscribe( - (result: object) => { + this._userService.putUserFromSessionStorageRequest(this.updateUserFormGroup, this.chosenLanguages, this.chosenTechnologies, this.user.roles, this.user.friends).subscribe({ + next: () => { this._successBar.showMsg('Profile updated successfully!'); + + // "Reload" page when changing username + const newUsername = this.updateUserFormGroup.get('username')?.value; + if (newUsername !== this._urlUsername) { + this._router.navigate(['/profile/' + newUsername + '/settings']); + } }, - (err: HttpErrorResponse) => { + error: (err: HttpErrorResponse) => { this._errorBar.showError(err); } - ); + }); } private patchLanguagesControl(): void { @@ -261,17 +275,47 @@ export class ProfileSettingsComponent implements OnInit { } } + langClick(name: string): void { + if (this.chosenLanguages.some(c => c.name === name)) { + const index = this.chosenLanguages.findIndex(t => t.name === name); + + this.availableLanguages.push(this.chosenLanguages[index]); + this.chosenLanguages.splice(index, 1); + } + else { + const index = this.availableLanguages.findIndex(t => t.name === name); + + this.chosenLanguages.push(this.availableLanguages[index]); + this.availableLanguages.splice(index, 1); + } + } + + techClick(name: string): void { + if (this.chosenTechnologies.some(c => c.name === name)) { + const index = this.chosenTechnologies.findIndex(t => t.name === name); + + this.availableTechnologies.push(this.chosenTechnologies[index]); + this.chosenTechnologies.splice(index, 1); + } + else { + const index = this.availableTechnologies.findIndex(t => t.name === name); + + this.chosenTechnologies.push(this.availableTechnologies[index]); + this.availableTechnologies.splice(index, 1); + } + } + goToProfile(): void { this._router.navigate([this._router.url.substring(0, this._router.url.length - 9)]); } - navigateToAdminPanel(): void { + goToAdminPanel(): void { this._router.navigate(['/admin-panel']); } logout(): void { this._tokenService.logoutUserFromSessionStorage(); - this.goToProfile(); + this._router.navigate(['/login']); } toggleLanguages(): void { @@ -284,14 +328,14 @@ export class ProfileSettingsComponent implements OnInit { deleteAccount(): void { if (this.deleteAccountConfirm) { - this._userService.deleteUserFromSessionStorageRequest().subscribe( - (res: object) => { + this._userService.deleteUserFromSessionStorageRequest().subscribe({ + next: () => { this.logout(); }, - (err: HttpErrorResponse) => { + error: (err: HttpErrorResponse) => { this._errorBar.showError(err); } - ); + }); this.dataArrived = false; } else { @@ -304,4 +348,10 @@ export class ProfileSettingsComponent implements OnInit { this._router.onSameUrlNavigation = 'reload'; this._router.navigate([this._router.url]); } + + toggleShowPassword(index: number): void { + switch (index) { + case 0: this.showCurrentPassword = !this.showCurrentPassword; + } + } } |