feat: implement collection library filter with WebSocket improvements and test coverage
This commit adds comprehensive functionality for filtering collections by library, improves WebSocket real-time updates with user activity detection, and adds extensive test coverage. ## Core Features ### Collection Library Filter - Added library_id parameter to media-items search API - Collections can now be filtered by specific library - Toggle UI component for enabling/disabling library filter - Default state is "checked" when library_id is present - Consistent behavior across partial and fuzzy search modes ### WebSocket Auto-Reload Mitigation - Added user activity detection to prevent disruptive page reloads - Checks if user is actively typing in INPUT/TEXTAREA/SELECT elements - Skips auto-reload when user is interacting with form elements - Toast notifications still show for awareness - Prevents data loss during editing operations ## Implementation Changes ### Backend - internal/database/queries.sql.go: Added library filter support to search queries - internal/handlers/media.go: Enhanced search with library_id parameter validation - internal/handlers/collections.go: Updated collection handlers with library filtering - internal/sync/websocket.go: Improved broadcast mechanism with user-scoped updates - internal/router/frontend.go: Pass libraryID to collection templates ### Frontend - templates/collections.templ: Added library filter toggle UI component - web/src/collections.ts: TypeScript implementation with WebSocket integration - templates/collections_templ.go: Generated template code ### Testing - cmd/server/tests/search_test.go: Added TestCollectionSearchLibraryFilter - cmd/server/tests/websocket_test.go: Added TestWebSocketUserScopedBroadcast - New helper functions for creating libraries and media items via API - Comprehensive test coverage for library filtering and user-scoped broadcasts ## API Documentation Updates ### Bruno Tests (Comprehensive Documentation) - bruno/collections/*: Added detailed API documentation for all collection endpoints - bruno/devices/*: Added device management and sync API documentation - bruno/devices/kobo/api.yml: Kobo-specific sync protocol docs - bruno/devices/koreader/api.yml: KOReader-specific sync protocol docs - bruno/opds/*: Added OPDS feed and download endpoint documentation - bruno/library/browse-folders.yml: Library folder browsing API docs ### New Bruno Tests - bruno/media-items/Search All Libraries.yml: Test search without library filter - bruno/media-items/Search Specific Library.yml: Test search with library filter - bruno/media-items/Search Invalid Library ID.yml: Test error handling ## Documentation - docs/developer/api/media-items/search_media_items.md: Updated with library_id parameter - IMPLEMENTATION_COLLECTION_FIX.md: Comprehensive implementation guide with test scenarios ## Testing ### Integration Tests - Library filter tests verify correct filtering across multiple libraries - Invalid library_id tests ensure proper error handling - WebSocket tests verify user-scoped broadcast behavior - User A no longer receives User B's collection updates ### Manual Testing Scenarios - Open collection in multiple tabs - updates propagate correctly - Type in search box while another tab adds books - no disruptive reload - Add/remove books from collection - toast notifications appear - Toggle library filter - results update dynamically ## Technical Details - WebSocket broadcasts are now user-scoped for privacy - Active element detection uses tagName and contenteditable attributes - Library ID validation uses UUID format checking - Progressive enhancement maintained - page works without JavaScript - All changes follow PROJECT_GUIDELINES.md conventions - TypeScript only for frontend logic - TailwindCSS only for styling - Procedural programming style throughout ## Breaking Changes None - all changes are additive and backward compatible.
This commit is contained in:
@@ -474,3 +474,457 @@ function initIconSelection(): void {
|
||||
(window as any).showAllIcons = showAllIcons;
|
||||
(window as any).populateIconGrid = populateIconGrid;
|
||||
(window as any).initIconSelection = initIconSelection;
|
||||
|
||||
// ============================================================================
|
||||
// Collection Detail Page - TypeScript with WebSocket Support
|
||||
// ============================================================================
|
||||
|
||||
interface SearchBookResult {
|
||||
media_item_id: string;
|
||||
title: string;
|
||||
author: string | null;
|
||||
cover_image_path: string | null;
|
||||
library_id: string;
|
||||
library_name: string;
|
||||
}
|
||||
|
||||
interface CollectionUpdateMessage {
|
||||
type: string;
|
||||
data: {
|
||||
collection_id: string;
|
||||
action: string;
|
||||
count?: number;
|
||||
book_id?: string;
|
||||
};
|
||||
}
|
||||
|
||||
let collectionId = "";
|
||||
let libraryId = "";
|
||||
let booksToAdd = new Set<string>();
|
||||
let booksToRemove = new Set<string>();
|
||||
let ws: WebSocket | null = null;
|
||||
|
||||
// Initialize from data attributes (called on page load)
|
||||
function initCollectionDetail(): void {
|
||||
const dataEl = document.getElementById("collection-data");
|
||||
if (dataEl) {
|
||||
collectionId = dataEl.dataset.id || "";
|
||||
libraryId = dataEl.dataset.libraryId || "";
|
||||
|
||||
// Show/hide library filter toggle based on whether library_id is present
|
||||
const filterContainer = document.getElementById("library-filter-container");
|
||||
if (filterContainer) {
|
||||
if (libraryId) {
|
||||
filterContainer.classList.remove("hidden");
|
||||
// Default: checked (filter by library)
|
||||
const checkbox = document.getElementById(
|
||||
"filter-by-library",
|
||||
) as HTMLInputElement;
|
||||
if (checkbox) checkbox.checked = true;
|
||||
} else {
|
||||
filterContainer.classList.add("hidden");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize WebSocket connection
|
||||
connectWebSocket();
|
||||
}
|
||||
|
||||
// Get current library filter setting
|
||||
function getLibraryFilterParam(): string {
|
||||
if (!libraryId) return "";
|
||||
|
||||
const checkbox = document.getElementById(
|
||||
"filter-by-library",
|
||||
) as HTMLInputElement;
|
||||
if (checkbox && checkbox.checked) {
|
||||
return `&library_id=${libraryId}`;
|
||||
}
|
||||
return "";
|
||||
}
|
||||
|
||||
// WebSocket connection for real-time collection updates
|
||||
function connectWebSocket(): void {
|
||||
const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
|
||||
const token = localStorage.getItem("token");
|
||||
if (!token) return;
|
||||
|
||||
const wsUrl = `${protocol}//${window.location.host}/ws/sync?token=${token}`;
|
||||
|
||||
ws = new WebSocket(wsUrl);
|
||||
|
||||
ws.onopen = (): void => {
|
||||
console.log("WebSocket connected");
|
||||
};
|
||||
|
||||
ws.onmessage = (event: MessageEvent): void => {
|
||||
try {
|
||||
const message = JSON.parse(event.data) as CollectionUpdateMessage;
|
||||
|
||||
if (
|
||||
message.type === "collection_updated" &&
|
||||
message.data.collection_id === collectionId
|
||||
) {
|
||||
const actionText =
|
||||
message.data.action === "books_added"
|
||||
? `Added ${message.data.count || 0} book(s)`
|
||||
: message.data.action === "book_removed"
|
||||
? "Removed a book"
|
||||
: message.data.action === "books_bulk_removed"
|
||||
? `Removed ${message.data.count || 0} book(s)`
|
||||
: "Collection updated";
|
||||
|
||||
(window as any).showToast?.(actionText, "info");
|
||||
|
||||
// Mitigation: Skip auto-reload if user is actively typing or interacting
|
||||
const activeElement = document.activeElement;
|
||||
const isUserActive =
|
||||
activeElement &&
|
||||
(activeElement.tagName === "INPUT" ||
|
||||
activeElement.tagName === "TEXTAREA" ||
|
||||
activeElement.tagName === "SELECT" ||
|
||||
activeElement.getAttribute("contenteditable") === "true");
|
||||
|
||||
if (!isUserActive) {
|
||||
// Auto-reload after 1 second to see updates (only if user not actively typing)
|
||||
setTimeout(() => {
|
||||
location.reload();
|
||||
}, 1000);
|
||||
} else {
|
||||
// User is active - just show toast, don't reload
|
||||
// They'll see updates when they navigate away or manually refresh
|
||||
console.log("User actively typing - skipping auto-reload");
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Failed to parse WebSocket message:", error);
|
||||
}
|
||||
};
|
||||
|
||||
ws.onclose = (): void => {
|
||||
console.log("WebSocket disconnected, reconnecting in 5s...");
|
||||
setTimeout(connectWebSocket, 5000);
|
||||
};
|
||||
|
||||
ws.onerror = (error: Event): void => {
|
||||
console.error("WebSocket error:", error);
|
||||
};
|
||||
}
|
||||
|
||||
function backToCollections(): void {
|
||||
window.location.href = "/collections";
|
||||
}
|
||||
|
||||
// Modal functions (called from onclick attributes)
|
||||
function showAddBooksModal(): void {
|
||||
const modal = document.getElementById("add-books-modal");
|
||||
if (modal) modal.classList.remove("hidden");
|
||||
booksToAdd.clear();
|
||||
|
||||
const results = document.getElementById("book-results");
|
||||
if (results) {
|
||||
results.innerHTML =
|
||||
'<p class="text-sm" style="color: var(--text-secondary)">Enter at least 2 characters to search.</p>';
|
||||
}
|
||||
}
|
||||
|
||||
function hideAddBooksModal(): void {
|
||||
const modal = document.getElementById("add-books-modal");
|
||||
if (modal) modal.classList.add("hidden");
|
||||
|
||||
const searchInput = document.getElementById(
|
||||
"book-search",
|
||||
) as HTMLInputElement;
|
||||
if (searchInput) searchInput.value = "";
|
||||
|
||||
const results = document.getElementById("book-results");
|
||||
if (results) results.innerHTML = "";
|
||||
|
||||
booksToAdd.clear();
|
||||
}
|
||||
|
||||
// Search books - includes library filter
|
||||
async function searchBooksForCollections(): Promise<void> {
|
||||
const searchInput = document.getElementById(
|
||||
"book-search",
|
||||
) as HTMLInputElement;
|
||||
const container = document.getElementById("book-results");
|
||||
if (!searchInput || !container) return;
|
||||
|
||||
const searchTerm = searchInput.value;
|
||||
if (searchTerm.length < 2) {
|
||||
container.innerHTML =
|
||||
'<p class="text-sm" style="color: var(--text-secondary)">Enter at least 2 characters to search.</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
container.innerHTML =
|
||||
'<p class="text-sm" style="color: var(--text-secondary)">Searching...</p>';
|
||||
|
||||
const libraryFilter = getLibraryFilterParam();
|
||||
const token = localStorage.getItem("token");
|
||||
if (!token) {
|
||||
container.innerHTML =
|
||||
'<p class="text-sm" style="color: var(--error)">Authentication required</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(
|
||||
`/api/media-items/search?q=${encodeURIComponent(searchTerm)}${libraryFilter}`,
|
||||
{
|
||||
headers: { Authorization: `Bearer ${token}` },
|
||||
},
|
||||
);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP ${response.status}`);
|
||||
}
|
||||
|
||||
const result = (await response.json()) as SearchBookResult[];
|
||||
|
||||
if (result.length > 0) {
|
||||
let html = '<div class="space-y-2">';
|
||||
result.slice(0, 50).forEach((book) => {
|
||||
const isSelected = booksToAdd.has(book.media_item_id);
|
||||
const checkedAttr = isSelected ? "checked" : "";
|
||||
const authorHtml = book.author
|
||||
? `<div class="text-xs" style="color: var(--text-secondary)">${book.author}</div>`
|
||||
: "";
|
||||
const libraryBadge =
|
||||
book.library_id === libraryId
|
||||
? '<span class="text-xs px-1 bg-blue-500 text-white rounded">This Library</span>'
|
||||
: "";
|
||||
|
||||
html += `
|
||||
<div class="flex items-center gap-3 p-2 rounded cursor-pointer hover:opacity-80"
|
||||
style="background-color: var(--bg-primary);"
|
||||
onclick="toggleBookSelection('${book.media_item_id}')">
|
||||
<input type="checkbox" ${checkedAttr} class="w-4 h-4">
|
||||
<img src="${book.cover_image_path || "/static/placeholder-book.svg"}"
|
||||
alt="Cover" class="w-10 h-14 object-cover rounded">
|
||||
<div class="flex-1">
|
||||
<div class="text-sm font-medium" style="color: var(--text-primary)">${book.title}</div>
|
||||
${authorHtml}
|
||||
</div>
|
||||
${libraryBadge}
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
html += "</div>";
|
||||
container.innerHTML = html;
|
||||
} else {
|
||||
container.innerHTML =
|
||||
'<p class="text-sm" style="color: var(--text-secondary)">No books found</p>';
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Search error:", error);
|
||||
container.innerHTML =
|
||||
'<p class="text-sm" style="color: var(--error)">Failed to search books</p>';
|
||||
}
|
||||
}
|
||||
|
||||
// Toggle book selection
|
||||
function toggleBookSelection(bookId: string): void {
|
||||
if (booksToAdd.has(bookId)) {
|
||||
booksToAdd.delete(bookId);
|
||||
} else {
|
||||
booksToAdd.add(bookId);
|
||||
}
|
||||
searchBooksForCollections();
|
||||
}
|
||||
|
||||
// Add selected books to collection
|
||||
async function addbooksToAdd(): Promise<void> {
|
||||
if (booksToAdd.size === 0) {
|
||||
(window as any).showToast?.("Please select at least one book", "error");
|
||||
return;
|
||||
}
|
||||
|
||||
const bookIds = Array.from(booksToAdd);
|
||||
const token = localStorage.getItem("token");
|
||||
if (!token) {
|
||||
(window as any).showToast?.("Authentication required", "error");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/collections/${collectionId}/books`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
body: JSON.stringify({ book_ids: bookIds }),
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
(window as any).showToast?.(
|
||||
`Added ${bookIds.length} book(s) to collection`,
|
||||
"success",
|
||||
);
|
||||
hideAddBooksModal();
|
||||
// Note: WebSocket will trigger page reload automatically
|
||||
} else {
|
||||
(window as any).showToast?.("Failed to add books", "error");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Add books error:", error);
|
||||
(window as any).showToast?.("Failed to add books", "error");
|
||||
}
|
||||
}
|
||||
|
||||
// Remove single book from collection
|
||||
async function removeBook(bookId: string): Promise<void> {
|
||||
if (!confirm("Remove this book from the collection?")) return;
|
||||
|
||||
const token = localStorage.getItem("token");
|
||||
if (!token) {
|
||||
(window as any).showToast?.("Authentication required", "error");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(
|
||||
`/api/collections/${collectionId}/books/${bookId}`,
|
||||
{
|
||||
method: "DELETE",
|
||||
headers: { Authorization: `Bearer ${token}` },
|
||||
},
|
||||
);
|
||||
|
||||
if (response.ok) {
|
||||
(window as any).showToast?.("Book removed from collection", "success");
|
||||
// Note: WebSocket will trigger page reload automatically
|
||||
} else {
|
||||
(window as any).showToast?.("Failed to remove book", "error");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Remove book error:", error);
|
||||
(window as any).showToast?.("Failed to remove book", "error");
|
||||
}
|
||||
}
|
||||
|
||||
// Bulk remove functions
|
||||
function toggleBookForRemoval(bookId: string): void {
|
||||
if (booksToRemove.has(bookId)) {
|
||||
booksToRemove.delete(bookId);
|
||||
} else {
|
||||
booksToRemove.add(bookId);
|
||||
}
|
||||
updateSelectedCount();
|
||||
}
|
||||
|
||||
function updateSelectedCount(): void {
|
||||
const count = booksToRemove.size;
|
||||
const countSpan = document.getElementById("selected-count");
|
||||
const removeBtn = document.getElementById(
|
||||
"bulk-remove-btn",
|
||||
) as HTMLButtonElement;
|
||||
|
||||
if (count > 0) {
|
||||
if (countSpan) {
|
||||
countSpan.textContent = `${count} selected`;
|
||||
countSpan.classList.remove("hidden");
|
||||
}
|
||||
if (removeBtn) removeBtn.disabled = false;
|
||||
} else {
|
||||
if (countSpan) countSpan.classList.add("hidden");
|
||||
if (removeBtn) removeBtn.disabled = true;
|
||||
}
|
||||
}
|
||||
|
||||
async function removebooksToAdd(): Promise<void> {
|
||||
if (booksToRemove.size === 0) {
|
||||
(window as any).showToast?.("No books selected", "error");
|
||||
return;
|
||||
}
|
||||
|
||||
if (!confirm(`Remove ${booksToRemove.size} book(s) from the collection?`))
|
||||
return;
|
||||
|
||||
const bookIds = Array.from(booksToRemove);
|
||||
const token = localStorage.getItem("token");
|
||||
if (!token) {
|
||||
(window as any).showToast?.("Authentication required", "error");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(
|
||||
`/api/collections/${collectionId}/books/bulk-remove`,
|
||||
{
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
body: JSON.stringify({ book_ids: bookIds }),
|
||||
},
|
||||
);
|
||||
|
||||
if (response.ok) {
|
||||
const result = (await response.json()) as { removed: number };
|
||||
if (result.removed > 0) {
|
||||
(window as any).showToast?.(
|
||||
`Removed ${result.removed} book(s) from collection`,
|
||||
"success",
|
||||
);
|
||||
// Note: WebSocket will trigger page reload automatically
|
||||
} else {
|
||||
(window as any).showToast?.("Failed to remove books", "error");
|
||||
}
|
||||
} else {
|
||||
(window as any).showToast?.("Failed to remove books", "error");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Bulk remove error:", error);
|
||||
(window as any).showToast?.("Failed to remove books", "error");
|
||||
}
|
||||
}
|
||||
|
||||
// Client-side search filter for displayed books
|
||||
function filterCollectionBooks(): void {
|
||||
const searchTerm =
|
||||
(
|
||||
document.getElementById("collection-search") as HTMLInputElement
|
||||
)?.value.toLowerCase() || "";
|
||||
const booksContainer = document.getElementById("books-container");
|
||||
if (!booksContainer) return;
|
||||
|
||||
const bookCards = booksContainer.children;
|
||||
for (let i = 0; i < bookCards.length; i++) {
|
||||
const card = bookCards[i] as HTMLElement;
|
||||
if (card.id === "empty-state") continue;
|
||||
|
||||
const titleEl = card.querySelector(".font-semibold");
|
||||
const authorEl = card.querySelector(".text-sm");
|
||||
const title = titleEl?.textContent?.toLowerCase() || "";
|
||||
const author = authorEl?.textContent?.toLowerCase() || "";
|
||||
|
||||
const matches = title.includes(searchTerm) || author.includes(searchTerm);
|
||||
card.style.display = matches || searchTerm === "" ? "" : "none";
|
||||
}
|
||||
}
|
||||
|
||||
// Export functions globally
|
||||
(window as any).initCollectionDetail = initCollectionDetail;
|
||||
(window as any).showAddBooksModal = showAddBooksModal;
|
||||
(window as any).hideAddBooksModal = hideAddBooksModal;
|
||||
(window as any).searchBooksForCollections = searchBooksForCollections;
|
||||
(window as any).toggleBookSelection = toggleBookSelection;
|
||||
(window as any).addbooksToAdd = addbooksToAdd;
|
||||
(window as any).removeBook = removeBook;
|
||||
(window as any).toggleBookForRemoval = toggleBookForRemoval;
|
||||
(window as any).updateSelectedCount = updateSelectedCount;
|
||||
(window as any).removebooksToAdd = removebooksToAdd;
|
||||
(window as any).filterCollectionBooks = filterCollectionBooks;
|
||||
(window as any).backToCollections = backToCollections;
|
||||
|
||||
// Auto-initialize
|
||||
if (document.readyState === "loading") {
|
||||
document.addEventListener("DOMContentLoaded", initCollectionDetail);
|
||||
} else {
|
||||
initCollectionDetail();
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user