diff options
6 files changed, 138 insertions, 1 deletions
diff --git a/src/DevHive.Angular/src/app/app-routing.module.ts b/src/DevHive.Angular/src/app/app-routing.module.ts index 4367db7..0d83079 100644 --- a/src/DevHive.Angular/src/app/app-routing.module.ts +++ b/src/DevHive.Angular/src/app/app-routing.module.ts @@ -8,6 +8,7 @@ import { ProfileSettingsComponent } from './components/profile-settings/profile- import { NotFoundComponent } from './components/not-found/not-found.component'; import { PostPageComponent } from './components/post-page/post-page.component'; import {AdminPanelPageComponent} from './components/admin-panel-page/admin-panel-page.component'; +import {CommentPageComponent} from './components/comment-page/comment-page.component'; const routes: Routes = [ { path: '', component: FeedComponent }, @@ -16,6 +17,7 @@ const routes: Routes = [ { path: 'profile/:username', component: ProfileComponent }, { path: 'profile/:username/settings', component: ProfileSettingsComponent }, { path: 'post/:id', component: PostPageComponent }, + { path: 'comment/:id', component: CommentPageComponent }, { path: 'admin-panel', component: AdminPanelPageComponent }, { path: 'not-found', component: NotFoundComponent }, { path: '**', component: NotFoundComponent } diff --git a/src/DevHive.Angular/src/app/app.module.ts b/src/DevHive.Angular/src/app/app.module.ts index aaabf79..723ea24 100644 --- a/src/DevHive.Angular/src/app/app.module.ts +++ b/src/DevHive.Angular/src/app/app.module.ts @@ -22,6 +22,7 @@ import { SuccessBarComponent } from './components/success-bar/success-bar.compon 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'; +import { CommentPageComponent } from './components/comment-page/comment-page.component'; @NgModule({ declarations: [ @@ -38,7 +39,8 @@ import { CommentComponent } from './components/comment/comment.component'; SuccessBarComponent, PostPageComponent, AdminPanelPageComponent, - CommentComponent + CommentComponent, + CommentPageComponent ], imports: [ BrowserModule, diff --git a/src/DevHive.Angular/src/app/components/comment-page/comment-page.component.css b/src/DevHive.Angular/src/app/components/comment-page/comment-page.component.css new file mode 100644 index 0000000..b886bc1 --- /dev/null +++ b/src/DevHive.Angular/src/app/components/comment-page/comment-page.component.css @@ -0,0 +1,27 @@ +#content { + justify-content: flex-start !important; +} + +#content > * { + width: 100%; +} + +.many-buttons { + width: 100%; + display: flex; +} + +.many-buttons > * { + flex: 1; + margin-right: .3em; +} + +.many-buttons > *:last-of-type { + margin-right: 0; +} + +.submit-btn { + max-width: 98%; + margin: 0 auto; + margin-bottom: .5em; +} diff --git a/src/DevHive.Angular/src/app/components/comment-page/comment-page.component.html b/src/DevHive.Angular/src/app/components/comment-page/comment-page.component.html new file mode 100644 index 0000000..2d110d6 --- /dev/null +++ b/src/DevHive.Angular/src/app/components/comment-page/comment-page.component.html @@ -0,0 +1,14 @@ +<app-loading *ngIf="!loaded"></app-loading> + +<div id="content" *ngIf="loaded"> + <button class="submit-btn" type="submit" (click)="toPost()">ᐊ Back to post</button> + <app-comment [paramId]="commentId.toString()"></app-comment> + <div class="many-buttons" *ngIf="editable"> + <button class="submit-btn" (click)="editComment()">Edit comment</button> + <button class="submit-btn delete-btn" (click)="deleteComment()">Delete comment</button> + </div> + <form [formGroup]="editCommentFormGroup" (ngSubmit)="editComment()"> + <input type="text" *ngIf="editingComment" placeholder="New comment message" class="input-field" formControlName="newCommentMessage"> + <input type="submit" style="display: none" /> + </form> +<div> diff --git a/src/DevHive.Angular/src/app/components/comment-page/comment-page.component.ts b/src/DevHive.Angular/src/app/components/comment-page/comment-page.component.ts new file mode 100644 index 0000000..bd4cfe5 --- /dev/null +++ b/src/DevHive.Angular/src/app/components/comment-page/comment-page.component.ts @@ -0,0 +1,91 @@ +import { HttpErrorResponse } from '@angular/common/http'; +import { Component, OnInit } from '@angular/core'; +import { FormBuilder, FormControl, FormGroup } from '@angular/forms'; +import { Title } from '@angular/platform-browser'; +import { Router } from '@angular/router'; +import { Guid } from 'guid-typescript'; +import { CommentService } from 'src/app/services/comment.service'; +import { TokenService } from 'src/app/services/token.service'; +import { Comment } from 'src/models/comment'; + +@Component({ + selector: 'app-comment-page', + templateUrl: './comment-page.component.html', + styleUrls: ['./comment-page.component.css'] +}) +export class CommentPageComponent implements OnInit { + private _title = 'Comment'; + public loaded = false; + public loggedIn = false; + public editable = false; + public editingComment = false; + public commentId: Guid; + public comment: Comment; + public editCommentFormGroup: FormGroup; + + constructor(private _titleService: Title, private _router: Router, private _fb: FormBuilder, private _tokenService: TokenService, private _commentService: CommentService){ + this._titleService.setTitle(this._title); + } + + ngOnInit(): void { + this.loggedIn = this._tokenService.getTokenFromSessionStorage() !== ''; + this.commentId = Guid.parse(this._router.url.substring(9)); + + // Gets the post and the logged in user and compares them, + // to determine if the current post is made by the user + this._commentService.getCommentRequest(this.commentId).subscribe( + (result: object) => { + this.comment = result as Comment; + if (this.loggedIn) { + this.editable = this.comment.issuerUsername === this._tokenService.getUsernameFromSessionStorageToken(); + } + this.loaded = true; + }, + (err: HttpErrorResponse) => { + this._router.navigate(['/not-found']); + } + ); + + this.editCommentFormGroup = this._fb.group({ + newCommentMessage: new FormControl('') + }); + } + + toPost(): void { + this._router.navigate(['/post/' + this.comment.postId]); + } + + editComment(): void { + if (this._tokenService.getTokenFromSessionStorage() === '') { + this._router.navigate(['/login']); + return; + } + + if (this.editingComment) { + const newMessage = this.editCommentFormGroup.get('newCommentMessage')?.value; + if (newMessage !== '') { + console.log(this.commentId); + this._commentService.putCommentWithSessionStorageRequest(this.commentId, this.comment.postId, newMessage).subscribe( + (result: object) => { + this.reloadPage(); + } + ); + } + } + this.editingComment = !this.editingComment; + } + + deleteComment(): void { + this._commentService.deleteCommentWithSessionStorage(this.commentId).subscribe( + (result: object) => { + this.toPost(); + } + ); + } + + private reloadPage(): void { + this._router.routeReuseStrategy.shouldReuseRoute = () => false; + this._router.onSameUrlNavigation = 'reload'; + this._router.navigate([this._router.url]); + } +} diff --git a/src/DevHive.Angular/src/app/components/comment/comment.component.ts b/src/DevHive.Angular/src/app/components/comment/comment.component.ts index b171baf..5076769 100644 --- a/src/DevHive.Angular/src/app/components/comment/comment.component.ts +++ b/src/DevHive.Angular/src/app/components/comment/comment.component.ts @@ -49,5 +49,6 @@ export class CommentComponent implements OnInit { } goToCommentPage(): void { + this._router.navigate(['/comment/' + this.comment.commentId]); } } |