diff options
Diffstat (limited to 'src/DevHive.Angular')
12 files changed, 320 insertions, 12 deletions
diff --git a/src/DevHive.Angular/src/app/app-constants.module.ts b/src/DevHive.Angular/src/app/app-constants.module.ts index 82a3513..5252474 100644 --- a/src/DevHive.Angular/src/app/app-constants.module.ts +++ b/src/DevHive.Angular/src/app/app-constants.module.ts @@ -10,6 +10,7 @@ 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 API_COMMENT_URL = AppConstants.BASE_API_URL + '/Comment'; public static PAGE_SIZE = 5; public static FALLBACK_PROFILE_ICON = 'assets/images/feed/profile-pic.png'; diff --git a/src/DevHive.Angular/src/app/app.module.ts b/src/DevHive.Angular/src/app/app.module.ts index bd96233..aaabf79 100644 --- a/src/DevHive.Angular/src/app/app.module.ts +++ b/src/DevHive.Angular/src/app/app.module.ts @@ -21,6 +21,7 @@ import { ErrorBarComponent } from './components/error-bar/error-bar.component'; import { SuccessBarComponent } from './components/success-bar/success-bar.component'; import { PostPageComponent } from './components/post-page/post-page.component'; import { AdminPanelPageComponent } from './components/admin-panel-page/admin-panel-page.component'; +import { CommentComponent } from './components/comment/comment.component'; @NgModule({ declarations: [ @@ -36,7 +37,8 @@ import { AdminPanelPageComponent } from './components/admin-panel-page/admin-pan ErrorBarComponent, SuccessBarComponent, PostPageComponent, - AdminPanelPageComponent + AdminPanelPageComponent, + CommentComponent ], imports: [ BrowserModule, diff --git a/src/DevHive.Angular/src/app/components/comment/comment.component.css b/src/DevHive.Angular/src/app/components/comment/comment.component.css new file mode 100644 index 0000000..d82f10e --- /dev/null +++ b/src/DevHive.Angular/src/app/components/comment/comment.component.css @@ -0,0 +1,59 @@ +.comment { + display: flex; + width: 100%; + + margin: .5em auto; + box-sizing: border-box; + padding: .5em; + background-color: var(--card-bg); +} + +.comment:first-child { + margin-top: 0; +} + +/* Author */ + +.author { + display: flex; + margin-bottom: .2em; +} + +.author:hover { + cursor: pointer; +} + +.author > img { + width: 1.7em; + height: 1.7em; + margin-right: .2em; +} + +.author-info > .name { + font-size: .8em; +} + +.author-info > .handle { + font-size: .6em; + color: gray; +} + +/* Content */ + +.content { + flex: 1; +} + +.message { + margin: .3em 0; + word-break: break-all; +} + +.timestamp { + font-size: .5em; + color: gray; +} + +.message:hover, .timestamp:hover { + cursor: pointer; +} diff --git a/src/DevHive.Angular/src/app/components/comment/comment.component.html b/src/DevHive.Angular/src/app/components/comment/comment.component.html new file mode 100644 index 0000000..8908b25 --- /dev/null +++ b/src/DevHive.Angular/src/app/components/comment/comment.component.html @@ -0,0 +1,23 @@ +<app-loading *ngIf="!loaded"></app-loading> + +<div class="comment rounded-border" *ngIf="loaded"> + <div class="content"> + <div class="author" (click)="goToAuthorProfile()"> + <img class="round-image" [src]="user.imageUrl"> + <div class="author-info"> + <div class="name"> + {{ user.firstName }} {{ user.lastName }} + </div> + <div class="handle"> + @{{ user.userName }} + </div> + </div> + </div> + <div class="message" (click)="goToCommentPage()"> + {{ comment.message }} + </div> + <div class="timestamp" (click)="goToCommentPage()"> + {{ timeCreated }} + </div> + </div> +</div> diff --git a/src/DevHive.Angular/src/app/components/comment/comment.component.ts b/src/DevHive.Angular/src/app/components/comment/comment.component.ts new file mode 100644 index 0000000..b171baf --- /dev/null +++ b/src/DevHive.Angular/src/app/components/comment/comment.component.ts @@ -0,0 +1,53 @@ +import { Component, Input, OnInit } from '@angular/core'; +import { Router } from '@angular/router'; +import { Guid } from 'guid-typescript'; +import { CommentService } from 'src/app/services/comment.service'; +import { UserService } from 'src/app/services/user.service'; +import { Comment } from 'src/models/comment'; +import { User } from 'src/models/identity/user'; + +@Component({ + selector: 'app-comment', + templateUrl: './comment.component.html', + styleUrls: ['./comment.component.css'] +}) +export class CommentComponent implements OnInit { + public loaded = false; + public user: User; + public comment: Comment; + public timeCreated: string; + @Input() paramId: string; + + constructor(private _router: Router, private _commentService: CommentService, private _userService: UserService) + { } + + ngOnInit(): void { + this.comment = this._commentService.getDefaultComment(); + this.user = this._userService.getDefaultUser(); + + this._commentService.getCommentRequest(Guid.parse(this.paramId)).subscribe( + (result: object) => { + Object.assign(this.comment, result); + + this.timeCreated = new Date(this.comment.timeCreated).toLocaleString('en-GB'); + this.loadUser(); + } + ); + } + + private loadUser(): void { + this._userService.getUserByUsernameRequest(this.comment.issuerUsername).subscribe( + (result: object) => { + Object.assign(this.user, result); + this.loaded = true; + } + ); + } + + goToAuthorProfile(): void { + this._router.navigate(['/profile/' + this.comment.issuerUsername]); + } + + goToCommentPage(): void { + } +} diff --git a/src/DevHive.Angular/src/app/components/post-page/post-page.component.html b/src/DevHive.Angular/src/app/components/post-page/post-page.component.html index 40a2aba..7069eae 100644 --- a/src/DevHive.Angular/src/app/components/post-page/post-page.component.html +++ b/src/DevHive.Angular/src/app/components/post-page/post-page.component.html @@ -11,4 +11,9 @@ <input type="text" placeholder="New post message" class="input-field" formControlName="newPostMessage"> <input type="submit" style="display: none" /> </form> + <div> + <div class="comment" *ngFor="let comm of post?.comments"> + <app-comment [paramId]="comm.commentId.toString()"></app-comment> + </div> + </div> <div> diff --git a/src/DevHive.Angular/src/app/components/post-page/post-page.component.ts b/src/DevHive.Angular/src/app/components/post-page/post-page.component.ts index de8aa94..830e33d 100644 --- a/src/DevHive.Angular/src/app/components/post-page/post-page.component.ts +++ b/src/DevHive.Angular/src/app/components/post-page/post-page.component.ts @@ -1,11 +1,11 @@ -import {HttpErrorResponse} from '@angular/common/http'; +import { HttpErrorResponse } from '@angular/common/http'; import { Component, OnInit } from '@angular/core'; -import {FormBuilder, FormControl, FormGroup} from '@angular/forms'; +import { FormBuilder, FormControl, FormGroup } from '@angular/forms'; import { Router } from '@angular/router'; import { Guid } from 'guid-typescript'; -import {PostService} from 'src/app/services/post.service'; -import {TokenService} from 'src/app/services/token.service'; -import {Post} from 'src/models/post'; +import { PostService } from 'src/app/services/post.service'; +import { TokenService } from 'src/app/services/token.service'; +import { Post } from 'src/models/post'; @Component({ selector: 'app-post-page', @@ -16,6 +16,7 @@ export class PostPageComponent implements OnInit { public editable = false; public editingPost = false; public postId: Guid; + public post: Post; public editPostFormGroup: FormGroup; constructor(private _router: Router, private _fb: FormBuilder, private _tokenService: TokenService, private _postService: PostService) @@ -28,8 +29,11 @@ export class PostPageComponent implements OnInit { // to determine if the current post is made by the user this._postService.getPostRequest(this.postId).subscribe( (result: object) => { - const post = result as Post; - this.editable = post.creatorUsername === this._tokenService.getUsernameFromSessionStorageToken(); + this.post = result as Post; + this.post.comments = this.post.comments.sort((x, y) => { + return Date.parse(y.timeCreated.toString()) - Date.parse(x.timeCreated.toString()); + }); + this.editable = this.post.creatorUsername === this._tokenService.getUsernameFromSessionStorageToken(); }, (err: HttpErrorResponse) => { this._router.navigate(['/not-found']); 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 ef5e8fe..f8493ab 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 @@ -92,7 +92,6 @@ </div> </div> - <button id="update-profile-btn" class="submit-btn" type="submit">Update profile</button> <app-success-bar></app-success-bar> <app-error-bar></app-error-bar> diff --git a/src/DevHive.Angular/src/app/services/comment.service.ts b/src/DevHive.Angular/src/app/services/comment.service.ts new file mode 100644 index 0000000..c9dbf35 --- /dev/null +++ b/src/DevHive.Angular/src/app/services/comment.service.ts @@ -0,0 +1,83 @@ +import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http'; +import { Injectable } from '@angular/core'; +import { Guid } from 'guid-typescript'; +import { Observable } from 'rxjs'; +import { Comment } from 'src/models/comment'; +import { AppConstants } from '../app-constants.module'; +import { TokenService } from './token.service'; + +@Injectable({ + providedIn: 'root' +}) +export class CommentService { + constructor(private _http: HttpClient, private _tokenService: TokenService) + { } + + getDefaultComment(): Comment { + return new Comment(Guid.createEmpty(), Guid.createEmpty(), 'Gosho', 'Trapov', 'gosho_trapov', 'Your opinion on my idea?', new Date()); + } + + /* Requests from session storage */ + + createCommentWithSessionStorageRequest(postId: Guid, commentMessage: string): Observable<object> { + const userId = this._tokenService.getUserIdFromSessionStorageToken(); + const token = this._tokenService.getTokenFromSessionStorage(); + + return this.createCommentRequest(userId, token, postId, commentMessage); + } + + putCommentWithSessionStorageRequest(commentId: Guid, postId: Guid, newMessage: string): Observable<object> { + const userId = this._tokenService.getUserIdFromSessionStorageToken(); + const token = this._tokenService.getTokenFromSessionStorage(); + + return this.putCommentRequest(userId, token, commentId, postId, newMessage); + } + + deleteCommentWithSessionStorage(commentId: Guid): Observable<object> { + const token = this._tokenService.getTokenFromSessionStorage(); + + return this.deleteCommentRequest(commentId, token); + } + + /* Comment requests */ + + createCommentRequest(userId: Guid, authToken: string, postId: Guid, commentMessage: string): Observable<object> { + const body = { + postId: postId.toString(), + message: commentMessage + }; + const options = { + params: new HttpParams().set('UserId', userId.toString()), + headers: new HttpHeaders().set('Authorization', 'Bearer ' + authToken) + }; + return this._http.post(AppConstants.API_COMMENT_URL, body, options); + } + + getCommentRequest(id: Guid): Observable<object> { + const options = { + params: new HttpParams().set('Id', id.toString()) + }; + return this._http.get(AppConstants.API_COMMENT_URL, options); + } + + putCommentRequest(userId: Guid, authToken: string, commentId: Guid, postId: Guid, newMessage: string): Observable<object> { + const body = { + commentId: commentId.toString(), + postId: postId.toString(), + newMessage: newMessage + }; + const options = { + params: new HttpParams().set('UserId', userId.toString()), + headers: new HttpHeaders().set('Authorization', 'Bearer ' + authToken) + }; + return this._http.put(AppConstants.API_COMMENT_URL, body, options); + } + + deleteCommentRequest(commentId: Guid, authToken: string): Observable<object> { + const options = { + params: new HttpParams().set('Id', commentId.toString()), + headers: new HttpHeaders().set('Authorization', 'Bearer ' + authToken) + }; + return this._http.delete(AppConstants.API_COMMENT_URL, options); + } +} diff --git a/src/DevHive.Angular/src/app/services/post.service.ts b/src/DevHive.Angular/src/app/services/post.service.ts index 2cca9be..0c472bb 100644 --- a/src/DevHive.Angular/src/app/services/post.service.ts +++ b/src/DevHive.Angular/src/app/services/post.service.ts @@ -15,7 +15,7 @@ export class PostService { { } getDefaultPost(): Post { - return new Post(Guid.createEmpty(), 'Gosho', 'Trapov', 'gosho_trapov', 'Your opinion on my idea?', new Date()); + return new Post(Guid.createEmpty(), 'Gosho', 'Trapov', 'gosho_trapov', 'Your opinion on my idea?', new Date(), []); } /* Requests from session storage */ diff --git a/src/DevHive.Angular/src/models/comment.ts b/src/DevHive.Angular/src/models/comment.ts new file mode 100644 index 0000000..0d1755f --- /dev/null +++ b/src/DevHive.Angular/src/models/comment.ts @@ -0,0 +1,70 @@ +import { Guid } from 'guid-typescript'; + +export class Comment { + private _commentId: Guid; + private _postId: Guid; + private _issuerFirstName: string; + private _issuerLastName: string; + private _issuerUsername: string; + private _message: string; + private _timeCreated: Date; + + constructor(commentId: Guid, postId: Guid, issuerFirstName: string, issuerLastName: string, issuerUsername: string, message: string, timeCreated: Date) { + this.commentId = commentId; + this.postId = postId; + this.issuerFirstName = issuerFirstName; + this.issuerLastName = issuerLastName; + this.issuerUsername = issuerUsername; + this.message = message; + this.timeCreated = timeCreated; + } + + public get commentId(): Guid { + return this._commentId; + } + public set commentId(v: Guid) { + this._commentId = v; + } + + public get postId(): Guid { + return this._postId; + } + public set postId(v: Guid) { + this._postId = v; + } + + public get issuerFirstName(): string { + return this._issuerFirstName; + } + public set issuerFirstName(v: string) { + this._issuerFirstName = v; + } + + public get issuerLastName(): string { + return this._issuerLastName; + } + public set issuerLastName(v: string) { + this._issuerLastName = v; + } + + public get issuerUsername(): string { + return this._issuerUsername; + } + public set issuerUsername(v: string) { + this._issuerUsername = 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; + } +} diff --git a/src/DevHive.Angular/src/models/post.ts b/src/DevHive.Angular/src/models/post.ts index 4c6ac20..4d49a06 100644 --- a/src/DevHive.Angular/src/models/post.ts +++ b/src/DevHive.Angular/src/models/post.ts @@ -1,4 +1,5 @@ import { Guid } from 'guid-typescript'; +import {Comment} from './comment'; export class Post { private _postId: Guid; @@ -7,16 +8,17 @@ export class Post { private _creatorUsername: string; private _message: string; private _timeCreated: Date; - // _comments + private _comments: Comment[]; // _files - constructor(postId: Guid, creatorFirstName: string, creatorLastName: string, creatorUsername: string, message: string, timeCreated: Date) { + constructor(postId: Guid, creatorFirstName: string, creatorLastName: string, creatorUsername: string, message: string, timeCreated: Date, comments: Comment[]) { this.postId = postId; this.creatorFirstName = creatorFirstName; this.creatorLastName = creatorLastName; this.creatorUsername = creatorUsername; this.message = message; this.timeCreated = timeCreated; + this.comments = comments; } public get postId(): Guid { @@ -60,4 +62,11 @@ export class Post { public set timeCreated(v: Date) { this._timeCreated = v; } + + public get comments(): Comment[] { + return this._comments; + } + public set comments(v: Comment[]) { + this._comments = v; + } } |