generated from nhcarrigan/template
feat: bunch of work done here, got comments and edit and delete
This commit is contained in:
@@ -4,12 +4,13 @@
|
||||
* @author Naomi Carrigan
|
||||
*/
|
||||
|
||||
import { Component, OnInit, inject, signal } from '@angular/core';
|
||||
import { Component, OnInit, inject, signal, computed } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { BooksService } from '../../services/books.service';
|
||||
import { AuthService } from '../../services/auth.service';
|
||||
import { Book, BookStatus, CreateBookDto } from '@library/shared-types';
|
||||
import { CommentsService } from '../../services/comments.service';
|
||||
import { Book, BookStatus, CreateBookDto, UpdateBookDto, Comment } from '@library/shared-types';
|
||||
|
||||
@Component({
|
||||
selector: 'app-books-list',
|
||||
@@ -67,9 +68,9 @@ import { Book, BookStatus, CreateBookDto } from '@library/shared-types';
|
||||
<div class="form-group">
|
||||
<label for="status">Status</label>
|
||||
<select id="status" [(ngModel)]="newBook.status" name="status" required>
|
||||
<option value="reading">Currently Reading</option>
|
||||
<option value="finished">Finished</option>
|
||||
<option value="toRead">To Read</option>
|
||||
<option [value]="BookStatus.reading">Currently Reading</option>
|
||||
<option [value]="BookStatus.finished">Finished</option>
|
||||
<option [value]="BookStatus.toRead">To Read</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
@@ -103,6 +104,83 @@ import { Book, BookStatus, CreateBookDto } from '@library/shared-types';
|
||||
</form>
|
||||
}
|
||||
|
||||
@if (editingBook() && authService.isAdmin()) {
|
||||
<form (ngSubmit)="saveEdit()" class="add-form">
|
||||
<h3>Edit Book</h3>
|
||||
<div class="form-group">
|
||||
<label for="edit-title">Title</label>
|
||||
<input
|
||||
type="text"
|
||||
id="edit-title"
|
||||
[(ngModel)]="editBook.title"
|
||||
name="title"
|
||||
required
|
||||
placeholder="Enter book title"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="edit-author">Author</label>
|
||||
<input
|
||||
type="text"
|
||||
id="edit-author"
|
||||
[(ngModel)]="editBook.author"
|
||||
name="author"
|
||||
required
|
||||
placeholder="Enter author name"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="edit-isbn">ISBN</label>
|
||||
<input
|
||||
type="text"
|
||||
id="edit-isbn"
|
||||
[(ngModel)]="editBook.isbn"
|
||||
name="isbn"
|
||||
placeholder="ISBN (optional)"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="edit-status">Status</label>
|
||||
<select id="edit-status" [(ngModel)]="editBook.status" name="status" required>
|
||||
<option [value]="BookStatus.reading">Currently Reading</option>
|
||||
<option [value]="BookStatus.finished">Finished</option>
|
||||
<option [value]="BookStatus.toRead">To Read</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="edit-rating">Rating (0-5)</label>
|
||||
<input
|
||||
type="number"
|
||||
id="edit-rating"
|
||||
[(ngModel)]="editBook.rating"
|
||||
name="rating"
|
||||
min="0"
|
||||
max="5"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="edit-notes">Notes</label>
|
||||
<textarea
|
||||
id="edit-notes"
|
||||
[(ngModel)]="editBook.notes"
|
||||
name="notes"
|
||||
rows="3"
|
||||
placeholder="Your thoughts about the book..."
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn btn-primary">Save Changes</button>
|
||||
<button type="button" (click)="cancelEdit()" class="btn btn-secondary">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
}
|
||||
|
||||
<div class="filters">
|
||||
<button
|
||||
(click)="setFilter('all')"
|
||||
@@ -116,21 +194,21 @@ import { Book, BookStatus, CreateBookDto } from '@library/shared-types';
|
||||
[class.active]="statusFilter() === BookStatus.reading"
|
||||
class="filter-btn"
|
||||
>
|
||||
Reading ({{ getCountByStatus(BookStatus.reading) }})
|
||||
Reading ({{ readingCount() }})
|
||||
</button>
|
||||
<button
|
||||
(click)="setFilter(BookStatus.finished)"
|
||||
[class.active]="statusFilter() === BookStatus.finished"
|
||||
class="filter-btn"
|
||||
>
|
||||
Finished ({{ getCountByStatus(BookStatus.finished) }})
|
||||
Finished ({{ finishedCount() }})
|
||||
</button>
|
||||
<button
|
||||
(click)="setFilter(BookStatus.toRead)"
|
||||
[class.active]="statusFilter() === BookStatus.toRead"
|
||||
class="filter-btn"
|
||||
>
|
||||
To Read ({{ getCountByStatus(BookStatus.toRead) }})
|
||||
To Read ({{ toReadCount() }})
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -182,11 +260,58 @@ import { Book, BookStatus, CreateBookDto } from '@library/shared-types';
|
||||
|
||||
@if (authService.isAdmin()) {
|
||||
<div class="actions">
|
||||
<button (click)="startEdit(book)" class="btn btn-secondary btn-sm">
|
||||
Edit
|
||||
</button>
|
||||
<button (click)="deleteBook(book)" class="btn btn-danger btn-sm">
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
|
||||
<div class="comments-section">
|
||||
<button (click)="toggleComments(book.id)" class="btn btn-secondary btn-sm comments-toggle">
|
||||
{{ expandedComments()[book.id] ? 'Hide' : 'Show' }} Comments{{ comments()[book.id] ? ' (' + getCommentCount(book.id) + ')' : '' }}
|
||||
</button>
|
||||
|
||||
@if (expandedComments()[book.id]) {
|
||||
<div class="comments-container">
|
||||
@if (authService.isAuthenticated()) {
|
||||
<form (ngSubmit)="addComment(book.id)" class="comment-form">
|
||||
<textarea
|
||||
[(ngModel)]="newCommentContent[book.id]"
|
||||
name="comment"
|
||||
placeholder="Add a comment (Markdown supported)..."
|
||||
rows="2"
|
||||
></textarea>
|
||||
<button type="submit" class="btn btn-primary btn-sm">Post Comment</button>
|
||||
</form>
|
||||
}
|
||||
|
||||
@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>
|
||||
<span class="comment-date">{{ formatDate(comment.createdAt) }}</span>
|
||||
@if (authService.isAdmin()) {
|
||||
<button (click)="deleteComment(book.id, comment.id)" class="btn btn-danger btn-xs">Delete</button>
|
||||
}
|
||||
</div>
|
||||
<div class="comment-content" [innerHTML]="comment.content"></div>
|
||||
</div>
|
||||
} @empty {
|
||||
<div class="no-comments">No comments yet. Be the first to comment!</div>
|
||||
}
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@@ -452,20 +577,126 @@ import { Book, BookStatus, CreateBookDto } from '@library/shared-types';
|
||||
}
|
||||
|
||||
.btn-sm { padding: 0.25rem 0.75rem; font-size: 0.85rem; }
|
||||
.btn-xs { padding: 0.15rem 0.5rem; font-size: 0.75rem; }
|
||||
|
||||
.comments-section {
|
||||
margin-top: 1rem;
|
||||
border-top: 1px solid var(--witch-lavender);
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.comments-toggle {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.comments-container {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.comment-form {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.comment-form textarea {
|
||||
width: 100%;
|
||||
padding: 0.5rem;
|
||||
border: 2px solid var(--witch-lavender);
|
||||
border-radius: 4px;
|
||||
font-size: 0.9rem;
|
||||
background-color: var(--witch-moon);
|
||||
color: var(--witch-purple);
|
||||
resize: vertical;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.comment-form textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--witch-rose);
|
||||
}
|
||||
|
||||
.comment {
|
||||
background: var(--witch-moon);
|
||||
border: 1px solid var(--witch-lavender);
|
||||
border-radius: 4px;
|
||||
padding: 0.75rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.comment-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.comment-avatar {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.comment-author {
|
||||
font-weight: 500;
|
||||
color: var(--witch-plum);
|
||||
}
|
||||
|
||||
.comment-date {
|
||||
font-size: 0.75rem;
|
||||
color: var(--witch-mauve);
|
||||
}
|
||||
|
||||
.comment-content {
|
||||
font-size: 0.9rem;
|
||||
color: var(--witch-purple);
|
||||
}
|
||||
|
||||
.comment-content :deep(p) {
|
||||
margin: 0.25rem 0;
|
||||
}
|
||||
|
||||
.comments-loading,
|
||||
.no-comments {
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
color: var(--witch-mauve);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
`]
|
||||
})
|
||||
export class BooksListComponent implements OnInit {
|
||||
booksService = inject(BooksService);
|
||||
authService = inject(AuthService);
|
||||
commentsService = inject(CommentsService);
|
||||
|
||||
books = signal<Book[]>([]);
|
||||
loading = signal(true);
|
||||
showAddForm = signal(false);
|
||||
editingBook = signal<Book | null>(null);
|
||||
statusFilter = signal<'all' | BookStatus>('all');
|
||||
|
||||
// Comments state
|
||||
comments = signal<Record<string, Comment[]>>({});
|
||||
commentsLoading = signal<Record<string, boolean>>({});
|
||||
expandedComments = signal<Record<string, boolean>>({});
|
||||
newCommentContent: Record<string, string> = {};
|
||||
|
||||
// Expose BookStatus enum to template
|
||||
BookStatus = BookStatus;
|
||||
|
||||
// Computed signals for reactive count updates
|
||||
readingCount = computed(() => this.books().filter(book => book.status === BookStatus.reading).length);
|
||||
finishedCount = computed(() => this.books().filter(book => book.status === BookStatus.finished).length);
|
||||
toReadCount = computed(() => this.books().filter(book => book.status === BookStatus.toRead).length);
|
||||
|
||||
filteredBooks = computed(() => {
|
||||
const filter = this.statusFilter();
|
||||
if (filter === 'all') {
|
||||
return this.books();
|
||||
}
|
||||
return this.books().filter(book => book.status === filter);
|
||||
});
|
||||
|
||||
newBook: Partial<CreateBookDto> = {
|
||||
title: '',
|
||||
author: '',
|
||||
@@ -475,6 +706,8 @@ export class BooksListComponent implements OnInit {
|
||||
notes: ''
|
||||
};
|
||||
|
||||
editBook: Partial<UpdateBookDto> = {};
|
||||
|
||||
ngOnInit() {
|
||||
this.loadBooks();
|
||||
}
|
||||
@@ -492,18 +725,6 @@ export class BooksListComponent implements OnInit {
|
||||
});
|
||||
}
|
||||
|
||||
filteredBooks() {
|
||||
const filter = this.statusFilter();
|
||||
if (filter === 'all') {
|
||||
return this.books();
|
||||
}
|
||||
return this.books().filter(book => book.status === filter);
|
||||
}
|
||||
|
||||
getCountByStatus(status: BookStatus): number {
|
||||
return this.books().filter(book => book.status === status).length;
|
||||
}
|
||||
|
||||
setFilter(filter: 'all' | BookStatus) {
|
||||
this.statusFilter.set(filter);
|
||||
}
|
||||
@@ -560,7 +781,108 @@ export class BooksListComponent implements OnInit {
|
||||
}
|
||||
}
|
||||
|
||||
startEdit(book: Book) {
|
||||
this.editingBook.set(book);
|
||||
this.editBook = {
|
||||
title: book.title,
|
||||
author: book.author,
|
||||
isbn: book.isbn,
|
||||
status: book.status,
|
||||
rating: book.rating,
|
||||
notes: book.notes
|
||||
};
|
||||
this.showAddForm.set(false);
|
||||
}
|
||||
|
||||
cancelEdit() {
|
||||
this.editingBook.set(null);
|
||||
this.editBook = {};
|
||||
}
|
||||
|
||||
saveEdit() {
|
||||
const book = this.editingBook();
|
||||
if (!book || !this.editBook.title || !this.editBook.author || !this.editBook.status) return;
|
||||
|
||||
this.booksService.updateBook(book.id, this.editBook).subscribe(() => {
|
||||
this.loadBooks();
|
||||
this.cancelEdit();
|
||||
});
|
||||
}
|
||||
|
||||
formatDate(date: Date | string): string {
|
||||
return new Date(date).toLocaleDateString();
|
||||
}
|
||||
|
||||
// Comments methods
|
||||
toggleComments(bookId: string) {
|
||||
const expanded = this.expandedComments();
|
||||
const isCurrentlyExpanded = expanded[bookId];
|
||||
|
||||
this.expandedComments.set({
|
||||
...expanded,
|
||||
[bookId]: !isCurrentlyExpanded
|
||||
});
|
||||
|
||||
if (!isCurrentlyExpanded && !this.comments()[bookId]) {
|
||||
this.loadComments(bookId);
|
||||
}
|
||||
}
|
||||
|
||||
loadComments(bookId: string) {
|
||||
this.commentsLoading.set({
|
||||
...this.commentsLoading(),
|
||||
[bookId]: true
|
||||
});
|
||||
|
||||
this.commentsService.getCommentsForBook(bookId).subscribe({
|
||||
next: (comments) => {
|
||||
this.comments.set({
|
||||
...this.comments(),
|
||||
[bookId]: comments
|
||||
});
|
||||
this.commentsLoading.set({
|
||||
...this.commentsLoading(),
|
||||
[bookId]: false
|
||||
});
|
||||
},
|
||||
error: () => {
|
||||
this.commentsLoading.set({
|
||||
...this.commentsLoading(),
|
||||
[bookId]: false
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
getCommentCount(bookId: string): number {
|
||||
return this.comments()[bookId]?.length || 0;
|
||||
}
|
||||
|
||||
addComment(bookId: string) {
|
||||
const content = this.newCommentContent[bookId];
|
||||
if (!content?.trim()) return;
|
||||
|
||||
this.commentsService.addCommentToBook(bookId, { content }).subscribe({
|
||||
next: (comment) => {
|
||||
this.comments.set({
|
||||
...this.comments(),
|
||||
[bookId]: [comment, ...(this.comments()[bookId] || [])]
|
||||
});
|
||||
this.newCommentContent[bookId] = '';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
deleteComment(bookId: string, commentId: string) {
|
||||
if (!confirm('Are you sure you want to delete this comment?')) return;
|
||||
|
||||
this.commentsService.deleteCommentFromBook(bookId, commentId).subscribe({
|
||||
next: () => {
|
||||
this.comments.set({
|
||||
...this.comments(),
|
||||
[bookId]: (this.comments()[bookId] || []).filter(c => c.id !== commentId)
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user