Merge pull request #4 from Team-Kaleidoscope/click-sec-info

Click sec info

1 files changed, 79 insertions, 55 deletions

diff --git a/src/app/components/profile-settings/profile-settings.component.ts b/src/app/components/profile-settings/profile-settings.component.ts
index 79519aa..f329942 100644
--- a/src/app/components/profile-settings/profile-settings.component.ts
+++ b/src/app/components/profile-settings/profile-settings.component.ts
@@ -34,8 +34,11 @@ 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) {
     this._titleService.setTitle(this._title);
@@ -57,16 +60,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 +75,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 +86,7 @@ export class ProfileSettingsComponent implements OnInit {
           Object.assign(userFromToken, tokenRes);
 
           if (userFromToken.userName === this._urlUsername) {
+            this.loadUserSecondaryInfo();
             this.initForms();
             this.dataArrived = true;
           }
@@ -116,6 +104,43 @@ 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.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, [
@@ -139,25 +164,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 +178,6 @@ export class ProfileSettingsComponent implements OnInit {
     });
   }
 
-  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(' '));
-      });
-    });
-  }
-
   onFileUpload(event: any): void {
     this.newProfilePicture = event.target.files[0];
   }
@@ -214,7 +202,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!');
 
@@ -286,6 +274,36 @@ 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)]);
   }
@@ -329,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;
+    }
+  }
 }