From d316c4adc9479102149e6ab79c0811cc8bbf283b Mon Sep 17 00:00:00 2001 From: Syndamia Date: Fri, 29 Jan 2021 11:18:04 +0200 Subject: Implemented dynamic getting of user languages and technologies: added language and technology service, updated user to accomodate languages and technologies, updated profile component --- .../src/app/app-constants.module.ts | 4 ++ .../src/app/components/post/post.component.ts | 4 +- .../app/components/profile/profile.component.html | 20 +++++--- .../app/components/profile/profile.component.ts | 59 ++++++++++++++++++++-- .../src/app/services/language.service.ts | 19 +++++++ .../src/app/services/technology.service.ts | 19 +++++++ .../src/app/services/user.service.ts | 2 +- src/DevHive.Angular/src/models/identity/user.ts | 29 ++++++++++- 8 files changed, 142 insertions(+), 14 deletions(-) create mode 100644 src/DevHive.Angular/src/app/services/language.service.ts create mode 100644 src/DevHive.Angular/src/app/services/technology.service.ts (limited to 'src/DevHive.Angular') diff --git a/src/DevHive.Angular/src/app/app-constants.module.ts b/src/DevHive.Angular/src/app/app-constants.module.ts index 2215abd..7552a5e 100644 --- a/src/DevHive.Angular/src/app/app-constants.module.ts +++ b/src/DevHive.Angular/src/app/app-constants.module.ts @@ -1,8 +1,12 @@ export class AppConstants { public static BASE_API_URL = 'http://localhost:5000/api'; + public static API_USER_URL = AppConstants.BASE_API_URL + '/User'; public static API_USER_LOGIN_URL = AppConstants.API_USER_URL + '/login'; public static API_USER_REGISTER_URL = AppConstants.API_USER_URL + '/register'; + public static API_LANGUAGE_URL = AppConstants.BASE_API_URL + '/Language'; + public static API_TECHNOLOGY_URL = AppConstants.BASE_API_URL + '/Technology'; + public static FALLBACK_PROFILE_ICON = 'assets/images/feed/profile-pic.png'; } diff --git a/src/DevHive.Angular/src/app/components/post/post.component.ts b/src/DevHive.Angular/src/app/components/post/post.component.ts index 4ed42a6..76a4873 100644 --- a/src/DevHive.Angular/src/app/components/post/post.component.ts +++ b/src/DevHive.Angular/src/app/components/post/post.component.ts @@ -22,7 +22,9 @@ export class PostComponent implements OnInit { 'Gosho', 'Trapov', 'gotra@bg.com', - AppConstants.FALLBACK_PROFILE_ICON + AppConstants.FALLBACK_PROFILE_ICON, + new Array(), + new Array() ); this.votesNumber = 23; diff --git a/src/DevHive.Angular/src/app/components/profile/profile.component.html b/src/DevHive.Angular/src/app/components/profile/profile.component.html index d775b46..43d580f 100644 --- a/src/DevHive.Angular/src/app/components/profile/profile.component.html +++ b/src/DevHive.Angular/src/app/components/profile/profile.component.html @@ -21,20 +21,24 @@
Languages: -
- C# +
+
+ {{ lang.name }} +
-
- TypeScript +
+  None
Technologies: -
- .NET 5 +
+
+ {{ tech.name }} +
-
- Angular +
+  None
diff --git a/src/DevHive.Angular/src/app/components/profile/profile.component.ts b/src/DevHive.Angular/src/app/components/profile/profile.component.ts index 42addfb..5bc1976 100644 --- a/src/DevHive.Angular/src/app/components/profile/profile.component.ts +++ b/src/DevHive.Angular/src/app/components/profile/profile.component.ts @@ -5,6 +5,8 @@ import { User } from 'src/models/identity/user'; import { AppConstants } from 'src/app/app-constants.module'; import {HttpErrorResponse} from '@angular/common/http'; import {Location} from '@angular/common'; +import {LanguageService} from 'src/app/services/language.service'; +import {TechnologyService} from 'src/app/services/technology.service'; @Component({ selector: 'app-profile', @@ -16,8 +18,10 @@ export class ProfileComponent implements OnInit { public loggedInUser = false; public dataArrived = false; public user: User; + public showNoLangMsg = false; + public showNoTechMsg = false; - constructor(private _router: Router, private _userService: UserService, private _location: Location) + constructor(private _router: Router, private _userService: UserService, private _languageService: LanguageService, private _technologyService: TechnologyService, private _location: Location) { } private setDefaultUser(): void { @@ -29,13 +33,62 @@ export class ProfileComponent implements OnInit { this.user = this._userService.getDefaultUser(); this._userService.getUserByUsernameRequest(this._urlUsername).subscribe( - (res: object) => this.finishUserLoading(res), + (res: object) => this.loadLanguages(res), (err: HttpErrorResponse) => { this._router.navigate(['/not-found']); } ); } - private finishUserLoading(res: object): void { + private loadLanguages(res: object): void { Object.assign(this.user, res); + + if (this.user.languages.length > 0) { + // For each language in the user, request it's name and assign it, + // when you finally finish with them, start loading technologies + const lastGuid = this.user.languages[this.user.languages.length - 1].id; + for (const lang of this.user.languages) { + this._languageService.getLanguageRequest(lang.id).subscribe( + (result: object) => { + // this only assigns the response "name" property to language + Object.assign(lang, result); + + if (lastGuid === lang.id) { + this.loadTechnologies(); + } + } + ); + } + } + else { + this.showNoLangMsg = true; + this.loadTechnologies(); + } + } + + private loadTechnologies(): void { + if (this.user.technologies.length > 0) { + // For each language in the user, request it's name and assign it, + // when you finish with them, finally finish user loading + const lastGuid = this.user.technologies[this.user.technologies.length - 1].id; + for (const tech of this.user.technologies) { + this._technologyService.getTechnologyRequest(tech.id).subscribe( + (result: object) => { + // this only assigns the response "name" property to technology + Object.assign(tech, result); + + if (lastGuid === tech.id) { + this.finishUserLoading(); + } + } + ); + } + } + else { + this.showNoTechMsg = true; + this.finishUserLoading(); + } + } + + private finishUserLoading(): void { if (this.user.imageUrl === '') { this.user.imageUrl = AppConstants.FALLBACK_PROFILE_ICON; } diff --git a/src/DevHive.Angular/src/app/services/language.service.ts b/src/DevHive.Angular/src/app/services/language.service.ts new file mode 100644 index 0000000..8613a65 --- /dev/null +++ b/src/DevHive.Angular/src/app/services/language.service.ts @@ -0,0 +1,19 @@ +import {HttpClient, HttpHeaders, HttpParams} from '@angular/common/http'; +import {Injectable} from '@angular/core'; +import {Guid} from 'guid-typescript'; +import {Observable} from 'rxjs'; +import {AppConstants} from '../app-constants.module'; + +@Injectable({ + providedIn: 'root' +}) +export class LanguageService { + constructor(private http: HttpClient) { } + + getLanguageRequest(langId: Guid): Observable { + const options = { + params: new HttpParams().set('Id', langId.toString()), + }; + return this.http.get(AppConstants.API_LANGUAGE_URL, options); + } +} diff --git a/src/DevHive.Angular/src/app/services/technology.service.ts b/src/DevHive.Angular/src/app/services/technology.service.ts new file mode 100644 index 0000000..4df0412 --- /dev/null +++ b/src/DevHive.Angular/src/app/services/technology.service.ts @@ -0,0 +1,19 @@ +import {HttpClient, HttpHeaders, HttpParams} from '@angular/common/http'; +import {Injectable} from '@angular/core'; +import {Guid} from 'guid-typescript'; +import {Observable} from 'rxjs'; +import {AppConstants} from '../app-constants.module'; + +@Injectable({ + providedIn: 'root' +}) +export class TechnologyService { + constructor(private http: HttpClient) { } + + getTechnologyRequest(techId: Guid): Observable { + const options = { + params: new HttpParams().set('Id', techId.toString()) + }; + return this.http.get(AppConstants.API_TECHNOLOGY_URL, options); + } +} diff --git a/src/DevHive.Angular/src/app/services/user.service.ts b/src/DevHive.Angular/src/app/services/user.service.ts index b8678d7..5b4b63c 100644 --- a/src/DevHive.Angular/src/app/services/user.service.ts +++ b/src/DevHive.Angular/src/app/services/user.service.ts @@ -16,7 +16,7 @@ export class UserService { constructor(private http: HttpClient) { } getDefaultUser(): User { - return new User(Guid.createEmpty(), 'gosho_trapov', 'Gosho', 'Trapov', 'gotra@bg.com', AppConstants.FALLBACK_PROFILE_ICON); + return new User(Guid.createEmpty(), 'gosho_trapov', 'Gosho', 'Trapov', 'gotra@bg.com', AppConstants.FALLBACK_PROFILE_ICON, new Array(), new Array()); } getUserIdFromSessionStorageToken(): Guid { diff --git a/src/DevHive.Angular/src/models/identity/user.ts b/src/DevHive.Angular/src/models/identity/user.ts index 68a14fb..c92ed26 100644 --- a/src/DevHive.Angular/src/models/identity/user.ts +++ b/src/DevHive.Angular/src/models/identity/user.ts @@ -1,5 +1,15 @@ import { Guid } from 'guid-typescript'; +export class Language { + public id: Guid; + public name: string; +} + +export class Technology { + public id: Guid; + public name: string; +} + export class User { private _id : Guid; private _lastName : string; @@ -7,14 +17,17 @@ export class User { private _userName : string; private _email: string; private _imageUrl : string; + private _languages: Language[]; + private _technologies: Technology[]; - constructor(id: Guid, userName: string, firstName: string, lastName: string, email: string, imageUrl: string) { + constructor(id: Guid, userName: string, firstName: string, lastName: string, email: string, imageUrl: string, languages: Language[], technologies: Technology[]) { this.id = id; this.userName = userName; this.firstName = firstName; this.lastName = lastName; this.email = email; this.imageUrl = imageUrl; + this.technologies = technologies; } public get id(): Guid { @@ -58,4 +71,18 @@ export class User { public set imageUrl(v: string) { this._imageUrl = v; } + + public get languages(): Language[] { + return this._languages; + } + public set languages(v: Language[]) { + this._languages = v; + } + + public get technologies(): Technology[] { + return this._technologies; + } + public set technologies(v: Technology[]) { + this._technologies = v; + } } -- cgit v1.2.3