generated from nhcarrigan/template
feat: integrate CommentDisplayComponent into all remaining media components
Completed the integration of the shared CommentDisplayComponent across all media list views. Updated Components: - books-list.component.ts - music-list.component.ts - art-gallery.component.ts - shows-list.component.ts - manga-list.component.ts All components now: - Use the centralized CommentDisplayComponent for consistent UI - Support comment reporting via the Report button - Display pending review messages for reported comments - Handle comment editing through the shared component This completes the frontend integration for comment reporting across all media types!
This commit is contained in:
@@ -14,12 +14,13 @@ import { SanitizeService } from '../../services/sanitize.service';
|
||||
import { SuggestionService } from '../../services/suggestion.service';
|
||||
import { PaginationComponent } from '../shared/pagination.component';
|
||||
import { LikeButtonComponent } from '../shared/like-button.component';
|
||||
import { CommentDisplayComponent } from '../comment-display/comment-display.component';
|
||||
import { Art, CreateArtDto, UpdateArtDto, Comment, SuggestionEntity, Link } from '@library/shared-types';
|
||||
|
||||
@Component({
|
||||
selector: 'app-art-gallery',
|
||||
standalone: true,
|
||||
imports: [CommonModule, FormsModule, PaginationComponent, LikeButtonComponent],
|
||||
imports: [CommonModule, FormsModule, PaginationComponent, LikeButtonComponent, CommentDisplayComponent],
|
||||
template: `
|
||||
<div class="container">
|
||||
<div class="header-section">
|
||||
@@ -468,56 +469,11 @@ import { Art, CreateArtDto, UpdateArtDto, Comment, SuggestionEntity, Link } from
|
||||
}
|
||||
}
|
||||
|
||||
@if (commentsLoading()[art.id]) {
|
||||
<div class="comments-loading">Loading comments...</div>
|
||||
} @else {
|
||||
@for (comment of comments()[art.id] || []; track comment.id) {
|
||||
<div class="comment">
|
||||
<div class="comment-header">
|
||||
@if (comment.user.avatar) {
|
||||
<img [src]="comment.user.avatar" [alt]="comment.user.username" class="comment-avatar">
|
||||
}
|
||||
<span class="comment-author">{{ comment.user.username }}</span>
|
||||
@if (comment.user.inDiscord) {
|
||||
<span class="discord-badge">Discord</span>
|
||||
}
|
||||
@if (comment.user.isVip) {
|
||||
<span class="vip-badge">VIP</span>
|
||||
}
|
||||
@if (comment.user.isMod) {
|
||||
<span class="mod-badge">Mod</span>
|
||||
}
|
||||
@if (comment.user.isStaff) {
|
||||
<span class="staff-badge">Staff</span>
|
||||
}
|
||||
<span class="comment-date">{{ formatDate(comment.createdAt) }}</span>
|
||||
@if (canEditComment(comment)) {
|
||||
<button (click)="startEditComment(art.id, comment)" class="btn btn-secondary btn-xs">Edit</button>
|
||||
}
|
||||
@if (canDeleteComment(comment)) {
|
||||
<button (click)="deleteComment(art.id, comment.id)" class="btn btn-danger btn-xs">Delete</button>
|
||||
}
|
||||
</div>
|
||||
@if (editingCommentId() === comment.id) {
|
||||
<div class="comment-edit-form">
|
||||
<textarea
|
||||
[(ngModel)]="editCommentContent"
|
||||
name="editComment"
|
||||
rows="3"
|
||||
></textarea>
|
||||
<div class="comment-edit-actions">
|
||||
<button (click)="saveCommentEdit(art.id, comment.id)" class="btn btn-primary btn-xs">Save</button>
|
||||
<button (click)="cancelCommentEdit()" class="btn btn-secondary btn-xs">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
} @else {
|
||||
<div class="comment-content" [innerHTML]="sanitizeService.sanitizeHtml(comment.content)"></div>
|
||||
}
|
||||
</div>
|
||||
} @empty {
|
||||
<div class="no-comments">No comments yet. Be the first to comment!</div>
|
||||
}
|
||||
}
|
||||
<app-comment-display
|
||||
[comments]="getCommentsSignal(art.id)"
|
||||
(onEdit)="handleCommentEdit(art.id, $event)"
|
||||
(onDelete)="deleteComment(art.id, $event)"
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
@@ -1615,4 +1571,21 @@ export class ArtGalleryComponent implements OnInit {
|
||||
toggleFilters() {
|
||||
this.showFilters.update(v => !v);
|
||||
}
|
||||
|
||||
handleCommentEdit(artId: string, event: { commentId: string; content: string }) {
|
||||
this.commentsService.updateCommentOnArt(artId, event.commentId, event.content).subscribe({
|
||||
next: (updatedComment) => {
|
||||
this.comments.set({
|
||||
...this.comments(),
|
||||
[artId]: (this.comments()[artId] || []).map(c =>
|
||||
c.id === event.commentId ? updatedComment : c
|
||||
)
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
getCommentsSignal(artId: string) {
|
||||
return signal(this.comments()[artId] || []);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -14,12 +14,13 @@ import { SanitizeService } from '../../services/sanitize.service';
|
||||
import { SuggestionService } from '../../services/suggestion.service';
|
||||
import { PaginationComponent } from '../shared/pagination.component';
|
||||
import { LikeButtonComponent } from '../shared/like-button.component';
|
||||
import { CommentDisplayComponent } from '../comment-display/comment-display.component';
|
||||
import { Book, BookStatus, CreateBookDto, UpdateBookDto, Comment, SuggestionEntity, Link } from '@library/shared-types';
|
||||
|
||||
@Component({
|
||||
selector: 'app-books-list',
|
||||
standalone: true,
|
||||
imports: [CommonModule, FormsModule, PaginationComponent, LikeButtonComponent],
|
||||
imports: [CommonModule, FormsModule, PaginationComponent, LikeButtonComponent, CommentDisplayComponent],
|
||||
template: `
|
||||
<div class="container">
|
||||
<div class="header-section">
|
||||
@@ -655,52 +656,11 @@ import { Book, BookStatus, CreateBookDto, UpdateBookDto, Comment, SuggestionEnti
|
||||
@if (commentsLoading()[book.id]) {
|
||||
<div class="comments-loading">Loading comments...</div>
|
||||
} @else {
|
||||
@for (comment of comments()[book.id] || []; track comment.id) {
|
||||
<div class="comment">
|
||||
<div class="comment-header">
|
||||
@if (comment.user.avatar) {
|
||||
<img [src]="comment.user.avatar" [alt]="comment.user.username" class="comment-avatar">
|
||||
}
|
||||
<span class="comment-author">{{ comment.user.username }}</span>
|
||||
@if (comment.user.inDiscord) {
|
||||
<span class="discord-badge">Discord</span>
|
||||
}
|
||||
@if (comment.user.isVip) {
|
||||
<span class="vip-badge">VIP</span>
|
||||
}
|
||||
@if (comment.user.isMod) {
|
||||
<span class="mod-badge">Mod</span>
|
||||
}
|
||||
@if (comment.user.isStaff) {
|
||||
<span class="staff-badge">Staff</span>
|
||||
}
|
||||
<span class="comment-date">{{ formatDate(comment.createdAt) }}</span>
|
||||
@if (canEditComment(comment)) {
|
||||
<button (click)="startEditComment(book.id, comment)" class="btn btn-secondary btn-xs">Edit</button>
|
||||
}
|
||||
@if (canDeleteComment(comment)) {
|
||||
<button (click)="deleteComment(book.id, comment.id)" class="btn btn-danger btn-xs">Delete</button>
|
||||
}
|
||||
</div>
|
||||
@if (editingCommentId() === comment.id) {
|
||||
<div class="comment-edit-form">
|
||||
<textarea
|
||||
[(ngModel)]="editCommentContent"
|
||||
name="editComment"
|
||||
rows="3"
|
||||
></textarea>
|
||||
<div class="comment-edit-actions">
|
||||
<button (click)="saveCommentEdit(book.id, comment.id)" class="btn btn-primary btn-xs">Save</button>
|
||||
<button (click)="cancelCommentEdit()" class="btn btn-secondary btn-xs">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
} @else {
|
||||
<div class="comment-content" [innerHTML]="sanitizeService.sanitizeHtml(comment.content)"></div>
|
||||
}
|
||||
</div>
|
||||
} @empty {
|
||||
<div class="no-comments">No comments yet. Be the first to comment!</div>
|
||||
}
|
||||
<app-comment-display
|
||||
[comments]="getCommentsSignal(book.id)"
|
||||
(onEdit)="handleCommentEdit(book.id, $event)"
|
||||
(onDelete)="deleteComment(book.id, $event)"
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
@@ -1982,4 +1942,21 @@ export class BooksListComponent implements OnInit {
|
||||
alert('Failed to submit suggestion. Please try again.');
|
||||
}
|
||||
}
|
||||
|
||||
handleCommentEdit(bookId: string, event: { commentId: string; content: string }) {
|
||||
this.commentsService.updateCommentOnBook(bookId, event.commentId, event.content).subscribe({
|
||||
next: (updatedComment) => {
|
||||
this.comments.set({
|
||||
...this.comments(),
|
||||
[bookId]: (this.comments()[bookId] || []).map(c =>
|
||||
c.id === event.commentId ? updatedComment : c
|
||||
)
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
getCommentsSignal(bookId: string) {
|
||||
return signal(this.comments()[bookId] || []);
|
||||
}
|
||||
}
|
||||
@@ -14,12 +14,13 @@ import { SanitizeService } from '../../services/sanitize.service';
|
||||
import { SuggestionService } from '../../services/suggestion.service';
|
||||
import { PaginationComponent } from '../shared/pagination.component';
|
||||
import { LikeButtonComponent } from '../shared/like-button.component';
|
||||
import { CommentDisplayComponent } from '../comment-display/comment-display.component';
|
||||
import { Manga, MangaStatus, CreateMangaDto, UpdateMangaDto, Comment, SuggestionEntity, Link } from '@library/shared-types';
|
||||
|
||||
@Component({
|
||||
selector: 'app-manga-list',
|
||||
standalone: true,
|
||||
imports: [CommonModule, FormsModule, PaginationComponent, LikeButtonComponent],
|
||||
imports: [CommonModule, FormsModule, PaginationComponent, LikeButtonComponent, CommentDisplayComponent],
|
||||
template: `
|
||||
<div class="container">
|
||||
<div class="header-section">
|
||||
@@ -610,56 +611,11 @@ import { Manga, MangaStatus, CreateMangaDto, UpdateMangaDto, Comment, Suggestion
|
||||
}
|
||||
}
|
||||
|
||||
@if (commentsLoading()[manga.id]) {
|
||||
<div class="comments-loading">Loading comments...</div>
|
||||
} @else {
|
||||
@for (comment of comments()[manga.id] || []; track comment.id) {
|
||||
<div class="comment">
|
||||
<div class="comment-header">
|
||||
@if (comment.user.avatar) {
|
||||
<img [src]="comment.user.avatar" [alt]="comment.user.username" class="comment-avatar">
|
||||
}
|
||||
<span class="comment-author">{{ comment.user.username }}</span>
|
||||
@if (comment.user.inDiscord) {
|
||||
<span class="discord-badge">Discord</span>
|
||||
}
|
||||
@if (comment.user.isVip) {
|
||||
<span class="vip-badge">VIP</span>
|
||||
}
|
||||
@if (comment.user.isMod) {
|
||||
<span class="mod-badge">Mod</span>
|
||||
}
|
||||
@if (comment.user.isStaff) {
|
||||
<span class="staff-badge">Staff</span>
|
||||
}
|
||||
<span class="comment-date">{{ formatDate(comment.createdAt) }}</span>
|
||||
@if (canEditComment(comment)) {
|
||||
<button (click)="startEditComment(manga.id, comment)" class="btn btn-secondary btn-xs">Edit</button>
|
||||
}
|
||||
@if (canDeleteComment(comment)) {
|
||||
<button (click)="deleteComment(manga.id, comment.id)" class="btn btn-danger btn-xs">Delete</button>
|
||||
}
|
||||
</div>
|
||||
@if (editingCommentId() === comment.id) {
|
||||
<div class="comment-edit-form">
|
||||
<textarea
|
||||
[(ngModel)]="editCommentContent"
|
||||
name="editComment"
|
||||
rows="3"
|
||||
></textarea>
|
||||
<div class="comment-edit-actions">
|
||||
<button (click)="saveCommentEdit(manga.id, comment.id)" class="btn btn-primary btn-xs">Save</button>
|
||||
<button (click)="cancelCommentEdit()" class="btn btn-secondary btn-xs">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
} @else {
|
||||
<div class="comment-content" [innerHTML]="sanitizeService.sanitizeHtml(comment.content)"></div>
|
||||
}
|
||||
</div>
|
||||
} @empty {
|
||||
<div class="no-comments">No comments yet. Be the first to comment!</div>
|
||||
}
|
||||
}
|
||||
<app-comment-display
|
||||
[comments]="getCommentsSignal(manga.id)"
|
||||
(onEdit)="handleCommentEdit(manga.id, $event)"
|
||||
(onDelete)="deleteComment(manga.id, $event)"
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
@@ -1780,4 +1736,21 @@ export class MangaListComponent implements OnInit {
|
||||
alert('Failed to submit suggestion. Please try again.');
|
||||
}
|
||||
}
|
||||
|
||||
handleCommentEdit(mangaId: string, event: { commentId: string; content: string }) {
|
||||
this.commentsService.updateCommentOnManga(mangaId, event.commentId, event.content).subscribe({
|
||||
next: (updatedComment) => {
|
||||
this.comments.set({
|
||||
...this.comments(),
|
||||
[mangaId]: (this.comments()[mangaId] || []).map(c =>
|
||||
c.id === event.commentId ? updatedComment : c
|
||||
)
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
getCommentsSignal(mangaId: string) {
|
||||
return signal(this.comments()[mangaId] || []);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -14,12 +14,13 @@ import { SanitizeService } from '../../services/sanitize.service';
|
||||
import { SuggestionService } from '../../services/suggestion.service';
|
||||
import { PaginationComponent } from '../shared/pagination.component';
|
||||
import { LikeButtonComponent } from '../shared/like-button.component';
|
||||
import { CommentDisplayComponent } from '../comment-display/comment-display.component';
|
||||
import { Music, MusicStatus, MusicType, CreateMusicDto, UpdateMusicDto, Comment, SuggestionEntity, Link } from '@library/shared-types';
|
||||
|
||||
@Component({
|
||||
selector: 'app-music-list',
|
||||
standalone: true,
|
||||
imports: [CommonModule, FormsModule, PaginationComponent, LikeButtonComponent],
|
||||
imports: [CommonModule, FormsModule, PaginationComponent, LikeButtonComponent, CommentDisplayComponent],
|
||||
template: `
|
||||
<div class="container">
|
||||
<div class="header-section">
|
||||
@@ -686,56 +687,11 @@ import { Music, MusicStatus, MusicType, CreateMusicDto, UpdateMusicDto, Comment,
|
||||
}
|
||||
}
|
||||
|
||||
@if (commentsLoading()[music.id]) {
|
||||
<div class="comments-loading">Loading comments...</div>
|
||||
} @else {
|
||||
@for (comment of comments()[music.id] || []; track comment.id) {
|
||||
<div class="comment">
|
||||
<div class="comment-header">
|
||||
@if (comment.user.avatar) {
|
||||
<img [src]="comment.user.avatar" [alt]="comment.user.username" class="comment-avatar">
|
||||
}
|
||||
<span class="comment-author">{{ comment.user.username }}</span>
|
||||
@if (comment.user.inDiscord) {
|
||||
<span class="discord-badge">Discord</span>
|
||||
}
|
||||
@if (comment.user.isVip) {
|
||||
<span class="vip-badge">VIP</span>
|
||||
}
|
||||
@if (comment.user.isMod) {
|
||||
<span class="mod-badge">Mod</span>
|
||||
}
|
||||
@if (comment.user.isStaff) {
|
||||
<span class="staff-badge">Staff</span>
|
||||
}
|
||||
<span class="comment-date">{{ formatDate(comment.createdAt) }}</span>
|
||||
@if (canEditComment(comment)) {
|
||||
<button (click)="startEditComment(music.id, comment)" class="btn btn-secondary btn-xs">Edit</button>
|
||||
}
|
||||
@if (canDeleteComment(comment)) {
|
||||
<button (click)="deleteComment(music.id, comment.id)" class="btn btn-danger btn-xs">Delete</button>
|
||||
}
|
||||
</div>
|
||||
@if (editingCommentId() === comment.id) {
|
||||
<div class="comment-edit-form">
|
||||
<textarea
|
||||
[(ngModel)]="editCommentContent"
|
||||
name="editComment"
|
||||
rows="3"
|
||||
></textarea>
|
||||
<div class="comment-edit-actions">
|
||||
<button (click)="saveCommentEdit(music.id, comment.id)" class="btn btn-primary btn-xs">Save</button>
|
||||
<button (click)="cancelCommentEdit()" class="btn btn-secondary btn-xs">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
} @else {
|
||||
<div class="comment-content" [innerHTML]="sanitizeService.sanitizeHtml(comment.content)"></div>
|
||||
}
|
||||
</div>
|
||||
} @empty {
|
||||
<div class="no-comments">No comments yet. Be the first to comment!</div>
|
||||
}
|
||||
}
|
||||
<app-comment-display
|
||||
[comments]="getCommentsSignal(music.id)"
|
||||
(onEdit)="handleCommentEdit(music.id, $event)"
|
||||
(onDelete)="deleteComment(music.id, $event)"
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
@@ -2014,4 +1970,21 @@ export class MusicListComponent implements OnInit {
|
||||
alert('Failed to submit suggestion. Please try again.');
|
||||
}
|
||||
}
|
||||
|
||||
handleCommentEdit(musicId: string, event: { commentId: string; content: string }) {
|
||||
this.commentsService.updateCommentOnMusic(musicId, event.commentId, event.content).subscribe({
|
||||
next: (updatedComment) => {
|
||||
this.comments.set({
|
||||
...this.comments(),
|
||||
[musicId]: (this.comments()[musicId] || []).map(c =>
|
||||
c.id === event.commentId ? updatedComment : c
|
||||
)
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
getCommentsSignal(musicId: string) {
|
||||
return signal(this.comments()[musicId] || []);
|
||||
}
|
||||
}
|
||||
@@ -14,12 +14,13 @@ import { SanitizeService } from '../../services/sanitize.service';
|
||||
import { SuggestionService } from '../../services/suggestion.service';
|
||||
import { PaginationComponent } from '../shared/pagination.component';
|
||||
import { LikeButtonComponent } from '../shared/like-button.component';
|
||||
import { CommentDisplayComponent } from '../comment-display/comment-display.component';
|
||||
import { Show, ShowStatus, ShowType, CreateShowDto, UpdateShowDto, Comment, SuggestionEntity, Link } from '@library/shared-types';
|
||||
|
||||
@Component({
|
||||
selector: 'app-shows-list',
|
||||
standalone: true,
|
||||
imports: [CommonModule, FormsModule, PaginationComponent, LikeButtonComponent],
|
||||
imports: [CommonModule, FormsModule, PaginationComponent, LikeButtonComponent, CommentDisplayComponent],
|
||||
template: `
|
||||
<div class="container">
|
||||
<div class="header-section">
|
||||
@@ -604,56 +605,11 @@ import { Show, ShowStatus, ShowType, CreateShowDto, UpdateShowDto, Comment, Sugg
|
||||
}
|
||||
}
|
||||
|
||||
@if (commentsLoading()[show.id]) {
|
||||
<div class="comments-loading">Loading comments...</div>
|
||||
} @else {
|
||||
@for (comment of comments()[show.id] || []; track comment.id) {
|
||||
<div class="comment">
|
||||
<div class="comment-header">
|
||||
@if (comment.user.avatar) {
|
||||
<img [src]="comment.user.avatar" [alt]="comment.user.username" class="comment-avatar">
|
||||
}
|
||||
<span class="comment-author">{{ comment.user.username }}</span>
|
||||
@if (comment.user.inDiscord) {
|
||||
<span class="discord-badge">Discord</span>
|
||||
}
|
||||
@if (comment.user.isVip) {
|
||||
<span class="vip-badge">VIP</span>
|
||||
}
|
||||
@if (comment.user.isMod) {
|
||||
<span class="mod-badge">Mod</span>
|
||||
}
|
||||
@if (comment.user.isStaff) {
|
||||
<span class="staff-badge">Staff</span>
|
||||
}
|
||||
<span class="comment-date">{{ formatDate(comment.createdAt) }}</span>
|
||||
@if (canEditComment(comment)) {
|
||||
<button (click)="startEditComment(show.id, comment)" class="btn btn-secondary btn-xs">Edit</button>
|
||||
}
|
||||
@if (canDeleteComment(comment)) {
|
||||
<button (click)="deleteComment(show.id, comment.id)" class="btn btn-danger btn-xs">Delete</button>
|
||||
}
|
||||
</div>
|
||||
@if (editingCommentId() === comment.id) {
|
||||
<div class="comment-edit-form">
|
||||
<textarea
|
||||
[(ngModel)]="editCommentContent"
|
||||
name="editComment"
|
||||
rows="3"
|
||||
></textarea>
|
||||
<div class="comment-edit-actions">
|
||||
<button (click)="saveCommentEdit(show.id, comment.id)" class="btn btn-primary btn-xs">Save</button>
|
||||
<button (click)="cancelCommentEdit()" class="btn btn-secondary btn-xs">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
} @else {
|
||||
<div class="comment-content" [innerHTML]="sanitizeService.sanitizeHtml(comment.content)"></div>
|
||||
}
|
||||
</div>
|
||||
} @empty {
|
||||
<div class="no-comments">No comments yet. Be the first to comment!</div>
|
||||
}
|
||||
}
|
||||
<app-comment-display
|
||||
[comments]="getCommentsSignal(show.id)"
|
||||
(onEdit)="handleCommentEdit(show.id, $event)"
|
||||
(onDelete)="deleteComment(show.id, $event)"
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
@@ -1783,4 +1739,21 @@ export class ShowsListComponent implements OnInit {
|
||||
alert('Failed to submit suggestion. Please try again.');
|
||||
}
|
||||
}
|
||||
|
||||
handleCommentEdit(showId: string, event: { commentId: string; content: string }) {
|
||||
this.commentsService.updateCommentOnShow(showId, event.commentId, event.content).subscribe({
|
||||
next: (updatedComment) => {
|
||||
this.comments.set({
|
||||
...this.comments(),
|
||||
[showId]: (this.comments()[showId] || []).map(c =>
|
||||
c.id === event.commentId ? updatedComment : c
|
||||
)
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
getCommentsSignal(showId: string) {
|
||||
return signal(this.comments()[showId] || []);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user