Replaced technology and language input fields with arrays and button elements

2 files changed, 81 insertions, 86 deletions

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 ▼
 		</button>
 		<section *ngIf="showLanguages">
-			<div class="margin-top-dot5">
-				<label class="error">
-					Type in your desired languages, separated by a space
-				</label>
-				<input class="fancy-input width-full border-faded-slim border-bottom-only" type="text" placeholder="You have no selected languages!" formControlName="languageInput" required>
-			</div>
-			<div class="none-message" *ngIf="availableLanguages.length === 0">
-				No languages available!
-			</div>
-			<div *ngIf="availableLanguages.length > 0">
-				Available languages:
-			</div>
-			<div class="flex-row margin-top-dot4">
-				<div class="sec-info border-radius-dot5r padding-dot2 hover-half-opacity click-effect" *ngFor="let lang of availableLanguages" (click)="langClick(lang.name)">
-					{{ lang.name }}
+			<section class="margin-top-dot5">
+				<div class="none-message" *ngIf="chosenLanguages.length === 0">
+					You haven't chosen any languages!
 				</div>
-			</div>
+				<div *ngIf="chosenLanguages.length > 0">
+					Chosen languages:
+				</div>
+				<div class="flex-row margin-top-dot4">
+					<div class="sec-info border-radius-dot5r padding-dot2 hover-half-opacity click-effect" *ngFor="let lang of chosenLanguages" (click)="langClick(lang.name)">
+						{{ lang.name }}
+					</div>
+				</div>
+			</section>
+			<section>
+				<div class="none-message" *ngIf="availableLanguages.length === 0">
+					No languages available!
+				</div>
+				<div *ngIf="availableLanguages.length > 0">
+					Available languages:
+				</div>
+				<div class="flex-row margin-top-dot4">
+					<div class="sec-info border-radius-dot5r padding-dot2 hover-half-opacity click-effect" *ngFor="let lang of availableLanguages" (click)="langClick(lang.name)">
+						{{ lang.name }}
+					</div>
+				</div>
+			</section>
 		</section>
 		<button type="button" class="fg-focus width-full border-faded-slim padding-dot3 lighter-hover click-effect margin-top-dot4" (click)="toggleTechnologies()">
 			▼ Edit Technologies ▼
 		</button>
 		<section *ngIf="showTechnologies">
-			<div class="margin-top-dot5">
-				<label class="error">
-					Type in your desired technologies, separated by a space
-				</label>
-				<input class="fancy-input width-full border-faded-slim border-bottom-only" type="text" placeholder="You have no selected technologies!" formControlName="technologyInput" required>
-			</div>
-			<div class="none-message" *ngIf="availableTechnologies.length === 0">
-				No technologies available!
-			</div>
-			<div *ngIf="availableTechnologies.length > 0">
-				Available technologies:
-			</div>
-			<div class="flex-row margin-top-dot4">
-				<div class="sec-info border-radius-dot5r padding-dot2 hover-half-opacity click-effect" *ngFor="let tech of availableTechnologies" (click)="techClick(tech.name)">
-					{{ tech.name }}
+			<section class="margin-top-dot5 border-faded-slim border-bottom-only margin-bot-dot5">
+				<div class="none-message" *ngIf="chosenTechnologies.length === 0">
+					You haven't chosen any technologies!
 				</div>
-			</div>
+				<div *ngIf="chosenTechnologies.length > 0">
+					Chosen technologies:
+				</div>
+				<div class="flex-row margin-top-dot4">
+					<div class="sec-info border-radius-dot5r padding-dot2 hover-half-opacity click-effect" *ngFor="let tech of chosenTechnologies" (click)="techClick(tech.name)">
+						{{ tech.name }}
+					</div>
+				</div>
+			</section>
+			<section>
+				<div class="none-message" *ngIf="availableTechnologies.length === 0">
+					No technologies available!
+				</div>
+				<div *ngIf="availableTechnologies.length > 0">
+					Available technologies:
+				</div>
+				<div class="flex-row margin-top-dot4">
+					<div class="sec-info border-radius-dot5r padding-dot2 hover-half-opacity click-effect" *ngFor="let tech of availableTechnologies" (click)="techClick(tech.name)">
+						{{ tech.name }}
+					</div>
+				</div>
+			</section>
 		</section>
 		<section class="margin-top-bot-dot3">
 			<app-success-bar></app-success-bar>
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<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];
   }