From b41172567dbfd9be266ece1e47b73aab0c6e9740 Mon Sep 17 00:00:00 2001 From: Syndamia Date: Sat, 30 Jan 2021 12:38:13 +0200 Subject: Made profile editing of languages and technologies in profile settings page look a lot better --- .../profile-settings.component.css | 28 +++++++++++++++++ .../profile-settings.component.html | 36 +++++++++++++++------- .../app/components/profile/profile.component.css | 7 ----- src/DevHive.Angular/src/styles.css | 7 +++++ 4 files changed, 60 insertions(+), 18 deletions(-) (limited to 'src/DevHive.Angular') 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 7e0978d..2aecef5 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 @@ -50,12 +50,40 @@ hr { transform: translate(0, -1.2em); } +#all-languages, #all-technologies { + display: flex; + flex-wrap: wrap; +} + +#all-languages > *, #all-technologies > * { + width: fit-content; + margin-top: .1em; + margin-bottom: .1em; +} + /* Buttons */ +.edit-btn { + border-radius: 0 !important; + color: var(--focus-color); + background-color: white; + border-color: var(--focus-color); +} + +.edit-btn:hover { + color: white; + background-color: black; + border-color: black !important; +} + .submit-btn { margin-bottom: .5em; } +#update-profile-btn { + margin-top: 1em; +} + #delete-account:hover { color: indianred; border-color: indianred !important; 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 16b537c..1b713d7 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 @@ -58,28 +58,42 @@ - +
- Type in your desired languages, separated by a space. - +
+ + +
+ +
+
Available languages: -
- {{ lang.name }} +
+
+ {{ lang.name }} +
- +
- Type in your desired technologies, separated by a space. - +
+ + +
+ +
+
Available technologies: -
- {{ tech.name }} +
+
+ {{ tech.name }} +
- + diff --git a/src/DevHive.Angular/src/app/components/profile/profile.component.css b/src/DevHive.Angular/src/app/components/profile/profile.component.css index 7d96624..3f9ede3 100644 --- a/src/DevHive.Angular/src/app/components/profile/profile.component.css +++ b/src/DevHive.Angular/src/app/components/profile/profile.component.css @@ -74,13 +74,6 @@ hr { align-items: center; } -.user-language, .user-technology { - border-radius: .4em; - background-color: lightgrey; - padding: .2em; - margin: 0 .2em; -} - /* Posts */ #posts { diff --git a/src/DevHive.Angular/src/styles.css b/src/DevHive.Angular/src/styles.css index 1320795..aaa1bd5 100644 --- a/src/DevHive.Angular/src/styles.css +++ b/src/DevHive.Angular/src/styles.css @@ -73,6 +73,13 @@ input:focus, button:focus { scrollbar-width: none; /* Firefox */ } +.user-language, .user-technology { + border-radius: .4em; + background-color: lightgrey; + padding: .26em; + margin: 0 .2em; +} + /* Inputs, the type found in login and register */ .input-selection { -- cgit v1.2.3 From 1cf7f72b1b8c4d0c353fd7989de0c44d11009b8c Mon Sep 17 00:00:00 2001 From: Syndamia Date: Sat, 30 Jan 2021 12:41:31 +0200 Subject: Fixed successbar error in console --- .../src/app/components/success-bar/success-bar.component.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) (limited to 'src/DevHive.Angular') diff --git a/src/DevHive.Angular/src/app/components/success-bar/success-bar.component.ts b/src/DevHive.Angular/src/app/components/success-bar/success-bar.component.ts index 9a12c3a..f7db0e2 100644 --- a/src/DevHive.Angular/src/app/components/success-bar/success-bar.component.ts +++ b/src/DevHive.Angular/src/app/components/success-bar/success-bar.component.ts @@ -15,7 +15,10 @@ export class SuccessBarComponent implements OnInit { } showMsg(msg?: string | undefined): void { - if (msg === undefined || msg.trim() === '') { + if (msg === undefined) { + this.successMsg = 'Success!'; + } + else if (msg.trim() === '') { this.successMsg = 'Success!'; } else { -- cgit v1.2.3 From a8cc808396a24f0a5e4262d07e3edae1a4e5fc1d Mon Sep 17 00:00:00 2001 From: Syndamia Date: Sat, 30 Jan 2021 12:48:51 +0200 Subject: Editing user languages and technologies supports having multiple spaces anywhere in input --- .../app/components/profile-settings/profile-settings.component.ts | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) (limited to 'src/DevHive.Angular') 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 5be160e..1f17fe1 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 @@ -185,7 +185,9 @@ export class ProfileSettingsComponent implements OnInit { // Transfer user input to objects of type { "name": "value" } const actualLanguages = []; for (const lName of names) { - actualLanguages.push({ name : lName }); + if (lName !== '') { + actualLanguages.push({ name : lName }); + } } // Add the data to the form (to the value that is going to be sent) @@ -211,7 +213,9 @@ export class ProfileSettingsComponent implements OnInit { // Transfer user input to objects of type { "name": "value" } const actualTechnologies = []; for (const tName of names) { - actualTechnologies.push({ name : tName }); + if (tName !== '') { + actualTechnologies.push({ name : tName }); + } } // Add the data to the form (to the value that is going to be sent) -- cgit v1.2.3 From 69dc1caca6a3f4ff7bbb5c01dfe23ffdc27f20fc Mon Sep 17 00:00:00 2001 From: Syndamia Date: Sat, 30 Jan 2021 14:20:14 +0200 Subject: Made post component slightly more dynamic (postId, message and time created are dynamic) --- .../src/app/app-constants.module.ts | 2 ++ .../src/app/components/post/post.component.html | 6 ++-- .../src/app/components/post/post.component.ts | 18 +++++++++-- .../src/app/services/post.service.ts | 25 +++++++++++++++ src/DevHive.Angular/src/models/post.ts | 37 ++++++++++++++++++++++ 5 files changed, 83 insertions(+), 5 deletions(-) create mode 100644 src/DevHive.Angular/src/app/services/post.service.ts create mode 100644 src/DevHive.Angular/src/models/post.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 7552a5e..8a63651 100644 --- a/src/DevHive.Angular/src/app/app-constants.module.ts +++ b/src/DevHive.Angular/src/app/app-constants.module.ts @@ -8,5 +8,7 @@ export class AppConstants { public static API_LANGUAGE_URL = AppConstants.BASE_API_URL + '/Language'; public static API_TECHNOLOGY_URL = AppConstants.BASE_API_URL + '/Technology'; + public static API_POST_URL = AppConstants.BASE_API_URL + '/Post'; + public static FALLBACK_PROFILE_ICON = 'assets/images/feed/profile-pic.png'; } 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 487b785..4dec754 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 @@ -
+
@@ -12,10 +12,10 @@
- Your opinion on my idea? + {{ post.message }}
- 17:41 - 27 Dec 2020 + {{ post.timeCreated }}
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 76a4873..ab894d1 100644 --- a/src/DevHive.Angular/src/app/components/post/post.component.ts +++ b/src/DevHive.Angular/src/app/components/post/post.component.ts @@ -1,7 +1,10 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, Input, OnInit } from '@angular/core'; import { Guid } from 'guid-typescript'; import {AppConstants} from 'src/app/app-constants.module'; +import {FeedService} from 'src/app/services/feed.service'; +import {PostService} from 'src/app/services/post.service'; import { User } from 'src/models/identity/user'; +import {Post} from 'src/models/post'; @Component({ selector: 'app-post', @@ -10,11 +13,16 @@ import { User } from 'src/models/identity/user'; }) export class PostComponent implements OnInit { public user: User; + public post: Post; public votesNumber: number; + public loaded = false; + @Input() paramId: string; - constructor() {} + constructor(private _postService: PostService) + {} ngOnInit(): void { + this.post = this._postService.getDefaultPost(); // Fetch data in post service this.user = new User( Guid.create(), @@ -27,6 +35,12 @@ export class PostComponent implements OnInit { new Array() ); + this._postService.getPostRequest(Guid.parse(this.paramId)).subscribe( + (result: object) => { + Object.assign(this.post, result); + this.loaded = true; + } + ); this.votesNumber = 23; } } diff --git a/src/DevHive.Angular/src/app/services/post.service.ts b/src/DevHive.Angular/src/app/services/post.service.ts new file mode 100644 index 0000000..74105b3 --- /dev/null +++ b/src/DevHive.Angular/src/app/services/post.service.ts @@ -0,0 +1,25 @@ +import {HttpClient, HttpParams} from '@angular/common/http'; +import {Injectable} from '@angular/core'; +import {Guid} from 'guid-typescript'; +import {Observable} from 'rxjs'; +import {Post} from 'src/models/post'; +import {AppConstants} from '../app-constants.module'; + +@Injectable({ + providedIn: 'root' +}) +export class PostService { + constructor(private http: HttpClient) { } + + getDefaultPost(): Post { + return new Post(Guid.createEmpty(), '', new Date()); + } + + getPostRequest(id: Guid): Observable { + const options = { + params: new HttpParams().set('Id', id.toString()) + }; + return this.http.get(AppConstants.API_POST_URL, options); + } +} + diff --git a/src/DevHive.Angular/src/models/post.ts b/src/DevHive.Angular/src/models/post.ts new file mode 100644 index 0000000..aed1005 --- /dev/null +++ b/src/DevHive.Angular/src/models/post.ts @@ -0,0 +1,37 @@ +import {Guid} from 'guid-typescript'; + +export class Post { + private _postId: Guid; + // _creatorId + private _message: string; + private _timeCreated: Date; + // _comments + // _files + + constructor(postId: Guid, message: string, timeCreated: Date) { + this.postId = postId; + this.message = message; + this.timeCreated = timeCreated; + } + + public get postId(): Guid { + return this._postId; + } + public set postId(v: Guid) { + this._postId = v; + } + + public get message(): string { + return this._message; + } + public set message(v: string) { + this._message = v; + } + + public get timeCreated(): Date { + return this._timeCreated; + } + public set timeCreated(v: Date) { + this._timeCreated = v; + } +} -- cgit v1.2.3 From 288d9cf688a4273ff7dd213e6d2300978df61ea2 Mon Sep 17 00:00:00 2001 From: Syndamia Date: Sat, 30 Jan 2021 14:20:48 +0200 Subject: Made user page posts dynamic --- .../src/app/app-constants.module.ts | 1 + .../app/components/profile/profile.component.html | 8 +++++--- .../app/components/profile/profile.component.ts | 19 +++++++++++++++--- .../src/app/services/feed.service.ts | 23 ++++++++++++++++++++++ 4 files changed, 45 insertions(+), 6 deletions(-) create mode 100644 src/DevHive.Angular/src/app/services/feed.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 8a63651..28540c4 100644 --- a/src/DevHive.Angular/src/app/app-constants.module.ts +++ b/src/DevHive.Angular/src/app/app-constants.module.ts @@ -9,6 +9,7 @@ export class AppConstants { public static API_TECHNOLOGY_URL = AppConstants.BASE_API_URL + '/Technology'; public static API_POST_URL = AppConstants.BASE_API_URL + '/Post'; + public static API_FEED_URL = AppConstants.BASE_API_URL + '/Feed'; public static FALLBACK_PROFILE_ICON = 'assets/images/feed/profile-pic.png'; } 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 43d580f..8ac91af 100644 --- a/src/DevHive.Angular/src/app/components/profile/profile.component.html +++ b/src/DevHive.Angular/src/app/components/profile/profile.component.html @@ -41,9 +41,11 @@  None -
-
- Posts go here +
+
+
+ +
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 69d7e72..1a3f0b8 100644 --- a/src/DevHive.Angular/src/app/components/profile/profile.component.ts +++ b/src/DevHive.Angular/src/app/components/profile/profile.component.ts @@ -7,6 +7,8 @@ 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'; +import {Post} from 'src/models/post'; +import {FeedService} from 'src/app/services/feed.service'; @Component({ selector: 'app-profile', @@ -18,10 +20,11 @@ export class ProfileComponent implements OnInit { public loggedInUser = false; public dataArrived = false; public user: User; + public userPosts: Post[] = []; public showNoLangMsg = false; public showNoTechMsg = false; - constructor(private _router: Router, private _userService: UserService, private _languageService: LanguageService, private _technologyService: TechnologyService, private _location: Location) + constructor(private _router: Router, private _userService: UserService, private _languageService: LanguageService, private _technologyService: TechnologyService, private _feedService: FeedService, private _location: Location) { } private setDefaultUser(): void { @@ -57,11 +60,11 @@ export class ProfileComponent implements OnInit { private loadTechnologies(): void { if (this.user.technologies.length > 0) { - // When user has technologies, get their names and finally finish loading + // When user has technologies, get their names and then load posts this._technologyService.getFullTechnologiesFromIncomplete(this.user.technologies) .then(value => { this.user.technologies = value; - this.finishUserLoading(); + this.loadPosts(); }); } else { @@ -70,6 +73,16 @@ export class ProfileComponent implements OnInit { } } + private loadPosts(): void { + this._feedService.getUserPostsRequest(this.user.userName, 1, '2021-01-29T21:35:30.977Z', 5).subscribe( + (result: object) => { + this.userPosts = Object.values(result)[0]; + console.log(this.userPosts); + 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/feed.service.ts b/src/DevHive.Angular/src/app/services/feed.service.ts new file mode 100644 index 0000000..42757eb --- /dev/null +++ b/src/DevHive.Angular/src/app/services/feed.service.ts @@ -0,0 +1,23 @@ +import {HttpClient, HttpParams} from '@angular/common/http'; +import {Injectable} from '@angular/core'; +import {Observable} from 'rxjs'; +import {AppConstants} from '../app-constants.module'; + +@Injectable({ + providedIn: 'root' +}) +export class FeedService { + constructor(private http: HttpClient) { } + + getUserPostsRequest(userName: string, pageNumber: number, firstTimeIssued: string, pageSize: number): Observable { + const body = { + pageNumber: pageNumber, + firstPageTimeIssued: firstTimeIssued, + pageSize: pageSize + }; + const options = { + params: new HttpParams().set('UserName', userName) + }; + return this.http.post(AppConstants.API_FEED_URL + '/GetUserPosts', body, options); + } +} -- cgit v1.2.3 From afb14fe1ab1b2ccc72debc55e2a457f4090ce887 Mon Sep 17 00:00:00 2001 From: Syndamia Date: Sat, 30 Jan 2021 20:10:25 +0200 Subject: Angular post model contains creator info; posts now load their creator's data; improved format of post created date --- .../src/app/components/post/post.component.html | 2 +- .../src/app/components/post/post.component.ts | 28 ++++++++++---------- .../app/components/profile/profile.component.html | 4 +-- .../src/app/services/post.service.ts | 2 +- src/DevHive.Angular/src/models/post.ts | 30 ++++++++++++++++++++-- 5 files changed, 47 insertions(+), 19 deletions(-) (limited to 'src/DevHive.Angular') 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 4dec754..36783e5 100644 --- a/src/DevHive.Angular/src/app/components/post/post.component.html +++ b/src/DevHive.Angular/src/app/components/post/post.component.html @@ -15,7 +15,7 @@ {{ post.message }}
- {{ post.timeCreated }} + {{ timeCreated }}
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 ab894d1..2f5aa81 100644 --- a/src/DevHive.Angular/src/app/components/post/post.component.ts +++ b/src/DevHive.Angular/src/app/components/post/post.component.ts @@ -3,6 +3,7 @@ import { Guid } from 'guid-typescript'; import {AppConstants} from 'src/app/app-constants.module'; import {FeedService} from 'src/app/services/feed.service'; import {PostService} from 'src/app/services/post.service'; +import {UserService} from 'src/app/services/user.service'; import { User } from 'src/models/identity/user'; import {Post} from 'src/models/post'; @@ -15,32 +16,33 @@ export class PostComponent implements OnInit { public user: User; public post: Post; public votesNumber: number; + public timeCreated: string; public loaded = false; @Input() paramId: string; - constructor(private _postService: PostService) + constructor(private _postService: PostService, private _userService: UserService) {} ngOnInit(): void { this.post = this._postService.getDefaultPost(); - // Fetch data in post service - this.user = new User( - Guid.create(), - 'gosho_trapov', - 'Gosho', - 'Trapov', - 'gotra@bg.com', - AppConstants.FALLBACK_PROFILE_ICON, - new Array(), - new Array() - ); + this.user = this._userService.getDefaultUser(); this._postService.getPostRequest(Guid.parse(this.paramId)).subscribe( (result: object) => { Object.assign(this.post, result); - this.loaded = true; + this.timeCreated = new Date(this.post.timeCreated).toLocaleString('en-GB'); + this.loadUser(); } ); this.votesNumber = 23; } + + private loadUser(): void { + this._userService.getUserByUsernameRequest(this.post.creatorUsername).subscribe( + (result: object) => { + Object.assign(this.user, result); + this.loaded = 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 8ac91af..e20f380 100644 --- a/src/DevHive.Angular/src/app/components/profile/profile.component.html +++ b/src/DevHive.Angular/src/app/components/profile/profile.component.html @@ -43,8 +43,8 @@
-
- +
+
diff --git a/src/DevHive.Angular/src/app/services/post.service.ts b/src/DevHive.Angular/src/app/services/post.service.ts index 74105b3..4cd96bc 100644 --- a/src/DevHive.Angular/src/app/services/post.service.ts +++ b/src/DevHive.Angular/src/app/services/post.service.ts @@ -12,7 +12,7 @@ export class PostService { constructor(private http: HttpClient) { } getDefaultPost(): Post { - return new Post(Guid.createEmpty(), '', new Date()); + return new Post(Guid.createEmpty(), 'Gosho', 'Trapov', 'gosho_trapov', 'Your opinion on my idea?', new Date()); } getPostRequest(id: Guid): Observable { diff --git a/src/DevHive.Angular/src/models/post.ts b/src/DevHive.Angular/src/models/post.ts index aed1005..2d7d79f 100644 --- a/src/DevHive.Angular/src/models/post.ts +++ b/src/DevHive.Angular/src/models/post.ts @@ -2,14 +2,19 @@ import {Guid} from 'guid-typescript'; export class Post { private _postId: Guid; - // _creatorId + private _creatorFirstName: string; + private _creatorLastName: string; + private _creatorUsername: string; private _message: string; private _timeCreated: Date; // _comments // _files - constructor(postId: Guid, message: string, timeCreated: Date) { + constructor(postId: Guid, creatorFirstName: string, creatorLastName: string, creatorUsername: string, message: string, timeCreated: Date) { this.postId = postId; + this.creatorFirstName = creatorFirstName; + this.creatorLastName = creatorLastName; + this.creatorUsername = creatorUsername; this.message = message; this.timeCreated = timeCreated; } @@ -21,6 +26,27 @@ export class Post { this._postId = v; } + public get creatorFirstName(): string { + return this._creatorFirstName; + } + public set creatorFirstName(v: string) { + this._creatorFirstName = v; + } + + public get creatorLastName(): string { + return this._creatorLastName; + } + public set creatorLastName(v: string) { + this._creatorLastName = v; + } + + public get creatorUsername(): string { + return this._creatorUsername; + } + public set creatorUsername(v: string) { + this._creatorUsername = v; + } + public get message(): string { return this._message; } -- cgit v1.2.3 From df80b4929549a01602f47dc58feffa51a00ad609 Mon Sep 17 00:00:00 2001 From: Syndamia Date: Sat, 30 Jan 2021 21:18:43 +0200 Subject: Implemented feed service to get the feed; the posts in the feed page are now loaded (aren't static anymore) --- .../src/app/app-constants.module.ts | 1 + .../src/app/components/feed/feed.component.html | 4 +-- .../src/app/components/feed/feed.component.ts | 29 ++++++++++++++-------- .../src/app/services/feed.service.ts | 25 ++++++++++++++++++- 4 files changed, 46 insertions(+), 13 deletions(-) (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 28540c4..cbb1ec1 100644 --- a/src/DevHive.Angular/src/app/app-constants.module.ts +++ b/src/DevHive.Angular/src/app/app-constants.module.ts @@ -11,5 +11,6 @@ export class AppConstants { public static API_POST_URL = AppConstants.BASE_API_URL + '/Post'; public static API_FEED_URL = AppConstants.BASE_API_URL + '/Feed'; + public static PAGE_SIZE = 5; public static FALLBACK_PROFILE_ICON = 'assets/images/feed/profile-pic.png'; } 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 b82b189..35448b7 100644 --- a/src/DevHive.Angular/src/app/components/feed/feed.component.html +++ b/src/DevHive.Angular/src/app/components/feed/feed.component.html @@ -23,8 +23,8 @@
-
- +
+
diff --git a/src/DevHive.Angular/src/app/components/feed/feed.component.ts b/src/DevHive.Angular/src/app/components/feed/feed.component.ts index b027e5b..5093b21 100644 --- a/src/DevHive.Angular/src/app/components/feed/feed.component.ts +++ b/src/DevHive.Angular/src/app/components/feed/feed.component.ts @@ -6,6 +6,7 @@ import { PostComponent } from '../post/post.component'; import { UserService } from '../../services/user.service'; import { AppConstants } from 'src/app/app-constants.module'; import {HttpErrorResponse} from '@angular/common/http'; +import {FeedService} from 'src/app/services/feed.service'; @Component({ selector: 'app-feed', @@ -14,26 +15,24 @@ import {HttpErrorResponse} from '@angular/common/http'; }) export class FeedComponent implements OnInit { private _title = 'Feed'; + private _timeLoaded: string; public dataArrived = false; public user: User; - public posts: PostComponent[]; + public posts: PostComponent[] = []; - constructor(private _titleService: Title, private _router: Router, private _userService: UserService) { + constructor(private _titleService: Title, private _router: Router, private _userService: UserService, private _feedService: FeedService) { this._titleService.setTitle(this._title); } ngOnInit(): void { this.user = this._userService.getDefaultUser(); - this.posts = [ - new PostComponent(), - new PostComponent(), - new PostComponent(), - new PostComponent(), - ]; + const now = new Date(); + now.setHours(now.getHours() + 2); // accounting for eastern european timezone + this._timeLoaded = now.toISOString(); if (sessionStorage.getItem('UserCred')) { this._userService.getUserFromSessionStorageRequest().subscribe( - (res: object) => this.finishUserLoading(res), + (res: object) => this.loadFeed(res), (err: HttpErrorResponse) => this.bailOnBadToken() ); } else { @@ -41,8 +40,18 @@ export class FeedComponent implements OnInit { } } - private finishUserLoading(res: object): void { + private loadFeed(res: object): void { Object.assign(this.user, res); + + this._feedService.getUserFeedFromSessionStorageRequest(1, this._timeLoaded, AppConstants.PAGE_SIZE).subscribe( + (result: object) => { + this.posts = Object.values(result)[0]; + 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/feed.service.ts b/src/DevHive.Angular/src/app/services/feed.service.ts index 42757eb..cb82bcd 100644 --- a/src/DevHive.Angular/src/app/services/feed.service.ts +++ b/src/DevHive.Angular/src/app/services/feed.service.ts @@ -1,7 +1,11 @@ -import {HttpClient, HttpParams} from '@angular/common/http'; +import {HttpClient, HttpHeaders, HttpParams} from '@angular/common/http'; import {Injectable} from '@angular/core'; +import {Guid} from 'guid-typescript'; import {Observable} from 'rxjs'; +import {IJWTPayload} from 'src/interfaces/jwt-payload'; import {AppConstants} from '../app-constants.module'; +import jwt_decode from 'jwt-decode'; +import {IUserCredentials} from 'src/interfaces/user-credentials'; @Injectable({ providedIn: 'root' @@ -9,6 +13,25 @@ import {AppConstants} from '../app-constants.module'; export class FeedService { constructor(private http: HttpClient) { } + getUserFeedFromSessionStorageRequest(pageNumber: number, firstTimeIssued: string, pageSize: number): Observable { + const jwt: IJWTPayload = { token: sessionStorage.getItem('UserCred') ?? '' }; + const userCred = jwt_decode(jwt.token); + return this.getUserFeedRequest(userCred.ID, jwt.token, pageNumber, firstTimeIssued, pageSize); + } + + getUserFeedRequest(userId: Guid, authToken: string, pageNumber: number, firstTimeIssued: string, pageSize: number): Observable { + const body = { + pageNumber: pageNumber, + firstPageTimeIssued: firstTimeIssued, + pageSize: pageSize + }; + const options = { + params: new HttpParams().set('UserId', userId.toString()), + headers: new HttpHeaders().set('Authorization', 'Bearer ' + authToken) + }; + return this.http.post(AppConstants.API_FEED_URL + '/GetPosts', body, options); + } + getUserPostsRequest(userName: string, pageNumber: number, firstTimeIssued: string, pageSize: number): Observable { const body = { pageNumber: pageNumber, -- cgit v1.2.3 From 8a8d222c4e8263ae3f5dbd61cf7b1d5dcbcdaf5c Mon Sep 17 00:00:00 2001 From: Syndamia Date: Sat, 30 Jan 2021 21:19:52 +0200 Subject: Fixed profile posts not loading on certain accounts; fixed time at which the posts are requested --- .../src/app/components/profile/profile.component.ts | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) (limited to 'src/DevHive.Angular') 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 1a3f0b8..d9f94e8 100644 --- a/src/DevHive.Angular/src/app/components/profile/profile.component.ts +++ b/src/DevHive.Angular/src/app/components/profile/profile.component.ts @@ -69,15 +69,17 @@ export class ProfileComponent implements OnInit { } else { this.showNoTechMsg = true; - this.finishUserLoading(); + this.loadPosts(); } } private loadPosts(): void { - this._feedService.getUserPostsRequest(this.user.userName, 1, '2021-01-29T21:35:30.977Z', 5).subscribe( + const now = new Date(); + now.setHours(now.getHours() + 2); // accounting for eastern europe timezone + + this._feedService.getUserPostsRequest(this.user.userName, 1, now.toISOString(), AppConstants.PAGE_SIZE).subscribe( (result: object) => { this.userPosts = Object.values(result)[0]; - console.log(this.userPosts); this.finishUserLoading(); } ); -- cgit v1.2.3 From e6015b5dcdb81e20531641a2f06cc2ef15439ce8 Mon Sep 17 00:00:00 2001 From: Syndamia Date: Sat, 30 Jan 2021 21:26:51 +0200 Subject: Fixed posts array in feed component --- src/DevHive.Angular/src/app/components/feed/feed.component.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'src/DevHive.Angular') diff --git a/src/DevHive.Angular/src/app/components/feed/feed.component.ts b/src/DevHive.Angular/src/app/components/feed/feed.component.ts index 5093b21..3f197df 100644 --- a/src/DevHive.Angular/src/app/components/feed/feed.component.ts +++ b/src/DevHive.Angular/src/app/components/feed/feed.component.ts @@ -2,11 +2,11 @@ import { Component, OnInit } from '@angular/core'; import { Title } from '@angular/platform-browser'; import { Router } from '@angular/router'; import { User } from 'src/models/identity/user'; -import { PostComponent } from '../post/post.component'; import { UserService } from '../../services/user.service'; import { AppConstants } from 'src/app/app-constants.module'; import {HttpErrorResponse} from '@angular/common/http'; import {FeedService} from 'src/app/services/feed.service'; +import {Post} from 'src/models/post'; @Component({ selector: 'app-feed', @@ -18,7 +18,7 @@ export class FeedComponent implements OnInit { private _timeLoaded: string; public dataArrived = false; public user: User; - public posts: PostComponent[] = []; + public posts: Post[] = []; constructor(private _titleService: Title, private _router: Router, private _userService: UserService, private _feedService: FeedService) { this._titleService.setTitle(this._title); -- cgit v1.2.3 From c9ef07bc23e1187ce06471120dc5d3b325e06869 Mon Sep 17 00:00:00 2001 From: Syndamia Date: Sat, 30 Jan 2021 21:27:43 +0200 Subject: Implemnted ability to click on user profile in post and get redirected to the author profile --- src/DevHive.Angular/src/app/components/post/post.component.css | 4 ++++ src/DevHive.Angular/src/app/components/post/post.component.html | 2 +- src/DevHive.Angular/src/app/components/post/post.component.ts | 7 ++++++- 3 files changed, 11 insertions(+), 2 deletions(-) (limited to 'src/DevHive.Angular') 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 5395eb2..c3e3caa 100644 --- a/src/DevHive.Angular/src/app/components/post/post.component.css +++ b/src/DevHive.Angular/src/app/components/post/post.component.css @@ -24,6 +24,10 @@ hr { margin-bottom: .2em; } +.author:hover { + cursor: pointer; +} + .author > img { width: 2.2em; height: 2.2em; 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 36783e5..8fbda35 100644 --- a/src/DevHive.Angular/src/app/components/post/post.component.html +++ b/src/DevHive.Angular/src/app/components/post/post.component.html @@ -1,6 +1,6 @@
-
+
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 2f5aa81..7a6b5c0 100644 --- a/src/DevHive.Angular/src/app/components/post/post.component.ts +++ b/src/DevHive.Angular/src/app/components/post/post.component.ts @@ -1,4 +1,5 @@ import { Component, Input, OnInit } from '@angular/core'; +import {Router} from '@angular/router'; import { Guid } from 'guid-typescript'; import {AppConstants} from 'src/app/app-constants.module'; import {FeedService} from 'src/app/services/feed.service'; @@ -20,7 +21,7 @@ export class PostComponent implements OnInit { public loaded = false; @Input() paramId: string; - constructor(private _postService: PostService, private _userService: UserService) + constructor(private _postService: PostService, private _userService: UserService, private _router: Router) {} ngOnInit(): void { @@ -45,4 +46,8 @@ export class PostComponent implements OnInit { } ); } + + goToAuthorProfile(): void { + this._router.navigate(['/profile/' + this.user.userName]); + } } -- cgit v1.2.3 From b4211aaa5d024cddd3a1d285edbee6f67d71b9fd Mon Sep 17 00:00:00 2001 From: Syndamia Date: Sat, 30 Jan 2021 21:32:40 +0200 Subject: Fixed "Cannot read property 'hideMsg' of undefined" profile settings page error --- .../src/app/components/profile-settings/profile-settings.component.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'src/DevHive.Angular') 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 1f17fe1..e348b8b 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 @@ -126,8 +126,8 @@ export class ProfileSettingsComponent implements OnInit { .then(value => this.updateUserFormGroup.patchValue({ technologyInput : value })); this.updateUserFormGroup.valueChanges.subscribe(() => { - this._successBar.hideMsg(); - this._errorBar.hideError(); + this._successBar?.hideMsg(); + this._errorBar?.hideError(); }); } -- cgit v1.2.3 From cc46a2fb619faf8f3227d3861c770fb3fbb546f0 Mon Sep 17 00:00:00 2001 From: Syndamia Date: Sat, 30 Jan 2021 21:46:15 +0200 Subject: Added a message in feed when none of your friends have posted anything --- src/DevHive.Angular/src/app/components/feed/feed.component.css | 9 +++++++++ src/DevHive.Angular/src/app/components/feed/feed.component.html | 4 ++++ src/DevHive.Angular/src/app/components/feed/feed.component.ts | 5 ++++- 3 files changed, 17 insertions(+), 1 deletion(-) (limited to 'src/DevHive.Angular') 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 e22693e..f810e83 100644 --- a/src/DevHive.Angular/src/app/components/feed/feed.component.css +++ b/src/DevHive.Angular/src/app/components/feed/feed.component.css @@ -109,6 +109,15 @@ display: none; } +/* Posts */ + +#no-posts-msg { + width: 100%; + margin-top: 1em; + color: gray; + text-align: center; +} + /* 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 35448b7..e3c6e83 100644 --- a/src/DevHive.Angular/src/app/components/feed/feed.component.html +++ b/src/DevHive.Angular/src/app/components/feed/feed.component.html @@ -23,6 +23,10 @@
+
+ None of your friends have posted anything yet!
+ Try refreshing your page! +
diff --git a/src/DevHive.Angular/src/app/components/feed/feed.component.ts b/src/DevHive.Angular/src/app/components/feed/feed.component.ts index 3f197df..f260fd4 100644 --- a/src/DevHive.Angular/src/app/components/feed/feed.component.ts +++ b/src/DevHive.Angular/src/app/components/feed/feed.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { Title } from '@angular/platform-browser'; import { Router } from '@angular/router'; import { User } from 'src/models/identity/user'; @@ -47,6 +47,9 @@ export class FeedComponent implements OnInit { (result: object) => { this.posts = Object.values(result)[0]; this.finishUserLoading(); + }, + (err: HttpErrorResponse) => { + this.finishUserLoading(); } ); } -- cgit v1.2.3 From c0838d5d100d17d2056f8a3dce4dcda588179427 Mon Sep 17 00:00:00 2001 From: Syndamia Date: Sat, 30 Jan 2021 21:52:32 +0200 Subject: Added a message to user profiles, when the user hasn't posted anything --- .../src/app/components/profile/profile.component.css | 8 +++++++- .../src/app/components/profile/profile.component.html | 3 +++ .../src/app/components/profile/profile.component.ts | 3 +++ 3 files changed, 13 insertions(+), 1 deletion(-) (limited to 'src/DevHive.Angular') diff --git a/src/DevHive.Angular/src/app/components/profile/profile.component.css b/src/DevHive.Angular/src/app/components/profile/profile.component.css index 3f9ede3..f312ebd 100644 --- a/src/DevHive.Angular/src/app/components/profile/profile.component.css +++ b/src/DevHive.Angular/src/app/components/profile/profile.component.css @@ -76,7 +76,13 @@ hr { /* Posts */ -#posts { +#no-posts { width: 100%; + text-align: center; + color: gray; + margin-top: .2em; } +#posts { + width: 100%; +} 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 e20f380..ebb9ec8 100644 --- a/src/DevHive.Angular/src/app/components/profile/profile.component.html +++ b/src/DevHive.Angular/src/app/components/profile/profile.component.html @@ -43,6 +43,9 @@
+
+ {{ user.firstName }} {{ user.lastName }} hasn't posted anything yet! +
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 d9f94e8..7717505 100644 --- a/src/DevHive.Angular/src/app/components/profile/profile.component.ts +++ b/src/DevHive.Angular/src/app/components/profile/profile.component.ts @@ -81,6 +81,9 @@ export class ProfileComponent implements OnInit { (result: object) => { this.userPosts = Object.values(result)[0]; this.finishUserLoading(); + }, + (err: HttpErrorResponse) => { + this.finishUserLoading(); } ); } -- cgit v1.2.3 From b8743cfdd0515e4d07ea5c926be1d9ade5340a91 Mon Sep 17 00:00:00 2001 From: Syndamia Date: Sat, 30 Jan 2021 21:53:16 +0200 Subject: Improved scrolling in profile page --- src/DevHive.Angular/src/app/components/profile/profile.component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/DevHive.Angular') 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 ebb9ec8..ac0c07e 100644 --- a/src/DevHive.Angular/src/app/components/profile/profile.component.html +++ b/src/DevHive.Angular/src/app/components/profile/profile.component.html @@ -42,7 +42,7 @@
-
+
{{ user.firstName }} {{ user.lastName }} hasn't posted anything yet!
-- cgit v1.2.3