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 --- src/app/components/profile-settings/profile-settings.component.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'src/app/components/profile-settings/profile-settings.component.html') diff --git a/src/app/components/profile-settings/profile-settings.component.html b/src/app/components/profile-settings/profile-settings.component.html index dd3d186..e792f9f 100644 --- a/src/app/components/profile-settings/profile-settings.component.html +++ b/src/app/components/profile-settings/profile-settings.component.html @@ -81,7 +81,7 @@ Available languages:
-
+
{{ lang.name }}
@@ -103,7 +103,7 @@ Available technologies:
-
+
{{ tech.name }}
-- 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.html') 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 7fd2ee051cb541eac73901c1f67052219fc25584 Mon Sep 17 00:00:00 2001 From: Syndamia Date: Mon, 29 Mar 2021 15:39:49 +0300 Subject: Made choosen and avaiable languages and technologies beside eachother in profile settings --- .../profile-settings.component.html | 24 +++++++++++----------- 1 file changed, 12 insertions(+), 12 deletions(-) (limited to 'src/app/components/profile-settings/profile-settings.component.html') diff --git a/src/app/components/profile-settings/profile-settings.component.html b/src/app/components/profile-settings/profile-settings.component.html index d42ba28..60cd2e0 100644 --- a/src/app/components/profile-settings/profile-settings.component.html +++ b/src/app/components/profile-settings/profile-settings.component.html @@ -67,12 +67,12 @@ -
-
+
+
You haven't chosen any languages!
-
+
Chosen languages:
@@ -81,11 +81,11 @@
-
+
- No languages available! + No other languages available!
-
+
Available languages:
@@ -98,12 +98,12 @@ -
-
+
+
You haven't chosen any technologies!
-
+
Chosen technologies:
@@ -112,11 +112,11 @@
-
+
- No technologies available! + No other technologies available!
-
+
Available technologies:
-- cgit v1.2.3 From dee367f320a972806d5bb251c01b2c0044e9a05a Mon Sep 17 00:00:00 2001 From: Syndamia Date: Mon, 29 Mar 2021 15:52:54 +0300 Subject: Moved password field to the bottom (but still above update button) in profile settings --- .../profile-settings/profile-settings.component.html | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) (limited to 'src/app/components/profile-settings/profile-settings.component.html') diff --git a/src/app/components/profile-settings/profile-settings.component.html b/src/app/components/profile-settings/profile-settings.component.html index 60cd2e0..91740c7 100644 --- a/src/app/components/profile-settings/profile-settings.component.html +++ b/src/app/components/profile-settings/profile-settings.component.html @@ -54,16 +54,6 @@
-
-
- - - - - -
- -
@@ -126,6 +116,16 @@
+
+
+ + + + + +
+ +
-- cgit v1.2.3 From 0dd2a9ac545a8bdce63f403122503fef9510378c Mon Sep 17 00:00:00 2001 From: Syndamia Date: Mon, 29 Mar 2021 15:57:33 +0300 Subject: Added slim border to technology and language edit sections in profile settings --- .../profile-settings/profile-settings.component.html | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) (limited to 'src/app/components/profile-settings/profile-settings.component.html') diff --git a/src/app/components/profile-settings/profile-settings.component.html b/src/app/components/profile-settings/profile-settings.component.html index 91740c7..fd2d0c5 100644 --- a/src/app/components/profile-settings/profile-settings.component.html +++ b/src/app/components/profile-settings/profile-settings.component.html @@ -57,8 +57,8 @@ -
-
+
+
You haven't chosen any languages!
@@ -71,7 +71,7 @@
-
+
No other languages available!
@@ -88,8 +88,8 @@ -
-
+
+
You haven't chosen any technologies!
@@ -102,7 +102,7 @@
-
+
No other technologies available!
-- 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.html') 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