1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
|
import { AfterViewInit, Component, ElementRef, Input, OnInit, Renderer2, ViewChild } from '@angular/core';
import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
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 { UserService } from 'src/app/services/user.service';
import { Comment } from 'src/models/comment.model';
import { User } from 'src/models/identity/user.model';
@Component({
selector: 'app-comment',
templateUrl: './comment.component.html',
styleUrls: ['./comment.component.css']
})
export class CommentComponent implements OnInit, AfterViewInit {
public loaded = false;
public loggedInAuthor = false;
public editingComment = false;
public user: User;
public comment: Comment;
public timeCreated: string;
@Input() paramId: string;
public editCommentFormGroup: FormGroup;
@ViewChild('share') shareBtn: ElementRef;
private _defaultShareBtnInnerHTML: string;
private _linkShared = false;
constructor(private _router: Router, private _commentService: CommentService, private _userService: UserService, private _tokenService: TokenService, private _fb: FormBuilder, private _elem: ElementRef, private _renderer: Renderer2)
{ }
ngOnInit(): void {
this.comment = this._commentService.getDefaultComment();
this.user = this._userService.getDefaultUser();
this._commentService.getCommentRequest(Guid.parse(this.paramId)).subscribe({
next: (result: object) => {
Object.assign(this.comment, result);
this.timeCreated = new Date(this.comment.timeCreated).toLocaleString('en-GB');
this.loadUser();
}
});
this.editCommentFormGroup = this._fb.group({
newCommentMessage: new FormControl('')
});
}
private loadUser(): void {
this._userService.getUserByUsernameRequest(this.comment.issuerUsername).subscribe({
next: (result: object) => {
Object.assign(this.user, result);
if (this._tokenService.getTokenFromSessionStorage() !== '') {
this.loggedInAuthor = this._tokenService.getUsernameFromSessionStorageToken() === this.comment.issuerUsername;
this.editCommentFormGroup.get('newCommentMessage')?.setValue(this.comment.message);
}
this.loaded = true;
}
});
}
ngAfterViewInit(): void {
this._defaultShareBtnInnerHTML = this.shareBtn.nativeElement.innerHTML;
}
goToAuthorProfile(): void {
this._router.navigate(['/profile/' + this.comment.issuerUsername]);
}
toggleEditing(): void {
this.editingComment = !this.editingComment;
}
editComment(): void {
if (this._tokenService.getTokenFromSessionStorage() === '') {
this._router.navigate(['/login']);
return;
}
if (this.editingComment) {
const newMessage = this.editCommentFormGroup.get('newCommentMessage')?.value;
if (newMessage !== '' && newMessage !== this.comment.message) {
this._commentService.putCommentWithSessionStorageRequest(Guid.parse(this.paramId), this.comment.postId, newMessage).subscribe({
next: () => {
this.reloadPage();
}
});
}
}
this.editingComment = !this.editingComment;
}
deleteComment(): void {
this._commentService.deleteCommentWithSessionStorage(Guid.parse(this.paramId)).subscribe({
next: () => {
this.reloadPage();
}
});
}
private reloadPage(): void {
this._router.routeReuseStrategy.shouldReuseRoute = () => false;
this._router.onSameUrlNavigation = 'reload';
this._router.navigate([this._router.url]);
}
resetShareBtn(): void {
if (this._linkShared) {
this._renderer.setProperty(this.shareBtn.nativeElement, 'innerHTML', this._defaultShareBtnInnerHTML);
this._linkShared = false;
}
}
showCopiedMessage(): void {
this._renderer.setProperty(this.shareBtn.nativeElement, 'innerHTML', 'Link copied to clipboard!');
this._linkShared = true;
}
getPostLink(): string {
return location.origin + '/comment/' + this.paramId;
}
}
|
