diff options
Diffstat (limited to 'src/DevHive.Angular')
15 files changed, 176 insertions, 42 deletions
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/feed/feed.component.css b/src/DevHive.Angular/src/app/components/feed/feed.component.css index bbb1668..e22693e 100644 --- a/src/DevHive.Angular/src/app/components/feed/feed.component.css +++ b/src/DevHive.Angular/src/app/components/feed/feed.component.css @@ -77,9 +77,10 @@ #top-bar { display: flex; - width: 95%; + width: 98%; margin: 0 auto; margin-bottom: .5em; + box-sizing: border-box; } #top-bar-profile-pic { @@ -100,9 +101,7 @@ margin: 0 auto; box-sizing: border-box; border: 2px solid var(--bg-color); - padding: .5em; border-radius: .6em; - box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px; } #top-bar-open-chat { @@ -110,11 +109,6 @@ display: none; } -#profile-bar, -#top-bar > * { - box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px; -} - /* Elements, that act as buttons */ #profile-bar > #profile-info:hover, diff --git a/src/DevHive.Angular/src/app/components/feed/feed.component.html b/src/DevHive.Angular/src/app/components/feed/feed.component.html index 4a93120..b82b189 100644 --- a/src/DevHive.Angular/src/app/components/feed/feed.component.html +++ b/src/DevHive.Angular/src/app/components/feed/feed.component.html @@ -1,9 +1,9 @@ <app-loading *ngIf="!dataArrived"></app-loading> <div id="feed-page" *ngIf="dataArrived"> - <nav id="profile-bar"> + <nav id="profile-bar" class="round-image rounded-border"> <div id="profile-info" (click)="goToProfile()"> - <img id="profile-bar-profile-pic" class="round-image" [src]="user.imageUrl" alt=""/> + <img id="profile-bar-profile-pic" [src]="user.imageUrl" alt=""/> <div id="profile-bar-name"> {{ user.firstName }} {{ user.lastName }} </div> @@ -15,7 +15,7 @@ <button class="submit-btn" (click)="logout()">Logout</button> </nav> <div id="feed-content"> - <nav id="top-bar"> + <nav id="top-bar" class="rounded-border"> <img id="top-bar-profile-pic" class="round-image" [src]="user.imageUrl" alt="" (click)="goToProfile()"> <input id="top-bar-create-post" type="text" placeholder="What's on your mind?"/> <a id="top-bar-open-chat" href=""> diff --git a/src/DevHive.Angular/src/app/components/post/post.component.css b/src/DevHive.Angular/src/app/components/post/post.component.css index 9de5a27..5395eb2 100644 --- a/src/DevHive.Angular/src/app/components/post/post.component.css +++ b/src/DevHive.Angular/src/app/components/post/post.component.css @@ -1,21 +1,15 @@ .post { display: flex; - width: 95%; + width: 98%; margin: .5em auto; box-sizing: border-box; - border: 2px solid var(--card-bg); padding: .5em; background-color: var(--card-bg); - border-radius: .6em; - box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; } - /* So the bottom shadow of the last element - * doesn't get cut off - */ -.post:nth-last-child(1) { - margin-bottom: 1.1em; +.post:first-child { + margin-top: 0; } hr { diff --git a/src/DevHive.Angular/src/app/components/post/post.component.html b/src/DevHive.Angular/src/app/components/post/post.component.html index a7acb0e..487b785 100644 --- a/src/DevHive.Angular/src/app/components/post/post.component.html +++ b/src/DevHive.Angular/src/app/components/post/post.component.html @@ -1,4 +1,4 @@ -<div class="post"> +<div class="post rounded-border"> <div class="content"> <div class="author"> <img class="round-image" [src]="user.imageUrl"> 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-settings/profile-settings.component.css b/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.css index 8a915d2..7e0978d 100644 --- a/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.css +++ b/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.css @@ -60,3 +60,12 @@ hr { color: indianred; border-color: indianred !important; } + +#confirm-delete { + box-sizing: border-box; + width: 100%; + background-color: var(--failure); + color: white; + padding: .2em; + text-align: center; +} diff --git a/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.html b/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.html index 039a45e..8da7f86 100644 --- a/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.html +++ b/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.html @@ -63,6 +63,9 @@ <app-error-bar></app-error-bar> </form> <hr> + <div id="confirm-delete" *ngIf="deleteAccountConfirm"> + Are you sure you want to delete your account?<br>This is permanent! + </div> <button id="delete-account" class="submit-btn" (click)="deleteAccount()">Delete account</button> </div> </div> diff --git a/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.ts b/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.ts index 4954eb7..0ea5ea2 100644 --- a/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.ts +++ b/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.ts @@ -21,6 +21,7 @@ export class ProfileSettingsComponent implements OnInit { public updateUserFormGroup: FormGroup; public dataArrived = false; public user: User; + public deleteAccountConfirm = false; constructor(private _router: Router, private _userService: UserService, private _fb: FormBuilder, private _location: Location) { } @@ -128,12 +129,17 @@ export class ProfileSettingsComponent implements OnInit { } deleteAccount(): void { - this._userService.deleteUserFromSessionStorageRequest().subscribe( - (res: object) => { - this._userService.logoutUserFromSessionStorage(); - this._router.navigate(['/login']); - }, - (err: HttpErrorResponse) => console.log(err) - ); + if (this.deleteAccountConfirm) { + this._userService.deleteUserFromSessionStorageRequest().subscribe( + (res: object) => { + this._userService.logoutUserFromSessionStorage(); + this._router.navigate(['/login']); + }, + (err: HttpErrorResponse) => console.log(err) + ); + } + else { + this.deleteAccountConfirm = true; + } } } 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 @@ </div> <div class="secondary-info rounded-border"> Languages: - <div class="user-language"> - C# + <div *ngFor="let lang of user.languages"> + <div class="user-language"> + {{ lang.name }} + </div> </div> - <div class="user-language"> - TypeScript + <div *ngIf="showNoLangMsg"> + None </div> </div> <div class="secondary-info rounded-border"> Technologies: - <div class="user-technology"> - .NET 5 + <div *ngFor="let tech of user.technologies"> + <div class="user-language"> + {{ tech.name }} + </div> </div> - <div class="user-technology"> - Angular + <div *ngIf="showNoTechMsg"> + None </div> </div> <div id="posts"> 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<object> { + 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<object> { + 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; + } } |