aboutsummaryrefslogtreecommitdiff
path: root/src/app/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/app/components')
-rw-r--r--src/app/components/profile-settings/profile-settings.component.html82
-rw-r--r--src/app/components/profile-settings/profile-settings.component.ts85
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];
}
generated by cgit v1.2.3 (git 2.46.0) at 2026-04-14 21:54:26 +0000