diff --git a/internal/router/frontend.go b/internal/router/frontend.go index e2f1046..37d5577 100644 --- a/internal/router/frontend.go +++ b/internal/router/frontend.go @@ -5,6 +5,7 @@ import ( "context" "log" "net/http" + "strconv" "time" "bookhoard/internal/config" @@ -160,8 +161,79 @@ func registerFrontendRoutes(cfg *Config) { } } + // Fetch saved filters for SSR (using existing query) + var savedFilters []database.SavedFilters + if libraryID != "" && errorMsg == "" { + savedFilters, err = cfg.Queries.GetSavedFilters(c.Request().Context(), database.GetSavedFiltersParams{ + UserID: pgtype.UUID{Bytes: userUUID, Valid: true}, + ResourceType: "media-items", + }) + if err != nil { + log.Printf("GetSavedFilters failed: %v", err) + savedFilters = []database.SavedFilters{} + } + } + + // Fetch first page of books for SSR + var books []database.ListMediaItemsFilteredRow + var bookInfoList []handlers.BookInfo + totalCount := 0 + limit := 50 + offset := 0 + + if libraryID != "" && errorMsg == "" { + libUUID, err := uuid.Parse(libraryID) + if err == nil { + // Check URL params for pagination + if limitStr := c.QueryParam("limit"); limitStr != "" { + if l, err := strconv.Atoi(limitStr); err == nil && l > 0 && l <= 100 { + limit = l + } + } + if offsetStr := c.QueryParam("offset"); offsetStr != "" { + if o, err := strconv.Atoi(offsetStr); err == nil && o >= 0 { + offset = o + } + } + + books, err = cfg.Queries.ListMediaItemsFiltered(c.Request().Context(), database.ListMediaItemsFilteredParams{ + LibraryID: pgtype.UUID{Bytes: libUUID, Valid: true}, + UserID: pgtype.UUID{Bytes: userUUID, Valid: true}, + AuthorFilter: pgtype.Text{String: "", Valid: false}, + SeriesFilter: pgtype.Text{String: "", Valid: false}, + GenreFilter: pgtype.Text{String: "", Valid: false}, + LanguageFilter: pgtype.Text{String: "", Valid: false}, + YearMin: pgtype.Int4{Valid: false}, + YearMax: pgtype.Int4{Valid: false}, + HasCover: pgtype.Bool{Valid: false}, + Sort: pgtype.Text{String: "created_at DESC", Valid: true}, + Limit: pgtype.Int4{Int32: int32(limit), Valid: true}, + Offset: pgtype.Int4{Int32: int32(offset), Valid: true}, + }) + + if err != nil { + log.Printf("ListMediaItemsFiltered failed: %v", err) + // Continue without books - will show empty state + } else { + // Convert database rows to BookInfo structs (matching BuildSections pattern) + bookInfoList = make([]handlers.BookInfo, len(books)) + for i, book := range books { + bookUUID, _ := uuid.FromBytes(book.ID.Bytes[0:16]) + bookLibUUID, _ := uuid.FromBytes(book.LibraryID.Bytes[0:16]) + bookInfoList[i] = handlers.BookInfo{ + MediaItemID: bookUUID.String(), + Title: book.Title, + Author: getText(book.Author), + CoverImagePath: utils.ResolveMediaURL(pgtype.UUID{Bytes: bookLibUUID, Valid: true}, book.CoverImagePath), + } + } + totalCount = len(bookInfoList) + } + } + } + var buf bytes.Buffer - err = templates.BookShelf(user, libData, libraryID, errorMsg).Render(c.Request().Context(), &buf) + err = templates.BookShelf(user, libData, libraryID, errorMsg, savedFilters, bookInfoList, limit, offset, totalCount).Render(c.Request().Context(), &buf) if err != nil { return err } diff --git a/templates/bookshelf.templ b/templates/bookshelf.templ index 2594c77..3f3a022 100644 --- a/templates/bookshelf.templ +++ b/templates/bookshelf.templ @@ -1,6 +1,21 @@ package templates -templ BookShelf(user User, libraries []LibraryData, currentLibraryID string, errorMessage string) { +import ( + "bookhoard/internal/database" + "bookhoard/internal/handlers" +) + +templ BookShelf( + user User, + libraries []LibraryData, + currentLibraryID string, + errorMessage string, + savedFilters []database.SavedFilters, + books []handlers.BookInfo, // NEW + limit int, // NEW + offset int, // NEW + count int, // NEW +) { @@ -195,6 +210,53 @@ templ BookShelf(user User, libraries []LibraryData, currentLibraryID string, err 💾 Save Filter + +
+ + + +
+ + Page { offset / limit + 1 } + + + }
if errorMessage != "" { diff --git a/templates/bookshelf_templ.go b/templates/bookshelf_templ.go index d7970d3..5dab5bf 100644 --- a/templates/bookshelf_templ.go +++ b/templates/bookshelf_templ.go @@ -8,7 +8,22 @@ package templates import "github.com/a-h/templ" import templruntime "github.com/a-h/templ/runtime" -func BookShelf(user User, libraries []LibraryData, currentLibraryID string, errorMessage string) templ.Component { +import ( + "bookhoard/internal/database" + "bookhoard/internal/handlers" +) + +func BookShelf( + user User, + libraries []LibraryData, + currentLibraryID string, + errorMessage string, + savedFilters []database.SavedFilters, + books []handlers.BookInfo, // NEW + limit int, // NEW + offset int, // NEW + count int, // NEW +) templ.Component { return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) { templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil { @@ -56,7 +71,7 @@ func BookShelf(user User, libraries []LibraryData, currentLibraryID string, erro var templ_7745c5c3_Var2 string templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(lib.ID) if templ_7745c5c3_Err != nil { - return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/bookshelf.templ`, Line: 45, Col: 33} + return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/bookshelf.templ`, Line: 60, Col: 33} } _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2)) if templ_7745c5c3_Err != nil { @@ -69,7 +84,7 @@ func BookShelf(user User, libraries []LibraryData, currentLibraryID string, erro var templ_7745c5c3_Var3 string templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(lib.Name) if templ_7745c5c3_Err != nil { - return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/bookshelf.templ`, Line: 45, Col: 55} + return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/bookshelf.templ`, Line: 60, Col: 55} } _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3)) if templ_7745c5c3_Err != nil { @@ -87,7 +102,7 @@ func BookShelf(user User, libraries []LibraryData, currentLibraryID string, erro var templ_7745c5c3_Var4 string templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(lib.ID) if templ_7745c5c3_Err != nil { - return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/bookshelf.templ`, Line: 47, Col: 33} + return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/bookshelf.templ`, Line: 62, Col: 33} } _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4)) if templ_7745c5c3_Err != nil { @@ -100,7 +115,7 @@ func BookShelf(user User, libraries []LibraryData, currentLibraryID string, erro var templ_7745c5c3_Var5 string templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(lib.Name) if templ_7745c5c3_Err != nil { - return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/bookshelf.templ`, Line: 47, Col: 46} + return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/bookshelf.templ`, Line: 62, Col: 46} } _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5)) if templ_7745c5c3_Err != nil { @@ -113,30 +128,136 @@ func BookShelf(user User, libraries []LibraryData, currentLibraryID string, erro } } } - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "
") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "

Saved Filters

") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } - if errorMessage != "" { - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "

") + for _, filter := range savedFilters { + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "filterUUID := string(filter.ID.Bytes[0:16])

") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, "\">
") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } } - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, "

Save Filter

") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, "
") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + if len(savedFilters) == 0 { + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, "
No saved filters yet
") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + } + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, "
") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + if len(books) > 0 { + for _, book := range books { + templ_7745c5c3_Err = BookCard(book).Render(ctx, templ_7745c5c3_Buffer) + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + } + } else { + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, "

📚 No books found

Try adjusting your filters or add some books to your library.

") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + } + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 18, "
") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + if count > 0 { + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, " Page ") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + var templ_7745c5c3_Var8 string + templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(offset/limit + 1) + if templ_7745c5c3_Err != nil { + return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/bookshelf.templ`, Line: 306, Col: 32} + } + _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8)) + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 22, " ") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + } + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 25, "
") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + if errorMessage != "" { + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 26, "

") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + var templ_7745c5c3_Var9 string + templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(errorMessage) + if templ_7745c5c3_Err != nil { + return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/bookshelf.templ`, Line: 323, Col: 58} + } + _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9)) + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 27, "

") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + } + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 28, "

Save Filter

") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } diff --git a/templates/utils.go b/templates/utils.go index 11b300f..8293546 100644 --- a/templates/utils.go +++ b/templates/utils.go @@ -1,5 +1,10 @@ package templates +import ( + "github.com/google/uuid" + "github.com/jackc/pgx/v5/pgtype" +) + func activeClass(current, target string) string { base := "block px-4 py-2 rounded-lg " if current == target { @@ -16,3 +21,14 @@ func ContainsString(slice []string, item string) bool { } return false } + +func uuidToString(id pgtype.UUID) string { + if !id.Valid { + return "" + } + u, err := uuid.FromBytes(id.Bytes[0:16]) + if err != nil { + return "" + } + return u.String() +} diff --git a/web/src/bookshelf.ts b/web/src/bookshelf.ts index 338ab87..7a18891 100644 --- a/web/src/bookshelf.ts +++ b/web/src/bookshelf.ts @@ -3,100 +3,6 @@ import { Alpine } from "./alpine"; import { showToast } from "./toast"; -// Filter state management (Alpine.js handles this, TS just saves/restores) - -async function loadSavedFilters(): Promise { - const token = localStorage.getItem("token"); - if (!token) return; - try { - const response = await fetch( - "/api/saved-filters?resource_type=media-items", - { - headers: { Authorization: `Bearer ${token}` }, - }, - ); - - if (response.ok) { - const filters = await response.json(); - localStorage.setItem("bookshelfFilters", JSON.stringify(filters)); - } - } catch (error) { - console.error("Failed to load saved filters:", error); - } -} - -async function saveFilter(event: Event): Promise { - event.preventDefault(); - const token = localStorage.getItem("token"); - if (!token) { - showToast("Not authenticated", "error"); - return; - } - - const filterForm = document.getElementById("filter-form") as HTMLFormElement; - const formData = new FormData(filterForm); - const filterData: Record = {}; - - formData.forEach((value, key) => { - filterData[key] = value.toString(); - }); - - // Add filter name from Alpine state - const filterName = (window as any).Alpine?.$store.bookshelf?.filterName; - if (!filterName) { - showToast("Please enter a filter name", "error"); - return; - } - - try { - const response = await fetch("/api/saved-filters", { - method: "POST", - headers: { - "Content-Type": "application/json", - Authorization: `Bearer ${token}`, - }, - body: JSON.stringify({ - name: filterName, - resource_type: "media-items", - filters: filterData, - }), - }); - - if (response.ok) { - showToast("Filter saved successfully", "success"); - // Close modal via Alpine - (window as any).Alpine.$store.bookshelf.showSaveModal = false; - loadSavedFilters(); - } else { - showToast("Failed to save filter", "error"); - } - } catch (error) { - console.error("Failed to save filter:", error); - showToast("Error saving filter", "error"); - } -} - -function initBookshelf(): void { - // Load saved filters on page load - loadSavedFilters(); - - // Setup initial book load via HTMX - const librarySelect = document.getElementById( - "library-select", - ) as HTMLSelectElement; - if (librarySelect && librarySelect.value) { - const filterForm = document.getElementById( - "filter-form", - ) as HTMLFormElement; - const booksGrid = document.getElementById("books-grid"); - - if (filterForm && booksGrid) { - // Trigger initial HTMX load - window.htmx.trigger(librarySelect, "change"); - } - } -} - function clearFilters(): void { const filterForm = document.getElementById("filter-form") as HTMLFormElement; if (!filterForm) return; @@ -115,20 +21,153 @@ function clearFilters(): void { window.htmx.trigger(filterForm, "change"); } -function showSaveFilterModal(): void { - // Open modal via Alpine store - (window as any).Alpine.$store.bookshelf.showSaveModal = true; -} - // Alpine.js component Alpine.data("bookshelf", () => ({ + // Component state showSaveModal: false, filterName: "", + showFiltersDropdown: false, - initBookshelf, + // Standalone function references (don't access component state) clearFilters, - showSaveFilterModal, - saveFilter, + initBookshelf, + + // Inline method - opens the modal + showSaveFilterModal() { + this.showSaveModal = true; + }, + // Toggle the filters dropdown + toggleFiltersDropdown() { + this.showFiltersDropdown = !this.showFiltersDropdown; + }, + // Load a saved filter into the form + loadFilter(event: Event) { + const button = event.target as HTMLElement; + const filterRow = button.closest("[data-filter-id]"); + if (!filterRow) return; + + const filterId = filterRow?.getAttribute("data-filter-id"); + if (!filterId) return; + + const filterName = button.textContent?.trim() || ""; + + // Note: Actual filter loading logic would go here + // For now, just show the filter name + showToast(`Filter: ${filterName}`, "success"); + }, + // Delete a saved filter + async deleteFilter(event: Event) { + const button = event.target as HTMLElement; + const filterRow = button.closest("[data-filter-id]"); + if (!filterRow) return; + + const filterId = filterRow?.getAttribute("data-filter-id"); + if (!filterId) return; + + if (!confirm("Are you sure you want to delete this filter?")) return; + + const token = localStorage.getItem("token"); + if (!token) { + showToast("Not authenticated", "error"); + return; + } + + try { + const response = await fetch(`/api/saved-filters/${filterId}`, { + method: "DELETE", + headers: { Authorization: `Bearer ${token}` }, + }); + + if (response.ok) { + showToast("Filter deleted", "success"); + // Remove the element from DOM + filterRow?.remove(); + } else { + showToast("Failed to delete filter", "error"); + } + } catch (error) { + console.error("Failed to delete filter:", error); + showToast("Error deleting filter", "error"); + } + }, + // Inline method - saves the filter and closes modal + async saveFilter(event: Event) { + event.preventDefault(); + + const token = localStorage.getItem("token"); + if (!token) { + showToast("Not authenticated", "error"); + return; + } + // Get filter name from component state + const filterName = this.filterName; + if (!filterName) { + showToast("Please enter a filter name", "error"); + return; + } + + // Collect filter form data + const filterForm = document.getElementById( + "filter-form", + ) as HTMLFormElement; + if (!filterForm) { + showToast("Filter form not found", "error"); + return; + } + + const formData = new FormData(filterForm); + const filterData: Record = {}; + formData.forEach((value, key) => { + filterData[key] = value.toString(); + }); + + try { + const response = await fetch("/api/saved-filters", { + method: "POST", + headers: { + "Content-Type": "application/json", + Authorization: `Bearer ${token}`, + }, + body: JSON.stringify({ + name: filterName, + resource_type: "media-items", + filters: filterData, + }), + }); + + if (response.ok) { + showToast("Filter saved successfully", "success"); + // Clear the filter name input + this.filterName = ""; + // Close the modal + this.showSaveModal = false; + } else { + showToast("Failed to save filter", "error"); + } + } catch (error) { + console.error("Failed to save filter:", error); + showToast("Error saving filter", "error"); + } + }, })); -export { initBookshelf, clearFilters, showSaveFilterModal, saveFilter }; +// Standalone function - initialize the bookshelf (NOT async, like dashboard.ts) +function initBookshelf(): void { + // Check if books were already rendered server-side + const booksGrid = document.getElementById("books-grid"); + const hasServerBooks = booksGrid && booksGrid.querySelector('[data-book-id]') !== null; + + if (!hasServerBooks) { + // Only trigger HTMX if no SSR books rendered + const librarySelect = document.getElementById("library-select") as HTMLSelectElement; + if (librarySelect && librarySelect.value) { + const filterForm = document.getElementById("filter-form") as HTMLFormElement; + if (filterForm) { + // Trigger initial HTMX load + window.htmx.trigger(librarySelect, "change"); + } + } + } +} + +export { clearFilters };