From f72daa97fd8bfbaba9f7d6874131a61b3e1c49ba Mon Sep 17 00:00:00 2001 From: Syndamia Date: Mon, 29 Mar 2021 14:52:03 +0300 Subject: Added basic effects and skeleton of functionality for clicking available technologies and languages in profile settings --- .../components/profile-settings/profile-settings.component.ts | 9 +++++++++ 1 file changed, 9 insertions(+) (limited to 'src/app/components/profile-settings/profile-settings.component.ts') diff --git a/src/app/components/profile-settings/profile-settings.component.ts b/src/app/components/profile-settings/profile-settings.component.ts index 79519aa..b7f2d90 100644 --- a/src/app/components/profile-settings/profile-settings.component.ts +++ b/src/app/components/profile-settings/profile-settings.component.ts @@ -286,6 +286,15 @@ export class ProfileSettingsComponent implements OnInit { } } + langClick(name: string): void { + console.log('Language: ' + name); + } + + techClick(name: string): void { + console.log('Technology: ' + name); + } + + goToProfile(): void { this._router.navigate([this._router.url.substring(0, this._router.url.length - 9)]); } -- cgit v1.2.3 From 8c2893557a5a03076746fcc91ca7db1edadae9e8 Mon Sep 17 00:00:00 2001 From: Syndamia Date: Mon, 29 Mar 2021 15:11:13 +0300 Subject: Replaced technology and language input fields with arrays and button elements --- .../profile-settings.component.html | 82 +++++++++++++-------- .../profile-settings/profile-settings.component.ts | 85 ++++++++-------------- 2 files changed, 81 insertions(+), 86 deletions(-) (limited to 'src/app/components/profile-settings/profile-settings.component.ts') diff --git a/src/app/components/profile-settings/profile-settings.component.html b/src/app/components/profile-settings/profile-settings.component.html index e792f9f..d42ba28 100644 --- a/src/app/components/profile-settings/profile-settings.component.html +++ b/src/app/components/profile-settings/profile-settings.component.html @@ -68,45 +68,63 @@ ▼ Edit Languages ▼
-
- - -
-
- No languages available! -
-
- Available languages: -
-
-
- {{ lang.name }} +
+
+ You haven't chosen any languages!
-
+
+ Chosen languages: +
+
+
+ {{ lang.name }} +
+
+
+
+
+ No languages available! +
+
+ Available languages: +
+
+
+ {{ lang.name }} +
+
+
-
- - -
-
- No technologies available! -
-
- Available technologies: -
-
-
- {{ tech.name }} +
+
+ You haven't chosen any technologies!
-
+
+ Chosen technologies: +
+
+
+ {{ tech.name }} +
+
+
+
+
+ No technologies available! +
+
+ Available technologies: +
+
+
+ {{ tech.name }} +
+
+
diff --git a/src/app/components/profile-settings/profile-settings.component.ts b/src/app/components/profile-settings/profile-settings.component.ts index b7f2d90..007ce28 100644 --- a/src/app/components/profile-settings/profile-settings.component.ts +++ b/src/app/components/profile-settings/profile-settings.component.ts @@ -34,6 +34,8 @@ 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[]; @@ -57,16 +59,11 @@ export class ProfileSettingsComponent implements OnInit { username: new FormControl(''), email: new FormControl(''), password: new FormControl(''), - languageInput: new FormControl(''), - languages: new FormControl(''), - technologyInput: new FormControl(''), - technologies: new FormControl('') }); this.updateProfilePictureFormGroup = this._fb.group({ fileUpload: new FormControl('') }); - this._userService.getUserByUsernameRequest(this._urlUsername).subscribe({ next: (res: object) => { Object.assign(this.user, res); @@ -77,18 +74,7 @@ export class ProfileSettingsComponent implements OnInit { this._router.navigate(['/not-found']); } }); - - this._languageService.getAllLanguagesWithSessionStorageRequest().subscribe({ - next: (result: object) => { - this.availableLanguages = result as Language[]; - } - }); - this._technologyService.getAllTechnologiesWithSessionStorageRequest().subscribe({ - next: (result: object) => { - this.availableTechnologies = result as Technology[]; - } - }); - } + } private finishUserLoading(): void { if (sessionStorage.getItem('UserCred')) { @@ -99,6 +85,7 @@ export class ProfileSettingsComponent implements OnInit { Object.assign(userFromToken, tokenRes); if (userFromToken.userName === this._urlUsername) { + this.loadUserSecondaryInfo(); this.initForms(); this.dataArrived = true; } @@ -116,6 +103,33 @@ export class ProfileSettingsComponent implements OnInit { } } + private loadUserSecondaryInfo(): void { + // Load languages and tehnologies of user + this._languageService.getFullLanguagesFromIncomplete(this.user.languages).then( + (result) => { + this.chosenLanguages = result as Language[]; + } + ); + + this._technologyService.getFullTechnologiesFromIncomplete(this.user.technologies).then( + (result) => { + this.chosenTechnologies = result as Technology[]; + } + ); + + // Load avaiable languages and technologies + this._languageService.getAllLanguagesWithSessionStorageRequest().subscribe({ + next: (result: object) => { + this.availableLanguages = result as Language[]; + } + }); + this._technologyService.getAllTechnologiesWithSessionStorageRequest().subscribe({ + next: (result: object) => { + this.availableTechnologies = result as Technology[]; + } + }); + } + private initForms(): void { this.updateUserFormGroup = this._fb.group({ firstName: new FormControl(this.user.firstName, [ @@ -139,25 +153,6 @@ 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({ @@ -172,24 +167,6 @@ export class ProfileSettingsComponent implements OnInit { }); } - private getLanguagesForShowing(): Promise { - 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 { - return new Promise(resolve => { - this._technologyService.getFullTechnologiesFromIncomplete(this.user.technologies).then(value => { - this.user.technologies = value; - resolve(value.map(x => x.name).join(' ')); - }); - }); - } - onFileUpload(event: any): void { this.newProfilePicture = event.target.files[0]; } -- cgit v1.2.3 From 350657be9db0b51c06ccba2dd3e3a4b1702bcfb1 Mon Sep 17 00:00:00 2001 From: Syndamia Date: Mon, 29 Mar 2021 15:22:56 +0300 Subject: Fixed loading of avaiable languages and technologies in profile settings page --- .../profile-settings/profile-settings.component.ts | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) (limited to 'src/app/components/profile-settings/profile-settings.component.ts') diff --git a/src/app/components/profile-settings/profile-settings.component.ts b/src/app/components/profile-settings/profile-settings.component.ts index 007ce28..4bee52e 100644 --- a/src/app/components/profile-settings/profile-settings.component.ts +++ b/src/app/components/profile-settings/profile-settings.component.ts @@ -108,24 +108,34 @@ export class ProfileSettingsComponent implements OnInit { 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(); } ); + } - // Load avaiable languages and technologies + private loadAvailableLanguages(): void { this._languageService.getAllLanguagesWithSessionStorageRequest().subscribe({ next: (result: object) => { - this.availableLanguages = result as Language[]; + 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) => { - this.availableTechnologies = result as Technology[]; + 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)); } }); } -- cgit v1.2.3 From bcba82bbbcc55a511de1e126e0741ea6cf9fb505 Mon Sep 17 00:00:00 2001 From: Syndamia Date: Mon, 29 Mar 2021 15:40:26 +0300 Subject: Added logic for transferring languages and technologies from available to chosen and back in profile settings --- .../profile-settings/profile-settings.component.ts | 27 +++++++++++++++++++--- src/styles.css | 4 ++++ 2 files changed, 28 insertions(+), 3 deletions(-) (limited to 'src/app/components/profile-settings/profile-settings.component.ts') diff --git a/src/app/components/profile-settings/profile-settings.component.ts b/src/app/components/profile-settings/profile-settings.component.ts index 4bee52e..4724f02 100644 --- a/src/app/components/profile-settings/profile-settings.component.ts +++ b/src/app/components/profile-settings/profile-settings.component.ts @@ -274,13 +274,34 @@ export class ProfileSettingsComponent implements OnInit { } langClick(name: string): void { - console.log('Language: ' + name); + 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 { - console.log('Technology: ' + name); - } + 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)]); diff --git a/src/styles.css b/src/styles.css index 39b6fb1..c9a4f25 100644 --- a/src/styles.css +++ b/src/styles.css @@ -279,6 +279,10 @@ input[type=file]::file-selector-button { padding: 0.1em; } +.padding-right-1 { + padding-right: 1em !important; +} + .padding-right-1dot5 { padding-right: 1.5em !important; } -- cgit v1.2.3 From ab8122e2cbeefe55b7dca1aeeb1cbaf830ed25b5 Mon Sep 17 00:00:00 2001 From: Syndamia Date: Mon, 29 Mar 2021 15:46:25 +0300 Subject: Fixed update user request in service and in profile settings --- .../profile-settings/profile-settings.component.ts | 2 +- src/app/services/user.service.ts | 12 +++++++----- 2 files changed, 8 insertions(+), 6 deletions(-) (limited to 'src/app/components/profile-settings/profile-settings.component.ts') diff --git a/src/app/components/profile-settings/profile-settings.component.ts b/src/app/components/profile-settings/profile-settings.component.ts index 4724f02..78a57ec 100644 --- a/src/app/components/profile-settings/profile-settings.component.ts +++ b/src/app/components/profile-settings/profile-settings.component.ts @@ -201,7 +201,7 @@ export class ProfileSettingsComponent implements OnInit { this.patchLanguagesControl(); this.patchTechnologiesControl(); - this._userService.putUserFromSessionStorageRequest(this.updateUserFormGroup, this.user.roles, this.user.friends).subscribe({ + this._userService.putUserFromSessionStorageRequest(this.updateUserFormGroup, this.chosenLanguages, this.chosenTechnologies, this.user.roles, this.user.friends).subscribe({ next: () => { this._successBar.showMsg('Profile updated successfully!'); diff --git a/src/app/services/user.service.ts b/src/app/services/user.service.ts index 29058b4..10c8c59 100644 --- a/src/app/services/user.service.ts +++ b/src/app/services/user.service.ts @@ -8,6 +8,8 @@ import { Observable } from 'rxjs'; import { Role } from 'src/models/identity/role.model'; import { Friend } from 'src/models/identity/friend.model'; import { TokenService } from './token.service'; +import { Language } from 'src/models/language.model'; +import { Technology } from 'src/models/technology.model'; @Injectable({ providedIn: 'root' @@ -36,11 +38,11 @@ export class UserService { return this.addFriendToUserRequest(userUserName, token, newFriendUserName); } - putUserFromSessionStorageRequest(updateUserFormGroup: FormGroup, userRoles: Role[], userFriends: Friend[]): Observable { + putUserFromSessionStorageRequest(updateUserFormGroup: FormGroup, languages: Language[], technologies: Technology[], userRoles: Role[], userFriends: Friend[]): Observable { const userId = this._tokenService.getUserIdFromSessionStorageToken(); const token = this._tokenService.getTokenFromSessionStorage(); - return this.putUserRequest(userId, token, updateUserFormGroup, userRoles, userFriends); + return this.putUserRequest(userId, token, updateUserFormGroup, languages, technologies, userRoles, userFriends); } putProfilePictureFromSessionStorageRequest(newPicture: File): Observable { @@ -119,7 +121,7 @@ export class UserService { return this._http.get(AppConstants.API_USER_URL + '/GetUser', options); } - putUserRequest(userId: Guid, authToken: string, updateUserFormGroup: FormGroup, userRoles: Role[], userFriends: Friend[]): Observable { + putUserRequest(userId: Guid, authToken: string, updateUserFormGroup: FormGroup, languages: Language[], technologies: Technology[], userRoles: Role[], userFriends: Friend[]): Observable { const body = { UserName: updateUserFormGroup.get('username')?.value, Email: updateUserFormGroup.get('email')?.value, @@ -128,8 +130,8 @@ export class UserService { Password: updateUserFormGroup.get('password')?.value, Roles: userRoles, Friends: userFriends, - Languages: updateUserFormGroup.get('languages')?.value, - Technologies: updateUserFormGroup.get('technologies')?.value + Languages: languages, + Technologies: technologies }; const options = { params: new HttpParams().set('Id', userId.toString()), -- cgit v1.2.3 From 1059b56781fdd6390c4c44fb00e99cc831971285 Mon Sep 17 00:00:00 2001 From: Syndamia Date: Mon, 29 Mar 2021 16:05:06 +0300 Subject: Added show/hide button in profile settings confirm password field --- .../components/profile-settings/profile-settings.component.html | 7 +++++-- src/app/components/profile-settings/profile-settings.component.ts | 7 +++++++ 2 files changed, 12 insertions(+), 2 deletions(-) (limited to 'src/app/components/profile-settings/profile-settings.component.ts') diff --git a/src/app/components/profile-settings/profile-settings.component.html b/src/app/components/profile-settings/profile-settings.component.html index fd2d0c5..1471859 100644 --- a/src/app/components/profile-settings/profile-settings.component.html +++ b/src/app/components/profile-settings/profile-settings.component.html @@ -116,7 +116,7 @@ -
+
@@ -124,7 +124,10 @@
- + +
diff --git a/src/app/components/profile-settings/profile-settings.component.ts b/src/app/components/profile-settings/profile-settings.component.ts index 78a57ec..f329942 100644 --- a/src/app/components/profile-settings/profile-settings.component.ts +++ b/src/app/components/profile-settings/profile-settings.component.ts @@ -38,6 +38,7 @@ export class ProfileSettingsComponent implements OnInit { 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) { this._titleService.setTitle(this._title); @@ -346,4 +347,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; + } + } } -- cgit v1.2.3