diff --git a/UNIFIED_SEARCH_IMPLEMENTATION.md b/UNIFIED_SEARCH_IMPLEMENTATION.md index 9882e70..db4a464 100644 --- a/UNIFIED_SEARCH_IMPLEMENTATION.md +++ b/UNIFIED_SEARCH_IMPLEMENTATION.md @@ -707,295 +707,567 @@ hx-get="/api/media-items/search?library_id={ currentLibraryID }&limit={ limit }& **Note:** Change parameter name from `search` to `q` to match backend handler expectation. -#### 4.3 Add Autocomplete Dropdowns with Search Button +#### 4.3 COMPLETE IMPLEMENTATION - All Fixes in One Section + +**IMPORTANT:** This section contains ALL code changes needed to preserve your sort/save/load features while adding autocomplete. Implement everything in this section only - no need to modify earlier phases. + +--- + +### Step 1: Update SQL Query to Support Sort Parameter + +**File:** `internal/database/queries/queries.sql` + +**Find the `SearchMediaItemsUnified` query (you added this in Phase 2) and replace the ORDER BY clause:** + +**BEFORE:** +```sql +ORDER BY + CASE + WHEN sqlc.narg('search_query') != '' THEN + GREATEST(...) + ELSE 0 + END DESC, + mi.title ASC +``` + +**AFTER:** +```sql +ORDER BY + -- Primary sort: relevance score when searching + CASE + WHEN sqlc.narg('search_query') != '' THEN + GREATEST( + CASE WHEN sqlc.narg('is_exact_search') = false THEN + word_similarity(sqlc.narg('search_query'), mi.title) + ELSE 0 END, + CASE WHEN sqlc.narg('is_exact_search') = false THEN + word_similarity(sqlc.narg('search_query'), COALESCE(mi.author, '')) + ELSE 0 END, + word_similarity(sqlc.narg('author_filter'), COALESCE(mi.author, '')), + word_similarity(sqlc.narg('genre_filter'), COALESCE(mi.genre, '')) + ) + ELSE 0 + END DESC, + -- Secondary sort: user-specified sort parameter + CASE + WHEN sqlc.narg('sort') = 'title ASC' THEN mi.title + ELSE '' + END ASC, + CASE + WHEN sqlc.narg('sort') = 'title DESC' THEN mi.title + ELSE '' + END DESC, + CASE + WHEN sqlc.narg('sort') = 'author ASC' THEN COALESCE(mi.author, '') + ELSE '' + END ASC, + CASE + WHEN sqlc.narg('sort') = 'author DESC' THEN COALESCE(mi.author, '') + ELSE '' + END DESC, + CASE + WHEN sqlc.narg('sort') = 'created_at ASC' THEN mi.created_at + ELSE '1970-01-01'::timestamp + END ASC, + CASE + WHEN sqlc.narg('sort') = 'created_at DESC' THEN mi.created_at + ELSE '1970-01-01'::timestamp + END DESC, + CASE + WHEN sqlc.narg('sort') = 'page_count ASC' THEN COALESCE(mi.page_count::text, '0') + ELSE '' + END ASC, + CASE + WHEN sqlc.narg('sort') = 'page_count DESC' THEN COALESCE(mi.page_count::text, '0') + ELSE '' + END DESC, + -- Tertiary sort: title (default fallback) + mi.title ASC +``` + +**Regenerate Go code:** +```bash +sqlc generate +``` + +--- + +### Step 2: Update Search Service to Support Sort + +**File:** `internal/services/search.go` + +**Add `Sort` field to `SearchParams` struct:** + +```go +// SearchParams contains parameters for unified search +type SearchParams struct { + UserID pgtype.UUID + LibraryID pgtype.UUID + AuthorFilter string + SeriesFilter string + GenreFilter string + LanguageFilter string + YearMin int + YearMax int + HasCover bool + SearchQuery string + Sort string // ADD THIS LINE + Limit int + Offset int +} +``` + +**Update the database parameters in `SearchMediaItemsUnified` method:** + +```go +// Build database parameters +dbParams := database.SearchMediaItemsUnifiedParams{ + UserID: params.UserID, + LibraryID: params.LibraryID, + AuthorFilter: pgtype.Text{String: params.AuthorFilter, Valid: true}, + SeriesFilter: pgtype.Text{String: params.SeriesFilter, Valid: true}, + GenreFilter: pgtype.Text{String: params.GenreFilter, Valid: true}, + LanguageFilter: pgtype.Text{String: params.LanguageFilter, Valid: true}, + YearMin: pgtype.Int4{Int32: int32(params.YearMin), Valid: true}, + YearMax: pgtype.Int4{Int32: int32(params.YearMax), Valid: true}, + HasCover: pgtype.Bool{Bool: params.HasCover, Valid: true}, + SearchQuery: pgtype.Text{String: searchQuery, Valid: true}, + IsExactSearch: pgtype.Bool{Bool: isExact, Valid: true}, + SearchPattern: pgtype.Text{String: searchPattern, Valid: isExact}, + Sort: pgtype.Text{String: params.Sort, Valid: true}, // ADD THIS LINE + Limit: pgtype.Int4{Int32: int32(params.Limit), Valid: true}, + Offset: pgtype.Int4{Int32: int32(params.Offset), Valid: true}, +} +``` + +--- + +### Step 3: Update Handler to Extract Sort Parameter + +**File:** `internal/handlers/media.go` + +**In the `SearchMediaItems` handler (you added this in Phase 4.1), add sort parameter extraction:** + +**Find this section:** +```go +hasCover := c.QueryParam("has_cover") == "true" + +// Build search params +params := services.SearchParams{ +``` + +**Replace with:** +```go +hasCover := c.QueryParam("has_cover") == "true" + +// Extract sort parameter +sortParam := c.QueryParam("sort") +if sortParam == "" { + sortParam = "title ASC" // Default sort +} + +// Build search params +params := services.SearchParams{ +``` + +**Then add `Sort` to the params struct:** +```go +params := services.SearchParams{ + UserID: userID.ID, + LibraryID: libUUID, + SearchQuery: query, + AuthorFilter: authorFilter, + SeriesFilter: seriesFilter, + GenreFilter: genreFilter, + LanguageFilter: languageFilter, + YearMin: yearMin, + YearMax: yearMax, + HasCover: hasCover, + Sort: sortParam, // ADD THIS LINE + Limit: limit, + Offset: offset, +} +``` + +--- + +### Step 4: Update Template with All Filters + Autocomplete **File:** `templates/bookshelf.templ` -**Replace filter form section (includes all filters) with (lines 40-262):** +**Replace lines 83-262 (from Search input through end of filter bar) with:** ```html - -
-
- -
- - - -
- - -
- - - -
- - -
- - - -
- - -
- - - -
- - -
- - -
- -
- - -
- - -
- - -
-
- - -
- - -
-
+ +
+ + +
+ +
+ + + +
+ +
+ + + +
+ +
+ + + +
+ +
+ + + +
+ +
+ +
+ + +
+
+ +
+ +
+ +
+ + +
+ +
+ +
+ +
+ + + +
+ +
+ +
+ + + + ``` -**Key changes:** -- ❌ No Alpine.js `x-data` wrapper (removed) -- ❌ No `hx-trigger="change"` (no immediate filtering) -- ✅ Added `@input.debounce.300ms` for autocomplete (300ms delay) -- ✅ Added `hx-trigger="keyup[key=='Enter'] from:#filter-form"` (Enter key only) -- ✅ All filter inputs wrapped in `
` -- ✅ Search button with `hx-get` to trigger filtering -- ✅ Clear filters button to reset all inputs -- ✅ Empty `` elements (populated by JavaScript) -- ✅ `list="author-datalist"` attribute for native HTML5 autocomplete +--- -#### 4.4 Add Frontend Functions +### Step 5: Add Autocomplete Functions to TypeScript **File:** `web/src/bookshelf.ts` -**Add at end of file:** +**Add these functions to the existing `Alpine.data("bookshelf", () => ({ ... }))` component:** ```typescript -// Fetch field values for autocomplete dropdowns -async function fetchFieldValues( - field: string, - search: string, - datalistId: string -): Promise { - const token = localStorage.getItem("token"); - if (!token) { - console.error("Not authenticated"); - return; - } +Alpine.data("bookshelf", () => ({ + // ... existing state and methods ... - if (search.length < 2) return; // Wait for at least 2 characters + // Autocomplete helper function + async fetchFieldValues( + field: string, + search: string, + datalistId: string + ): Promise { + const token = localStorage.getItem("token"); + if (!token) { + console.error("Not authenticated"); + return; + } - const currentLibraryId = ( - document.getElementById("library-select") as HTMLSelectElement - )?.value; - if (!currentLibraryId) { - console.error("No library selected"); - return; - } + if (search.length < 2) return; - try { - const response = await fetch( - `/api/media-items/search?${field}=${encodeURIComponent( - search - )}&library_id=${currentLibraryId}&limit=50`, - { - headers: { Authorization: `Bearer ${token}` }, + const currentLibraryId = ( + document.getElementById("library-select") as HTMLSelectElement + )?.value; + if (!currentLibraryId) { + console.error("No library selected"); + return; + } + + try { + const response = await fetch( + `/api/media-items/search?${field}=${encodeURIComponent( + search + )}&library_id=${currentLibraryId}&limit=50`, + { + headers: { Authorization: `Bearer ${token}` }, + } + ); + + if (!response.ok) { + console.error("Failed to fetch field values"); + return; } - ); - if (!response.ok) { - console.error("Failed to fetch field values"); - return; + const data = await response.json(); + + // Update datalist via DOM manipulation + const datalist = document.getElementById(datalistId); + if (!datalist) { + console.error(`Datalist ${datalistId} not found`); + return; + } + + // Clear existing options + datalist.innerHTML = ""; + + // Add new options + data.results.forEach((item: { value: string; count: number }) => { + const option = document.createElement("option"); + option.value = item.value; + option.textContent = `${item.value} (${item.count})`; + datalist.appendChild(option); + }); + } catch (error) { + console.error("Error fetching field values:", error); } + }, - const data = await response.json(); + // Fetch author values for autocomplete + async fetchAuthorValues(input: HTMLInputElement): Promise { + await this.fetchFieldValues("author", input.value, "author-datalist"); + }, - // Update datalist - const datalist = document.getElementById(datalistId); - if (!datalist) { - console.error(`Datalist ${datalistId} not found`); - return; - } + // Fetch genre values for autocomplete + async fetchGenreValues(input: HTMLInputElement): Promise { + await this.fetchFieldValues("genre", input.value, "genre-datalist"); + }, - // Clear existing options - datalist.innerHTML = ""; + // Fetch series values for autocomplete + async fetchSeriesValues(input: HTMLInputElement): Promise { + await this.fetchFieldValues("series", input.value, "series-datalist"); + }, - // Add new options - data.results.forEach((item: { value: string; count: number }) => { - const option = document.createElement("option"); - option.value = item.value; - option.textContent = `${item.value} (${item.count})`; - datalist.appendChild(option); - }); - } catch (error) { - console.error("Error fetching field values:", error); - } -} + // Fetch language values for autocomplete + async fetchLanguageValues(input: HTMLInputElement): Promise { + await this.fetchFieldValues("language", input.value, "language-datalist"); + }, -// Fetch author values for autocomplete -async function fetchAuthorValues(input: HTMLInputElement): Promise { - const search = input.value; - await fetchFieldValues("author", search, "author-datalist"); -} - -// Fetch genre values for autocomplete -async function fetchGenreValues(input: HTMLInputElement): Promise { - const search = input.value; - await fetchFieldValues("genre", search, "genre-datalist"); -} - -// Fetch series values for autocomplete -async function fetchSeriesValues(input: HTMLInputElement): Promise { - const search = input.value; - await fetchFieldValues("series", search, "series-datalist"); -} - -// Fetch language values for autocomplete -async function fetchLanguageValues(input: HTMLInputElement): Promise { - const search = input.value; - await fetchFieldValues("language", search, "language-datalist"); -} - -// Register functions globally -(window as any).fetchAuthorValues = fetchAuthorValues; -(window as any).fetchGenreValues = fetchGenreValues; -(window as any).fetchSeriesValues = fetchSeriesValues; -(window as any).fetchLanguageValues = fetchLanguageValues; + // ... rest of existing methods ... +})) ``` -**Verify TypeScript compilation:** -```bash -cd web && npm run build -``` +**Note:** These are regular methods (not reactive), so they won't trigger template re-renders. They just manipulate the DOM directly to populate the `` elements. The functions are available in the template because they're part of the Alpine component scope. + + +--- + +## Summary of Changes + +**What this section does:** +1. ✅ Adds sort parameter support to SQL query (Step 1) +2. ✅ Updates service to pass sort parameter (Step 2) +3. ✅ Updates handler to extract sort parameter (Step 3) +4. ✅ Adds series and language filters with autocomplete (Step 4) +5. ✅ Preserves sort dropdown, save/load buttons, modal (Step 4) +6. ✅ Changes triggers to Enter key instead of instant (Step 4) +7. ✅ Adds TypeScript autocomplete functions using simple pattern (Step 5) + +**What's preserved:** +- ✅ Your sort dropdown (all 5 options) +- ✅ Save Filter button and modal +- ✅ Load Filter button and dropdown +- ✅ Clear Filters button +- ✅ Your existing save/load filter logic + +**What's new:** +- ✅ Series filter with autocomplete +- ✅ Language filter with autocomplete +- ✅ Genre filter autocomplete +- ✅ Sort parameter support in unified search +- ✅ **Simple autocomplete pattern**: Empty `` elements populated via DOM manipulation (no Alpine.js reactive state) + +#### 4.4 NOTE - All Frontend Code is in Section 4.3 + +All TypeScript autocomplete functions are included in **Section 4.3, Step 5** above. + +No additional changes needed to `web/src/bookshelf.ts` beyond what's in Section 4.3. ---