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') 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